Frontend Formula @tg_front Channel on Telegram

Frontend Formula

13 Feb, 20:04

Сглаживание (объединение) многомерных массивов

Сглаживание массивов можно реализовать просто с оператором Spread (пример 1 на картинке).

К сожалению, вышеупомянутый трюк будет работать только с двумерными массивами. Но с рекурсивными вызовами мы можем сделать его пригодным для массивов с более чем двумя измерениями (пример 2).

Но эти способы перестали быть актуальны с выходом ES2019. В нем появилась функция Array.flat(n), принимающая на вход глубину объединения массива (пример 3).

246

Frontend Formula

11 Feb, 17:43

#вопросы_с_собеседований
Напишите "однострочное" решение, вычисляющее сумму квадратных корней всех чётных чисел массива из целых чисел.

Метод reduceRight() применяет функцию к аккумулятору и каждому значению массива справа налево, сводя массив в одно значение.

377

Frontend Formula

09 Feb, 19:45

Bun

Относительно новый JS рантаймер со встроенным бандлером, транспилятором, таск-раннером, NPM-клиентом и даже SQLite3-клиентом: сфокусирован на скорости, поддерживает TypeScript и JSX из коробки, реализует модули из ядра Node.js для совместимости.

🌐Ссылка на источник

536

Frontend Formula

07 Feb, 12:20

#Вопросы_с_собеседования
Как можно создать приватные переменные в JavaScript, используя функции?

В JavaScript приватные переменные в объектах или классах можно создать, используя замыкания. Это достигается путём определения переменных внутри конструктора функции или фабричной функции, делая их недоступными напрямую извне.

В этом примере, переменная count является приватной для объекта counter. Она доступна только через методы increment и getCount, определённые внутри createCounter, и не может быть изменена напрямую извне. Это один из способов инкапсуляции данных в JavaScript.

602

Frontend Formula

05 Feb, 19:26

Задача

Дана закодированная строка, необходимо вернуть декодированную строку.

Правило кодирования: k [закодированная_строка], где закодированная_строка в квадратных скобках повторяется ровно k раз. k - строго положительное число.

Входные данные: входная строка валидна (нет лишних пробелов, правильные квадратные скобки). Полностью раскодированная строка не содержит цифр.

Ответ

633

Frontend Formula

03 Feb, 17:23

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

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

587

Frontend Formula

03 Feb, 12:03

🔥 Самые нужные каналы для Frontend разработчика, чтобы расти в доходе 💸

• Frontend | Вопросы собесов
• Frontend | Вакансии с удаленкой
• Frontend | LeetCode
• Frontend | Тесты

Подпишись, чтобы не потерять ☝️

266

Frontend Formula

03 Feb, 08:46

Какова цель метода clearInterval?

Функция clearInterval() используется в javascript для очистки интервала, установленного функцией setInterval(). т. е. возвращаемое значение, возвращаемое функцией setInterval(), сохраняется в переменной и передается в функцию clearInterval() для очистки интервала. Например, приведенный на картинке метод setInterval используется для отображения сообщения каждые 3 секунды. Этот интервал можно очистить методом clearInterval().

583

Frontend Formula

02 Feb, 19:33

Color Palette

Палитра с оттенками цветов. Полноценно работает с компьютера. Логика переключения между оттенками написана на JavaScript.

https://codepen.io/onlyveen/pen/rwvKqb

638

Frontend Formula

31 Jan, 11:13

#вопросы_с_собеседований
Нарисовать стилями полукруг.

Ответ:

height: 100px;
width: 100px;
border-right: 1px solid #f00;
border-radius: 0 50% 50% 0;

670

Frontend Formula

28 Jan, 17:27

Toaster

Создано на HTML и SCSS.

https://codepen.io/klaufel/pen/OJQBpVQ

786

Frontend Formula

28 Jan, 13:08

🧠 Поиск наибольшего контейнера с водой

Это задача с Frontend-собеседования, условия которой — имея высоты линий, выделить две чтобы получить самый большой контейнер.

