Category Archives: HTML and CSS
Оптимизация загрузки сайта для мобильных устройств
http://youtu.be/YV1nKLWoARQ Слайды:https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present Основные вещи: В идеале надо стараться уложиться в 14 кБ для отрисовки первичной страницы (хотя бы для основного макета со стилями). При этом стили для этого сделать встраиваемыми, т.к. для избежания FOUC (flash of unstyled content) браузер ждет догрузки css и только после этого начинает отрисовывать страницу. Javascript стараться грузить уже после отрисовки …
Галерея только средствами CSS
В собеседованиях бывают вопросы про галерею. В частности — сделать галерею без JS. Вот как это можно сделать.
Способ поместить элемент по центру другого
Стандартный вопрос на собеседовании: один див ровно по центру другого. Вот еще один способ решения задачи: JS Bin http://jsbin.com/vaqabaxo/1/edit (http://jsfiddle.net/4LKMs/1/)
Простой и быстрый клиентский шаблонизатор
http://olado.github.io/doT/
Соотношения сторон и разрешения мобильных устройств
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/ (по ссылке таблицу можно сортировать) Device Name Platform Pixel Density Screen Size Portrait Viewport Width Landscape Viewport Width Acer Iconia Tab A100 Android 166dpi 7″ 800 1280 Acer Iconia Tab A101 Android 170dpi 7″ 600 1024 Acer Iconia Tab A200 Android 160dpi 10.1″ 800 1280 Acer Iconia Tab A500 Android 149dpi 10.1″ 648 …
Google Chrome Dev Tools: изменение и сохранение js и css на лету
Для этого нужен Chrome Canary. Консоль → настройки → Workspace → Add folder После этого в консоли, во вкладке Sources, можно редактировать и сохранять js-файлы (страница будет работать с уже обновлённым js, он подменяется на лету, без перезагрузки страницы). Вот инструкция с картинками — https://plus.google.com/+AddyOsmani/posts/CYXzDfg3jhC, вот видео — https://www.youtube.com/watch?v=kVSo4buDAEE. Работает также с css-файлами. Есть даже …
Less Watcher для PhpStorm
Нужно поставить less и добавить watcher: Полезные ссылки: http://webdevism.alabebop.com/?p=127 http://dan.clarke.name/2013/04/env-node-no-such-file-or-directory-error-in-intellij-idea-file-watcher/
Понятно про Flexbox
Доклад pepelsbey про то, что такое flexbox, поддержку браузерами и нюансы работы с ним. Flexbox, теперь понятно from Вадим Макеев on Vimeo. http://vimeo.com/67011034 Слайды — http://pepelsbey.net/pres/flexbox-gotcha/
Автоматическая перезагрузка страницы при измнении файла
http://livereload.com/ Работает с Safari, Chrome, Firefox и Mobile Safari.
CSS3 Flexbox in action
По ссылке http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ описано, как сделать вот такой тянущийся дизайн: http://dev.opera.com/static/articles/2013/flexbox-case-study/flexbox-modernizr.html