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

#кек

Ищем шрифты для сайта как настоящие ниндзя

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

Fonts Ninja

#инструменты

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

Сегодня поговорим о спред-операторе (...) в 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

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

<div> вместо тысячи слов

#кек

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

Выполнение реального заказа на разработку дизайна и вёрстку сайта

Теория и практика — разные вещи. Если вам кажется, что вы уже всё знаете и умеете, то на практике часто оказывается не так. Нашли для вас видео, где фрилансер показывает реальное выполнение заказа в режиме реального времени.

Смотрите, запоминайте и делайте выводы:

https://youtu.be/ofE_sxcIQS4

#видео

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

Макет Figma: Decipad — интерактивный блокнот

Сложность: средняя

Ссылка на макет

#figma #макет

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

Ещё немного про use strict в дополнение к этому посту.

#викторина #javascript

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

Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора

Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:

https://nuancesprog.ru/p/21194/

#статья #javascript

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

Что должен учить фронтенд-разработчик в 2024 году

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

Так как YouTube у многих не работает, мы скачали его для вас. Первоисточник: https://youtu.be/1WRJKgwlX9w

#видео #roadmap

Любите 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

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

JavaScript эволюционирует: новые методы и функции для эффективной разработки

Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про:

— новый метод группировки элементов массива;
— обновление в регулярных выражениях;
— обновлённые промисы;
— новые методы для мутаций массивов.

Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22

#статья #javascript

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

Небольшая инструкция, как починить роутер или любое другое устройство, если на нём почему-то перестали работать некоторые популярные сайты: https://dear-class-cb2.notion.site/YouTube-OpenVPN-1d15dceb4d1e4fd0ac07b4f867765557

Файл из инструкции прилагаю на всякий случай.

Да не в тему, но я бился с этим 2 дня. Хочу поделиться результатом своих трудов)

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

p.s. контент сюда пилить вообще не успеваю пока что, извините. Дел тьма. Но я обязательно скоро возобновлю деятельность. Пока что можете покидать в коменты, какие рубрики или тематики вам больше нравятся

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