Category Archives: Вёрстка

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

Вёрстка писем

Всё время радуюсь, что я не верстаю письма. Видимо, надо делать свой фреймворк для этого. Пара ссылок для начала. http://m.habrahabr.ru/company/pechkin/blog/262585/ http://m.habrahabr.ru/post/262427/ http://m.habrahabr.ru/company/pechkin/blog/263699/