Автор рассказывает как максимально эффективно решить задачу на языке программирования JavaScript.

https://www.youtube.com/watch?v=GoQFtH5MXLE

788

Frontend Formula

25 Jan, 19:56

JavaScript. Что выведет alert (ИЛИ)?

Ответ: 2. Это первое значение, которое в логическом контексте даст true.

777

Frontend Formula

23 Jan, 20:51

Система запросов от Figma

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

🌐Ссылка на источник

928

Frontend Formula

21 Jan, 08:21

JavaScript. BOM (Browser Object Model)

Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, предоставляемые браузером (окружением), чтобы работать со всем, кроме документа.

Например:
- Объект navigator даёт информацию о самом браузере и операционной системе. Среди множества его свойств самыми известными являются: navigator.userAgent – информация о текущем браузере, и navigator.platform – информация о платформе (может помочь в понимании того, в какой ОС открыт браузер – Windows/Linux/Mac и так далее).
- Объект location позволяет получить текущий URL и перенаправить браузер по новому адресу.

Пример как мы можем использовать объект location показан на рисунке.

Функции alert/confirm/prompt тоже являются частью BOM: они не относятся непосредственно к странице, но представляют собой методы объекта окна браузера для коммуникации с пользователем.

934

Frontend Formula

19 Jan, 18:06

Steam inspired game card hover effect

Эффект блика в стиле Steam при наведении на игровую карточку, реализованный на чистом CSS.

https://codepen.io/andrewhawkes/pen/RwwOJrO

871

Frontend Formula

17 Jan, 18:55

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

Ответ

962

Frontend Formula

14 Jan, 14:48

React + Three.js. Создаём собственный 3D шутер. Часть 1

React Three Fiber - это обёртка над Three.js, которая использует структуру и принципы React для создания 3D-графики в вебе.

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

1,246

Frontend Formula

13 Jan, 18:21

Проверка наличия обязательных параметров функций

JavaScript позволяет задавать значение по умолчанию для параметров функции. Используя эту возможность, мы можем реализовать интересный способ проверки наличия обязательных параметров при вызове функций и методов:

const isRequired = () => { 
   throw new Error('param is required'); 
};

const print = (num = isRequired()) => {
   console.log(`printing ${num}`)
}

print(2);//printing 2
print()// error

Теперь при отсутствии параметра у нас выводится ошибка, которую можно кастомизировать, как нам удобно.

1,048

Frontend Formula

13 Jan, 14:56

LeetCode теперь в Telegram!

LeetCode — это сайт, который позволяет быстро готовиться к техническим собеседованиям по программированию. Там публикуются задачи с собеседований в Google и Microsoft с решениями.

Подписывайтесь: @leetcode

848

Frontend Formula

13 Jan, 12:17

JavaScript. Напишите функцию pow(x, n), которая возвращает x в степени n (то есть умножает x на себя n раз и возвращает результат). Создайте страницу, которая запрашивает x и n, а затем выводит результат pow(x, n).

P.S. В этой задаче функция обязана поддерживать только натуральные значения n, т.е. целые числа от 1 и выше.

Ответ

825

Frontend Formula

11 Jan, 14:12

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

Ответ: Infinity. Деление на 0 возвращает Infinity.

791

Frontend Formula

10 Jan, 17:55

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

Ответ: 4. Потому что массивы – это объекты. Обе переменные, shoppingCart и fruits, являются ссылками на один и тот же массив.

821

Frontend Formula

10 Jan, 11:33

Друзья, на связи ваш админ.
Я тут сделал бота для знакомств @tinder. Буду рад, если вы оцените и воспользуетесь. Если буду какие-то замечания, пишите, буду благодарен)

880

Frontend Formula

08 Jan, 18:11

🔊 Модель искусственного интеллекта для генерации музыки, запускаемая в браузере с помощью JavaScript. Без API!

Запоминающийся металкор начала 2000-х, брейкдауны, пыхтящие гитарные риффы, мощные ударные, вы легко можете создать любой трек!

https://huggingface.co/spaces/Xenova/musicgen-web

