Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
Open in Telegram
Крутым фронтендером не рождаются — им становятся на канале @frontend_school! Наш чат: @frontend_school_chat Наша флудилка: @frontend_school_flud Другие проекты: t.me/addlist/dIq-3zEMMugwZTgy Мы в VK: vk.com/frontend_school Связь: @jellyjail
Show more1 194
Subscribers
No data24 hours
-47 days
-2230 days
Data loading in progress...
Similar Channels
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
Tags Cloud
No data
Any problems? Please refresh the page or contact our support manager.
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
December '24
December '24
+3
in 0 channels
November '24
+3
in 0 channels
Get PRO
October '24
+13
in 0 channels
Get PRO
September '24
+9
in 0 channels
Get PRO
August '24
+16
in 0 channels
Get PRO
July '24
+315
in 14 channels
Get PRO
June '240
in 0 channels
Get PRO
May '240
in 0 channels
Get PRO
April '240
in 0 channels
Get PRO
March '240
in 0 channels
Get PRO
February '240
in 0 channels
Get PRO
January '240
in 0 channels
Get PRO
December '230
in 0 channels
Get PRO
November '230
in 0 channels
Get PRO
October '230
in 0 channels
Get PRO
September '230
in 0 channels
Get PRO
August '230
in 0 channels
Get PRO
July '230
in 0 channels
Get PRO
June '230
in 0 channels
Get PRO
May '230
in 0 channels
Get PRO
April '230
in 0 channels
Get PRO
March '230
in 0 channels
Get PRO
February '230
in 0 channels
Get PRO
January '230
in 0 channels
Get PRO
December '220
in 0 channels
Get PRO
November '22
+1
in 0 channels
Get PRO
October '220
in 0 channels
Get PRO
September '22
+22
in 0 channels
Get PRO
August '22
+21
in 0 channels
Get PRO
July '22
+25
in 0 channels
Get PRO
June '22
+41
in 0 channels
Get PRO
May '22
+32
in 0 channels
Get PRO
April '22
+7
in 0 channels
Get PRO
March '220
in 0 channels
Get PRO
February '220
in 0 channels
Get PRO
January '220
in 0 channels
Get PRO
December '210
in 0 channels
Get PRO
November '21
+14
in 0 channels
Get PRO
October '21
+18
in 0 channels
Get PRO
September '21
+35
in 0 channels
Get PRO
August '21
+33
in 0 channels
Get PRO
July '21
+48
in 0 channels
Get PRO
June '21
+38
in 0 channels
Get PRO
May '21
+36
in 0 channels
Get PRO
April '21
+218
in 0 channels
Get PRO
March '21
+66
in 0 channels
Get PRO
February '21
+61
in 0 channels
Get PRO
January '21
+82
in 0 channels
Get PRO
December '20
+1 205
in 0 channels
| Date | Subscriber Growth | Mentions | Channels | |
| 20 December | 0 | |||
| 19 December | 0 | |||
| 18 December | 0 | |||
| 17 December | +2 | |||
| 16 December | 0 | |||
| 15 December | 0 | |||
| 14 December | 0 | |||
| 13 December | 0 | |||
| 12 December | 0 | |||
| 11 December | 0 | |||
| 10 December | 0 | |||
| 09 December | 0 | |||
| 08 December | +1 | |||
| 07 December | 0 | |||
| 06 December | 0 | |||
| 05 December | 0 | |||
| 04 December | 0 | |||
| 03 December | 0 | |||
| 02 December | 0 |
Channel Posts
Про Notion уже слышали? Наверняка тут многие им пользуются, как и я. 9 сентября карета превратится в тыкву. Я собрал несколько альтернатив и рассказал где есть ещё вот в этом посте. Если кому нужно, залетайте, буду рад.
p.s. контент сюда пилить вообще не успеваю пока что, извините. Дел тьма. Но я обязательно скоро возобновлю деятельность. Пока что можете покидать в коменты, какие рубрики или тематики вам больше нравятся
Учитесь фронтенду с нами — подпишитесь 💻
| 2 | Небольшая инструкция, как починить роутер или любое другое устройство, если на нём почему-то перестали работать некоторые популярные сайты: https://dear-class-cb2.notion.site/YouTube-OpenVPN-1d15dceb4d1e4fd0ac07b4f867765557
Файл из инструкции прилагаю на всякий случай.
Да не в тему, но я бился с этим 2 дня. Хочу поделиться результатом своих трудов) | 432 |
| 3 | Небольшая инструкция, как починить роутер или любое другое устройство, если на нём почему-то перестали работать некоторые сайты: https://dear-class-cb2.notion.site/YouTube-OpenVPN-1d15dceb4d1e4fd0ac07b4f867765557 | 4 |
| 4 | Немного не в тему канала, но хочу поделиться с вами инструкцией, как настроить свой VPN-сервер за 1$ в месяц, который позволит вам пользоваться в том числе и YouTube на всех ваших устройствах.
Инструкция позволит пользоваться VPN только на нужных сайтах, игнорируя другие, а также настроить роутер, чтобы все устройства без специальных настроек работали, как надо.
Ссылку на инструкцию я оставляю тут: https://pikabu.ru/story/chinim_youtube_na_urovne_routera_11709314
А во вложении оставлю файл, который упоминается в инструкции, если вдруг вы не смогли его скачать по ссылке | 8 |
| 5 |  JavaScript эволюционирует: новые методы и функции для эффективной разработки
Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про:
— новый метод группировки элементов массива;
— обновление в регулярных выражениях;
— обновлённые промисы;
— новые методы для мутаций массивов.
Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22
#статья #javascript | 450 |
| 6 | Любите 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
Учитесь фронтенду с нами — подпишитесь 💻 | 347 |
| 7 | Что должен учить фронтенд-разработчик в 2024 году
Полезное видео, которое поможет вам сориентироваться в мире фронтенда, наметить для себя основные вехи и темы обучения.
Так как YouTube у многих не работает, мы скачали его для вас. Первоисточник: https://youtu.be/1WRJKgwlX9w
#видео #roadmap | 276 |
| 8 |  Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора
Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:
https://nuancesprog.ru/p/21194/
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻 | 279 |
| 9 | Какое из следующих утверждений о строгом режиме ("use strict") в JavaScript является неверным? | 266 |
| 10 |  Ещё немного про use strict в дополнение к этому посту.
#викторина #javascript
Учитесь фронтенду с нами — подпишитесь 💻 | 281 |
| 11 |  Макет Figma: Decipad — интерактивный блокнот
Сложность: средняя
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻 | 316 |
| 12 | Выполнение реального заказа на разработку дизайна и вёрстку сайта
Теория и практика — разные вещи. Если вам кажется, что вы уже всё знаете и умеете, то на практике часто оказывается не так. Нашли для вас видео, где фрилансер показывает реальное выполнение заказа в режиме реального времени.
Смотрите, запоминайте и делайте выводы:
https://youtu.be/ofE_sxcIQS4
#видео
Учитесь фронтенду с нами — подпишитесь 💻 | 301 |
| 13 |  <div> вместо тысячи слов
#кек
Учитесь фронтенду с нами — подпишитесь 💻 | 274 |
| 14 | Сегодня поговорим о спред-операторе (...) в 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
Учитесь фронтенду с нами — подпишитесь 💻 | 272 |
| 15 | Ищем шрифты для сайта как настоящие ниндзя
Fonts Ninja — это полезный инструмент, который поможет вам подобрать идеальный шрифт для вашего проекта. Он может определять шрифты на сайтах, сохранять их в закладки, а также подсказать, где взять такой шрифт и является ли он платным.
Fonts Ninja
#инструменты
Учитесь фронтенду с нами — подпишитесь 💻 | 309 |
| 16 |  Главное, что видит пользователь
#кек | 507 |
| 17 |  8 советов, которые сделают JavaScript-код чище
Если у вас много сложного кода и вы не работаете над его очисткой, вам будет очень сложно его поддерживать. Если вы изначально пишите код, не задумываясь о том, как его поддерживать дальше, вам будет очень сложно.
Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:
https://nuancesprog.ru/p/19910/
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻 | 406 |
| 18 |  Что делает директива "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
Учитесь фронтенду с нами — подпишитесь 💻 | 355 |
| 19 | 24 CSS-проекта за два с половиной часа
В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.
Смотрим тут:
https://youtu.be/TzuWIHGFKCQ
#видео #css #туториал
Учитесь фронтенду с нами — подпишитесь 💻 | 357 |
| 20 |  Макеты Figma: Сайт для доступа к нейросетям
Сложность: высокая
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻 | 332 |
