Category Archives: HTML and CSS

Debugging site in chrome from android device

Download platform tools from here — https://developer.android.com/studio/releases/platform-tools.html. Run ADB with command

Configure your phone according to this article — https://developer.android.com/studio/debug/dev-options.html (for my specific it is https://www.syncios.com/android/how-to-debug-xiaomi-mi-max-mix.html). Connect your phone to the computer with USB cable. Follow instructions from here — https://developers.google.com/web/tools/chrome-devtools/remote-debugging. When finished, stop ADB and turn off all the developer features on your …

Read more

Front-end interview questions with answers

Yeap, yet another one. https://github.com/yangshun/front-end-interview-handbook That’s what it has now: Table of Contents

UTF-8 icons

https://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use Icon-like Smiley ☺ ☺ ☺ Hot Springs ♨ ♨ ♨ 8-Ball ➑ ➑ ➑ White Star ☆ ☆ ☆ Black Star ★ ★ ★ White Heart ♡ ♡ ♡ Black Heart ❤ ❤ ❤ Airplane ✈ ✈ ✈ Black Scissors ✂ ✂ ✂ White Scissors ✄ ✄ ✄ Crown ♕ ♕ ♕ Cross ✝ …

Read more

Seo-оптимизации для правильного показа в выдаче google

Добавить поисковую форму — https://developers.google.com/structured-data/slsb-overview. Разметка для более правильного отображения товаров — http://schema.org/Product/http://schema.org/Offer Отображение хлебных крошек — https://developers.google.com/structured-data/breadcrumbs#examples

Сайт, посвящённый style guides для фронтендеров

http://styleguides.io/

Как выявить лишние стили на сайте

https://github.com/ben-eb/gulp-uncss https://github.com/addyosmani/critical

Canonical Url: как добавить новую версию сайта и не убить в поисковой выдаче оригинальный сайт. SEO.

Достаточно вставить в head:

И теперь можно клепать полные дубли сайтов! SEO approved! ;) https://moz.com/blog/canonical-url-tag-the-most-important-advancement-in-seo-practices-since-sitemaps

Загрузка css, которая не блокирует загрузку страницы

Забавный хак-костыль, вдруг когда-нибудь пригодится. Конечно, лучше сначала загрузить critical path css, а все остальные стили убрать в конец страницы (при этом загрузка css не будет мешать загрузке кода страницы), но вдруг пригодится:

http://keithclark.co.uk/articles/loading-css-without-blocking-render/

Доступ к локальному серверу из внешней сети

https://github.com/localtunnel/localtunnel Пример использования

Полезно использовать, если, к примеру, нужно протестировать сайт в Opera Mini или в Google Page Speed.

Как BBC делает многоязычный сайт новостей

Полезно почитать, как люди делают сайт, который может отображаться и слева направо для европейских языков, и справа налево для арабских. http://responsivenews.co.uk/post/123104512468/13-tips-for-making-responsive-web-design