For Web — фронтенд, дизайн, программирование

4 архитектурных слоя SPA Как грамотно построить архитектуру SPA? Даниэль Дахила предлагает разделять приложение на сервисы предметной области, хранилище состояния, сервисы приложения и представление. Разбор такой архитектуры на примере разработки простейшего блога → https://hackernoon.com/b842ea633c2e

[Анонс конференции и розыгрыш билета] 13 апреля в Екатеринбурге пройдёт DUMP — самая большая конференция для программистов на Урале. Традиционно будет секция, посвященная фронтенд-разработке. В этом году на ней выступят Алексей Мигутский (Microsoft), Зарема Халилова (Uploadcare), Серёжа Попов (HTML Academy), Анна Селезнёва (Evil Martians), Андрей Мелихов (Яндекс.Деньги), Виталий Слободин (Elonsoft). Среди обсуждаемых тем: Headless-браузеры, React + Redux + Reselect, как отделить фронтенд от старого бэкенда, CSS vs препроцессоры. Еще в программе конференции: Григорий Бакунов (Яндекс), Сергей Абдульманов (Мосигра), Александра Ермоленко (Rambler&Co), Алексей Акулович (ВКонтакте), Алексей Савватеев (ЦЭМИ РАН) и многие другие. Программа и регистрация: https://goo.gl/2Sxhmp Для всех читателей по промокоду FORWEBDUMPHOORAY скидка 5%. А в это воскресенье мы случайным образом разыграем один билет — https://goo.gl/forms/v3ldj31aUaS4dUbm1

В каких случаях схлопываются маржины? Джонатан Харрел объясняет на визуальных примерах одну из самых сбивающих с толку концепций CSS → https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/

