Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
1.2K subscribers
550 photos
66 videos
3 files
252 links
Крутым фронтендером не рождаются — им становятся на канале @frontend_school!

Наш чат: @frontend_school_chat
Наша флудилка: @frontend_school_flud

Другие проекты: t.me/addlist/dIq-3zEMMugwZTgy

Мы в VK: vk.com/frontend_school

Связь: @jellyjail
Download Telegram
Интересные фишки TypeScript, которые вы вряд ли знаете

Многие из нас, изучив JS переходят на его более типизированного брата TS. Во-первых, с ним удобнее работать, во-вторых, на многих проектах будет использоваться именно он.

В этом ролике вы узнаете про некоторые интересные особенности TypeScript, которые можно и нужно применять на практике: Union типы, подсветку ошибок, тайпгуарды, утилитарные типы, generic компоненты, условные типы и кортежи, разница между enum и as const object.

@frontend_school #видео #typescript
Полифилы JavaScript: что это и зачем они нужны

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

Эта статья подойдёт новичкам, которые готовятся к собеседованию, и опытным специалистам. В ней вы для наглядности реализуете полифилы таких привычных методов, как map, forEach, filter, reduce

@frontend_school #статья #javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем гамбургеры с помощью React и Matter.js

Зацените codepen-проект одного энтузиаста, который сделал конструктор бургеров с помощью React. Обратите внимание на физику объектов, она работает благодаря библиотеке Matter.js.

Потыкаться самостоятельно и изучить код проекта можно здесь.

@frontend_school #codepen #react #matterjs
Введение в асинхронный JavaScript: Callbacks, Promises и Async/Await

Сегодня мы собираемся создать и запустить магазин мороженого, в процессе которого мы освоим асинхронный JavaScript. В конечном итоге вы научитесь работать с коллбэками, промисами и async/await.

Здесь вы увидите многочисленные примеры кода и доступные объяснения его работы.

@frontend_school #статья #javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем пинг-понг на JS с нуля

Вот такой классный проект вы можете реализовать самостоятельно на выходных.

Все необходимые зависимости, части кода, принципы его работы описаны в статье.

@frontend_school #статья #javascript
Практикуем вёрстку. Делаем сайт туристического тура

Что отличает опытного разработчика от плохого? Правильно, практика! Предлагаем вам потренироваться в вёрстке, сделав лендинг сайта по макету из Figma.

Ссылка на макет тут. Не забудьте поделиться потом своим результатом в комментариях!

@frontend_school #макет #figma #вёрстка
Два сниппета на JavaScript, которые упростят вам жизнь

В этой короткой статье вы познакомитесь с парой сниппетов, которые очень занимательны. Первый сниппет демонстрирует пример создания простой реактивности (signal), второй — метод предотвращения несоответствия данных из-за состояния гонки (race condition).

@frontend_school #статья #javascript
Все свои дела на неделю закончили? Осторожнее, понедельник не за горами😏

@frontend_school
9 главных трендов в разработке фронтенда в 2024 году

Сфера фронтенд-разработки крайне изменчива. Стиль, фреймворки, инструменты меняются очень быстро. Чтобы быть на острие рынка, необходимо своевременно изучать все изменения.

В этой статье собраны 9 главных трендов, которые будут актуальны в этом году.

@frontend_school #статья
Какой из перечисленных инструментов является препроцессором CSS?
Anonymous Quiz
17%
Bootstrap
76%
Sass
3%
jQuery
3%
Node.js
Что означает ошибка 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
30 вопросов на собеседовании фронтенд-разработчика

Готовитесь к своему первому собеседованию и не знаете, что вас могут спросить? В этой статье собраны 30 популярных вопросов.

Зная ответы на них, вы будете чувствовать себя гораздо увереннее: https://tproger.ru/articles/20-voprosov-na-sobesedovanii-frontend-razrabotchika

@frontend_school #статья #вопросы
21 лайфхак для новичков в JavaScript

Приготовьтесь пополнить арсенал своих JavaScript-навыков. Всеобъемлющее руководство ознакомит вас с эксклюзивными JavaScript-лайфхаками, которые помогают опытным разработчикам достигать вершин мастерства при создании кода.

Постигаем мастерство тут: https://nuancesprog.ru/p/20310/

@frontend_school #статья #javascript
Что нужно знать о современном CSS

Цель этого руководства — познакомить вас со списком новых (потрясающих) возможностей, недавно появившихся в CSS.

Пусть что-то и не сразу войдёт в обиход из-за медленного обновления браузеров, но зная самые новые возможности, вы будете на шаг впереди остальных.

Подробнее: https://habr.com/ru/articles/816541/

@frontend_school #статья #css
Новые методы Set в JavaScript, которые подарят вам суперспособности

Set был добавлен ещё в стандарте ES2015, но всегда казался немного ограниченным. Работать с ним можно было только через добавление, удаление и проверку наличия элементов. Однако при работе с несколькими коллекциями или их сравнении, приходилось писать дополнительные функции.

Но теперь нам готовят новые методы, которые значительно упростят работу с Set и позволят избежать необходимости придумывать свои функции. Подробнее:
https://proglib.io/p/set-v-javascript-teper-s-novymi-supersposobnostyami-2024-06-19

@frontend_school #статья #javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Лоадер в виде анимированной сковороды

Интересный способ отобразить загрузку контента — добавить привлекательный лоадер. Этот вариант сделан с использованием препроцессора SCSS.

Посмотреть код можно по ссылке: https://codepen.io/jkantner/pen/OJGBYJG

@frontend_school #codepen #scss #css
Ответы на популярные вопросы по HTML

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

Чтобы вопросы у вас не копились, делимся большой статьёй, где, скорее всего, вы найдёте ответ на то, что вас интересует: https://www.frontendinterviewhandbook.com/ru/html-questions

@frontend_school #статья #html
Розыгрыш среди подписчиков канала!

Мы знаем, что помогает разработчикам оставаться в тонусе и создавать качественный код — кофе! И чтобы ваш кофе никогда не остывал, мы решили разыграть кружку, которая будет поддерживать его температуру. А ещё это беспроводная зарядка для ваших смартфонов!

Чтобы принять участие в розыгрыше вам нужно:

1. Подписаться на канал
2. Нажать кнопку «Участвовать»

21.07 в 13:00 бот выберет одного победителя.

Обращаем внимание, что доставка приза победителю абсолютно бесплатна, но возможна только по РФ.