Frontend Formula @tg_front Channel on Telegram

Frontend Formula

@tg_front

Канал для frontend-разработчиков. Интересные статьи, юмор, задачи, UI-макеты, обзоры библиотек и инструментов.

Ссылка для друга - https://t.me/+5fsBTtJAZG0yMDZi

По всем вопросам @valentin_mascarov

Frontend Formula (Russian)

Frontend Formula - канал для frontend-разработчиков, которые стремятся улучшить свои навыки и быть в курсе последних трендов в индустрии. Здесь вы найдете интересные статьи, юмор, задачи, UI-макеты, обзоры библиотек и инструментов, которые помогут вам расширить свои знания и навыки в области фронтенд разработки.

Присоединяйтесь к нашему каналу по ссылке: https://t.me/+5fsBTtJAZG0yMDZi и начните свое путешествие в мире frontend-разработки уже сегодня! Если у вас возникли вопросы, не стесняйтесь обращаться к администратору @valentin_mascarov. Поднимите свой уровень и станьте успешным frontend-разработчиком вместе с Frontend Formula!

Frontend Formula

20 Nov, 09:28

Google Loading

Анимированный загрузчик в стиле Google на HTML и SCSS.

https://codepen.io/onlyveen/pen/owQRME
271
Frontend Formula

19 Nov, 18:04

😯 Топ 7 библиотек для управления состоянием в React

В этой статье автор расскажет о наиболее важных библиотеках и о том, на что обращать внимание при принятии решения.

Смотреть статью
413
Frontend Formula

17 Nov, 15:02

#вопросы_с_собеседований
В чем разница между обычной функцией и функциональным выражением?

Вызов notHoistedFunc приведет к ошибке, а вызов hoistedFunc нет, потому что hoistedFunc «всплывает», поднимается в глобальную область видимости, а notHoistedFunc нет.
487
Frontend Formula

16 Nov, 15:45

slowroads

Пора за руль: это гонка с процедурной генерацией пейзажей и сменой дня/ночи прямо в браузере. Работает только на девайсах с клавиатурой.

slowroads.io
539
Frontend Formula

15 Nov, 16:57

Удаление разрядов

При помощи побитового ИЛИ можно удалять из числа разряды, не путаясь с дробной частью.
578
Frontend Formula

15 Nov, 12:07

JavaScript. Напишите функцию squareDigits, которая принимает число и возводит в квадрат каждый символ.

Ответ
548
Frontend Formula

13 Nov, 17:10

JavaScript. Напишите функцию multiplicationTable, которая принимает размер таблицы (size) и возвращает таблицу умножения (то есть матрицу размером sizeХsize).

Ответ
652
Frontend Formula

11 Nov, 16:36

Преобразование в строку

Быстро преобразовать число в строку можно с помощью оператора +, просто сконкатенировав его с пустой строкой. Именно за неявное преобразование типов некоторые разработчики недолюбливают JavaScript, так как приходится устанавливать лишние проверки типа.
727
Frontend Formula

11 Nov, 14:46

🔥Тест по React JS от OTUS🔥

— Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой!

🚀ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS https://clck.ru/3EYG54

Курс доступен в рассрочку.

🎁Пройдете успешно тест, получите доступ к открытым урокам курса.

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
685
Frontend Formula

11 Nov, 11:59

Cubic Clock

Кубические часы, написанные с HTML, SCSS и JavaScript.

https://codepen.io/cobra_winfrey/pen/JjOvxYG
625
Frontend Formula

10 Nov, 20:48

Задача

Реализуйте функцию checkBrackets, которая должна проверять правильность расположения скобок в строке.

Ответ
673
Frontend Formula

07 Nov, 18:04

Прощайте, useState и useEffect: революция в React

Многие разработчики продолжают использовать хуки useState и useEffect для обновления состояний. Проблема заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению. В результате при записи в консоль результат может быть повторен три раза.

https://telegra.ph/5-rekomendacij-po-optimizacii-zaprosov-SQL-11-17
877
Frontend Formula

07 Nov, 15:14

🚀 Вебинар: Погружение в децентрализованные технологии🚀

Узнайте, как использовать Solidity для создания продвинутых dApp. Этот вебинар важен для понимания текущего состояния и потенциала Web3, что критично для разработчиков в освоении Solidity и создании продвинутых dApp.

