Frontend.school() | изучаем HTML, CSS, JavaScript вместе!

Что нового появилось в CSS в 2025 году CSS продолжает развиваться. Конечно не всё, что появилось в нём можно использовать уже сегодня — браузеры тупо не умеют с этим работать. Но зато вы можете познакомиться с новыми возможностями заранее. А используя какой-нибудь аналог babel для CSS, можно даже начать что-то применять в работе, убедившись, что это всё адаптируется под современные возможности браузеров. В общем, тут вы узнаете, на сколько CSS стал круче и приблизился к возможностям полноценного языка программирования. Учитесь фронтенду с нами — подпишитесь 💻

Оно живое!!!!! Учитесь фронтенду с нами — подпишитесь 💻

Типизация в React Router: ещё больше надёжности для вашей навигации Когда приложение растёт, слежение за маршрутами становится сложной задачей. Типизированная навигация помогает поймать ошибки ещё на этапе разработки, спасти ваши нервы и сделать переходы надежнее. Про конкретные подходы к типизации, советы по внедрению и рабочие примеры для реальных проектов на React вы можете узнать тут. #react #фронтенд #typescript

Про Notion уже слышали? Наверняка тут многие им пользуются, как и я. 9 сентября карета превратится в тыкву. Я собрал несколько альтернатив и рассказал где есть ещё вот в этом посте. Если кому нужно, залетайте, буду рад. p.s. контент сюда пилить вообще не успеваю пока что, извините. Дел тьма. Но я обязательно скоро возобновлю деятельность. Пока что можете покидать в коменты, какие рубрики или тематики вам больше нравятся Учитесь фронтенду с нами — подпишитесь 💻

JavaScript эволюционирует: новые методы и функции для эффективной разработки Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про: — новый метод группировки элементов массива; — обновление в регулярных выражениях; — обновлённые промисы; — новые методы для мутаций массивов. Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22 #статья #javascript Учитесь фронтенду с нами — подпишитесь 💻

Любите ARIA? Нет, Кипелов тут не причем ARIA (Accessible Rich Internet Applications) — это набор атрибутов, разработанный для того, чтобы улучшить доступность веб-приложений для людей с ограниченными возможностями. Он помогает разработчикам создавать интерфейсы, которые могут быть более легко интерпретированы вспомогательными технологиями, такими как экранные читалки. Это особенно важно для людей с ограниченным зрением или моторикой. Основные атрибуты ARIA: 1. aria-label: используется для предоставления текста этикетки для элемента. <button aria-label="Закрыть">X</button> 2. aria-hidden: указывает, что элемент и его дочерние элементы недоступны для вспомогательных технологий. <div aria-hidden="true">Этот текст будет игнорироваться.</div> 3. aria-live: сообщает экранному чтецу об изменениях в содержимом, которые происходят динамически. <div aria-live="polite">Контент будет прочитан экранным чтецом при изменении.</div> 4. aria-expanded: указывает состояние раскрытия или сворачивания элементов интерфейса (например, аккордеоны, выпадающие списки). <button aria-expanded="false">Меню</button> 5. role: Определяет роль элемента интерфейса, помогая вспомогательным технологиям понять его назначение. <div role="alert">Это важное сообщение!</div> Преимущества использования ARIA: — лучшая доступность: делает ваше приложение доступным для большего круга пользователей; — социальная ответственность: помогает соблюдать стандарты доступности и поддерживать инклюзивность; — улучшение SEO: иногда улучшает видимость вашего контента для поисковых систем. Использование ARIA атрибутов поможет вам создать более доступные и понятные веб-приложения для всех пользователей. Почитать подробнее можно в этой статье: https://doka.guide/a11y/aria-intro/ #урок #html Учитесь фронтенду с нами — подпишитесь 💻

Что должен учить фронтенд-разработчик в 2024 году Полезное видео, которое поможет вам сориентироваться в мире фронтенда, наметить для себя основные вехи и темы обучения. Так как YouTube у многих не работает, мы скачали его для вас. Первоисточник: https://youtu.be/1WRJKgwlX9w #видео #roadmap

Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода: https://nuancesprog.ru/p/21194/ #статья #javascript Учитесь фронтенду с нами — подпишитесь 💻

