💻 Дайджест свежих материалов из мира фронтенда:

⚙️Веб-разработка:
1. Современные архитектуры фронт-энда
2. Онлайн-визуализатор SVG Path
3. Подборка креативных концептов
4. Дорогая цена стилей. Доклад Яндекса

🎨CSS:
1. CSS-функции min(), max() и clamp()
2. Анимация таймлайна в CSS
3. Современные CSS решения для старых CSS проблем
4. Превращение объекта фиксированного размера в адаптивный

🕹JavaScript:
1. Взгляд в будущее JavaScript
2. Начинаем работать с React
3. 5 советов по JavaScript, которые я извлек из исходного кода Vue
4. Особенности JavaScript, о которых можно забыть

⭐️ ВСЕ НОВОСТИ

CSSBattle - затягивающая и познавательная онлайн-игра для верстальщиков. Жанр таких развлекательных состязаний называют «code golf»: как в гольфе надо закатить мяч в лунку минимальным числом ударов, так здесь надо решить задачу минимальным количеством кода. Задача — воспроизвести 12 несложных геометрических рисунков, а код — любой (CSS, HTML…), кроме скриптов и ссылок на внешние ресурсы.

- > Играть

⭐️ ВСЕ ФИЧИ

Code Basics - бесплатные практические уроки по программированию для тех, кто начинает с нуля.

Посмотреть

⭐️ ВСЕ МАТЕРИАЛЫ

PageSpeed Insights - один из инструментов PageSpeed Tools от Google. Он анализирует содержание вашего сайта и предлагает решения, позволяющие ускорить его загрузку. В параметры оценки входит не только скорость, но и удобство использования. Советы могут иметь желательный и критический характер. К критическим относятся такие вещи как, например, блокировка отрисовки страницы небрежно вставленным в header JavaScript-кодом.

ССЫЛКА

⭐️ ВСЕ ФИЧИ

Codebattle - проект сообщества Хекслета. Название говорит за себя: вам и сопернику даётся задача, выбираете язык и решаете. Вы видите код соперника в реальном времени, результаты запуска тестов и можете общаться с ним и зрителями в чате. Кто первый решит задачу (пройдёт тесты) - тот победил.

- > ИГРАТЬ

⭐️ ВСЕ ФИЧИ

LeetCode - сборник задач по программированию на разных языках. Цель сервиса — готовить программистов к заданиям, которые встречаются на интервью. Платформа сразу даёт фидбэк на правильность и эффективность решения, показывает варианты решений и позволяет обсудить их с другими участниками. В платной версии можно пройти автоматизированное интервью в Google, Facebook или Amazon: робот подберёт вопросы, засечёт время и даже поможет оценить.

ССЫЛКА

⭐️ ВСЕ ФИЧИ

[6 урок] Web-developer.
CSS Селекторы

В CSS - селекторы используются для стилизации HTML элементов на веб-странице, хотите узнать больше ? Бежим читать и практиковаться.

читать

⭐️ ВСЕ УРОКИ

🔻 Публичное собеседование: FrontEnd-программист

Публичное собеседование - это формат учебного собеседования в прямом эфире. Кандидат рассказывает о себе, а собеседующий задаёт наводящие вопросы с целью раскрыть навыки кандидата, его hard и soft скиллы, которые понадобятся при приёме на работу.

Смотреть

⭐️ ВСЕ IT-ЛЕКЦИИ

CSS Triggers - подробная информация обо всех CSS-свойствах: что они делают, как влияют на рендеринг страницы и тому подобное.

ССЫЛКА

⭐️ ВСЕ ФИЧИ

Mousetrap - это простая в использовании библиотека JavaScript для привязки сочетания клавиш.

https://craig.is/killing/mice

⭐️ ВСЕ ФИЧИ

«Мне казалось, что программирование — это тайное знание для избранных»

Влад никогда не думал, что свяжет жизнь с IT. До курсов он хотел стать топовым стилистом и открыть свой салон красоты.

В интервью Владислав рассказывает:
- почему не стал топовым стилистом;
- что знал о программировании до обучения;
- как поступил в мед из-за сериала «Клиника»;
- почему уверен, что учиться должно быть легко;
- чем ему больше всего нравится работа в IT.

Frontend-спринт: 100 быстрых советов по HTML, CSS и JavaScript.

100 полезных приемов, лучших практик и бесплатных советов по HTML, CSS и JavaScript для начинающих и продолжающих frontend-разработчиков.

https://proglib.io/p/100-frontend-tips

⭐️ ВСЕ МАТЕРИАЛЫ

[7 урок] Web-developer.
CSS Спецификация

Специфичность - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу
Читать

⭐️ ВСЕ УРОКИ

Основная задача Flexbox — сделать слои гибкими, а работу с ними — интуитивно понятными. Для достижения этой цели он позволяет контейнерам самим решать, как обращаться со своими дочерними элементами, в том числе изменять их размер и расстояние между ними.

https://mastery.games/flexboxzombies/

⭐️ ВСЕ ФИЧИ

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

Доступно в Chrome, Firefox и Edge.

ССЫЛКА

Как Илон Маск назвал бы вас, будь он вашим отцом?

Многие были удивлены, услышав какое имя дал Маск своему сыну. Даже пошли слухи, что его сын может потерять свое уникальное имя.

Одни отнеслись к этому с недоумением, а другие с юмором. Был создан генератор имени, который превращает ваше имя в такое, которое "дал" бы вам Илон Маск, будь вы его ребенком.

Чтобы узнать ответ на этот вопрос, перейдите по ссылке https://elon-name.netlify.app/ и в единственном поле для ввода введите свое имя. Нажмите на кнопку "Generate".

Сайт сгенерирует имя, у которого также будет и смысл. Чтобы понять, что означает ваше имя, нажмите "See Meaning".

Mobile First подразумевает сперва разработку под мобильные системы. Это значит, что сперва разрабатывается мобильная версия сайта, а уже потом идет подготовка к созданию десктопной версии.

Проверьте, соответствует ли мобильная версия вашего сайта следующим пунктам:
- Информация отображается корректно как в книжной, так и в альбомной ориентации;
- Все кликабельные элементы работают;
- Отсутствуют тяжелые изображения, которые замедляют загрузку страницы;
- На сайте нет ничего, связанного с Flash;
- Нет всплывающих окон, которые перекрывают полстраницы;
- Нигде не задействована горизонтальная прокрутка;
- Контактный номер кликабельный или его хотя бы можно скопировать;
- Поля в форме регистрации короткие и простые, отключена функция автозаполнения (часто может подтягиваться некорректная информация);
- Все кнопки сделаны с помощью CSS, нет кнопок-изображений;
- Размер картинок меняется автоматически в зависимости от типа устройства;
- Есть возможность совершить покупку в один клик.