Forwarded from Senior Frontend Developer | JavaScript, React, HTML & CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация в стиле Хэллоуина
Sass - это расширение CSS, которое добавляет много дополнительных возможностей, таких как переменные, вложенность, функции и другие, которые могут упростить и ускорить написание CSS. Sass написан на Ruby и компилируется в обычный CSS. SCSS - это особый тип файла для Sass, который имеет синтаксис, похожий на CSS.
Этот код представляет собой набор инструкций на языке Sass, который является препроцессором CSS. Препроцессоры CSS расширяют возможности обычного CSS, позволяя использовать переменные, функции и другие конструкции для более гибкого и эффективного написания стилей.
Вот, что делает каждая часть кода:
1. Определение переменных:
2. Цикл
Цикл выполняется, пока значение
Для каждой итерации цикла создается элемент с классом
Каждому элементу задается атрибут
3. Определение функций:
4. Определение переменных:
5. Стили для элемента
Устанавливаются свойства для контейнера
6. Стили для элементов с классом
Определяются стили для элементов с классом
Анимация
Анимация
Этот код создает элементы с классом
🌐 Ссылка на код
Sass - это расширение CSS, которое добавляет много дополнительных возможностей, таких как переменные, вложенность, функции и другие, которые могут упростить и ускорить написание CSS. Sass написан на Ruby и компилируется в обычный CSS. SCSS - это особый тип файла для Sass, который имеет синтаксис, похожий на CSS.
Этот код представляет собой набор инструкций на языке Sass, который является препроцессором CSS. Препроцессоры CSS расширяют возможности обычного CSS, позволяя использовать переменные, функции и другие конструкции для более гибкого и эффективного написания стилей.
Вот, что делает каждая часть кода:
1. Определение переменных:
c - массив цветов.n - длина массива c.2. Цикл
while:Цикл выполняется, пока значение
n не станет равным 0.Для каждой итерации цикла создается элемент с классом
.lyr.Каждому элементу задается атрибут
style, в котором используются переменные n и c для установки значения --i и color.3. Определение функций:
gcd($a, $b) - функция для нахождения наибольшего общего делителя двух чисел.lcm($a, $b) - функция для нахождения наименьшего общего кратного двух чисел.4. Определение переменных:
$ua - значение 135.$lcm - наименьшее общее кратное между $ua и 360.$m0 - результат деления $lcm на $ua.$m1 - результат деления $lcm на 360.5. Стили для элемента
body:Устанавливаются свойства для контейнера
body, включая отображение в виде сетки, отступы, высоту и фон.6. Стили для элементов с классом
.lyr:Определяются стили для элементов с классом
.lyr, включая размеры, радиус границы, фон с использованием градиента и анимацию.Анимация
mov изменяет позицию фона элемента.Анимация
rot поворачивает элемент на определенный угол.Этот код создает элементы с классом
.lyr и применяет к ним стили, чтобы создать анимированный эффект. Конкретный внешний вид зависит от значений переменных и используемых цветов в массиве c.🌐 Ссылка на код
Forwarded from Senior Frontend - javascript, html, css
Обучающие игры для разработчиков
Обучение программированию — это не только штудирование учебников, форумов и статей. Это еще и игра — вернее, игры, причем специализированные. Речь идет о геймификации в процессе учебы, когда материал подготавливают в игровой форме. Оказывается, таких проектов много.
Retro Gadgets
Симулятор предназначен для кодеров с опытом сборки электронных девайсов, то есть для тех, кто способен спаять устройство и разработать для него ПО. Задания в игре, несмотря на ее «ламповость», довольно сложные. Нужно паять, правда, в виртуальном мире, плюс собирать различные системы из отдельных модулей и писать код на Lua.
Joy of Programming
Ну а здесь — чистая радость программирования. По крайней мере, в том виде, в котором его себе представляют авторы проекта. Предусмотрена и возможность поработать с 3D-графикой, если есть такое желание. Задачи в игре достаточно сложные. Основной вектор здесь — автоматизация и управление роботами, навигация, логистика и машинное обучение.
CPU-Chef
Игра предназначена для новичков в мире электроники, поскольку ее единственная задача — помочь изучить строение ПК или ноутбука. Разработчики помогают пользователям понять, какие модули, включая процессор, хаб и т. п., для чего предназначены.
SQL Murder Mystery
Уже по названию понятно, что игра предназначена для разработчиков, изучающих SQL. Сюжет интересный: нужно раскрывать преступления в мире баз данных. В процессе расследования геймеры учатся создавать базы данных, формы, а еще — правильно писать SQL-запросы, чтобы выявить настоящего преступника.
Check IO
Отличная игра для изучения Python и TypeScript. Выглядит она неплохо, внутри интерфейса — острова, на которых расположены задачи и головоломки. У игры разные уровни сложности: она подойдет как новичкам, так и опытным кодерам. В самом начале есть подсказки, но постепенно их становится все меньше.
👉 @seniorFront
Обучение программированию — это не только штудирование учебников, форумов и статей. Это еще и игра — вернее, игры, причем специализированные. Речь идет о геймификации в процессе учебы, когда материал подготавливают в игровой форме. Оказывается, таких проектов много.
Retro Gadgets
Симулятор предназначен для кодеров с опытом сборки электронных девайсов, то есть для тех, кто способен спаять устройство и разработать для него ПО. Задания в игре, несмотря на ее «ламповость», довольно сложные. Нужно паять, правда, в виртуальном мире, плюс собирать различные системы из отдельных модулей и писать код на Lua.
Joy of Programming
Ну а здесь — чистая радость программирования. По крайней мере, в том виде, в котором его себе представляют авторы проекта. Предусмотрена и возможность поработать с 3D-графикой, если есть такое желание. Задачи в игре достаточно сложные. Основной вектор здесь — автоматизация и управление роботами, навигация, логистика и машинное обучение.
CPU-Chef
Игра предназначена для новичков в мире электроники, поскольку ее единственная задача — помочь изучить строение ПК или ноутбука. Разработчики помогают пользователям понять, какие модули, включая процессор, хаб и т. п., для чего предназначены.
SQL Murder Mystery
Уже по названию понятно, что игра предназначена для разработчиков, изучающих SQL. Сюжет интересный: нужно раскрывать преступления в мире баз данных. В процессе расследования геймеры учатся создавать базы данных, формы, а еще — правильно писать SQL-запросы, чтобы выявить настоящего преступника.
Check IO
Отличная игра для изучения Python и TypeScript. Выглядит она неплохо, внутри интерфейса — острова, на которых расположены задачи и головоломки. У игры разные уровни сложности: она подойдет как новичкам, так и опытным кодерам. В самом начале есть подсказки, но постепенно их становится все меньше.
👉 @seniorFront
👩💻 Как написать правильный API-клиент на Typescript
В этой статье я подробно расскажу о реализации API-клиента на языке TypeScript для работы как со сторонними API, так и со своими собственными. Клиент может работать с публичными и защищенными эндпойнтами и не привязан к конкретному фреймворку, что делает его пригодным для использования в React, Vue, Svelte и других фреймворках.
Читать...
Original post link: t.me/frontendnoteschannel/3755
Forwarded and filtered by @smartfeed_bot
В этой статье я подробно расскажу о реализации API-клиента на языке TypeScript для работы как со сторонними API, так и со своими собственными. Клиент может работать с публичными и защищенными эндпойнтами и не привязан к конкретному фреймворку, что делает его пригодным для использования в React, Vue, Svelte и других фреймворках.
Читать...
Original post link: t.me/frontendnoteschannel/3755
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
📜 Как написать правильный API-клиент на Typescript
В этой статье я подробно расскажу о реализации API-клиента на языке TypeScript для работы как со сторонними API, так и со своими собственными. Клиент может работать с публичными и защищенными эндпойнтами и не привязан к конкретному фреймворку, что делает…
Сокращение с помощью AND
Давайте рассмотрим ситуацию, в которой у нас есть логическое значение и функция. Немало кода получается ради проверки логического условия и вызова функции. (пример кода №1)
А как насчёт использования сокращённой записи вместе с оператором AND (&&)? Да, условный оператор "if" нам больше не нужен. Круто, правда? (пример кода №2)
Original post link: t.me/senior_front/2118
Forwarded and filtered by @smartfeed_bot
Давайте рассмотрим ситуацию, в которой у нас есть логическое значение и функция. Немало кода получается ради проверки логического условия и вызова функции. (пример кода №1)
А как насчёт использования сокращённой записи вместе с оператором AND (&&)? Да, условный оператор "if" нам больше не нужен. Круто, правда? (пример кода №2)
Original post link: t.me/senior_front/2118
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
Необходимо написать алгоритм для проверки того, может ли заданная строка
s быть составлена из двух других строк, part1 и part2.Ограничение состоит в том, что символы в частях
part1 и part2 должны быть в том же порядке, что и в s.Пример кода
isMerge('xcyc', 'xc', 'yc') => true
isMerge('codewars', 'code', 'wars') => true
isMerge('More progress', 'More ess', 'pro') => false
isMerge('Making progress', 'Mak pross', 'inggre') => trueРешение задачи🔽
function isMerge(s, part1, part2) {
if (!s) return !part1 && !part2;
const matchPart1 = part1 && s[0] === part1[0];
const matchPart2 = part2 && s[0] === part2[0];
return (matchPart1 && isMerge(s.slice(1), part1.slice(1), part2)) ||
(matchPart2 && isMerge(s.slice(1), part1, part2.slice(1)));
}
// Примеры использования:
console.log(isMerge('xcyc', 'xc', 'yc')); // true
console.log(isMerge('codewars', 'code', 'wars')); // true
console.log(isMerge('More progress', 'More ess', 'pro')); // false
console.log(isMerge('Making progress', 'Mak pross', 'inggre')); // true
Please open Telegram to view this post
VIEW IN TELEGRAM
В Python могли встроить вирус. Все из-за утечки админского токена языка через публичный Docker-контейнер
В мире программирования произошла одна из самых опасных ошибок за последнее время. И все из-за невнимательности одного из разработчиков: https://tproger.ru/news/v-python-mogli-vstroit-virus--vse-iz-za-utechki-adminskogo-tokena-yazyka-cherez-publichnyj-docker-kontejner
#python
Original post link: t.me/tproger_web/4710
Forwarded and filtered by @smartfeed_bot
В мире программирования произошла одна из самых опасных ошибок за последнее время. И все из-за невнимательности одного из разработчиков: https://tproger.ru/news/v-python-mogli-vstroit-virus--vse-iz-za-utechki-adminskogo-tokena-yazyka-cherez-publichnyj-docker-kontejner
#python
Original post link: t.me/tproger_web/4710
Forwarded and filtered by @smartfeed_bot
🖥 Mid Mod – коллекция ярких, контрастных шаблонов для лендингов и презентаций. В ней есть карточки, основы для инфографики и мокапы.
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1860
Forwarded and filtered by @smartfeed_bot
Сайтодел | #макет #figma
Original post link: t.me/sitodel/1860
Forwarded and filtered by @smartfeed_bot
🖥 15 сайтов, экономящих время разработчика
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3767
Forwarded and filtered by @smartfeed_bot
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3767
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
15 сайтов, экономящих время разработчика
Хотите выделить время, чтобы взяться за новые увлекательные задачи, углубиться в сложные проблемы или просто уходить с работы вовремя? Эти 15 сайтов помогут значительно сократить процесс разработки.
This media is not supported in your browser
VIEW IN TELEGRAM
Нашли codepen того самого переключателя из мемного видео: Detailed Theme Switch
Проект реализован с помощью CSS и JavaScript. Исходники:https://codepen.io/jkantner/pen/OJazKey
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Original post link: t.me/tproger_web/4711
Forwarded and filtered by @smartfeed_bot
Проект реализован с помощью CSS и JavaScript. Исходники:https://codepen.io/jkantner/pen/OJazKey
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Original post link: t.me/tproger_web/4711
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Что такое Flux - архитектура? Какие сущности она имеет?
Flux-архитектура — архитектурный подход или набор шаблонов программирования для построения пользовательского интерфейса веб-приложений, сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных.
Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении.
В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку:
- Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация явлется синхронным процессом. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные.
- Диспетчер/Диспатчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами.
- Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища при помощи чистых функций.
- Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия.
👉 @seniorFront
Flux-архитектура — архитектурный подход или набор шаблонов программирования для построения пользовательского интерфейса веб-приложений, сочетающийся с реактивным программированием и построенный на однонаправленных потоках данных.
Основной отличительной особенностью Flux является односторонняя направленность передачи данных между компонентами Flux-архитектуры. Архитектура накладывает ограничения на поток данных, в частности, исключая возможность обновления состояния компонентов самими собой. Такой подход делает поток данных предсказуемым и позволяет легче проследить причины возможных ошибок в программном обеспечении.
В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку:
- Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация явлется синхронным процессом. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные.
- Диспетчер/Диспатчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами.
- Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища при помощи чистых функций.
- Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия.
👉 @seniorFront
👩💻 35 браузерных плагинов для Google Chrome в помощь разработчику
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Читать...
Original post link: t.me/frontendnoteschannel/3771
Forwarded and filtered by @smartfeed_bot
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Читать...
Original post link: t.me/frontendnoteschannel/3771
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
🧩 35 браузерных плагинов для Google Chrome в помощь разработчику
Ловите подборку расширений и плагинов для браузера, облегчающих жизнь программисту: ответы со StackOverflow в виде кода в топе выдаче Google, вызов, обнаружение и тестирование HTTP и REST API, анализатор UX, уменьшение потребления памяти Chrome и многое другое.
Forwarded from Веб-страница
Cloudflare выпустила Pingora v0.3.0 с поддержкой HTTP-модулей
Cloudflare представила второй публичный релиз открытого проекта Pingora v0.3.0. Это асинхронный многопоточный фреймворк на Rust, который помогает создавать прокси-сервисы HTTP.
Проект используется для создания сервисов, обеспечивающих значительную часть трафика в Cloudflare (вместо применения Nginx). Исходный код Pingora опубликован на GitHub под лицензией Apache 2.0.
Проект Pingora предоставляет библиотеки и API для создания сервисов поверх HTTP/1 и HTTP/2, TLS или просто TCP/UDP. В качестве прокси-сервера он поддерживает сквозное проксирование HTTP/1 и HTTP/2, gRPC и WebSocket. Поддержка HTTP/3 — в планах.
Pingora также включает в себя настраиваемые стратегии балансировки нагрузки и аварийного переключения. Чтобы соответствовать требованиям безопасности, он поддерживает как широко используемые библиотеки OpenSSL, так и BoringSSL, которые соответствуют требованиям FIPS (федеральных стандартов обработки информации США) и пост-квантового шифрования.
Подробнее: https://habr.com/ru/news/828678/
#cloudflare
Cloudflare представила второй публичный релиз открытого проекта Pingora v0.3.0. Это асинхронный многопоточный фреймворк на Rust, который помогает создавать прокси-сервисы HTTP.
Проект используется для создания сервисов, обеспечивающих значительную часть трафика в Cloudflare (вместо применения Nginx). Исходный код Pingora опубликован на GitHub под лицензией Apache 2.0.
Проект Pingora предоставляет библиотеки и API для создания сервисов поверх HTTP/1 и HTTP/2, TLS или просто TCP/UDP. В качестве прокси-сервера он поддерживает сквозное проксирование HTTP/1 и HTTP/2, gRPC и WebSocket. Поддержка HTTP/3 — в планах.
Pingora также включает в себя настраиваемые стратегии балансировки нагрузки и аварийного переключения. Чтобы соответствовать требованиям безопасности, он поддерживает как широко используемые библиотеки OpenSSL, так и BoringSSL, которые соответствуют требованиям FIPS (федеральных стандартов обработки информации США) и пост-квантового шифрования.
Подробнее: https://habr.com/ru/news/828678/
#cloudflare
👩💻 Не бойтесь генераторов JavaScript
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
Читать...
Original post link: t.me/frontendnoteschannel/3773
Forwarded and filtered by @smartfeed_bot
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
Читать...
Original post link: t.me/frontendnoteschannel/3773
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Не бойтесь генераторов JavaScript
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
This media is not supported in your browser
VIEW IN TELEGRAM
Sphere
Анимация вращения трёх сфер, реализованная с помощью библиотеки Three.js.
https://codepen.io/termat/pen/MdjBeQ
Original post link: t.me/senior_front/2125
Forwarded and filtered by @smartfeed_bot
Анимация вращения трёх сфер, реализованная с помощью библиотеки Three.js.
https://codepen.io/termat/pen/MdjBeQ
Original post link: t.me/senior_front/2125
Forwarded and filtered by @smartfeed_bot
bunkerweb: многостаночный файервол для сайта
Защита на базе NGINX с веб-интерфейсом и CLI-командами, которая в состоянии:
— распознать необычные запросы к серверу и заблокировать их;
— предотвращать TLS Hardening («прослушивание» данных во время передачи от сервера к клиенту);
— блокировать ботов капчей (cookie, javascript, captcha, hCaptcha or reCAPTCHA);
Репозиторий проекта: https://github.com/bunkerity/bunkerweb
#инструменты
Original post link: t.me/tproger_web/4718
Forwarded and filtered by @smartfeed_bot
Защита на базе NGINX с веб-интерфейсом и CLI-командами, которая в состоянии:
— распознать необычные запросы к серверу и заблокировать их;
— предотвращать TLS Hardening («прослушивание» данных во время передачи от сервера к клиенту);
— блокировать ботов капчей (cookie, javascript, captcha, hCaptcha or reCAPTCHA);
Репозиторий проекта: https://github.com/bunkerity/bunkerweb
#инструменты
Original post link: t.me/tproger_web/4718
Forwarded and filtered by @smartfeed_bot
Расширяем возможности мобильного приложения на WebView
Часто разработчики используют только встроенный API взаимодействия JavaScript c нативными кодом, например Web API, но нам этого оказалось мало, и мы расширили спектр возможностей подхода web-native. Внутри статьи я расскажу, какой подход выбрал, как к этому пришёл, и, как обошёл возникшие проблемы. Подчеркну плюсы и минусы использования своего решения и в конце предложу несколько идей дальнейшего развития выбранного пути.
👉 @seniorFront
Original post link: t.me/seniorFront/4296
Forwarded and filtered by @smartfeed_bot
Часто разработчики используют только встроенный API взаимодействия JavaScript c нативными кодом, например Web API, но нам этого оказалось мало, и мы расширили спектр возможностей подхода web-native. Внутри статьи я расскажу, какой подход выбрал, как к этому пришёл, и, как обошёл возникшие проблемы. Подчеркну плюсы и минусы использования своего решения и в конце предложу несколько идей дальнейшего развития выбранного пути.
👉 @seniorFront
Original post link: t.me/seniorFront/4296
Forwarded and filtered by @smartfeed_bot
Лучшие способы вызова API на JavaScript
При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/
#api #javascript
Original post link: t.me/tproger_web/4719
Forwarded and filtered by @smartfeed_bot
При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них: https://nuancesprog.ru/p/15597/
#api #javascript
Original post link: t.me/tproger_web/4719
Forwarded and filtered by @smartfeed_bot
🧰 ТОП-10 инструментов дизайнера UX/UI
В средствах для создания дизайна UX/UI легко запутаться, поэтому сначала стоит понять их предназначение. Предлагаем вниманию читателей небольшой обзор актуальных инструментов.
Читать...
Original post link: t.me/frontendnoteschannel/3780
Forwarded and filtered by @smartfeed_bot
В средствах для создания дизайна UX/UI легко запутаться, поэтому сначала стоит понять их предназначение. Предлагаем вниманию читателей небольшой обзор актуальных инструментов.
Читать...
Original post link: t.me/frontendnoteschannel/3780
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
🛠 ТОП-10 инструментов дизайнера UX/UI, актуальных в 2021 году
В средствах для создания дизайна UX/UI легко запутаться, поэтому сначала стоит понять их предназначение. Предлагаем вниманию читателей небольшой обзор актуальных в 2021 году инструментов.
Forwarded from Frontender's notes [ru]
Напишите функцию, которая принимает строку из одного или нескольких слов и возвращает ту же строку, но со всеми пятью или более буквенными словами в обратном порядке (точно так же, как название этого ката).
Передаваемые строки будут состоять только из букв и пробелов. Пробелы будут включены только в том случае, если присутствует более одного слова.
Пример кода:
spinWords( "Hey fellow warriors" ) => returns "Hey wollef sroirraw"
spinWords( "This is a test") => returns "This is a test"
spinWords( "This is another test" )=> returns "This is rehtona test"
Решение задачи🔽
function spinWords(sentence) {
return sentence.split(' ').map(word => {
return word.length >= 5 ? word.split('').reverse().join('') : word;
}).join(' ');
}
// Примеры использования
console.log(spinWords("Hey fellow warriors")); // "Hey wollef sroirraw"
console.log(spinWords("This is a test")); // "This is a test"
console.log(spinWords("This is another test")); // "This is rehtona test"
Please open Telegram to view this post
VIEW IN TELEGRAM
#вопросы_с_собеседований
Что такое глобальные переменные и какие с ними возникают проблемы?
Глобальные переменные — это те, которые доступны по всей длине кода без какой-либо области видимости. Ключевое слово var используется для объявления локальной переменной, но если вы его опустите, переменная станет глобальной.
Проблема с глобальными переменными заключается в конфликте имен переменных локальной и глобальной области видимости. Также трудно отлаживать и тестировать код, использующий глобальные переменные.
Original post link: t.me/senior_front/2133
Forwarded and filtered by @smartfeed_bot
Что такое глобальные переменные и какие с ними возникают проблемы?
Глобальные переменные — это те, которые доступны по всей длине кода без какой-либо области видимости. Ключевое слово var используется для объявления локальной переменной, но если вы его опустите, переменная станет глобальной.
msg = "Hello"; // var is missing, it becomes global variable
Проблема с глобальными переменными заключается в конфликте имен переменных локальной и глобальной области видимости. Также трудно отлаживать и тестировать код, использующий глобальные переменные.
Original post link: t.me/senior_front/2133
Forwarded and filtered by @smartfeed_bot