Код. Плейсхолдер для [contenteditable]
Я уже сильно привык к атрибуту placeholder, и немного грустил зная что не работает с placeholder. Но чутка погуглив я нашел интересное решение, которым хочу поделиться с вами.
Я уже сильно привык к атрибуту placeholder, и немного грустил зная что не работает с placeholder. Но чутка погуглив я нашел интересное решение, которым хочу поделиться с вами.
Для меня основной критерий хорошего кода — его читаемость. Поэтому важно чтобы переменные, функции и методы легко читались и понимались.
О нативной плавной прокрутке внутри страницы без дополнительных JavaScript-библиотек. Показываю современный подход на CSS и браузерном API, который легче поддерживать.
Стандартное подчеркивание — ад перфекциониста. Оно нагло перекрывает висячие символы в тексте, его становится сложнее читать, и это режет глаза.
При редактировании сообщений комита Git по умолчанию открывает Vim. Для тех кто с ним не знаком, это может стать серьезной проблемой. Хорошо что это поведение легко изменить выполнив одну команду в терминале.
Уже 2 недели я использую Visual Studio Code для работы. Он пришел на замену, моему любимому, атому.
Вы закончили пару курсов и прочитали пару книг о JavaScript, но еще не чувствуете себя уверенно? Wes Bos советует делать проекты и не останавливаться.
Для многоязычных сайтов, часто нужно переопределить стили блоков для определенной локали. Раньше я добавлял класс с названием языка тегу body или определял язык через [lang=en]. Сегодня наткнулся на способ получше — псевдокласс: lang.
Короткая заметка по теме «Код. Удаляем дубликаты из массива» с основными выводами.
Я обнаружил что jQuery.width округляет значения. Из-за этого у меня была проблема в 1px при некоторых разрешениях.
Последнюю неделю я переделывал блог с использованием Google Accelerated Mobile Pages Project (далее АМП). И теперь готов рассказать вам об этом проекте и ответить на вопросы.
Логирование — незаменимый инструмент в отладке JS кода. Асставьте логи в критические места и при возникновении ошибки вы сможете посмотреть что произошло в консоли.
Простой способ показывать номер телефона на сайте только в рабочие часы. Решение помогает сократить ночные звонки клиентам без сложной интеграции и дополнительных сервисов.
Разбор подходов к оформлению незагруженных изображений и их реальной пользы для интерфейса. Сравниваю аргументы «за» и «против» и показываю, на чем действительно стоит сфокусироваться.
Релиз третьей версии генератора статических сайтов Jekyll прошел 27 октября 2015 года. А 1 февраля 2016 года GitHub Pages официально поддерживают Jekyll 3.
Вы увидели новый фреймворк, который конечно в миллион раз лучше текущего. Заманчиво, но использовать его в боевом проекте еще рано. А что тогда делать?
Сравнить блокировщики можно на сайте с рекламой. На рекламе зарабатывают популярные интернет ресурсы, такие как Хабрахабр, Лайфхакер и множество других.
Горячие новости 🔥 — Sublime Text жив! B хорошее видео Андрея Листочкина с Харьков JS — Как не гнаться за технологиями и начать жить.
JavaScript и помочь другим, записавшись в наставники. Рекомендуется запомнить размер 1024×512 и использовать его для изображений, которые будут расшаривать в соц сетях.
Только взгляните на этот предмет искусства выше. Восьмибитная ностальгия, красота и простота.
Показываю, как проверять поддержку emoji и подключать fallback для разных платформ. Так смайлы отображаются предсказуемо и не ломают дизайн на старых системах.
Я читал на этой неделе Оруэлла — 1984. Давно собирался и вот, к новому году, приобрел себе книженцию и прочитал.
В языках программирования много составных операторов, таких как: =, ≥, ≤, ===, ≠=. Это одна логическая единица, но она занимает 2 или 3 символа.
Когда вы загружаете шрифт через font-face, браузер решает что отобразить пока шрифт загружается. Браузеры ждут некоторое время, перед тем как решить что делать дальше.
Сегодня мы рассмотрим «HTML5 Link Prefetch», а именно dns-prefetch, prefetch, preconnect, subresource, prerender и еще неработающий preload.
Три плагина для SPA, которые улучшают опыт пользователей с медленным интернетом и на мобильных устройствах. В статье разобраны Pace.js, Offline.js и FastClick.js с примерами, где каждый из них полезен.
Это такая штука, которой всегда нет. За свою карьеру только в 3-4 проектах была иконка.
Продолжение стати «Лучшие плагины для текстового редактора Atom». Я расскажу о новых плагинах, которые часто мне помогают.
В следующих статьях мы обсудим архитектуру, но знание как построить «хорошую» архитектуру может разбиться о рабочие будни.
Вчера, 22 октября 2015 года, начался второй курс по архитектуре современных JavaScript приложений в SmartJS академии.
Разбираю способ выравнивания блочных элементов по правому краю и по центру с помощью CSS. Подход подходит для типовых макетов и избавляет от лишних оберток и хака с float.
Эта статья — логическое продолжение статьи «Одиннадцатиклассница, или тестируем баги вёрстки». В ней говорится о тестировании верстки с использованием длинных слов.
Конференция «FrontTalks» в 2015 году проходила в Екатеринбурге. Двое из них — англоговорящие и выступали на английском.
Объясняю, как корректно переносить значение межбуквенного интервала из Photoshop в CSS. Разбираю формулу перевода в letter-spacing, чтобы текст в макете и браузере выглядел одинаково.
На основании списка web-servers Вильяма Боверса (William Bowers).
Jekyll — генератор статических сайтов. Чаще всего используется для блогов как альтернатива WordPress.
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 и похожих инструментов. Инструмент подсвечивает границы элементов и ускоряет отладку слоев, отступов и позиционирования.
Хочу поделиться вебинарами от Geekbrains (Школа Программирования). Я недавно нашел эти вебинары, поэтому успел посмотреть только несколько записей.
Совсем недавно я узнал, что Chrome поддерживает темы для dev tools. Мне сразу же захотелось попробовать это.
Каждый раз создавать новый файл gitignore немного непрофессионально. Особенно когда ты что-то забываешь и ненужные файлы вываливаются в общий репозиторий.
Собрал проверенные русскоязычные руководства по Git для тех, кто хочет уверенно работать в терминале. В списке есть и короткие гайды для старта, и более глубокие материалы для системного обучения.
Порой, чтобы открыть нужный файл, нужно знать все его название. А все из-за того, что у нас очень много файлов в папках nodemodules и bowercomponents и они мешают открытию написанных нами файлов.
Расширение Emmet отлично работает с html, css, sass, scss, less. Видимо из-за того, что этот препроцессор не так распространен то в Emmet официально нет его поддержки.
Подборка лучших плагинов для Atom: от линтера и автодополнения до удобной навигации по проекту. Кратко описаны задачи каждого пакета и сценарии, где он реально помогает в работе.
В пятницу я пробовал в работе разные текстовые редакторы. Тот же Brackets от Adobe — вообще не изменился, те же проблемы, в том числе со шрифтами и не очень приятный внешний вид.
Сравниваю единицы 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.
Сегодня, я хочу рассказать вам о популярной программе Punto Switcher. Если вы разрабатываете что-либо, пробовали использовать Punto Switcher и вам он не очень понравился, то не спешите закрывать вкладку.
Возможность создать сайт или страничку в интернете есть практически у каждого человека. Не нужно знать различных языков (HTML, CSS) и особенностей хостинга, чтобы создать себе сайт.
Хочу поделиться с теми, кто возможно еще не видел этот доклад от Вадима, особенно он касается айтишников, но и людям других профессий я думаю будет интересно послушать.