15318
Годнота для фронтендеров и дизайнеров https://forweb.dev
Зачем нужен Array.isArray, чем опасен instanceof Array и при чём здесь ES-символы, Джейк Арчибальд разбирает тонкость устройства JS — https://jakearchibald.com/2017/arrays-symbols-realms/
Читать полностью…
Как оценивать сроки выполнения задач? Александра Шинкевич с советами и обзором техник — https://lovata.com/blog/guide-to-time-estimation-project-estimation-techniques-tips-tricks.html
Читать полностью…
Frontend Weekend №31, в гостях Дмитрий Чекин: о создании CSSSR и особенностях удаленной работы фултайм —
https://soundcloud.com/frontend-weekend/fw-31
[Вакансия, Москва, Тинькофф-журнал]
Привет! Меня зовут Арсений, я технический директор Тинькофф-журнала. Это такое ежедневное издание про деньги, которое читает полтора миллиона человек.
Я ищу опытного разработчика, который будет проектировать, поддерживать и развивать фронтенд-архитектуру сайта.
Что нужно делать?
Разработчик, которого я ищу, погружен в жизнь проекта, разбирается в задаче, работает в связке с арт-директором, держит в голове структуру стилей во всем журнале. Стили обновляются часто, поэтому все нужно постоянно рефакторить и улучшать. Ведущий фронтендер берет на себя этот процесс: тестирует код, борется за его чистоту, добивается, чтобы ни на каких девайсах нам не было стыдно за результат.
Сами статьи верстать не нужно, для этого есть другие ребята.
Мы онлайн-медиа, поэтому порядок в стилях для нас — это главное. Но у нас много и больших инфраструктурных задач. Пока вы читаете эту вакансию, мы запускаем авторизацию и комментарии. Дальше будет динамическая выдача статей на основе персонализированных рекомендаций. Потом своя мини-издательская платформа для авторов. Разработчик, которого я ищу, должен будет отвечать за фронтенд-архитектуру всех новых систем.
Технологии
ES6, (p)React, CSS (БЭМ) + PostCSS, Gulp + Webpack
Условия
Мы ищем сотрудника на полную занятость, поэтому у вас будет белая зарплата, ДМС, офис и бесплатный спортзал на м. «Водный стадион». Работа бок о бок с техдиром, артдиром и менеджером по продукту.
Расскажите о себе и своем опыте: @arsgab или a.gabdullin@tinkoff.ru
Voxel Space, демонстрация и объяснение принципа работы крайне маленького алгоритма отрисовки трёхмерного ландшафта — https://github.com/s-macke/VoxelSpace
Читать полностью…
Запись 16 докладов с Fronteers 2017: синдром самозванца, рабочий процесс, WASM, WebVR, веб-компоненты, доступность и другие темы — https://vimeo.com/channels/fronteers17
Читать полностью…
Как использовать DOM Ranges не только для програмнного выделения текста на странице, но и для производительной манипуляции DOM — https://calendar.perfplanet.com/2017/mutating-web-content-using-dom-ranges/
Читать полностью…
Как устроен turbo, быстрый и работающий в браузере NPM-клиент для онлайн-редактора StackBlitz — https://medium.com/p/cc2c39715403
Читать полностью…
postcss-preset-env, аналог babel-preset-env для стилей, автоматически подключает нужные postcss-плагины на основе списка поддерживаемых браузеров — https://github.com/jonathantneal/postcss-preset-env
Читать полностью…
Как оптимизировать изображения с помощью Вебпака, Иван Акулов с практическими советами — https://iamakulov.com/notes/optimize-images-webpack/
Читать полностью…
Продвинутые паттерны разработки React-компонентов, ещё один новый курс Кента Додса, бесплатный до конца недели — https://egghead.io/courses/advanced-react-component-patterns
Читать полностью…
Исчерпывающее руководство по основам веб-дизайна от Ника Бабича: от общих принципов вроде доступности и отзывчивости до проектирования страниц и элементов интерфейса — https://www.smashingmagazine.com/2017/11/comprehensive-guide-web-design/
Читать полностью…
Синхронное декодирование больших изображений может тормозить на мобильных, поэтому в Chrome хотят добавить для img атрибут decoding, позволяющий включить асинхронное декодирование — https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/MbXp16hQclY/bQjegyrbAgAJ
Читать полностью…
: Брайан Карделл в переводе CSS-Live предлагает использовать в кастомных элементах композицию вместо наследования — http://css-live.ru/articles/i-ismorzh.html
Читать полностью…
Знакомство с Ember.js на примере разработки игры Dice Roller, Грэхэм Кокс в переводе Даниила Стешенко — https://medium.com/p/970e817ded98
Читать полностью…
«Веб-стандарты» №98, в гостях Виталий Фридман: декодинг картинок, анимация и авторизация в браузерах, Webpack или Parcel, устаревший GIF и всё, что вы хотели знать про Smashing Magazine — https://soundcloud.com/web-standards/episode-98
Читать полностью…
Как сделать CLI-инструменты более дружелюбными, Анна Дебенхем на примере собственного инструмента для сбора интересных ссылок — https://24ways.org/2017/teach-the-cli-to-talk-back/
Читать полностью…
Форматирование чисел в браузере
Если вам нужно отформатировать числа в браузере, не подключайте для этого сторонние библиотеки и не пишите велосипеды, а используйте нативный Intl.NumberFormat. Простой пример:
const numberFormatter = new Intl.NumberFormat();
numberFormatter.format(12345.67); // -> 12 345,67
По умолчанию NumberFormat использует правила системной локали. При необходимости можно указать нужную локаль: new Intl.NumberFormat('en-US'). Вторым аргументом передаются опции вроде минимального/максимального количества знаков после запятой, подробнее в документации.
Intl поддерживается начиная с IE 11 и Safari 10, на мобильных поддержка хуже, поэтому нужно при открытии страницы проверять поддержку и при её отсутствии подгружать полифил.
Проще всего использовать сервис Polyfill.io от Financial Times:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
Polyfill.io проверяет по юзерагенту, какие фичи не поддерживает браузер, и отдаёт полифилы только для них.
Сборник практических рекомендаций по отладке JavaScript-приложений, от предотвращения потенциальных ошибок до поиска источников существующих ошибок — https://github.com/glebec/debugging-js
Читать полностью…
sqip, инструмент командной строки для генерации изображений-заглушек на основе SVG по технике LQIP (low quality image placeholders) — https://github.com/technopagan/sqip
Читать полностью…
TLDR pages, человекопонятная альтернатива man-страницам для распространённых команд терминалов Linux/Windows — http://tldr.sh/
Читать полностью…
От JSONP к CORS: руководство Ивана Гришаева по кроссдоменным запросам — http://grishaev.me/cors
Читать полностью…
Что происходит, когда вы заходите на ft.com? Сэм Паркинсон с обзором сетевой инфраструктуры Financial Times — https://medium.com/p/b2119a2f422d
Читать полностью…
Как прокачиваться джуниорам, Дин Хьюм делится советами и материалами для изучения — https://24ways.org/2017/levelling-up-for-junior-developers/
Читать полностью…
Ликбез по лицензированию ПО для тех, кто занимается опенсорсом — https://ben.balter.com/2017/11/28/everything-an-open-source-maintainer-might-need-to-know-about-open-source-licensing/
Читать полностью…
Руководство новичка по React.js, новый бесплатный курс от Кента Додса на egghead — https://egghead.io/courses/the-beginner-s-guide-to-reactjs
Читать полностью…
Parcel, альтернатива Вебпаку для простых проектов: без конфигурации, hot module replacement и кодсплиттинг с динамическими импортами из коробки — https://parceljs.org/
Читать полностью…
Как написать простой движок регулярных выражений менее чем в 40 строк кода, руководство Ника Дрейна — https://nickdrane.com/build-your-own-regex/
Читать полностью…
Как написать собственный блокчейн на Node.js, руководство Даррена Бека — http://www.darrenbeck.co.uk/blockchain/nodejs/nodejscrypto/
Читать полностью…
Три простых признака доступных уведомлений и рекомендации по их реализации — https://github.com/andrew--r/ui-developer-tips/tree/master/tips/008-alerts-accessibility
Читать полностью…