Javascript
11 October 2023 12:02
Transparent Sidebar | CSS - Выдвижное меню с кнопками + карточки
https://codepen.io/ecemgo/pen/yLGeKXE
@
Читать полностью…
Javascript
04 October 2023 17:03
Movie Poster Interaction - Стильные карточки с анимацией и эффектом размытия.
https://codepen.io/pleasedonotdisturb/pen/oNQLVXB
@
Читать полностью…
Javascript
03 October 2023 15:01
🖼 Почему разрабатывать веб-интерфейсы так сложно?
Разработка веб-интерфейсов кажется простой, но только на первый взгляд.
Если углубиться в нее, обнаруживается множество сложностей, озадачивающих даже опытных специалистов.
Эта статья поможет вам разобраться с рядом проблем разработки веб-интерфейсов, начиная с несоответствия между веб-языками и современными требованиями к пользовательскому интерфейсу и заканчивая сложными вопросами управления данными и вызовами асинхронных API.
Кроме того, мы исследуем так называемые “нерезультативные пути” (“unhappy paths”), часто упускаемые из виду. К ним относятся состояния загрузки, обработка ошибок, а также более широкие архитектурные аспекты, включающие безопасность, производительность и доступность.
Читать
Читать полностью…
Javascript
27 September 2023 10:25
🖥 Генераторы и итераторы в JavaScript
В языке JavaScript итераторы и генераторы являются мощными инструментами, позволяющими разработчикам контролировать итерацию и поток данных. Вместе эти функции образуют впечатляющий дуэт, позволяющий писать лаконичный, эффективный и гибкий JavaScript-код.
В JavaScript функция-итератор — это уникальная функция, возвращающая объект-итератор. Объект-итератор — это объект, который через метод next() возвращает объект с двумя свойствами: value и done. Свойство value представляет собой следующее значение в последовательности, а свойство done указывает, достиг ли итератор конца последовательности.
Функции-итераторы могут использоваться для перебора наборов данных, таких как массивы и объекты.
Ниже приведен пример функции-итератора, выполняющей итерацию по массиву:
function Iterator(array) {
let nextIndex = 0;
return {
next: function () {
if (nextIndex < array.length) {
return {
value: array[nextIndex++],
done: false,
};
} else {
return {
value: undefined,
done: true,
};
}
},
};
}
const array = [1, 2, 3, 4, 5];
const arrayValue = Iterator(array);
console.log(arrayValue.next()); // { value: 1, done: false }
console.log(arrayValue.next()); // { value: 2, done: false }
console.log(arrayValue.next()); // { value: 3, done: false }
console.log(arrayValue.next()); // { value: 4, done: false }
console.log(arrayValue.next()); // { value: 5, done: false }
console.log(arrayValue.next()); // { value: undefined, done: true }
В приведенном выше коде определена функция Iterator, которая принимает в качестве аргумента массив и возвращает объект итератора. Объект итератора через метод next возвращает следующий элемент массива и обновляет внутреннюю переменную nextIndex для отслеживания индекса массива.
Метод next проверяет, меньше ли nextIndex длины массива. Если это так, то метод возвращает объект со значением массива в позиции nextIndex и устанавливает свойство done в false. После этого переменная nextIndex увеличивается на единицу. Если nextIndex больше или равно длине массива, то метод next устанавливает свойство done в true.
📌Читать дальше
@
Читать полностью…
Javascript
25 September 2023 12:01
📌Binoculars — красивая имитация бинокля. Реализована на CSS и JavaScript.
#js #анимация #css
https://codepen.io/DeyJordan/pen/MWZwRMm
@
Читать полностью…
Javascript
24 September 2023 17:01
Топ вопросы на собеседовании по JavaScript
1. Способы наследования
2. Типы данных
3. Ключевое слово this.
4. Методы call, apply, bind.
5. Замыкание (closure)
6. Область видимости (scope)
7. Каррирование (currying).
8. Параметры функции в ES6
9. Модификаторы var, let, const B
10. Коллекции Array, Map, Set Blog
#video #js
https://www.youtube.com/watch?v=0e9eyrxB-LU&list=PLwHvxJae2LazDrHm6ayqLKz6jszEn7ArQ&ab_channel=ProgBlog
Читать полностью…
Javascript
22 September 2023 16:51
🖥 Magic Wand Reveal - красивый эффект хайд для изображений.
https://codepen.io/Hyperplexed/pen/wvQzbGz
@
Читать полностью…
Javascript
21 September 2023 12:45
🖥 Анимированная форма обратной связи
Хороший способ сделать ваш сайт более интересным. Проект реализован с помощью CSS, jQuery и TweenMax.js.
Посмотреть код можно тут:
https://codepen.io/izmaelmag/pen/NqyEKx
@
Читать полностью…
Javascript
18 September 2023 15:01
Использование FileReader для чтения файлов в JavaScript
Нашли для вас туториал о том, как использовать FileReader для чтения содержимого файлов в браузере. Автор статьи на практике рассмотрел несколько примеров, как с использованием элемента input, так и Drag'n'Drop:
https://itchief.ru/javascript/filereader
#javascript #туториал
@
Читать полностью…
Javascript
15 September 2023 11:30
7 дней бесплатного обучения frontend-разработке!
🔥 Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью и куратором.
За 7 дней ты:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
В итоге ты сверстаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.
Ухватить бесплатно такой ценный материал можешь по ссылке 👉 Frontend Start
После подтверждения участия мы вышлем тебе в подарок чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.
Стартуем 18 сентября.
Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8KGsup
Читать полностью…
Javascript
14 September 2023 10:11
Попасть фронтендером в Яндекс за выходные — реально
23–24 сентября приходите на Wekeend Offer Frontend. Для этого нужно зарегистрироваться и решить фронтенд-квиз. После вы сможете за 2 дня пройти технические секции, познакомиться с нанимающими командами и получить офер в интересный проект.
В мероприятии участвуют 17 команд: HR Tech, Поиск, Рекламные продукты, Yandex Cloud, 360, Яндекс Браузер, Бизнес-приложения, Умный дом, Yandex Infrastructure, Лавка, Еда, Недвижимость, Аренда, Авто.ру, CM.Expert, Путешествия и Буткемп. Вы сможете поговорить с ребятами и узнать, как работается в проектах. Если всё сложится хорошо — сразу же получите офер.
Помогаем релоцироваться по РФ, нанимаем в офисы по всей стране.
Узнать подробности и зарегистрироваться можно здесь.
Реклама. ООО "Яндекс". erid: 2Vtzqx6jEoJ
Читать полностью…
Javascript
12 September 2023 12:58
🖥 Diagonal Layouts - анимация заднего фона с изменения по ползунку, реализована с помощью CSS и JS
https://codepen.io/enbee81/pen/yLyrmyg
@
Читать полностью…
Javascript
11 October 2023 10:01
7 дней бесплатного обучения frontend-разработке!
Организовали для тебя бесплатный интенсив по frontend-разработке с практикой и куратором.
Что будет:
1️⃣ Создание веб-сайта на HTML и CSS
Мы научим тебя создавать стильные и функциональные веб-страницы с использованием современных технологий.
2️⃣ Оживление страницы с помощью JavaScript
Узнаешь, как добавить интерактивность и динамичность в свои проекты.
3️⃣ Использование фронтенд-фреймворка Angular
Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений.
4️⃣ Подключение Backend и загрузка сайта на хостинг
Мы научим тебя основам работы с Backend'ом и покажем, как развернуть проект на хостинге.
5️⃣ Советы по доработке проекта
Получишь советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества.
🔥 А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Участвуй бесплатно
Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8JzgTd
Читать полностью…
Javascript
06 October 2023 16:09
Card — анимированная карточка. Реализована с помощью CSS и JavaScript
https://codepen.io/BlogFire/pen/yLRgbwO
@
Читать полностью…
Javascript
04 October 2023 10:47
🖥 8 продвинутых вопросов для собеседования по JavaScript
В этой статье мы детально рассмотрим важнейшие вопросы для собеседования по JavaScript. Надеюсь, что скрупулезный разбор каждого вопроса поможет вам усвоить основные концепции и ответить на другие подобные вопросы на собеседованиях.
1. Подробнее о свойствах операторов + и —
console.log(1 + '1' - 1);
Можете ли вы предположить,
Когда JavaScript имеет дело с выражением 1 + '1', то обрабатывает его с помощью оператора +. Интересным свойством этого оператора является то, что он предпочитает конкатенацию строк, когда один из операндов является строкой.
В нашем случае ‘1’ является строкой, поэтому JavaScript неявно преобразует числовое значение 1 в строку. Следовательно, 1 + '1' становится '1' + '1', в результате чего получается строка '11'.
Теперь у нас есть выражение '11' - 1. Поведение оператора — прямо противоположно. Приоритет отдается числовому вычитанию независимо от типа операндов. Если операнды не относятся к числовому типу, JavaScript выполняет неявное принуждение для их преобразования в числа. В данном случае '11' преобразуется в числовое значение 11, и выражение упрощается до 11 - 1.
Собираем все вместе:
'11' - 1 = 11 - 1 = 10
2. Дублирование элементов массива
Рассмотрите следующий JavaScript-код и постарайтесь найти в нем какие-либо проблемы:
function duplicate(array) {
for (var i = 0; i < array.length; i++) {
array.push(array[i]);
}
return array;
}
const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);
В этом фрагменте кода требуется создать новый массив, содержащий дублированные элементы входного массива. При первоначальном рассмотрении кажется, что код создает новый массив newArr, дублируя каждый элемент исходного массива arr. Однако в самой функции duplicate возникает критическая проблема.
Функция duplicate использует цикл для перебора каждого элемента конкретного массива. Но внутри цикла она добавляет новый элемент в конец массива, используя метод push(). В результате массив каждый раз становится длиннее, что создает проблему, при которой цикл никогда не останавливается. Условие цикла (i < array.length) всегда остается истинным, поскольку массив продолжает увеличиваться. В результате цикл может продолжаться бесконечно, что приводит к зацикливанию программы.
Чтобы решить проблему бесконечного цикла, вызванного ростом длины массива, можно перед входом в цикл сохранить начальную длину массива в переменной. Затем эту начальную длину можно использовать в качестве ограничения для итерации цикла. Таким образом, цикл будет выполняться только для исходных элементов массива и перестанет зависеть от роста массива за счет добавления дубликатов. Вот модифицированная версия кода:
function duplicate(array) {
var initialLength = array.length; // Сохранение начальной длины
for (var i = 0; i < initialLength; i++) {
array.push(array[i]); // Дублирование каждого элемента
}
return array;
}
const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);
В результате дублированные элементы окажутся в конце массива, и цикл не будет бесконечным:
[1, 2, 3, 1, 2, 3]
📌Читать дальше
@
Читать полностью…
Javascript
01 October 2023 15:20
🖥 Variable font animation — анимация переменных шрифтов. Реализован с помощью CSS и JavaScript.
#анимация #css #javascript #текст
https://codepen.io/michellebarker/pen/bPEWGK
@
Читать полностью…
Javascript
29 September 2023 09:38
🖥 Neumorphic Liquid Slider
Анимация на чистом Javascript. В JS устанавливаются значения и запускаются анимации.
https://codepen.io/konstantindenerz/pen/qBMvXNK
@
Читать полностью…
Javascript
26 September 2023 13:08
⚡ 5 лучших шаблонов проектов React Native на GitHub для быстрой разработки приложений 📱
Список полезных ресурсов, которые ускорят разработку приложений! Эти шаблоны упрощают процесс разработки, позволяя вам быстро приступить к работе над приложениями👇
1. React Native Elements: https://github.com/react-native-elements/react-native-elements
2. Ignite CLI Boilerplate: https://github.com/infinitered/ignite
3. React Native Paper: https://github.com/callstack/react-native-paper
4. UI Templates: https://github.com/Aashu-Dubey/React-Native-UI-Templates
5. React Native Boilerplate: https://github.com/thecodingmachine/react-native-boilerplate
@
Читать полностью…
Javascript
25 September 2023 10:02
Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке.
⏰ Старт 5 октября!
Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком.
Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником.
Запишитесь прямо сейчас!
Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid: LjN8Jygvk
Читать полностью…
Javascript
22 September 2023 14:50
Привет! Мы в МТС активно поддерживаем ИТ-сообщество в России и запускаем всероссийскую олимпиаду по программированию с главным призом в 3 млн рублей.
Для кого? Для школьников, студентов и действующих ИТ-специалистов.
Что будет? Блок онлайн-заданий, митапы и мастер-классы, общение в закрытом Telegram-канале и финальный очный тур с программированием на скорость. Когда олимпиада завершится, мы создадим True Tech Community, где будем делиться полезными и эксклюзивными материалами для разработчиков.
А что еще? Финалистов ждет afterparty, фестиваль технологий, интерактив, квесты, карьерные стенды, где лучшие специалисты смогут получить оффер от МТС.
Регистрация уже открыта! Подробности по ссылке. Ждем тебя!
Реклама. ПАО "МТС". ИНН 7740000076. erid: LjN8K7znt
Читать полностью…
Javascript
20 September 2023 14:23
🐈⬛ Микросервисы gRPC в NestJS: пошаговое руководство
В процессе иллюстрации возможностей gRPC создадим два микросервиса: службу заказа (order-service) и службу пользователя (user-service).
В службу заказов (order-service) внедрим API MyOrders, возвращающий фиктивные заказы пользователя. Прежде чем вернуть заказ, служба связывается с помощью gRPC с user-service для проверки прав пользователя в системе.
Такой смоделированный вариант позволит демонстрировать взаимодействие между микросервисами. При этом возможны индивидуальные отличия, например служба заказа может получать данные пользователя в режиме реального времени для отправки уведомлений на мобильный телефон или по электронной почте.
Настройка проекта
Предполагается, что вы знакомы с основами NestJS. Сначала определим специфичные для gRPC элементы.
С помощью командной строки NestJS инициализируем проекты user-service и order-service.
nest new order_service
nest new user_service
Установим специфичные для gRPC зависимости.
В gRPC определяем API в файлах буфера протокола или proto. Наши клиенты NestJS должны понимать этот интерфейс, и для этого мы будем использовать пакет ts-proto, который автоматически сгенерирует код адаптера NestJS для определений proto.
npm i --save @ @
npm i protoc-gen-ts_proto
npm install ts-proto
Примерная структура проекта:
📌Читать
@
Читать полностью…
Javascript
18 September 2023 11:20
⚡Creativity Now — 3D-текст, созданный на Blender. Анимация замены оформления реализована с помощью Tree.js.
#анимация #Blender #Treejs
https://codepen.io/ScavengerFrontend/pen/mdRrVVO
@
Читать полностью…
Javascript
15 September 2023 13:31
Архитектурные стили, которые вы должны знать в 2023 году
— REST (Representational State Transfer): REST - это архитектурный стиль, в котором используются преимущественно методы HTTP, - чемпион по простоте и повсеместности. Он обеспечивает простое взаимодействие с ресурсами, что делает его основным паттерном для множества приложений и современных API.
— SOAP (Simple Object Access Protocol): SOAP, претендующий на звание тяжеловеса на арене API, отличается сложностью и мощностью. Он использует XML для определения структурированного взаимодействия. Хотя для работы с SOAP требуется клиент и сервер, он компенсирует это своей прочностью и надежностью, подобно хорошо сконструированному внедорожнику, преодолевающему труднопроходимую местность.
— GraphQL: Восходящая звезда в мире API, GraphQL предлагает гибкость и точность. Он позволяет клиентам запрашивать именно то, что им нужно, сокращая избыточность и повышая производительность. Подумайте об этом как о персональном покупателе - вы получаете только то, что просили, ни больше, ни меньше.
— gRPC (Google Remote Procedure Call): gRPC - это самый быстрый из всех API. Работающий по протоколу HTTP/2 и использующий двоичные данные, он нацелен на производительность и скорость, особенно в архитектурах микросервисов. Он подобен скоростному поезду, обеспечивающему быструю и надежную связь.
— WebSockets: Если вам нужна связь в реальном времени и двунаправленная связь, то WebSockets - это то, что вам нужно. Они идеально подходят для чат-приложений, потокового вещания и обмена данными в реальном времени - это как открытая телефонная линия между клиентами и серверами.
— Webhooks: Webhooks - это глашатаи цифрового мира. Они уведомляют клиентов о наступлении определенных событий на стороне сервера, что делает их идеальным решением для архитектуры, управляемой событиями. Представьте себе, что это ваша персональная система оповещения, которая информирует вас о том, что важно.
#советы
Читать полностью…
Javascript
14 September 2023 13:11
VideoCall App UI — изящный пользовательский интерфейс приложения VideoCall, реализованный с помощью jQuery.
https://codepen.io/aybukeceylan/pen/pobbEYB
@
Читать полностью…
Javascript
13 September 2023 12:51
📊Создание кольцевой диаграммы на JavaScript
Визуализация данных — процесс не только познавательный, но и довольно забавный. Один из самых простых и увлекательных способов визуализации данных — создание кольцевой диаграммы. Я покажу вам, как без особых усилий построить интерактивную диаграмму на JavaScript.
(Предварительный обзор кольцевой диаграммы в изображении)
Создание кольцевой диаграммы на JavaScript в четыре этапа
Посмотрим, как быстро и легко создать визуально красивую и функциональную кольцевую диаграмму на JavaScript. Этот процесс можно разделить на четыре этапа:
1) Создание базовой HTML-страницы.
2) Включение необходимых JavaScript-файлов.
3) Добавление данных.
4) Написание JS-кода.
1. Создание базовой HTML-страницы
Для начала создадим базовую HTML-страницу с элементом <div> для размещения кольцевой диаграммы. Дадим ей идентификатор. Установим ширину и высоту на 100% без полей и отступов, чтобы диаграмма отображалась во весь экран.
<html>
<head>
<title>JavaScript Donut Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2. Включение необходимых JavaScript-файлов
Далее
@
Читать полностью…
18174