Ещё немного про use strict в дополнение к этому посту. #викторина #javascript Учитесь фронтенду с нами — подпишитесь 💻

Макет Figma: Decipad — интерактивный блокнот Сложность: средняя Ссылка на макет #figma #макет Учитесь фронтенду с нами — подпишитесь 💻

Выполнение реального заказа на разработку дизайна и вёрстку сайта Теория и практика — разные вещи. Если вам кажется, что вы уже всё знаете и умеете, то на практике часто оказывается не так. Нашли для вас видео, где фрилансер показывает реальное выполнение заказа в режиме реального времени. Смотрите, запоминайте и делайте выводы: https://youtu.be/ofE_sxcIQS4 #видео Учитесь фронтенду с нами — подпишитесь 💻

<div> вместо тысячи слов #кек Учитесь фронтенду с нами — подпишитесь 💻

Сегодня поговорим о спред-операторе (...) в JavaScript Спред-оператор позволяет «разложить» массив или объект на отдельные элементы. Он используется в разных контекстах: при копировании, объединении массивов и объектов, а также при передаче аргументов в функции. Примеры: Копирование массива: const originalArray = [1, 2, 3]; const copyArray = [...originalArray]; console.log(copyArray); // [1, 2, 3] Объединение массивов: const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const combinedArray = [...array1, ...array2]; console.log(combinedArray); // [1, 2, 3, 4, 5, 6] Копирование объекта: const originalObject = { a: 1, b: 2 }; const copyObject = { ...originalObject }; console.log(copyObject); // { a: 1, b: 2 } Объединение объектов: const object1 = { a: 1, b: 2 }; const object2 = { c: 3, d: 4 }; const combinedObject = { ...object1, ...object2 }; console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 } Преимущества: — упрощает операции с массивами и объектами; — делает код более читабельным; — помогает избежать мутаций и побочных эффектов. Теперь, когда вы знаете, как использовать спред-оператор, ваш код станет ещё более элегантным и эффективным! #урок #javascript Учитесь фронтенду с нами — подпишитесь 💻

Ищем шрифты для сайта как настоящие ниндзя Fonts Ninja — это полезный инструмент, который поможет вам подобрать идеальный шрифт для вашего проекта. Он может определять шрифты на сайтах, сохранять их в закладки, а также подсказать, где взять такой шрифт и является ли он платным. Fonts Ninja #инструменты Учитесь фронтенду с нами — подпишитесь 💻

Главное, что видит пользователь #кек

8 советов, которые сделают JavaScript-код чище Если у вас много сложного кода и вы не работаете над его очисткой, вам будет очень сложно его поддерживать. Если вы изначально пишите код, не задумываясь о том, как его поддерживать дальше, вам будет очень сложно. Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем: https://nuancesprog.ru/p/19910/ #статья #javascript Учитесь фронтенду с нами — подпишитесь 💻

Что делает директива "use strict" в JavaScript "use strict" — это способ включить строгий режим в коде JavaScript. Он помогает сделать ваш код более безопасным и чистым, выявляя ошибки, которые в обычном режиме могли бы быть незаметны. Пример: "use strict"; var x = 1; delete x; // Ошибка: нельзя удалить объявленную переменную function test() { y = 2; // Ошибка: "y" не объявлена } test(); Без строгого режима такие ошибки могли бы остаться незамеченными и привести к неожиданным проблемам в коде. Как включить строгий режим: — в начале файла: "use strict"; — в пределах функции: function myFunction() { "use strict"; /* код */ } Использовать строгий режим рекомендуется всегда, чтобы ваш код был безопаснее и поддерживал лучшие практики. #урок #javascript Учитесь фронтенду с нами — подпишитесь 💻

24 CSS-проекта за два с половиной часа В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS. Смотрим тут: https://youtu.be/TzuWIHGFKCQ #видео #css #туториал Учитесь фронтенду с нами — подпишитесь 💻

Макеты Figma: Сайт для доступа к нейросетям Сложность: высокая Ссылка на макет #figma #макет Учитесь фронтенду с нами — подпишитесь 💻