@frontend_school #юмор

@frontend_school #полезное

​Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок

В CSS ::before и ::after нельзя добавлять к текстовым полям и изображениям, поскольку последние являются замещаемыми (replaced) элементами. Суть в том, что такие элементы замещаются содержанием, указанным в них. Например на месте <img> появляется изображение из атрибута src. А вот ::before и ::after дословно означают before и after content. У замещаемых элементов нет контента, поэтому псевдоэлементы с ними не работают.

@frontend_school #статья #JavaScript

Используем приёмы из функционального программирования, чтобы улучшить свой код на JavaScript

JavaScript — самый распространённый язык программирования в мире. Простота и обилие учебных ресурсов делают его доступным для начинающих. Множество талантливых разработчиков делают этот язык привлекательным для компаний любого размера. Огромная экосистема инструментов и библиотек — настоящий дар для производительности разработчиков. Когда один язык позволяет управлять и фронтендом и бэкендом, а один и тот же набор навыков может использоваться во всём стеке, это становится огромный преимуществом.

@frontend_school #викторина

@frontend_school #ответ_на_задачу

По ссылке ниже представлено решение задачи "Click'n'Copy".

Обращаю ваше внимание, что это только один из возможных вариантов решения. И если вы решили иначе, то это не значит, что ваш вариант неправильный.

Если вы не согласны с подобным решением или считаете, что ваше вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!

@frontend_school #юмор

А что выбираешь ты?

@frontend_school #интересное

Анимация смены картинки

Кликните в лбом месте и потяните мышку слева направо или наоборот.
Анимация выполнена с помощью библиотеки THREE.JS

@frontend_school #статья #JavaScript

Основы JavaScript: зачем нам знать, как работают движки

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

@frontend_school #викторина_недели

Это 5-я еженедельная викторина, основанная на вопросах, публиковавшихся в течении недели. Вы можете закрепить, полученные знания, ответив на несколько вопросов. Для ответа на каждый вопрос даётся 30 секунд.

А вот топ-10 прошлой викторины:
 🥇 @redd08 – 7 (52.1 сек)
 🥈 Кирилл – 6 (1 мин 22 сек)
 🥉 @YehorRudzinskyi – 6 (2 мин 42 сек)
 4. @Laokaorum – 5 (1 мин 22 сек)
 5. @nikolay696 – 4 (1 мин 22 сек)
 6. Mila Shmadchenko – 4 (1 мин 50 сек)
 7. @Lnikita – 4 (2 мин)
 8. @leonidshuliak – 4 (2 мин 29 сек)
 9. СымбатБогачиева – 3 (1 мин 6 сек)
 10. @V1k70R_I – 3 (1 мин 46 сек)

@frontend_school #полезное

В дополнение к сегодняшней статье представляю вашему вниманию шпаргалку по приоритетам загрузки JavaScript в Chrome. Эта шпаргалка поможет вам лучше понимать как отрабатывается код в браузере. Подробнее по ссылке ниже.

Обращаю внимание, что статья на английском!

@frontend_school #юмор

Наглядный чек-лист на собеседование

@frontend_school #интересное

Todo list

Реализован на CSS. Есть вариант реализации на JS, но он закомментирован.

@frontend_school #статья #CSS

Проектирование заголовочных частей сайтов с использованием CSS Flexbox

Кто-то может сказать, что сегодня, из-за того, что у нас есть современные CSS-технологии разработки макетов страниц, создать заголовочную часть сайта проще, чем в былые времена. Но, на самом деле, это не так. И в наши дни при проектировании макетов страниц приходится решать непростые и интересные задачи. О некоторых из них будет рассказано в этой статье.

@frontend_school #викторина

@frontend_school #полезное

Как быстро создать Bootstrap-сайт для бизнеса: 6 полезных инструментов

В данной статье представлено несколько полезных инструментов, которые позволят вам проще и быстрее верстать сайты с помощью фреймворка Bootstrap. Несмотря на заголовок, применяя эти инструменты можно создавать сайты не только для бизнеса, но и для иных задач и направлений.

@frontend_school #юмор

Кто круче: разработчик 👨‍💻 или дизайнер 👨🏻‍🎨?

@frontend_school #интересное

Анимированные радио-кнопки

При выборе кнопки происходит анимация, созданная с помощью CSS, CSS-трансформации и CSS-анимации.

@frontend_school #статья #JavaScript #React

Введение в React, которого нам не хватало

Хочу сразу обратить внимание подписчиков на то, что эта статья не означает, что мы теперь тут еще и фреймворки будем изучать и распаляться на всё и сразу. Нет, не переживайте. Данная статья опубликована для тех, кто уже имеет определенные знания в JavaScript и хочет идти дальше, но не знает куда или не может определиться с тем, какой фреймворк изучать. Сегодня предлагаю вам ознакомиться с React, а позднее будут также подобные статьи и о других библиотеках, чтобы вы могли определиться с выбором. Приятного чтения!

@frontend_school #викторина