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
|
1 2 3 |
./adb start-server # when you finished, stop it with # ./adb kill-server |
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 …
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 ✝ …
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:
|
1 |
<link rel="canonical" href="https://moz.com/blog" /> |
И теперь можно клепать полные дубли сайтов! SEO approved! ;) https://moz.com/blog/canonical-url-tag-the-most-important-advancement-in-seo-practices-since-sitemaps
Загрузка css, которая не блокирует загрузку страницы
Забавный хак-костыль, вдруг когда-нибудь пригодится. Конечно, лучше сначала загрузить critical path css, а все остальные стили убрать в конец страницы (при этом загрузка css не будет мешать загрузке кода страницы), но вдруг пригодится:
|
1 2 |
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"> <noscript><link rel="stylesheet" href="css.css"></noscript> |
http://keithclark.co.uk/articles/loading-css-without-blocking-render/
Доступ к локальному серверу из внешней сети
https://github.com/localtunnel/localtunnel Пример использования
|
1 |
lt --port 80 --local-host "my.cool_local_host" |
Полезно использовать, если, к примеру, нужно протестировать сайт в Opera Mini или в Google Page Speed.
Как BBC делает многоязычный сайт новостей
Полезно почитать, как люди делают сайт, который может отображаться и слева направо для европейских языков, и справа налево для арабских. http://responsivenews.co.uk/post/123104512468/13-tips-for-making-responsive-web-design