⏰ Дата и время: 11.11.2024 в 20:00 (мск)

На уроке будет:
- Обсуждение базовых технологий, включая блокчейн и смарт-контракты
- Представление и анализ нескольких децентрализованных приложений
- Рассмотрение успешных кейсов использования Solidity
- Обсуждение безопасности
- Прогнозы и перспективы развития децентрализованных технологий

В результате участники получат актуальные знания о применении Solidity в разработке современных dApp.

Не упустите возможность узнать больше о dApp и их потенциале!

👉 Зарегистрируйтесь для участия: https://clck.ru/3ETpPr

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
811
Frontend Formula

07 Nov, 09:30

Wavy Color Cube

Куб с анимацией переливающихся цветов в каждой из его сторон. Анимация реализована на чистом CSS.

https://codepen.io/hexagoncircle/pen/MWwjpYY
732
Frontend Formula

06 Nov, 08:38

SVG & GSAP Morphing

Рейтинг, созданный из svg-картинки, анимируемой библиотекой GSAP.

https://codepen.io/ksenia-k/pen/JjjyBoL
779
Frontend Formula

04 Nov, 09:39

Что произойдет, если вы не используете параметр rest в качестве последнего аргумента?

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

Пример: если вы определите функцию, как показано на картинке, это не будет иметь никакого смысла и вызовет SyntaxError.
840
Frontend Formula

01 Nov, 12:19

JavaScript. Свойства объекта

Вы можете получить доступ к свойствам объекта с помощью [] вместо '.'. Это позволяет найти свойство, которое соответствует переменной.

Также это можно использовать для получения или установки значения свойства, если его название - неразрешенный идентификатор.

Некоторые люди не знают этого и заканчивают это использованием eval(), что по-настоящему плохая идея. Так код сложнее читать, сложнее находить ошибки (невозможно использование jslint), он медленнее выполняется и может привести к XSS.
900
Frontend Formula

31 Oct, 18:49

JavaScript. Что будет выведено в консоль?

Ответ
945
Frontend Formula

28 Oct, 18:40

5 вещей, которые чаще всего не понимают новички в JavaScript

Смотреть статью
1,105
Frontend Formula

28 Oct, 15:14

Введение в смарт-контракты и пример создания своего токена
Бесплатный вебинар для погружения в смарт-контракты и написание на языке Solidity

Время и дата проведения: 31.10.2024 в 20:00

Особенности вебинара:
- Общая информация про блокчейн, смарт-контракты
- Введение в смарт-контракты
- Практическая часть - написание своего токена

Спикер:
Александр Куперман, Senior Solidity Engineer (Швейцария). Программирует более 20 лет, специалист по Solidity, блокчейн стеку. Работал в Blue Brain Project, Cleverdist, Huawei, Valory. Образование: НГТУ (Россия), UOU (Корея), RPI (США).

Этот вебинар — часть курса Solidity Developer. В рамках курса вы получите знания и сможете применять их на практике под руководством опытных преподавателей.

👉 Для участия в вебинаре зарегистрируйтесь на сайте: https://clck.ru/3EFbwJ

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
854
Frontend Formula

28 Oct, 13:45

Matrix

Анимация с кодом из фильма «Матрица», реализованная с помощью JavaScript. Можно выбрать свой цвет кода и количество кадров в секунду, а также алфавит символов.

https://codepen.io/pavi2410/pen/oNjGVgM
739
Frontend Formula

27 Oct, 15:03

#вопросы_с_собеседований
Какие есть приёмы работы с асинхронным кодом в JS?

✔️ Async/await
✔️ Функции обратного вызова (Callbacks)
✔️ Промисы
✔️ Библиотеки вроде async.js, blueprint, q и др.
778
Frontend Formula

26 Oct, 17:26

Задача

Напишите функцию sumTo(n), которая будет вычислять сумму чисел 1 + 2 + ... + n.

Ответ
882
Frontend Formula

23 Oct, 09:15

JavaScript. Что будет выведено в консоль?

Ответ
1,014
Frontend Formula

22 Oct, 17:37

nodebestpractices ⭐️88k

Этот репозиторий представляет собой сводку и подборку наиболее популярного контента по лучшим практикам Node.js. У него самый большой сборник, и он растет каждую неделю. В настоящее время представлено более 80 лучших практик, руководств по стилю и советов по архитектуре.

