IT-инфраструктура для бизнеса и творчества
Разработка
AFFINAGE DIGITAL

Frontend-разработчикам и UX-дизайнерам: профессиональные ресурсы, книги и фильмы для развития hard skills

24 рекомендации экспертного сообщества Design is Frontend.

Обучение и лайфхаки

Learn.javascript.ru — учебник по JavaScript. Основы, тонкости и фишки JavaScript/DOM.

Developer.mozilla.org — платформа для обучения веб-технологиям и программному обеспечению: статьи о технологиях, справочники и руководства, документация и инструменты разработчиков Mozilla.

«Чтение документации фреймворков, библиотек и браузеров – один из самых полезных навыков, который когда-то бустанул мой рост. Если получится, можно начать читать официальныые спецификации, — это уже сеньорский уровень».

Юрий Чижов
Технический директор PINKMAN

web.dev — ресурс о производительных сайтах с хорошими показателями метрик. В разделе Measure можно провести быстрый аудит сайта и получить отчёт с рекомендациями по улучшению ресурса. В разделе Learn — полезная информация для разработчиков о том, как повысить качество сайта.

css-tricks.com — лайфхаки по вёрстке и статьи с разбором интересных тем. Например, как анимировать SVG с помощью border-image, настраивать шрифты в Dark Mode через css и многое другое.

css-live.ru — статьи про frontend-разработку. Теория и интересные трюки для использования: как убрать сдвиги в вёрстке наложением в CSS Grid, уроки CSSbattle и многое другое.

css.yoksel.ru — статьи про css и svg. Адаптивное видео с помощью встроенных математических функций CSS, генератор цветовых тем и другие полезные материалы.

https://tympanus.net/codrops/category/playground/ — сайт с готовыми современными анимациями для вдохновения.

webdesign-master.ru — блог фуллстак-разработчика, создающего сайты «под ключ».

Создатель проекта webdesign-master Алексей Климанов объясняет все технологии и используемые инструменты. Для начинающих верстать советую его плейлисты «Джедай вёрстки», чтобы перебороть страх вёрстки страниц/сайтов с нуля.
Ещё рекомендую подписаться на теги, связанные с веб-разработкой, на medium.com и habr.com Здесь собрана актуальная информация по трендам и технологиям.

Влад Шуянов
Тимлид фронтенд-разработки Hawking Bros.

Telegram-каналы и чаты

«Библиотека верстальщика» — примеры реализации интересных элементов: иконки для соцсетей, анимация чекбоксов и так далее.

HTML/CSS Tasks — сборник тестов по HTML и CSS.

JavaScript Tasks — сборник тестов и заданий по JS (фронтенд и бэкенд).

MSK VUE.JS — публичный чат сообщества разработчиков MSK VUE.JS.

Design is Frontend — чат экспертного сообщества Design is Frontend, где дизайнеры и фронтенд-разработчики обсуждают лайфхаки качественной вёрстки.

«Поясни за UX» — канал с хорошими и плохими UX-примерами, а также UX-мемы по средам.

Книги

Design Like Apple: Seven Principles For Creating Insanely Great Products, Джон Эдсон — как относиться к продукту с философской точки зрения.

Книга основана на примерах, показывающих различие между хорошим и плохим дизайном. Например, зубная щетка от Reach прославилась своей эргономичностью на рынке, но при внимательном анализе оказалось, что у нее откровенно неправильный дизайн. Вскоре Oral-B, изучив некоторые моменты поведения потребителя, разработала более качественный дизайн (новая зубная щетка имела толстую ручку), что в конечном итоге повлияло на продажи.

Издательство «Манн, Иванов и Фербер»

«Модульные системы в графическом дизайне», Йозеф Мюллер-Брокманн — какие модульные системы и сетки бывают и как их использовать.

Книга представляет собой подробное пособие по использованию модульной системы в графическом дизайне и оформительской работе. Автор на примерах рассказывает о применении модульной сетки в дизайне книг, периодических изданий, корпоративной полиграфии, выставочных пространств, приводит исторические образцы архитектуры, типографики и дизайна и убедительно доказывает универсальность и эффективность модульного метода проектирования.

Издательство Студии Артемия Лебедева

Источник: softculture.cc

«Книга про буквы от Аа до Яя», Юрий Гордон — книга о буквах — в основном о кириллических (но по ходу дела приходится вспомнить и о греко-римских корнях нашей азбуки).

Эта книга — вторая попытка объяснить самому себе, а заодно и всем интересующимся, что такое буквы русского алфавита и почему они выглядят так, а не иначе. С тех пор как была предпринята первая, автор стал опытнее на триста шрифтов, или как минимум на шестьдесят тысяч букв, изготовленных собственными руками.

Юрий Гордон
Типограф, иллюстратор и автор книги. Источник: https://www.artlebedev.ru/izdal/kniga-pro-bukvy2/

«Придумай. Сделай. Сломай. Повтори», Мартин Томич, Кара Ригли и другие — настольная книга приёмов и инструментов дизайн-мышления.

Не знаете, как сдвинуть брейнсторминг с мертвой точки? Эта книга поможет. В книге описаны 60 приемов и техник, которые можно применить для любого инновационного проекта. Для каждого метода перечислены простые и понятные упражнения, а также готовые шаблоны и инструменты, тематические исследования и задачи для проектирования.

Александр Кременской
Арт-директор Студии Олега Чулакова

