-
Полезные статьи, качественные проекты, интересные задачи и вкиторины для тренировки собственных навыков. Наш чат @frontend_school_chat По всем вопросам @this_is_patrick
Что лучше использовать: ссылки или кнопки
При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе веб-страницы. Эта статья поможет вам избавиться от подобных проблем!
Читать статью
@frontend_school #статья
Вебинар «Конечные автоматы в реальной жизни»
Наставник курса «Мидл фронтенд-разработчик» Захар Овчаров расскажет про применение автоматов, а выпускник курса Антон Субботин попытается понять, зачем всё это нужно и как применять.
Что будет на вебинаре:
1. Поговорите про абстрактные машины, не существующие в реальности. Вы увидите, как на их основе строятся алгоритмы решения широкого круга задач.
2. Разберёте на примерах, как работают конечные автоматы и где находят применение.
3. Построите небольшой конечный автомат для валидации и допуска строк пользовательского ввода.
4. Обсудите использование, сложности и ограничения конечных автоматов для решения прикладных повседневных задач.
Для кого?
— Для тех, кто хочет лучше разбираться в фундаментальных алгоритмах.
— Для разработчиков, которые воспринимают регулярные выражения как магию, а валидацию форм как ужасную проблему.
— Для начинающих разработчиков, которые хотят построить прочный фундамент знаний.
8 мая в 15:00 (Мск)
https://praktikum.blog/webinar-avtomati/?utm_source=telegram&utm_medium=performance&utm_campaign=Telegram_performance_webinar-avtomati-frontend_school
Налейтай, народ! Не вакансия, а мечта!
@frontend_school #юмор
CSS-переменные: о чем вам не говорят
CSS-переменные — отличная вещь, но всё ли вы о них знаете? В этой статье вы узнаете о некоторых особенностях CSS-переменных, о которых многие не говорят. После этого вы уже не сможете воспринимать их, как прежде, но при этом, возможно, найдёте им новое применение.
Читать статью
@frontend_school #статья #CSS
Frontend_thoughts | Про фронтенд. Прост
Frontend_thoughts — канал о разработке, тимлидстве и саморазвитии. Здесь делятся полезными материалами и обмениваются мнениями о frontend-разработке.
На канале вы найдёте много всего интересного, например:
➡️ Современные возможности JS
➡️ Велосипеды. Когда стоит писать свое решение
➡️ Возраст в IT. Когда уже поздно начинать?
Подписывайтесь: @frontend_thoughts
10 полезных инструментов для фронтенд-разработчика
Разработчикам важно использовать ресурсы и инструменты, облегчающие жизнь и повышающие продуктивность при работе над проектами или изучении чего-то нового.
В этой статье вы найдёте десять полезных и бесплатных сервисов, которые помогут вам облегчить фронтенд-разработку.
Читать статью
@frontend_school #статья
БЭМ — соглашение по именованию в CSS
Вообще, БЭМ — это аббревиатура, которая представляет собой сочетание слов «блок», «элемент» и «модификатор». Эта методология предполагает определённый порядок наименования компонентов и вы наверняка столкнётесь с ней при реальной работе.
В этой статье понятным языком объяснили, что же это такое и как правильно этим пользоваться.
Читать статью
@frontend_school #статья #CSS
Малоизвестные, но крутые атрибуты в HTML
Все знаю такие HTML-атрибуты, как src, href и прочие, которые применяет каждый фронтенд-разработчик. Но помимо них существуют ещё несколько любопытных, которые не так часто применяются и не так известны, как остальные. В этой статье вы узнаете о некоторых из них.
Читать статью
@frontend_school #статья #HTML
DevTools для «чайников»
Данная статья, прежде всего, обращена к тем, кто еще находится в самом начале своего пути к программистскому Олимпу.
Здесь вы сможете разобраться в том, что же такое DevTools, какими возможностями обладает, а также узнаете некоторые фишки, которые выделят вас на фоне обычных интернет-пользователей.
Читать статью
@frontend_school #статья
Фронтенд-разработчику: 10 направлений, в которых стоит развиваться в 2021 году
Сегодня недостаточно знать HTML, CSS и JavaScript, чтобы считаться хорошим фронтенд-разработчиком. Существует множество инструментов, которые упрощают создание фронтенда и которые нужно знать, чтобы быть востребованным специалистом.
В этой статье разобрали несколько инструментов и направлений, в которых необходимо разбираться в 2021 году.
Читать статью
@frontend_school #статья
Что Такое JSON?JSON (JavaScript Object Notation) — это формат для хранения и обмена информацией, доступной для чтения человеком. Он очень часто используется во фронтенде, если только его не заменяет какой-нибудь XML или YAML, но о них в другой раз.
В этой статье статье вы узнаете как использовать JSON и зачем он вам может понадобиться.
Читать статью
@frontend_school #статья #JSON
Когда пытаешься следовать туториалу.
Кстати, сегодня выложим интересный туториал для любителей игр.
@frontend_school #юмор
Забудьте про div, семантика спасёт интернет
Существует два типа верстальщиков — те, кто используют только div и те, кто использует семантическую вёрстку. Сразу скажем, вторые круче! И в этой статье вы узнаете почему.
Читать статью
@frontend_school #статья #HTML
Нас таким не напугать. Правда ведь?
@frontend_school #юмор
Что такое @font-face на самом деле
В этой статье вы узнаете, как правильно подключать локальные шрифты к вашему сайту. Статье небольшая, но крайне полезная!
Читать статью
@frontend_school #CSS
Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут
Вы, наверное, уже знаете о том, что для хранения сведений об отдельных компонентах цвета можно применять пользовательские CSS-переменные. Это позволяет избавиться от необходимости повторения одних и тех же цветовых координат в стилях, описывающих цветовую тему сайта. Возможно, вы даже знаете о том, что одну и ту же переменную можно использовать для настройки нескольких компонентов цвета.
А знаете ли вы, что с помощью них также можно быстро создать тёмную тему для сайта на основе цветов светлой темы? Если нет, то в этой статье вам расскажут об этом подробнее.
Читать статью
@frontend_school #статья #CSS
Что лучше использовать: ссылки или кнопки
При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе веб-страницы. Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться логикой, описанной в этой статье.
Читать статью
@frontend_school #статья #HTML
Обработка текста поверх изображений в CSS
При вёрстке сайта часто возникает необходимость разместить текст поверх какого-то изображения. В таком случае текст может сливаться с частью изображения, если стили плохо прописаны. Чтобы сделать текст более читаемым, а общий вид привлекательным, существуют различные способы. Вот об этих способах вы узнаете в сегодняшней статье.
Читать статью
@frontend_school #статья #CSS
Тернарный оператор в JavaScript: за, против, подводные камни
Все мы хотим писать чистый и краткий код. Но порой между этими характеристиками приходится выбирать. В целом принято считать, что ясность важнее краткости.
С учетом вышесказанного становится ясно, почему многие люди относятся к тернарному оператору с некоторой опаской. Да, конечно, он более краткий, чем if-предложение. Но вместе с тем тернарные операторы легко могут превратить код в нечитаемую абракадабру.
В этой статье пытаются разобраться в плюсах и минусах тернарного оператора в JS.
Читать статью
@frontend_school #статья #JavaScript
Что такое callback-функция в JavaScript?
В процессе обучения языку JavaScript каждый сталкивается с коллбеками. Это не самая простая тема и без действительно простого пошагового объяснения разобраться в ней может быть очень трудно.
В этой статье автор на простых примерах, подкреплённых реальным кодом объяснил, как работают callback-функции. Надеемся, что эта статья поможет вам разобраться.
Читать статью
@frontend_school #статья #JavaScript
То, ради чего стоит стать фронтенд-разработчиком 😄
@frontend_school #юмор
Кнопка на Vue
Отличный пример работы реактивности во Vue — симпатичная кнопка с приятной анимацией. Можете посмотреть код и даже добавить его в свой проект.
CodePen
@frontend_school #интересное
3D-самолёт
Интересный проект на CodePen, где автор создал анимацию полёта самолёта. Вы, кстати, можете менять направление полёта простым движением мышки, а клик переключает проект в ночной режим. Из интересного тут библиотека GSAP, а также использование препроцессоров Pug для HTML и Stylus для CSS.
CodePen
@frontend_school #интересное
Срочно! Как поставить Emmet на бумагу?!
@frontend_School #юмор
Есть тут любители светлых тем? Признавайтесь!
@frontend_school #юмор
Flappy Bird и Doodle Jump на JavaScript
Помните эти некогда популярные игры? Кто-то, возможно, в них играет до сих пор. В этом видео автор пошагово вам покажет, как реализовать такие игры на JavaScript.
Видео на английском языке, но не переживайте! Всегда можно включить субтитры на английском или русском языке, а в описании под видео есть ссылки на уже готовый код, который можно изучить, если лень смотреть видеоурок.
Смотреть видео
@frontend_school #видео #JavaScript #en
Но без него было бы тяжело
@frontend_school #юмор
Как заменить все одинаковые подстроки в строке на JavaScript
Представим, что у вас есть строка var str = "Test abc test test abc test test test abc test test abc" и вам нужно заменить все подстроки abc. Метод replace не подойдёт, ведь он заменит только первую подстроку. Как тогда это сделать? Расскажут и покажут в этой статье.
Читать статью
@frontend_school #статья #JavaScript
9 полезных плагинов VS Code для вёрстки
VS Code на сегодняшний день один из самых популярных редакторов кода не только в фронтенде, но и в других областях программирования. Но нас, разумеется, больше интересует фронтенд и, в частности, вёрстка.
В этой статье вам расскажут о 9 плагинах, которые вам могут помочь верстать проще и быстрее.
Читать статью
@frontend_school #статья
Мотивации пост
@frontend_school #юмор
