https://ymatuhin.ru/tag/frontend/ Публикации с тегом фронтенд ru https://ymatuhin.ru/posts/contenteditable-placeholder/ https://ymatuhin.ru/posts/contenteditable-placeholder/ Fri, 24 Nov 2017 00:00:00 +0000 Я уже сильно привык к атрибуту placeholder, и немного грустил зная что не работает с placeholder. Но чутка погуглив я нашел интересное решение, которым хочу поделиться с вами. https://ymatuhin.ru/posts/smooth-native-scroll/ https://ymatuhin.ru/posts/smooth-native-scroll/ Sat, 05 Aug 2017 00:00:00 +0000 О нативной плавной прокрутке внутри страницы без дополнительных JavaScript-библиотек. Показываю современный подход на CSS и браузерном API, который легче поддерживать. https://ymatuhin.ru/posts/text-decoration-skip/ https://ymatuhin.ru/posts/text-decoration-skip/ Sat, 15 Jul 2017 00:00:00 +0000 Стандартное подчеркивание — ад перфекциониста. Оно нагло перекрывает висячие символы в тексте, его становится сложнее читать, и это режет глаза. https://ymatuhin.ru/posts/javascript-30/ https://ymatuhin.ru/posts/javascript-30/ Sat, 10 Dec 2016 00:00:00 +0000 Вы закончили пару курсов и прочитали пару книг о JavaScript, но еще не чувствуете себя уверенно? Wes Bos советует делать проекты и не останавливаться. https://ymatuhin.ru/posts/detect-page-lang-in-css/ https://ymatuhin.ru/posts/detect-page-lang-in-css/ Thu, 08 Dec 2016 00:00:00 +0000 Для многоязычных сайтов, часто нужно переопределить стили блоков для определенной локали. Раньше я добавлял класс с названием языка тегу body или определял язык через [lang=en]. Сегодня наткнулся на способ получше — псевдокласс:lang. https://ymatuhin.ru/posts/remove-duplicates-from-array/ https://ymatuhin.ru/posts/remove-duplicates-from-array/ Wed, 30 Nov 2016 00:00:00 +0000 Короткая заметка по теме «Код. Удаляем дубликаты из массива» с основными выводами. https://ymatuhin.ru/posts/jquery-width/ https://ymatuhin.ru/posts/jquery-width/ Tue, 29 Nov 2016 00:00:00 +0000 Я обнаружил что jQuery.width округляет значения. Из-за этого у меня была проблема в 1px при некоторых разрешениях. https://ymatuhin.ru/posts/amp/ https://ymatuhin.ru/posts/amp/ Thu, 03 Nov 2016 00:00:00 +0000 Последнюю неделю я переделывал блог с использованием Google Accelerated Mobile Pages Project (далее АМП). И теперь готов рассказать вам об этом проекте и ответить на вопросы. https://ymatuhin.ru/posts/logs-in-javascript/ https://ymatuhin.ru/posts/logs-in-javascript/ Sat, 04 Jun 2016 00:00:00 +0000 Логирование — незаменимый инструмент в отладке JS кода. Асставьте логи в критические места и при возникновении ошибки вы сможете посмотреть что произошло в консоли. https://ymatuhin.ru/posts/lifehack-phone-number/ https://ymatuhin.ru/posts/lifehack-phone-number/ Sat, 26 Mar 2016 00:00:00 +0000 Простой способ показывать номер телефона на сайте только в рабочие часы. Решение помогает сократить ночные звонки клиентам без сложной интеграции и дополнительных сервисов. https://ymatuhin.ru/posts/styling-broken-images-user-care-or-not/ https://ymatuhin.ru/posts/styling-broken-images-user-care-or-not/ Tue, 22 Mar 2016 00:00:00 +0000 Разбор подходов к оформлению незагруженных изображений и их реальной пользы для интерфейса. Сравниваю аргументы «за» и «против» и показываю, на чем действительно стоит сфокусироваться. https://ymatuhin.ru/posts/flux-challenge/ https://ymatuhin.ru/posts/flux-challenge/ Mon, 08 Feb 2016 00:00:00 +0000 Вы увидели новый фреймворк, который конечно в миллион раз лучше текущего. Заманчиво, но использовать его в боевом проекте еще рано. А что тогда делать? https://ymatuhin.ru/posts/detect-adblock/ https://ymatuhin.ru/posts/detect-adblock/ Mon, 01 Feb 2016 00:00:00 +0000 Cравнить блокировщики можно на сайте с рекламой. На рекламе зарабатывают популярные интернет ресурсы, такие как Хабрахабр, Лайфхакер и множество других. https://ymatuhin.ru/posts/read-on-weekend-3/ https://ymatuhin.ru/posts/read-on-weekend-3/ Sat, 30 Jan 2016 00:00:00 +0000 Горячие новости 🔥 — Sublime Text жив! B хорошее видео Андрея Листочкина с Харьков JS — Как не гнаться за технологиями и начать жить. https://ymatuhin.ru/posts/read-on-weekend-2/ https://ymatuhin.ru/posts/read-on-weekend-2/ Fri, 22 Jan 2016 00:00:00 +0000 JavaScript и помочь другим, записавшись в наставники. Рекомендуется запомнить размер 1024×512 и использовать его для изображений, которые будут расшаривать в соц сетях. https://ymatuhin.ru/posts/scalable-pixel-art/ https://ymatuhin.ru/posts/scalable-pixel-art/ Thu, 21 Jan 2016 00:00:00 +0000 Только взгляните на этот предмет искусства выше. Восьмибитная ностальгия, красота и простота. https://ymatuhin.ru/posts/emoji-fallback/ https://ymatuhin.ru/posts/emoji-fallback/ Wed, 20 Jan 2016 00:00:00 +0000 Показываю, как проверять поддержку emoji и подключать fallback для разных платформ. Так смайлы отображаются предсказуемо и не ломают дизайн на старых системах. https://ymatuhin.ru/posts/read-on-weekend/ https://ymatuhin.ru/posts/read-on-weekend/ Sat, 09 Jan 2016 00:00:00 +0000 Я читал на этой неделе Оруэлла — 1984. Давно собирался и вот, к новому году, приобрел себе книженцию и прочитал. https://ymatuhin.ru/posts/font-display/ https://ymatuhin.ru/posts/font-display/ Sun, 20 Dec 2015 00:00:00 +0000 Когда вы загружаете шрифт через font-face, браузер решает что отобразить пока шрифт загружается. Браузеры ждут некоторое время, перед тем как решить что делать дальше. https://ymatuhin.ru/posts/html5-link-prefetch/ https://ymatuhin.ru/posts/html5-link-prefetch/ Wed, 02 Dec 2015 00:00:00 +0000 Сегодня мы рассмотрим «HTML5 Link Prefetch», а именно dns-prefetch, prefetch, preconnect, subresource, prerender и еще неработающий preload. https://ymatuhin.ru/posts/three-plugins-for-single-page/ https://ymatuhin.ru/posts/three-plugins-for-single-page/ Fri, 13 Nov 2015 00:00:00 +0000 Три плагина для SPA, которые улучшают опыт пользователей с медленным интернетом и на мобильных устройствах. В статье разобраны Pace.js, Offline.js и FastClick.js с примерами, где каждый из них полезен. https://ymatuhin.ru/posts/favicons/ https://ymatuhin.ru/posts/favicons/ Thu, 12 Nov 2015 00:00:00 +0000 Это такая штука, которой всегда нет. За свою карьеру только в 3-4 проектах была иконка. https://ymatuhin.ru/posts/margin-align-right/ https://ymatuhin.ru/posts/margin-align-right/ Thu, 22 Oct 2015 00:00:00 +0000 Разбираю способ выравнивания блочных элементов по правому краю и по центру с помощью CSS. Подход подходит для типовых макетов и избавляет от лишних оберток и хака с float. https://ymatuhin.ru/posts/11grade/ https://ymatuhin.ru/posts/11grade/ Fri, 16 Oct 2015 00:00:00 +0000 Эта статья — логическое продолжение статьи «Одиннадцатиклассница, или тестируем баги вёрстки». В ней говорится о тестировании верстки с использованием длинных слов. https://ymatuhin.ru/posts/front-talks/ https://ymatuhin.ru/posts/front-talks/ Mon, 05 Oct 2015 00:00:00 +0000 Конференция «FrontTalks» в 2015 году проходила в Екатеринбурге. Двое из них — англоговорящие и выступали на английском. https://ymatuhin.ru/posts/convert_photoshop_letter_spacing_to_css/ https://ymatuhin.ru/posts/convert_photoshop_letter_spacing_to_css/ Tue, 22 Sep 2015 00:00:00 +0000 Объясняю, как корректно переносить значение межбуквенного интервала из Photoshop в CSS. Разбираю формулу перевода в letter-spacing, чтобы текст в макете и браузере выглядел одинаково. https://ymatuhin.ru/posts/media_queries_breakpoints/ https://ymatuhin.ru/posts/media_queries_breakpoints/ Thu, 27 Aug 2015 00:00:00 +0000 Twitter Bootstrap — самый популярный CSS фреймворк. У него более 85 495 звезд и 35 055 форков на GitHub. https://ymatuhin.ru/posts/frontend_digest_2/ https://ymatuhin.ru/posts/frontend_digest_2/ Fri, 21 Aug 2015 00:00:00 +0000 Когда я нахожу интересные ссылки, то хочу ими поделиться. Поэтому я собираю эти ссылки в Wunderlist, а когда набирается 15, публикую в дайджесте. Презентации «Пишем БЭМ правильно» показывает как надо. https://ymatuhin.ru/posts/retina_media_queries/ https://ymatuhin.ru/posts/retina_media_queries/ Tue, 18 Aug 2015 00:00:00 +0000 Я видел разные способы определения мониторов retina. Разберемся, какие из media queries использовать. https://ymatuhin.ru/posts/frontend_digest_1/ https://ymatuhin.ru/posts/frontend_digest_1/ Tue, 11 Aug 2015 00:00:00 +0000 Когда я нахожу интересные ссылки, то хочу ими поделиться. Поэтому я собираю эти ссылки в Wunderlist, а когда набирается 15, публикую в дайджесте. Caption: "Демка с милейшим львом на svg" %}. https://ymatuhin.ru/posts/restful_api_for_frontender/ https://ymatuhin.ru/posts/restful_api_for_frontender/ Fri, 07 Aug 2015 00:00:00 +0000 В двух из трех вакансиях для фронтеда требуют знания **REST / RESTful API**. Разберемся что это и в чем разница. https://ymatuhin.ru/posts/plan_for_frontend_developer/ https://ymatuhin.ru/posts/plan_for_frontend_developer/ Tue, 04 Aug 2015 00:00:00 +0000 После анализа требований к front end разработчикам в топовых компаниях, расставим приоритеты, накидаем план действий, добавим полезные ссылки и советы. https://ymatuhin.ru/posts/what_front_end_developer_need_to_know_in_2015-2016/ https://ymatuhin.ru/posts/what_front_end_developer_need_to_know_in_2015-2016/ Thu, 30 Jul 2015 00:00:00 +0000 Вчера, в твитере, я выяснял какие скилы нужны супер крутому фронту. Но, кроме пары полезных ссылок и рекомендаций я ничего не нашел. https://ymatuhin.ru/posts/float_and_clearfix/ https://ymatuhin.ru/posts/float_and_clearfix/ Wed, 29 Jul 2015 00:00:00 +0000 Clearfix — вспомогательный класс в css, с помощью которого мы исправляем схлопывающиеся размеры контейнера у плавающих элементов. https://ymatuhin.ru/posts/frontend_interview_answers/ https://ymatuhin.ru/posts/frontend_interview_answers/ Thu, 23 Jul 2015 00:00:00 +0000 Это первый пост из серии ответов на вопросы, которые спрашивают у разработчиков интерфейсов на собеседованиях. https://ymatuhin.ru/posts/using_san_francisco_font/ https://ymatuhin.ru/posts/using_san_francisco_font/ Tue, 21 Jul 2015 00:00:00 +0000 Вместе с выпуском Apple Watch, компания представила новый шрифт San Francisco, который теперь будет использоваться во всей экосистеме Apple. https://ymatuhin.ru/posts/javascript_styleguide/ https://ymatuhin.ru/posts/javascript_styleguide/ Thu, 09 Jul 2015 00:00:00 +0000 Стиль вашего кода, может сказать о вас достаточно много. Это один из показателей опытного разработчика. https://ymatuhin.ru/posts/height_transition_css/ https://ymatuhin.ru/posts/height_transition_css/ Mon, 29 Jun 2015 00:00:00 +0000 Пытались ли вы анимировать высоту (height) через CSS? Если пытались, то скорее всего вы знаете, что через transition можно задать анимацию от одного значения, до другого. https://ymatuhin.ru/posts/font_smoothing_for_the_developer_and_user_on_mac_os/ https://ymatuhin.ru/posts/font_smoothing_for_the_developer_and_user_on_mac_os/ Mon, 01 Jun 2015 00:00:00 +0000 Я давно интересовался сглаживанием шрифта для веб страниц на CSS. Но «волшебные» свойства, такие как -webkit-font-smoothing, не работали на моем Win 7. https://ymatuhin.ru/posts/problems_of_the_extensions/ https://ymatuhin.ru/posts/problems_of_the_extensions/ Thu, 28 May 2015 00:00:00 +0000 Я думаю для вас не секрет, что почти у всех современных и популярных браузеров есть дополнения, расширения, аддоны и прочее. С одной стороны, появление всех этих аддонов — хороший знак. https://ymatuhin.ru/posts/prepare_graphics_for_retina_displays/ https://ymatuhin.ru/posts/prepare_graphics_for_retina_displays/ Thu, 21 May 2015 00:00:00 +0000 Сейчас, с большой популярностью MacBook-ов, айфонов и других устройств с большим DPI, изображения на сайте нужно оптимизировать, чтобы они не были смазанными. Для этого у нас есть несколько решений. https://ymatuhin.ru/posts/see_into_gulp/ https://ymatuhin.ru/posts/see_into_gulp/ Sun, 17 May 2015 00:00:00 +0000 В последнее время Gulp набирает большую популярность, и понятно почему. Он быстрее, красивее и проще чем **Grunt **. https://ymatuhin.ru/posts/front_end_developer_interview_questions/ https://ymatuhin.ru/posts/front_end_developer_interview_questions/ Fri, 15 May 2015 00:00:00 +0000 *Это перевод популярного репозитория от html5bp — Front-end Job Interview Questions (en), который существует с 2009 года. https://ymatuhin.ru/posts/faster_debug_css_with_pesticide/ https://ymatuhin.ru/posts/faster_debug_css_with_pesticide/ Tue, 12 May 2015 00:00:00 +0000 Показываю, как быстро находить проблемы в верстке с помощью Pesticide и похожих инструментов. Инструмент подсвечивает границы элементов и ускоряет отладку слоев, отступов и позиционирования. https://ymatuhin.ru/posts/styling_chrome_dev_tools/ https://ymatuhin.ru/posts/styling_chrome_dev_tools/ Wed, 06 May 2015 00:00:00 +0000 Совсем недавно я узнал, что Chrome поддерживает темы для dev tools. Мне сразу же захотелось попробовать это. https://ymatuhin.ru/posts/rem_vs_em/ https://ymatuhin.ru/posts/rem_vs_em/ Wed, 22 Apr 2015 00:00:00 +0000 Сравниваю единицы REM и EM на практическом примере из реального проекта. Показываю, где каждая единица уместнее и как перейти на REM без боли. https://ymatuhin.ru/posts/tricks_with_svg_and_safe_use/ https://ymatuhin.ru/posts/tricks_with_svg_and_safe_use/ Sun, 19 Apr 2015 00:00:00 +0000 Раньше я не использовал SVG, поскольку рабочие проекты были с поддержкой Internet Explorer 6/7. Да и не требовалось поддержки ретины. https://ymatuhin.ru/posts/better_box_sizing/ https://ymatuhin.ru/posts/better_box_sizing/ Sat, 18 Apr 2015 00:00:00 +0000 Недавно я использовал в проекте css свойство box-sizing: border-box. В процессе этого я узнал про «Международный день box-sizing» (International box-sizing Awareness Day). И хочу рассказать вам что это за праздник, лучшие практики и поддержку свойства box-sizing. https://ymatuhin.ru/posts/clear_facebook_cache_on_sharing/ https://ymatuhin.ru/posts/clear_facebook_cache_on_sharing/ Wed, 15 Apr 2015 00:00:00 +0000 Иногда Facebook не желает расшаривать наши страницы, по крайней мере у меня так бывает часто. После нажатия на кнопку « поделиться», Facebook сообщает нам, что страница не найдена. https://ymatuhin.ru/posts/jquery-has-scroll/ https://ymatuhin.ru/posts/jquery-has-scroll/ Tue, 14 Apr 2015 00:00:00 +0000 Сегодня, столкнулся с задачей, в которой нужно было определить есть ли полоса прокрутки (скролл) у элемента (в моем случае у) или нет. Немного погуглив, нашел несколько интересных вариантов, которыми я хочу с вами поделиться. https://ymatuhin.ru/posts/safe_use_of_cdn_and_jquery/ https://ymatuhin.ru/posts/safe_use_of_cdn_and_jquery/ Sat, 11 Apr 2015 00:00:00 +0000 Один из главных советов для оптимизации скорости загрузки сайтов является использование публичных CDN с популярными библиотеками, такими как jQuery или AngularJS.