957

Frontend Formula

07 Jan, 11:17

Manufactured

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

https://codepen.io/saifkeralite/pen/RwMJgVd

753

Frontend Formula

07 Jan, 08:40

⚡️

В сети начали массово сливать курсы и книги известных онлайн школ

Вот отсортированная база с тонной материала(постепенно пополняется):

БАЗА (4687 видео/книг):

(363 видео, 87 книги) — Python
(415 видео, 68 книги) — Frontend
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++
(343 видео, 87 книги) — Java
(176 видео, 32 книги) — Git
(293 видео, 63 книги) — C#
(174 видео, 91 книги) — DevOps
(167 видео, 53 книги) — PHP
(227 видео, 83 книги) — SQL/БД
(163 видео, 29 книги) — Linux
(107 видео, 43 книги) — СисАналз
(181 видео, 32 книги) — Go
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(137 видео, 93 книги) — DS/ML
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — UI/UX
(129 видео, 73 книги) — QA
(213 видео, 63 книги) — Rust
(121 видео, 24 книги) — Ruby

Скачивать ничего не нужно — все выложили в Telegram

749

Frontend Formula

07 Jan, 06:40

🖥

Planck.js

Planck.js – небольшой физический 2D движок на JavaScript, что отлично подойдет для написания HTML5-игр. Интересный для ознакомления проект.

🖥

Github
✔️ Документация

630

Frontend Formula

06 Jan, 16:33

#вопросы_с_собеседований
Что такое Cross-Origin Resource Sharing (CORS)?

Cross-Origin Resource Sharing (CORS) — механизм, использующий дополнительные HTTP-заголовки, чтобы дать возможность агенту пользователя получать разрешения на доступ к выбранным ресурсам с сервера на источнике (домене), отличном от того, что сайт использует в данный момент. Говорят, что агент пользователя делает запрос с другого источника (cross-origin HTTP request), если источник текущего документа отличается от запрашиваемого ресурса доменом, протоколом или портом.

В целях безопасности браузеры ограничивают cross-origin запросы, инициируемые скриптами. Например, XMLHttpRequest и Fetch API следуют политике одного источника (same-origin policy). Это значит, что web-приложения, использующие такие API, могут запрашивать HTTP-ресурсы только с того домена, с которого были загружены, пока не будут использованы CORS-заголовки.

718

Frontend Formula

05 Jan, 19:10

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

Ответ

731

Frontend Formula

31 Dec, 14:48

Любимые подписчики, поздравляю вас с наступающим новым годом! Пусть в 2025 году исполнятся все ваши самые заветные желания🎄

🎄

1,060

Frontend Formula

30 Dec, 19:59

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

Ответ

1,023

Frontend Formula

27 Dec, 18:01

Dynamic CSS

Динамическое изменение цвета анимированных элементов при перемещении курсора мыши.

https://codepen.io/sandrina-p/pen/axVeGg

1,131

Frontend Formula

25 Dec, 18:09

Hole

Анимированная сцена, сделанная с помощью библиотеки Three.js.

https://codepen.io/strangerintheq/pen/BaZeRWm

1,078

Frontend Formula

25 Dec, 14:36

⚡️Слита База из 1000+ топовых IT-курсов

👩‍💻 Все языки: @main_it_baza

🖥

Python: @python_baza

👩‍💻 Frontend: @frontend_baza

👩‍💻

Backend: @backend_baza

🎨

Дизайн: @design_baza

📊

Архив: @archive_baza

Всё лучшее про IT бесплатно — уже на Базе 🚀

892

Frontend Formula

25 Dec, 13:47

Get Color Palette

Генерация заднего фона на основе используемых цветов, реализованная с помощью Pug, Stylus и JavaScript.

https://codepen.io/toshiya-marukubo/pen/XWVWmav

736

Frontend Formula

24 Dec, 18:21

Не самые известные, но полезные методы для работы со строками в JavaScript

769

Frontend Formula

22 Dec, 20:34

Spirited Away Bathhouse

3D-карточка, выполненная с помощью Haml и SCSS, без использования JavaScript.

