Тег: фронтенд

Я уже сильно привык к атрибуту placeholder, и немного грустил зная что не работает с placeholder. Но чутка погуглив я нашел интересное решение, которым хочу поделиться с вами.

О нативной плавной прокрутке внутри страницы без дополнительных JavaScript-библиотек. Показываю современный подход на CSS и браузерном API, который легче поддерживать.

Стандартное подчеркивание — ад перфекциониста. Оно нагло перекрывает висячие символы в тексте, его становится сложнее читать, и это режет глаза.

Вы закончили пару курсов и прочитали пару книг о JavaScript, но еще не чувствуете себя уверенно? Wes Bos советует делать проекты и не останавливаться.

Для многоязычных сайтов, часто нужно переопределить стили блоков для определенной локали. Раньше я добавлял класс с названием языка тегу body или определял язык через [lang=en]. Сегодня наткнулся на способ получше — псевдокласс: lang.

Короткая заметка по теме «Код. Удаляем дубликаты из массива» с основными выводами.

Я обнаружил что jQuery.width округляет значения. Из-за этого у меня была проблема в 1px при некоторых разрешениях.

Последнюю неделю я переделывал блог с использованием Google Accelerated Mobile Pages Project (далее АМП). И теперь готов рассказать вам об этом проекте и ответить на вопросы.

Логирование — незаменимый инструмент в отладке JS кода. Асставьте логи в критические места и при возникновении ошибки вы сможете посмотреть что произошло в консоли.

Простой способ показывать номер телефона на сайте только в рабочие часы. Решение помогает сократить ночные звонки клиентам без сложной интеграции и дополнительных сервисов.

Разбор подходов к оформлению незагруженных изображений и их реальной пользы для интерфейса. Сравниваю аргументы «за» и «против» и показываю, на чем действительно стоит сфокусироваться.

Вы увидели новый фреймворк, который конечно в миллион раз лучше текущего. Заманчиво, но использовать его в боевом проекте еще рано. А что тогда делать?

Сравнить блокировщики можно на сайте с рекламой. На рекламе зарабатывают популярные интернет ресурсы, такие как Хабрахабр, Лайфхакер и множество других.

Горячие новости 🔥 — Sublime Text жив! B хорошее видео Андрея Листочкина с Харьков JS — Как не гнаться за технологиями и начать жить.

JavaScript и помочь другим, записавшись в наставники. Рекомендуется запомнить размер 1024×512 и использовать его для изображений, которые будут расшаривать в соц сетях.

Только взгляните на этот предмет искусства выше. Восьмибитная ностальгия, красота и простота.

Показываю, как проверять поддержку emoji и подключать fallback для разных платформ. Так смайлы отображаются предсказуемо и не ломают дизайн на старых системах.

Я читал на этой неделе Оруэлла — 1984. Давно собирался и вот, к новому году, приобрел себе книженцию и прочитал.

Когда вы загружаете шрифт через font-face, браузер решает что отобразить пока шрифт загружается. Браузеры ждут некоторое время, перед тем как решить что делать дальше.

Сегодня мы рассмотрим «HTML5 Link Prefetch», а именно dns-prefetch, prefetch, preconnect, subresource, prerender и еще неработающий preload.

Три плагина для SPA, которые улучшают опыт пользователей с медленным интернетом и на мобильных устройствах. В статье разобраны Pace.js, Offline.js и FastClick.js с примерами, где каждый из них полезен.

Это такая штука, которой всегда нет. За свою карьеру только в 3-4 проектах была иконка.

Разбираю способ выравнивания блочных элементов по правому краю и по центру с помощью CSS. Подход подходит для типовых макетов и избавляет от лишних оберток и хака с float.

Эта статья — логическое продолжение статьи «Одиннадцатиклассница, или тестируем баги вёрстки». В ней говорится о тестировании верстки с использованием длинных слов.

Конференция «FrontTalks» в 2015 году проходила в Екатеринбурге. Двое из них — англоговорящие и выступали на английском.

Объясняю, как корректно переносить значение межбуквенного интервала из Photoshop в CSS. Разбираю формулу перевода в letter-spacing, чтобы текст в макете и браузере выглядел одинаково.