«Принципы. Жизнь и работа», Рэй Далио — жизненные и управленческие принципы Рэя Далио, одного из самых влиятельных и богатых людей планеты, и история его детища — крупнейшего в мире хедж-фонда Bridgewater.

Фильмы и сериалы

«Абстракция: искусство дизайна» — документальный сериал об известных представителях мира искусства и дизайна. В первом сезоне представлены иллюстратор Кристоф Ниман, дизайнер кроссовок Nike Тинкер Хэтфилд, сценограф Эс Делвин, архитектор Бьянке Ингельс, дизайнер автомобилей Ральф Джилс, дизайнер Паула Шер, фотограф Платон и дизайнер интерьеров Илзе Кроуфорд.

«Гельветика» — фильм о типографике, графическом дизайне и визуальной культуре в целом. Фильм представляет собой исследование городского пространства и шрифтов, которые его наполняют, а также цикл бесед с известными дизайнерами об их работе, творческом процессе, выборе и эстетической составляющей шрифтов.

Трейлер к фильму «Гельветика»

Подкаст

«Веб-стандарты» — еженедельный выпуск новостей фронтенда.

Конференции

Design is Frontend — бесплатная ежеквартальная онлайн-конференция, посвященная комплексному решению проблемы низкого качества вёрстки.

Frontendconf — все аспекты разработки клиентской части веб-проектов: дизайн, юзабилити, вёрстка, JavaScript, веб-медиа и так далее. Конференция проходит один раз в год.

Благодарим коллег из PINKMAN, Voximplant, Студии Олега Чулакова и Hawking Bros. за помощь в подготовке материала.

А что бы вы порекомендовали фронтенд-разработчикам и UX-дизайнерам? Самые полезные рекомендации добавим в подборку.

{ "author_name": "AFFINAGE DIGITAL", "author_type": "self", "tags": ["\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434","\u0441\u043e\u0432\u0435\u0442\u044b","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430","\u0438\u0434\u0435\u0438","\u0437\u0430\u0434\u0430\u0447\u0438","\u0434\u0438\u0437\u0430\u0439\u043d","\u0432\u0435\u0440\u0441\u0442\u043a\u0430","\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430","\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f_\u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f","designisfrontend"], "comments": 6, "likes": 3, "favorites": 43, "is_advertisement": false, "subsite_label": "dev", "id": 213178, "is_wide": true, "is_ugc": true, "date": "Tue, 09 Mar 2021 15:51:55 +0300", "is_special": false }
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
6 комментариев
Популярные
По порядку
Написать комментарий...

Очень насыщенная подборка материалов, спасибо что поделились)

2

спасибо! если есть, что добавить – велкам!

0

поддерживаю

0

Огромное спасибо автору

0

Благодарю. Жаль нет фильмов связанных с программированием. А так за дизайнерские фильмы огромное спасибо! 

0
Читать все 6 комментариев
«За гранью ума»: сооснователь YC Пол Грэм о том, почему одного интеллекта недостаточно, чтобы создать что-то новое Статьи редакции

Человеку с детства навязывают, что главное в жизни — быть умным, вот только умные люди далеко не всегда добиваются больших успехов. Об этом программист рассуждает в своём новом эссе.

Пол Грэм Medium
Минэк и корпорация МСП предложили освободить малый бизнес от штрафов за первое нарушение КоАП Статьи редакции

Поправки должна рассмотреть правительственная комиссия, а в случае одобрения их внесут в Госдуму, рассказал источник.

Любителям автоматизации пост

Привет! Это мой первый пост на этой платформе. Я не совсем ещё знаком с местными правилами, но всё же решил написать об одном из своих Telegram ботов и поделиться им.

Внебиржевые криптовалютные магазины наводняют Гонконг, но правила могут повлиять на их присутствие
Как не попасть в карьерную ловушку тимлида: личный опыт

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

ПСБ запустил личный кабинет для предпринимателей. Там можно следить онлайн за каждым своим терминалом

Сервис предоставляется бесплатно.

Нужна помощь: делаем массовый сервис для водителей

Привет, это команда сервиса Что не так с моей машиной. Мы делаем полезный сервис и мобильное приложение для водителей. Не горит лампочка, спущено колесо, какая-то неприятность или мелкая поломка? Как об этом может узнать сам водитель, который проблему не видит? А что если другие водители, которые видят машину со стороны, смогут сообщить об этом?

Детство на антибиотиках: как медицинский догматизм чуть меня не угробил, но, в итоге, подарил дело моей жизни

Часто, когда говорят или пишут о великих, упоминают, что еще в детстве они столкнулись с какой-то проблемой, решили спасти от нее весь мир и так стали тем, кем стали. С великими себя не сравниваю, но для меня такие биографии – свидетельство того, что если человеку нужно, он добьется всего, что захочет. У меня тоже есть подобная история за…

Как OTUS стал платформой для самореализации. История преподавателя

Наш преподаватель, специалист по Data Science, решил поделиться своей историей преподавания. Он рассказал, как пришел в эту сферу, с какими трудностями столкнулся на пути к преподаванию и что ему помогает. А еще поделился советами, как поддерживать внимание студентов и сделать занятия полезными и увлекательными.

Как сообщается, взлом CoinMarketCap приводит к утечке 3,1 миллиона адресов электронной почты пользователей
7 причин начать пользоваться Bright Data Proxy Manager:
null