-
Полезные статьи, качественные проекты, интересные задачи и вкиторины для тренировки собственных навыков. Наш чат @frontend_school_chat По всем вопросам @this_is_patrick
Про Notion уже слышали? Наверняка тут многие им пользуются, как и я. 9 сентября карета превратится в тыкву. Я собрал несколько альтернатив и рассказал где есть ещё вот в этом посте. Если кому нужно, залетайте, буду рад.
p.s. контент сюда пилить вообще не успеваю пока что, извините. Дел тьма. Но я обязательно скоро возобновлю деятельность. Пока что можете покидать в коменты, какие рубрики или тематики вам больше нравятся
Учитесь фронтенду с нами — подпишитесь 💻
JavaScript эволюционирует: новые методы и функции для эффективной разработки
Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про:
— новый метод группировки элементов массива;
— обновление в регулярных выражениях;
— обновлённые промисы;
— новые методы для мутаций массивов.
Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻
Что должен учить фронтенд-разработчик в 2024 году
Полезное видео, которое поможет вам сориентироваться в мире фронтенда, наметить для себя основные вехи и темы обучения.
Так как YouTube у многих не работает, мы скачали его для вас. Первоисточник: https://youtu.be/1WRJKgwlX9w
#видео #roadmap
Ещё немного про use strict в дополнение к этому посту.
#викторина #javascript
Учитесь фронтенду с нами — подпишитесь 💻
Выполнение реального заказа на разработку дизайна и вёрстку сайта
Теория и практика — разные вещи. Если вам кажется, что вы уже всё знаете и умеете, то на практике часто оказывается не так. Нашли для вас видео, где фрилансер показывает реальное выполнение заказа в режиме реального времени.
Смотрите, запоминайте и делайте выводы:
https://youtu.be/ofE_sxcIQS4
#видео
Учитесь фронтенду с нами — подпишитесь 💻
Сегодня поговорим о спред-операторе (...) в 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 }
Главное, что видит пользователь
#кек
Что делает директива "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"; /* код */ }
Макеты Figma: Сайт для доступа к нейросетям
Сложность: высокая
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻
Как работает атрибут `autocomplete` в HTML и зачем он нуженautocomplete — это атрибут, который можно применять к элементам форм, таким как <input> или <form>. Он помогает браузеру предлагать пользователю автозаполнение полей формы на основе ранее введённых данных.
Пример:
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" autocomplete="name">
<label for="email">Эл. почта:</label>
<input type="email» id="email» name="email" autocomplete="email">
<input type="submit» value="Отправить">
</form>
autocomplete может быть как on (включено), так и off (выключено), а также иметь более конкретные значения, как в примере выше — name, email.
15 советов по оптимизации сайта для быстрой загрузки
Недавний анализ двадцати ведущих веб-сайтов выявил удивительное количество оптимизаций скорости страницы, которыми сайты не пользуются — в ущерб своим показателям производительности и, что более важно, в ущерб своим пользователям и, в конечном итоге, своему бизнесу.
Если вы уже запустили свой сайт и хотите избежать подобных ошибок, то как максимально оптимизировать сайт рассказали в этой статье:
https://www.speedcurve.com/blog/15-neglected-page-speed-optimizations/
Учитесь фронтенду с нами — подпишитесь 💻
Топ-7 фишек HTML/CSS верстки сайта, которые вы должны знать
Вёрстка сайта на самом деле не такая сложная, как кажется на первый взгляд. В этом видео вы увидите легкие способы сделать паралакс-эфеект на вашей странице, добавить анимации CSS и многое другое, что поможет вам в дальнейшем быстрее верстать и применять в своей работе.
https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu
#видео #html #css
Учитесь фронтенду с нами — подпишитесь 💻
#викторина #css
Учитесь фронтенду с нами — подпишитесь 💻
Что такое JSON.stringify()
Это метод в JavaScript, который позволяет превратить объект или массив в строку формата JSON (JavaScript Object Notation). Это бывает полезно, например, когда нужно передать данные по сети или сохранить их в локальное хранилище.
Пример:const user = {
name: «Alice»,
age: 25,
isStudent: true
};
const jsonString = JSON.stringify(user);
console.log(jsonString); // {"name»:"Alice»,"age»:25,"isStudent»:true}
JSON.parse.
Как реализовать редактор форматированного текста в вашем React-приложении
В этой статье вы научитесь делать простой Wysiwyg-редактор, то есть редактор, текста, который позволит вам и вашим пользователям писать статьи и рассказы так же, как если бы вы это делали в Medium, Google Docs или где-то ещё.
https://nuancesprog.ru/p/14695/
#react #wysiwyg
Учитесь фронтенду с нами — подпишитесь 💻
Небольшая инструкция, как починить роутер или любое другое устройство, если на нём почему-то перестали работать некоторые популярные сайты: https://dear-class-cb2.notion.site/YouTube-OpenVPN-1d15dceb4d1e4fd0ac07b4f867765557
Файл из инструкции прилагаю на всякий случай.
Да не в тему, но я бился с этим 2 дня. Хочу поделиться результатом своих трудов)
Любите ARIA? Нет, Кипелов тут не причем
ARIA (Accessible Rich Internet Applications) — это набор атрибутов, разработанный для того, чтобы улучшить доступность веб-приложений для людей с ограниченными возможностями. Он помогает разработчикам создавать интерфейсы, которые могут быть более легко интерпретированы вспомогательными технологиями, такими как экранные читалки. Это особенно важно для людей с ограниченным зрением или моторикой.
Основные атрибуты ARIA:
1. aria-label: используется для предоставления текста этикетки для элемента.
<button aria-label="Закрыть">X</button>
<div aria-hidden="true">Этот текст будет игнорироваться.</div>
<div aria-live="polite">Контент будет прочитан экранным чтецом при изменении.</div>
<button aria-expanded="false">Меню</button>
<div role="alert">Это важное сообщение!</div>
Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора
Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:
https://nuancesprog.ru/p/21194/
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻
Макет Figma: Decipad — интерактивный блокнот
Сложность: средняя
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻
<div> вместо тысячи слов
#кек
Учитесь фронтенду с нами — подпишитесь 💻
Ищем шрифты для сайта как настоящие ниндзя
Fonts Ninja — это полезный инструмент, который поможет вам подобрать идеальный шрифт для вашего проекта. Он может определять шрифты на сайтах, сохранять их в закладки, а также подсказать, где взять такой шрифт и является ли он платным.
Fonts Ninja
#инструменты
Учитесь фронтенду с нами — подпишитесь 💻
8 советов, которые сделают JavaScript-код чище
Если у вас много сложного кода и вы не работаете над его очисткой, вам будет очень сложно его поддерживать. Если вы изначально пишите код, не задумываясь о том, как его поддерживать дальше, вам будет очень сложно.
Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:
https://nuancesprog.ru/p/19910/
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻
24 CSS-проекта за два с половиной часа
В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.
Смотрим тут:
https://youtu.be/TzuWIHGFKCQ
#видео #css #туториал
Учитесь фронтенду с нами — подпишитесь 💻
Полный курс HTML & CSS за 6 часов
Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили.
Вы также изучите блочную модель CSS, позиционирование элементов на странице, псевдоклассы и псевдоэлементы. Кроме того, вы научитесь работать с flexbox и использовать его для создания гибких и адаптивных макетов.
В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS.
Успейте посмотреть, пока YouTube ещё работает:
https://youtu.be/TPas02fsuKU
#видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe
Учитесь фронтенду с нами — подпишитесь 💻
Regulex — визуализатор регулярных выражений для JavaScript
Если ещё не привыкли работать с регулярными выражениями и не до конца понимаете какой именно результат той или иной регулярки получится, то вам пригодится этот инструмент. Он позволяет наглядно посмотреть и понять даже сложные регулярные выражения, представляя их в легко читаемом графическом формате.
Ссылка на инструмент: https://jex.im/regulex/
#инструмент #javascript #regex
Учитесь фронтенду с нами — подпишитесь 💻
Макет Figma: Сайт по продаже электросамокатов Segway
Сложность: средняя
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻
Поздравим коллегу 😄
#кек
Учитесь фронтенду с нами — подпишитесь 💻
CSS-классы вредны?
Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда?
Сейчас вы узнаете о том, почему настало время отказаться от него:
https://habr.com/ru/companies/ruvds/articles/829926/
#css #статья
Учитесь фронтенду с нами — подпишитесь 💻
Разбираемся в CORS за 6 минут
CORS, также известный как совместное использование ресурсов из разных источников, — это то, с чем в какой-то момент приходится сталкиваться каждому веб-разработчику. Скорее всего, вы уже имело дело с ошибкой CORS или вскоре столкнётесь с ней. В этом видео вы узнаете, что такое CORS и как вы можете исправить ошибки корсов без особых проблем:
https://youtu.be/PNtFSVU-YTI
#видео #cors
Учитесь фронтенду с нами — подпишитесь 💻
#викторина #javascript
Учитесь фронтенду с нами — подпишитесь 💻