https://github.com/goldbergyoni/nodebestpractices
966
Frontend Formula

22 Oct, 14:55

Как создать свой Telegram-бот и начать зарабатывать уже сегодня?

Научим делать самые полезные и прибыльные боты на нашем бесплатном онлайн-практикуме и расскажем про то, как обучиться профессии промт-инженера с доходом 500.000 руб.

По итогам эфира вы узнаете:
— Как написать код для создания ботов;
— Кто такой промт-инженер и чем он занимается;
— Кому в действительности нужны его услуги и сколько за это платят;
— Кто может стать промт-инженером и какой порог входа;

Кликай на ссылку и забирай подробную информацию вместе с классными бонусами.

erid: LjN8K1kow
ООО Зерокодер, ИНН 9715401631
791
Frontend Formula

22 Oct, 08:46

Как JavaScript обрабатывает асинхронные операции и какие паттерны используются для управления асинхронным кодом, учитывая его однопоточную природу?

JavaScript обрабатывает асинхронные операции с помощью событийного цикла (event loop) и механизмов, таких как колбэки (callbacks), промисы (promises) и асинхронные функции (async/await). Эти механизмы позволяют управлять асинхронными операциями, такими как запросы к серверу или задержки времени, без блокировки основного потока выполнения. Callbacks предоставляют способ выполнения кода после завершения асинхронной операции, но могут привести к проблеме "callback hell" из-за сложности управления. Promises предлагают более удобный и читаемый способ работы с асинхронностью, позволяя "обещать" выполнение операции в будущем. Async/await упрощает работу с промисами, позволяя писать асинхронный код, который выглядит как синхронный, улучшая читаемость и поддержку кода.
682
Frontend Formula

21 Oct, 17:43

Pure CSS | FadeIn Text with bars | KeyFrames & Scss

Исчезающий текст с полосами. Написан на чистом CSS.

https://codepen.io/KaioRocha/pen/YoEVvZ
733
Frontend Formula

21 Oct, 09:15

Прощай, плохой код: вот как не лажать в JavaScript

На JavaScript легко писать работающие решения, но легко и совершать ошибки. Рассказываем и показываем, как стать лучше в JavaScript.

Смотреть статью
799
Frontend Formula

18 Oct, 08:31

Signup Form 3D FLIP Animation

3D-анимация формы регистрации, реализованная с помощью CSS и JavaScript.

https://codepen.io/team/keyframers/pen/LYRXGxO
922
Frontend Formula

14 Oct, 15:07

Infinitely drawing icons

Вся сцена - это svg картинка, анимируемая библиотекой anime.js

https://codepen.io/ainalem/pen/dKjgBx
841
Frontend Formula

12 Oct, 17:21

Как узнать размер окна с помощью чистого CSS

Теперь в CSS можно не только задавать стили, но и выполнять расчёты и даже узнавать размер окна! В этой статье расскажем, как это работает.

Смотреть статью
926
Frontend Formula

10 Oct, 18:19

Hover Effect

Оригинальный эффект при наведении на карточку, созданный на чистом CSS.

https://codepen.io/Hyperplexed/details/poQmrEq
728
Frontend Formula

10 Oct, 15:37

Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS?

➡️Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем:

✔️архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность;
✔️как создавать маршруты, контроллеры и использовать middleware;
✔️как работать с базами данных, включая MongoDB, PostgreSQL и MySQL;
✔️методы тестирования и отладки приложений Nest.Js.

Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.

Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://clck.ru/3DqY3X

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
784
Frontend Formula

10 Oct, 12:35

Interactive 3D die

Вращение трехмерных игральных костей согласно вводу пользователя, реализованное на чистом CSS.

https://codepen.io/HunorMarton/pen/mdERrLy
714
Frontend Formula

09 Oct, 18:16

Navigation PageDesign

Вёрстка создана на Pug и CSS. Логика переключения табов реализована в JS.

🌐Ссылка на код
790
Frontend Formula

09 Oct, 14:59

⚡️ Вся база знаний по IT в одном месте!

🧑‍💻 IT База — краткие разборы самого важного из мира IT. Сотни мастхев-ресурсов, каждый день новые материалы по работе и подготовке к собеседованиям. Подойдёт как новичкам, так и состоявшимся айтишникам;

