-
Полезные статьи, качественные проекты, интересные задачи и вкиторины для тренировки собственных навыков. Наш чат @frontend_school_chat По всем вопросам @this_is_patrick
Как настроить выбор темы на сайте
Для этого нам понадобится медиавыражение `prefers-color-scheme`, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.
Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```
Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/
#css
Учитесь фронтенду с нами — подпишитесь 💻
Полный курс по React, Redux и TypeScript бесплатно
Короткий, но крайне полезный курс для тех, кто уже освоил JS и хочет двигаться дальше. Если вы начали осваивать React, но не понимаете, как его использовать по полной, то обязательно посмотрите это видео.
Здесь вы научитесь инициализировать Redux Store, создавать хуки и работать с TS:
https://youtu.be/ETWABFYv0GM
#видео #курс #react #redux #typescript
Учитесь фронтенду с нами — подпишитесь 💻
Что такое делегирование событий в JS и как это работает
Это техника, которая позволяет обрабатывать события на родительских элементах вместо на дочерних.
Мы знаем, что события всплывают вверх по DOM-дереву. То есть если вы установите обработчик события на родительском элементе, он будет вызван при срабатывании и на любом дочернем.
Вот пример, как можно это использовать:
// Получаем родительский элемент
const parentElement = document.getElementById('parentElement');
// Добавляем обработчик на родительский элемент
parentElement.addEventListener('click', function(event) {
// Проверяем, что кликнули на нужный дочерний элемент
if(event.target.classList.contains('childElement')) {
// Обрабатываем событие
console.log('Событие обработано на дочернем элементе');
}
});
«Классная» идея для формы авторизации на сайте
Помогите вашему пользователю получить доступ к аккаунту, сделав подсказку о пароле😉
#кек
Роадмап по фронтенду
Но не простой, а собранный опытный фронтенд-разработчиком с 11-летним опытом. В видео он поделился не только тем, что нужно учить, но и на что обращать отдельное внимание, чтобы не повторить его ошибок.
Ссылка на видео: https://youtu.be/eYrdtDOq5Lg
Ссылка на роадмап: https://roadmap.sh/frontend
#роадмап #фронтенд
Учитесь фронтенду с нами — подпишитесь 💻
Ловите крутой сайт для веб-разработчиков
В своё время он и мне очень сильно помог. Здесь собраны справочники и руководства по HTML, CSS и JavaScript. Надеюсь, что окажется полезным и для вас. Сохраняйте себе и пользуйтесь на здоровье:
https://doka.guide/
@catreview #webdev
Условные конструкции в CSS
На прошлой неделе рабочая группа по CSS решила добавить inline if() в CSS. Но что это значит и почему это так интересно? CSS наконец-то превратится в язык программирования?
Подробности в статье: https://lea.verou.me/blog/2024/css-conditionals/
@frontend_school #статья #css
Полное руководство по localStorage в JavaScript localStorage
JavaScript localStorage – это основное хранилище данных, которое находится в объекте Window браузера. Вы можете сохранять любую информацию в localStorage, и она будет сохраняться даже при перезагрузке страницы или закрытии и повторном открытии браузера.
Зачем оно нужно, как им пользоваться и какие методы существуют, рассказали в статье: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/
@frontend_school #статья #javascript
Как максимально приблизить веб-приложения к нативным
Сегодня WebAPI обладают крайне широкими возможностями, которые позволяют превратить веб-приложения практически в нативные. И мне кажется, что сегодня это особенно актуально, учитывая санкции и блокировку многих приложений в AppStore и GooglePlay.
В этой статье фронтенд-разработчик рассказал, как по максимуму использовать возможности WebAPI.
@catreview #webdev
Когда коллектив действительно дружный.
@frontend_school
Ответы на популярные вопросы по HTML
Даже изучая вёрстку, у нас копятся множество вопросов. HTML — технология древних, поэтому многое там может быть не очевидно и путать.
Чтобы вопросы у вас не копились, делимся большой статьёй, где, скорее всего, вы найдёте ответ на то, что вас интересует: https://www.frontendinterviewhandbook.com/ru/html-questions
@frontend_school #статья #html
Новые методы Set в JavaScript, которые подарят вам суперспособности
Set был добавлен ещё в стандарте ES2015, но всегда казался немного ограниченным. Работать с ним можно было только через добавление, удаление и проверку наличия элементов. Однако при работе с несколькими коллекциями или их сравнении, приходилось писать дополнительные функции.
Но теперь нам готовят новые методы, которые значительно упростят работу с Set и позволят избежать необходимости придумывать свои функции. Подробнее:
https://proglib.io/p/set-v-javascript-teper-s-novymi-supersposobnostyami-2024-06-19
@frontend_school #статья #javascript
21 лайфхак для новичков в JavaScript
Приготовьтесь пополнить арсенал своих JavaScript-навыков. Всеобъемлющее руководство ознакомит вас с эксклюзивными JavaScript-лайфхаками, которые помогают опытным разработчикам достигать вершин мастерства при создании кода.
Постигаем мастерство тут: https://nuancesprog.ru/p/20310/
@frontend_school #статья #javascript
30 вопросов на собеседовании фронтенд-разработчика
Готовитесь к своему первому собеседованию и не знаете, что вас могут спросить? В этой статье собраны 30 популярных вопросов.
Зная ответы на них, вы будете чувствовать себя гораздо увереннее: https://tproger.ru/articles/20-voprosov-na-sobesedovanii-frontend-razrabotchika
@frontend_school #статья #вопросы
@frontend_school #викторина
Читать полностью…
Выходные — не повод сидеть без дела! Поэтому предлагаем сверстать очередной сайт для оттачивания мастерства вёрстки
По ссылке ниже вы найдёте стильный макет, по которому сможете сделать не менее красивый, но при этом ещё и функциональный лендинг:
https://www.figma.com/design/PSr7478hcIydh1tC6YZkUr/2rism?node-id=0-1&t=mVxuzEoR26yERLGI-0
#figma #макет #вёрстка
Учитесь фронтенду с нами — подпишитесь 💻
30 самых полезных библиотек Python для веб-разработки в 2024 году
Занимаетесь вебом и не расстаётесь с JavaScript? Пора это исправить! Я тут нашёл для вас подборку из 30 библиотек Python, которые пригодятся веб-разработчикам.
Справедливости ради, в вебе действительно есть задачи, которые проще решать на Python: от анализа данных до веб-разработки. Посмотрите сами. Надеюсь, что найдёте для себе что-то новое и полезное:
https://tproger.ru/articles/30-samyh-poleznyh-bibliotek-python-dlya-veb-razrabotki-v-2024-godu
#веб #python
🐈⬛ Подписывайтесь на меня 😌
Как работают функции JavaScript
Мы с вами знаем, что функция — это блок программы, который выполняет определённые действия. То есть мы понимаем, что делает функция, потому что можем посмотреть код в ней.
Но как именно это работает? Мы не будем сейчас углубляться в двоичный код и прочие технические нюансы. Вместо этого предлагаем вам детально разобраться в том, что из себя представляет функция, какими скрытыми возможностями обладает и почему это работает именно так, как работает:
https://proglib.io/p/chto-v-korobke-kak-rabotayut-funkcii-v-javascript-2022-06-12
#javascript
Учитесь фронтенду с нами — подпишитесь 💻
Шпаргалка по позиционированию элементов с помощью CSS Grid
Сохраняем и держим при себе.
#css #шпаргалка
Учитесь фронтенду с нами — подпишитесь 💻
Спорим, вы знаете не все методы для работы со строками в JavaScript?
Хоть нам и приходится каждый день иметь дело с JS, но всё знать невозможно. В этой статье собраны 40 методов, которые позволяют взаимодействовать со строками:
https://proglib.io/p/40-osnovnyh-i-nestandartnyh-metodov-dlya-raboty-so-strokami-v-javascript-2022-05-19
Напишите в комментарии сколько из них вы знали до прочтения статьи 👇
#javascript #строки
Учитесь фронтенду с нами — подпишитесь 💻
Большая подборка шпаргалок и инструментов для HTML, CSS и JS
Этому сайту уже много лет, но он всё также не теряет актуальности. Здесь собрано множество шпаргалок, которые позволяют быстро найти нужную информацию. А ещё здесь микро инструменты, которые упростят вам создание сложных стилей и вёрстки.
Сохраняйте и пользуйтесь по ссылке.
@frontend_school #html #css #js
Большой видеоурок по Three.js
В этом видео вы научитесь пользоваться популярной js-библиотекой для создания сложных анимаций Three.js. Хоть видео и на английском, но вы без труда сможете посмотреть его используя автоматический перевод, например, в Яндекс Браузере:
https://youtu.be/UMqNHi1GDAE
@frontend_school #видео #javascript #threejs https://www.youtube.com/watch?v=UMqNHi1GDAE
Как обеспечить безопасность фронтенд-приложений
Безопасность является важным фактором при создании фронтенд-приложений, поскольку они часто являются отправной точкой для атак. В этой статье собраны основные меры, которых стоит придерживаться или о которых хотя бы нужно задуматься: https://habr.com/ru/articles/736866/
@frontend_school #статья #безопасность
5 крутых функций JavaScript, о которых не знает большинство разработчиков
С помощью JavaScript можно делать одно и то же разными способами. С выпуском каждой новой спецификации ECMAScript добавляются новые методы и операторы, чтобы сделать код более коротким и читабельным.
Как использовать всю мощь языка, рассказали здесь: https://proglib.io/p/5-krutyh-funkciy-javascript-o-kotoryh-ne-znaet-bolshinstvo-razrabotchikov-2021-09-04
@frontend_school #статья #javascript
Розыгрыш среди подписчиков канала!
Мы знаем, что помогает разработчикам оставаться в тонусе и создавать качественный код — кофе! И чтобы ваш кофе никогда не остывал, мы решили разыграть кружку, которая будет поддерживать его температуру. А ещё это беспроводная зарядка для ваших смартфонов!
Чтобы принять участие в розыгрыше вам нужно:
1. Подписаться на канал
2. Нажать кнопку «Участвовать»
21.07 в 13:00 бот выберет одного победителя.
Обращаем внимание, что доставка приза победителю абсолютно бесплатна, но возможна только по РФ.
Лоадер в виде анимированной сковороды
Интересный способ отобразить загрузку контента — добавить привлекательный лоадер. Этот вариант сделан с использованием препроцессора SCSS.
Посмотреть код можно по ссылке: https://codepen.io/jkantner/pen/OJGBYJG
@frontend_school #codepen #scss #css
Что нужно знать о современном CSS
Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.
Пусть что-то и не сразу войдёт в обиход из-за медленного обновления браузеров, но зная самые новые возможности, вы будете на шаг впереди остальных.
Подробнее: https://habr.com/ru/articles/816541/
@frontend_school #статья #css
Узнали себя?
@frontend_school
Что означает ошибка SyntaxError: Unexpected token '{'. Expected ')' to end an 'if' condition
Наверное, каждый из нас сталкивался с такой ошибкой при написании кода на JS. Её легко допустить, но также и легко исправить.
О том почему она возникает и как её быстро устранить рассказали в статье: https://thecode.media/chto-oznachaet-oshibka-syntaxerror-unexpected-token-expected-to-end-an-if-condition/
@frontend_school #статья #javascript
9 главных трендов в разработке фронтенда в 2024 году
Сфера фронтенд-разработки крайне изменчива. Стиль, фреймворки, инструменты меняются очень быстро. Чтобы быть на острие рынка, необходимо своевременно изучать все изменения.
В этой статье собраны 9 главных трендов, которые будут актуальны в этом году.
@frontend_school #статья