QuickSort, погружаемся глубже: Андрей Мелихов из devSchacht рефакторит и оптимизирует реализацию быстрой сортировки, написанную за 5 минут в прошлом видео (https://youtu.be/o0fe6OlUROg) → https://youtu.be/oc1W84ilvds

Разработка доступного компонента выставления рейтинга средствами HTML и CSS без JavaScript, пошаговое руководство Евгения Закурдаева → https://goo.gl/VDxa8Z

Как написать генератор случайных чисел и можно ли предсказать Math.random? Разбирается Александр Майоров → https://habr.ru/p/351454/

SmooshGate FAQ Между TC39 и JavaScript-сообществом случился конфликт на почве предложения по переименованию Array.prototype.flatten в smoosh из-за старой версии MooTools, которая патчит нативный прототип Array собственной реализацией flatten. Матиас Байненс подробно разобрал причины конфликта и объяснил, почему обратная совместимость это основной принцип развития веба → https://developers.google.com/web/updates/2018/03/smooshgate

Как сделать загрузчик файлов с поддержкой дрэг-н-дропа на чистом JavaScript, подробное руководство Джозефа Циммермана в переводе devSchacht → https://medium.com/p/de850d74aa2f

🎧 Свежие подкасты «Пятиминутка React» №42, обзор доклада Джейка Арчибальда «В петле» про event loop на JSConf.Asia 2018 → http://5minreact.ru/42-in-the-loop-jsconf.asia-2018/ «Ночной фронтенд» №26, дебаты о статической типизации → https://medium.com/p/737f29f214d8 SPB Frontend Drinkcast №26: о выгорании и депрессии на работе, в опенсорсе и организации мероприятий → https://spb-frontend.ru/podcast/26/ Frontend Weekend №44, в гостях Константин Буркалев: о создании SDCast и RadioJS и о том, как начать свой подкаст с нуля → https://soundcloud.com/frontend-weekend/fw-44 «Веб-стандарты» №112, в гостях Зарема Халилова: новинки Firefox 59, SEO для JS, Webpack без SPA, Гудини для CSS, сортировка DOM, шрифты без лишнего → https://medium.com/p/e0219355a2da «Фронтенд-юность» в гостях у uWebDesign: Челябинск, преимущества PHP, совмещение работы с развитием и личной жизнью и другие темы → https://soundcloud.com/frontend_u/uwebdesign

TL; DR: Периодически гуглите простые вещи? 1. Используйте IDE с автокомплитом. 2. Запоминайте проекты, в которых вы уже решали похожую задачу, и возвращайтесь к ним. 3. Если копипастите чужое решение, проанализируйте и отрефакторите его, а заодно покажите на ревью коллегам, чтобы убедиться в его качестве. Пишете простой код без сложных алгоритмов и абстракций? Продолжайте в том же духе! С таким кодом легче работать всем. Несколько рекомендаций: 1. Подбирайте подходящие имена для переменных, функций и классов. 2. Убедитесь, что каждая часть вашей программы отвечает только за одну вещь (принцип единственной ответственности). 3. Чистые функции предпочтительнее обычных. 4. Функции предпочтительнее классов. 5. Используйте классы только при серьёзной необходимости. Не доверяете себе? 1. Пишите тесты. 2. Используйте статическую типизацию. 3. Используйте линтеры. 4. Используйте инструменты анализа качества кода. 5. Делайте кодревью. 6. Платите другим людям за аудит вашего кода. Хотите, чтобы ваш код работал не только на вашем компьютере? 1. Автоматизируйте всё, что связано с развёртыванием приложения. 2. Используйте docker. 3. Используйте инструменты развёртывания. Всё ещё не доверяете себе, даже после выкладки приложения в продакшен? 1. Мониторьте ошибки (например, с помощью Sentry). 2. Пишите логи. 3. Мониторьте нагрузку и состояние серверов.

Большинство разработчиков — не рок-звёзды, а середнячки. Никита Соболев рассказал, как с этим жить, если вы постоянно гуглите простые вещи и сомневаетесь в себе → https://dev.to/sobolevn/i-am-a-mediocre-developer--30hn

Что почитать в Телеграме фронтендеру Ссылка, чтобы делиться в ВК, Твитере, Фейсбуке или рабочих чатиках — http://telegra.ph/CHto-chitat-v-Telegrame-frontenderu-03-18 @forwebdev — новости и полезные материалы для фронтендеров, дизайнеров и сочувствующих @webstandards_ru — ежедневные новости и события фронтенда @breakfastjs — ежедневная утренняя порция фронтенд-новостей от Дмитрия Мананникова @codehipsters — фронтенд, машинное обучение, большие данные, философия программирования @evilmartians — «Злые марсиане» о стартапах, веб-разработке, интернет-бизнесе, бэкенде, фронтенде, мобильной разработке, devops и data science @js_kitchen — новости из мира JavaScript @deepdigital — канал команды разработки Chulakov Digital о фронтенде и бэкенде @RodionovFrontend — ссылки и статьи от фронтендеров и для фронтендеров @devSchachtChannel — анонсы новых статей и подкастов от devSchacht @frontendweekend — анонсы подкаста Frontend Weekend @frontend_u_news — анонсы подкаста «Фронтенд-юность» @itradiostream — лента IT-подкастов, можно слушать прямо в Телеграме @callforward — подробные разборы задач, встречающихся на собеседованиях @ctodaily — техдир «Медузы» Самат Галимов о своих буднях и технологиях @pmdaily — Фёдор Борщев о производстве сложных проектов, управлении командой и продуктом @polovnyov_journal — Василий Половнёв о разработке, тестировании и культуре работы @rocket_notes — Сергей Попов об управлении продакшеном по вёрстке, веб-технологиях, конференциях и жизни @teamleading — Олег Мохов про руководство разработчиками @andrew_r_notes — Андрей Романов о разработке интерфейсов, дизайне и программировании @iamakulov_channel — Иван Акулов про фронтенд, UX и смежные темы @PROprgmr — Владислав Козуля о карьере, стартапах и своём опыте разработки @emaildev — Артур Кох о email-разработке @prowebit — Александр Майоров о вебе, собеседованиях и карьере @mywayk — Михаил Кононенко о фронтенде, дизайне и продуктивности @startupsandhypes — Владислав Куклев с полезными ссылками и заметками о своём опыте разработки @isqualog — Софья Ильинова о фронтенде, дизайне, работе и жизни @webo_ru — Виталий Харисов об оптимизации сайтов (английская версия — @webo_en) @internet9000 — Сергей Сурганов о дизайне и технологиях @dangry — Антон Жиянов о продуктоводстве, интерфейсах, здравом смысле и разработке софта @desprod — Костя Горский про дизайн, продуктивность и жизнь @ask_catwomenko — Вероника Ильина о поиске работы, хороших резюме, собеседованиях и специфике работы эйчаров

Preact vs Glimmer Что выбрать для разработки максимально лёгкого и производительного веб-приложения, Preact или Glimmer? Вместо споров инженеры LinkedIn запилили на обеих библиотеках прототип своей ленты новостей и замерили разницу. Результаты эксперимента и выводы → https://engineering.linkedin.com/blog/2018/03/how-we-built-the-same-app-twice-with-preact-and-glimmerjs