🖥 Frontend База — всё для фронтенд разработчиков. Готовые решения для проектов, полезные курсы по JS/HTML/CSS, готовые роадмапы для комфортного освоения в профессии и дальнейшего развития;

👣 Backend База — самое важное для бэкендеров. Всё о работе с PHP, MySQL, MongoDB, Golang и Rust в одном месте, плюс полные курсы и лайфхаки для работы на каждый день;

🖥 База Знаний — склад полезных курсов и материалов, где легко найти что-то нужное по хэштегам. Если вам что-то интересно про IT, то оно уже лежит на Базе, проверяйте.

⏲ Успей подписаться, чтобы не потерять!
631
Frontend Formula

09 Oct, 10:55

Что нового в React 19

Смотреть статью
760
Frontend Formula

07 Oct, 18:23

Объясните разницу между const person = Person() и const person = new Person() при function Person(){}

Если функция Person() не возвращает явным образом создаваемый экземпляр, то вариант const person = Person() присвоит константе person значение undefined, поскольку именно таков результат void функции.

Если функция Person явным образом возвращает экземпляр, он станет значением константы person при const person = Person().

Однако, вариант с использование оператора new "выигрывает", поскольку он устанавливает корректную связь объекта person с цепочкой прототипов Person, в то время как выражение const person = Person() просто присваивает константе результат вызова функции.
825
Frontend Formula

04 Oct, 14:33

Генераторы

Не стоит забывать про них и недооценивать их возможности. Генератор позволяет определить, какое значение будет возвращено при каждом следующем вызове next().

В целом использовать их в разработке необязательно, полезно лишь знать, как они работают, потому что они активно используются в async/await и могут пригодиться для отладки кода.
986
Frontend Formula

03 Oct, 12:12

Magnify Glass w/ Zoom

Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.

https://codepen.io/kitjenson/pen/ExLRrgw
896
Frontend Formula

03 Oct, 06:10

3D glass weather icons

Иконки, сверстанные на HTML и SCSS.

https://codepen.io/onediv/pen/MWQKgmv
856
Frontend Formula

02 Oct, 11:28

#вопросы_с_собеседований
Что произойдет в результате выполнения выражения var a = 1 + "2" и почему?

Переменная a примет значение "12". В JS такое поведение называется приведением типов. Если хоть один из операндов в операторе + является строкой, второй также будет преобразован в строку.
876
Frontend Formula

30 Sep, 17:36

#вопросы_с_собеседований
Является ли использование унарного плюса (оператор "+") самым быстрым способом преобразования строки в число?

Согласно MDN оператор "+" действительно является самым быстрым способом преобразования строки в число, поскольку он не выполняет никаких операций со значением, которое является числом.
898
Frontend Formula

30 Sep, 08:47

Задача

Напишите функцию persistence, которая принимает положительный параметр num и возвращает его мультипликативную величину (сколько раз нужно перемножить цифры num, пока не получите одну цифру).

Пример:
39 --> 3
(3*9 = 27, 2*7 = 14, 1*4 = 4 .
4 состоит из одной цифры. Чтобы дойти до четвёрки, мы сделали 3 итерации. )

Ответ
902
Frontend Formula

28 Sep, 18:45

Замораживание объектов в JS

Давайте познакомимся с рядовым, но не слишком часто используемым методом для объектов в JS - .freeze()

.freeze() предотвращает добавление свойств к объекту, удаление старых свойств из объекта и изменение существующих, что довольно полезно в современной парадигме ООП.

Пример кода:
const obj = {foo: 'bar'};

Перед замораживанием: можно добавить, изменить или удалить свойства
obj.lumpy = 'woof';
delete obj.foo;

Замораживаем
Object.freeze(obj);

Так можно проверить
Object.isFrozen(obj); // === true

Теперь никакие изменения не произойдут
obj.foo = 'quux';
806
Frontend Formula

28 Sep, 14:42

JavaScript. Что будет выведено в консоль?

Ответ
743
Frontend Formula

27 Sep, 19:19

7 продвинутых приёмов JavaScript, которые должен знать каждый разработчик

Смотреть статью
806

2024 All Right Reserved

Disclaimer: The content displayed on this website is solely provided by the respective Telegram channels. We hold no ownership or responsibility for the content shared by these channels.