https://codepen.io/cobra_winfrey/pen/GRMdwwG

801

Frontend Formula

20 Dec, 20:07

Лучшие бесплатные и open source библиотеки JavaScript для работы с таблицами

Обзор JavaScript-плагинов и библиотек, облегчающих работу с HTML-таблицами. С их помощью вы сможете сделать свои таблицы более полезными и впечатляющими.

https://code.tutsplus.com/articles/best-free-and-open-source-javascript-table-libraries--cms-38436

861

Frontend Formula

18 Dec, 19:24

💡

Tip: использовать тригонометрические функции в CSS для создания плавной ступенчатой задержки переходов


.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

923

Frontend Formula

17 Dec, 11:18

💡

Легкий способ получения доступа к любому значению атрибута в виде строки с помощью CSS: на заметку фронтендеру

✍🏻 Поиграть можно здесь

855

Frontend Formula

15 Dec, 17:17

Marquee

Бегущая строка, выполненная с помощью SCSS, без использования JavaScript

https://codepen.io/mxbck/pen/NWyaPve

921

Frontend Formula

12 Dec, 15:16

Какие существуют способы доступа к свойствам объекта?

Существует три возможных способа доступа к свойствам объекта.
1. Через точку

objectName.property

2. Через квадратные скобки

objectName["property"]

3. Через выражение в квадратных скобках

objectName[expression]

1,009

Frontend Formula

12 Dec, 10:13

Movie App

Концепция сайта — библиотеки фильмов, реализованная на Vue.js.

https://codepen.io/rodleviton/pen/jOaXzje

950

Frontend Formula

11 Dec, 11:22

Метод trim

Метод обрезает пробелы с обоих концов строки.

967

Frontend Formula

10 Dec, 08:08

#вопросы_с_собеседований
Какие бывают человеческие ошибки в javascript?

В javascript есть два типа ошибок.
Syntax error. Это ошибки или опечатки в коде, из-за которых программа вообще не выполняется или останавливается на полпути. Обычно появляются сообщения об этих ошибках.

Логическая ошибка. Они возникают, когда синтаксис правильный, но логика или программа неверны. В этом случае приложение выполняется без проблем, однако выводы программы не соответствуют ожиданиям. Такие ошибки сложнее исправить, чем синтаксические, поскольку приложения не отображают сообщения для логических ошибок.

944

Frontend Formula

07 Dec, 16:40

Face Grid Track

Сетка с отслеживанием положения курсора, выполненная с помощью Pug, SCSS и JavaScript.

https://codepen.io/ryankbrown/pen/QWQxQeB

957

Frontend Formula

05 Dec, 19:24

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

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

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

1,021

Frontend Formula

02 Dec, 14:52

#вопросы_с_собеседований
Для чего нужны data-атрибуты?

Перед тем, как фреймворки JS стали популярны, фронтендеры использовали data-атрибуты, чтобы хранить некоторые данные прямо в DOM без ухищрений вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты данного семейства были нужны для хранения данных пользователя, для которых не существует более подходящих атрибутов или элементов.

На сегодняшний день использование data-атрибутов не поощряется. Одной из причин является то, что пользователь может изменить данные в атрибуте просто при помощи инспектора кода в браузере. Данные нужно хранить в самом JavaScript и обновлять DOM при помощи связывания данных через ваш фреймворк.

1,158

Frontend Formula

01 Dec, 18:45

Сопоставление массивов без .map()

map() - довольно сложный метод, который можно использовать в том числе и для сопоставления массивов. Альтернативой является метод from().

973

Frontend Formula

28 Nov, 11:16

Очистка или усечение массива

Легкий способ очистки или усечения массива без его переназначения - это изменить его значение свойства length.

1,276

Frontend Formula

27 Nov, 08:55

#Вопросы_с_собеседования
Как бы вы объяснили концепцию и применение замыканий (closures) в JavaScript в контексте управления памятью и утечек памяти? Приведите примеры сценариев, где неправильное использование замыканий может привести к утечкам памяти.