Twitter Bootstrap — самый популярный CSS фреймворк. У него более 85 495 звезд и 35 055 форков на GitHub.

Когда я нахожу интересные ссылки, то хочу ими поделиться. Поэтому я собираю эти ссылки в Wunderlist, а когда набирается 15, публикую в дайджесте. Презентации «Пишем БЭМ правильно» показывает как надо.

Я видел разные способы определения мониторов retina. Разберемся, какие из media queries изпользовать.

Когда я нахожу интересные ссыки, то хочу ими поделиться. Поэтому я собираю эти ссылки в Wunderlist, а когда набирается 15, публикую в дайджесте. Caption: «Демка с милейшим львом на svg» %}.

В двух из трех вакансиях для фронтеда требуют знания **REST / RESTful API**. Разберемся что это и в чем разница.

После анализа требований к front end разработчикам в топовых компаниях, расставим приоритеты, накидаем план действий, добавим полезные ссылки и советы.

Вчера, в твитере, я выяснял какие скилы нужны супер крутому фронту. Но, кроме пары полезных ссылок и рекомендаций я ничего не нашел.

Clearfix — вспомогательный класс в css, с помощью которого мы исправляем схлопывающиеся размеры контейнера у плавающих элементов.

Это первый пост из серии ответов на вопросы, которые спрашивают у разработчиков интерфейсов на собеседованиях.

Вместе с выпуском Apple Watch, компания представила новый шрифт San Francisco, который теперь будет использоваться во всей экосистеме Apple.

Стиль вашего кода, может сказать о вас достаточно много. Это один из показателей опытного разработчика.

Пытались ли вы анимировать высоту (height) через CSS? Если пытались, то скорее всего вы знаете, что через transition можно задать анимацию от одного значения, до другого.

Я давно интересовался сглаживанием шрифта для веб страниц на CSS. Но «волшебные» свойства, такие как -webkit-font-smoothing, не работали на моем Win 7.

Я думаю для вас не секрет, что почти у всех современных и популярных браузеров есть дополнения, расширения, аддоны и прочее. С одной стороны, появление всех этих аддонов — хороший знак.

Сейчас, с большой популярностью MacBook-ов, айфонов и других устройств с большим DPI, изображения на сайте нужно оптимизировать, чтобы они не были смазанными. Для этого у нас есть несколько решений.

В последнее время Gulp набирает большую популярность, и понятно почему. Он быстрее, красивее и проще чем **Grunt **.

*Это перевод популярного репозитория от html5bp — Front-end Job Interview Questions (en), который существует с 2009 года.

Показываю, как быстро находить проблемы в верстке с помощью Pesticide и похожих инструментов. Инструмент подсвечивает границы элементов и ускоряет отладку слоев, отступов и позиционирования.

Совсем недавно я узнал, что Chrome поддерживает темы для dev tools. Мне сразу же захотелось попробовать это.

Сравниваю единицы REM и EM на практическом примере из реального проекта. Показываю, где каждая единица уместнее и как перейти на REM без боли.

Раньше я не использовал SVG, поскольку рабочие проекты были с поддержкой Internet Explorer 6/7. Да и не требовалось поддержки ретины.

Недавно я использовал в проекте css свойство box-sizing: border-box. В процессе этого я узнал про «Международный день box-sizing» (International box-sizing Awareness Day). И хочу рассказать вам что это за праздник, лучшие практики и поддержку свойства box-sizing.

Иногда Facebook не желает расшаривать наши страницы, по крайней мере у меня так бывает часто. После нажатия на кнопку « поделиться», Facebook сообщает нам, что страница не найдена.

Сегодня, столкнулся с задачей, в которой нужно было определить есть ли полоса прокрутки (скролл) у элемента (в моем случае у) или нет. Немного погуглив, нашел несколько интересных вариантов, которыми я хочу с вами поделиться.

Один из главных советов для оптимизации скорости загрузки сайтов является использование публичных CDN с популярными библиотеками, такими как jQuery или AngularJS.