Этот вопрос проверяет понимание кандидатом концепции замыканий в JavaScript и их влияние на управление памятью. Замыкания в JavaScript позволяют функции доступ к переменным внешней функции даже после того, как внешняя функция завершила выполнение. Ответ должен включать обсуждение того, как замыкания могут сохранять ссылки на эти переменные, потенциально приводя к утечкам памяти, если они не управляются должным образом. Кандидат должен объяснить, как избежать таких утечек, например, через освобождение ресурсов или избегание ненужных замыканий, особенно в циклах или в обработчиках событий.

1,033

Frontend Formula

26 Nov, 14:08

Селектор :empty

Псевдокласс :empty - это селектор, который позволяет выбирать элементы, не содержащие потомков. Это может быть полезно для стилизации элементов, которые должны быть скрыты, если они не содержат контента.

Например, если у вас есть контейнер <div>, который должен быть скрыт, если он не содержит никакого текста, вы можете использовать CSS-код (1).

Кроме того, вы можете использовать псевдокласс :empty для добавления стилей к элементам, которые содержат только пустые теги. Например, если у вас есть ссылка <a>, которая должна быть скрыта, если она не содержит текста, вы можете использовать CSS-код (2).

875

Frontend Formula

24 Nov, 16:26

#вопросы_с_собеседований
Назовите преимущества и недостатки использования стрелочных функций в JavaScript

Преимущества

1. Краткость и лаконичность. Стрелочные функции позволяют определять функции в одну строку кода, что делает код более читабельным и понятным.

2. Неизменяемость контекста (this). В отличие от обычных функций, где значение this зависит от контекста вызова, в стрелочных функциях this всегда берется из внешней функции, в которой они были определены. Это упрощает код и уменьшает вероятность ошибок.

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

Недостатки

1. Не возможность использовать в качестве конструктора. Стрелочные функции не могут быть использованы в качестве конструктора, что ограничивает их использование.

2. Отсутствие своего контекста. Стрелочные функции не имеют своего контекста, что может быть проблемой в некоторых случаях.

3. Не умение использовать ключевые слова yield и arguments. Стрелочные функции не поддерживают ключевые слова yield и arguments, что может ограничивать их использование в некоторых ситуациях.

593

Frontend Formula

21 Nov, 14:36

Метод Object.keys()

Метод Object.keys() используется для получения всех ключей объекта в виде массива.

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

Важно отметить, что он возвращает только перечисляемые свойства объекта. Если вы хотите получить все свойства объекта, включая неперечисляемые, вы можете использовать метод getOwnPropertyNames(), который возвращает массив всех свойств объекта.

710

Frontend Formula

20 Nov, 09:28

Google Loading

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

https://codepen.io/onlyveen/pen/owQRME

736

Frontend Formula

19 Nov, 18:04

😯

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

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

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

803

Frontend Formula

17 Nov, 15:02

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

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

792

Frontend Formula

16 Nov, 15:45

slowroads

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

slowroads.io

753

Frontend Formula

15 Nov, 16:57

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

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

762

Frontend Formula

15 Nov, 12:07

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

Ответ

781

Frontend Formula

13 Nov, 17:10

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

Ответ

861

Frontend Formula

11 Nov, 16:36

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

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

861

Frontend Formula

11 Nov, 14:46

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

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

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

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

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

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

822

Frontend Formula

11 Nov, 11:59

Cubic Clock

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

https://codepen.io/cobra_winfrey/pen/JjOvxYG

755

Frontend Formula

10 Nov, 20:48

Задача

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

Ответ

809

Frontend Formula

07 Nov, 18:04

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

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

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

983

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

877

Frontend Formula

07 Nov, 09:30

Wavy Color Cube

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

https://codepen.io/hexagoncircle/pen/MWwjpYY

789

Frontend Formula

06 Nov, 08:38

SVG & GSAP Morphing

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

https://codepen.io/ksenia-k/pen/JjjyBoL

840

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

Frontend Formula

Frontend Formula (Russian)

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula

Frontend Formula