Javascript

Three.js Mobile VR Sonic — бегущий Sonic в 3D пространстве three.js с возможностью перехода в VR режим. Sonic может прыгать и собирать монетки. https://codepen.io/b29/pen/yQXQrg @javascriptv

Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. 🗓 Начинаем 13 июня! Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. 🔜 Запишитесь прямо сейчас!

Paperworld — красивая анимированная 3D сцена. Реализована с помощью CSS, Pug и JavaScript. https://codepen.io/atzedent/pen/ExpmWoY @javascriptv

Another Datepicker — нестандартная форма выбора даты. Реализована с помощью SCSS, SVG и JavaScript. https://codepen.io/aaroniker/pen/MWQjxro @javascriptv

Прием-прием, фронтендеры! Помните мы звали Вас на мероприятие TeamSnack.workshop Подведем итоги: ✅ Эксперты Cloud обсудили 17 проблем микрофронтов; ✅ Бургеры, пицца, ламповая атмосфера, крутой движ;  ✅ Мерч, стикеры, пила...;  ✅ И конечно networking. "Видели ночь, гуляли всю ночь до утра...".   Запись: TeamSnack Miro: Нажми   Хочешь не пропустить июньское мероприятие? Вступай в сообщество TeamSnack   До встречи, stay tuned🤞

​Чистые функции в JavaScript: руководство для начинающих Функция — это повторно используемый блок кода, который принимает аргументы и возвращает вычисленное значение. А чистая функция всегда возвращает одно и то же значение при одинаковых аргументах и не создает побочных эффектов. Давайте более подробно рассмотрим, что такое чистые функции и почему они полезны: https://dmitripavlutin.com/javascript-pure-function/ #javascript

Что было добавлено в ECMAScript в 2023 году ECMAScript — это стандарт языка программирования JavaScript, который устанавливает правила, синтаксис и другие критерии создания JavaScript-кода. ECMAScript ежегодно дополняется сообществом разработчиков JavaScript и соответствует стандартам ECMA International. Эти обновления позволяют создавать более качественные и быстрые веб-приложения, а также обеспечивают возможность масштабирования и поддержки кода в будущем. Обновления помогают большинству веб-приложений стать более мощными и производительными, что расширяет возможности для создания инновационных и уникальных приложений на основе JavaScript. Вот, какие функции были добавлены в ECMAScript в 2023 году. 1. Поиск элемента в массиве Эта функция позволяет найти нужный элемент — от первого до последнего — в массиве с помощью установленного условия. const array = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}, {a: 4, b: 4}] console.log(array.findLast(n => n)); //result -> {a: 4,b: 4 } console.log(array.findLast(n => n.a * 5 === 20)); // result -> {a:4,b:4} as the condition is true so it returns the last element. console.log(array.findLast(n => n.a * 5 === 21)); //result -> undefined as the condition is false so return undefined instead of {a:4,b:4}. console.log(array.findLastIndex(n => n.a * 5 === 21)); // result -> -1 as the condition is not justified for returning the last element. console.log(array.findLastIndex(n => n.a * 5 === 20)); // result -> 3 which is the index of the last element as the condition is true. 2. Грамматика Hashbang Эта функция позволит нам использовать Hashbang/Shebang в некоторых CLI. Shebang представлен #! и представляет собой специальную строку в начале скрипта, которая сообщает операционной системе, какой интерпретатор использовать при выполнении скрипта. #!/usr/bin/env node // in the Script Goal 'use strict'; console.log(2*3); #!/usr/bin/env node // in the Module Goal export {}; console.log(2*2); Строка #!/usr/bin/env node вызывает исходный файл Node.js напрямую как исполняемый файл. 3. Символы-ключи в WeakMap Теперь можно использовать уникальные символы в качестве ключей. До этого обновления WeakMaps можно было использовать в качестве ключей только объекты. Объекты используются в качестве ключей для WeakMaps, потому что они имеют один и тот же аспект идентичности. Symbol — это единственный примитивный тип в ECMAScript, который позволяет использовать для него уникальные значения. Использовать Symbol теперь можно и в качестве ключа вместо создания нового объекта с помощью WeakMap. const weak = new WeakMap(); const key = Symbol('my ref'); const someObject = { a:1 }; weak.set(key, someObject); console.log(weak.get(key)); 4. Изменить массив через копирование Обновление предоставляет дополнительные методы в Array.prototype для внесения изменений в массив, возвращая его новую копию с изменением вместо обновления исходного массива. Новые введенные функции Array.prototype: Array.prototype.toReversed() Array.prototype.toSorted(compareFn) Array.prototype.toSpliced (start, deleteCount, … items) Array.prototype.with(index, value) const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9] /* toReversed */ const reversed = numbers.toReversed(); console.log("reversed", reversed); // "reversed", [9, 8, 7, 6, 5, 4, 3, 2, 1] console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9] /* toSorted */ const sortedArr = numbers.toSorted(); console.log("sorted", sortedArr); // "sorted", [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9] /* with */ const replaceWith = numbers.with(1, 100); console.log("with", replaceWith); // "with", [1, 100, 3, 4, 5, 6, 7, 8, 9] console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9] /* toSpliced */ const splicedArr = numbers.toSpliced(0, 4); console.log("toSpliced", splicedArr); // "toSpliced", [5, 6, 7, 8, 9] console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9] @javascriptv

🎯 Переходите на новый уровень в JS-разработке и разнообразьте свою работу! Прокачка своих навыков — всегда окупаемое вложение времени и сил. Чем шире спектр компетенций, тем больше интересных проектов! OTUS приглашает разработчиков на онлайн-курс «JavaScript Developer. Professional». 👉 Вы освоите полный ландшафт современных технологий Node.js / React / Angular / Vue / Svelte / TypeScript / Web Components. ⬆️ Живые вебинары с JS-разработчиками, зарекомендовавшими себя в крупных проектах. ⚠️ Домашние задания в формате мини-assignment, как на собеседованиях в российских и европейских компаниях. Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на онлайн-курсе «JavaScript Developer. Professional» 👉 ПРОЙТИ ТЕСТИРОВАНИЕ https://otus.pw/HySc/ Нативная интеграция. Информация о продукте www.otus.ru

iOS Notifications — анимированные оповещения в стиле iOS. Реализованы с помощью SCSS и TypeScript. https://codepen.io/ykadosh/pen/ZERjpRJ @javascriptv

Фестиваль спорта и технологий для ИТ-специалистов 18 июня в Измайловском парке AGIMA проведет спортивный фестиваль для IT-специалистов RUNIT. В этом году, в 4 раз мы проводим RUNIT. В нем примет участие около 3 тысяч айтишников. Будут и те, кто придет поболеть за друзей и коллег. 3 тысячи специалистов соберутся в одном месте в одно время. И мы хотим, чтобы нас было еще больше! Центральное событие RUNIT — масштабный забег. Участвовать в нем можно индивидуально, а можно со своей командой и посоревноваться в эстафете. Участников ждет не только забег, но и различные активности: можно покрутить педали на великах или просто зарубиться в плейстейшн с друзьями, или почиллить в зонах отдыха с коктейлем в руке. А еще мы кормим и у нас анлимитед бар с безалкогольными напитками. И конечно, с пустыми руками не уйдете — каждого участника ждет большая крутая медаль и фирменная футболка (качество топчик). А главное — нетворкинг и знакомства. До встречи на забеге 18 июня в Измайловском парке! Регистрация. Победителей ждут крутые призы!

Login & Sign Up Form Concept — концепт формы авторизации и регистрации на сайте. Переключение между двумя видами взаимодействия происходит с приятной анимацией. https://codepen.io/gabrielcojea/pen/GRpZbZL @javascriptv

​Введение в JavaScript Temporal API Реализация объекта Date() в JavaScript была скопирована непосредственно из Java в 1995 году. Два года спустя Java отказалась от неё, но в JavaScript она осталась для обратной совместимости. При этом Date() крайне неудобен и часто непредсказуем, а API оставляет желать лучшего. К счастью, есть Temporal API, которое решает эту проблему. Подробнее о нём: https://webdevblog.ru/vvedenie-v-javascript-temporal-api/ #javascript

💡Задача "Ближайшая сумма трех" Условие задачи: дан целочисленный массив и целевое значение суммы. Необходимо найти три числа из массива, которые либо в результате суммирования равны значению целевой суммы либо же максимально близки к ней по модулю. Каждый массив имеет единственное решение. Пример: Ввод: nums = [-1,2,1,-4], target = 1 Вывод: 2 Объяснение: (-1 + 2 + 1 = 2) Ввод: nums = [0,0,0], target = 1 Вывод: 0 Решение: 1. Сортировка входного массива 2. Используйте два указателя влево и вправо для вычисления локальной суммы, сравните цель с локальной суммой /** * @param {number[]} nums * @param {number} target * @return {number} */ var threeSumClosest = function(nums, target) { nums.sort((a,b)=>a-b); let closest = Infinity; for (let i=0;i<nums.length-2;i++) { let left = i+1; right = nums.length-1; while (left < right) { let localSum = nums[i] + nums[left] + nums[right]; if (Math.abs(localSum - target) < Math.abs(closest - target)) closest = localSum; if (localSum > target) right--; else left++; } } return closest; }; Пишите свое решение в комментариях👇 @javascriptv

4 функциональные концепции, которые следует знать каждому разработчику JavaScript Функциональное программирование — один из философских подходов при разработке программного обеспечения, который захватил мир JavaScript. Несмотря на то что функциональное программирование берет начало из таких языков, как Haskell и Lisp, оно все больше ассоциируется с разработчиками JavaScript, и не зря. Как мы вскоре узнаем, JavaScript нативно реализует все функциональные концепции, о которых будет идти речь в этой статье. Возможно, вы уже используете некоторые из этих методов, даже не подозревая об этом. Но что именно они собой представляют и как разработчики JavaScript используют их для улучшения кода? Рассмотрим 4 концепции функционального программирования, которые можно легко реализовать в JavaScript. •Читать @javascriptv

🔥 100+ уникальных шаблонов CSS | Лучшая коллекция https://css-pattern.com/ @javascriptv

Section design with hover effect Адаптивные карточки с красивым анимированным фоном при наведении. Реализованы с помощью CSS и JavaScript. https://codepen.io/uiswarup/pen/BaaexdO #js #анимация #css #javascript @javascriptv

Ещё вчера они отвечали за код и технологии, а сегодня в их подчинении специалисты, к которым никто не приложил инструкцию. Да, быть начинающим управленцем в IT — рискованно, но интересно. Открывается много новой информации и определений. Насчёт определений — в карточках собрали несколько ключевых, которые познакомят вас с профессией руководителя в IT поближе. А по поводу новой информации: в Практикуме появился курс по управлению командой разработки с воркшопами, личными консультациями и интерактивным учебником. Пройдите первый бесплатный урок

💡Задача "Подсчет хороших узлов в двоичном дереве" Условие: дано бинарное дерево, необходимо посчитать количество качественных узлов (Х) по пути из корня до узла Х. Качественным элементом считается такой узел, значение которого больше значения родительского узла. Пример: Ввод: root = [3,1,4,3,null,1,5] Вывод: 4 Объяснение: *качественные узлы помечены голубым цветом на вложении. Решение: // Time complexity: O(n) // Space complexity: O(n) var goodNodes = function(root) { let count = 0; function dfs(root, max) { if (root == null) return; if (root.val >= max) { max = root.val; count++; } dfs(root.left, max); dfs(root.right, max); } dfs(root, root.val); return count; }; Пишите свое решение в комментариях👇 @javascriptv

TOASTS Отличный пример реализации всплывающих уведомлений: информационное, предупреждающее уведомления и уведомление об успехе. #javascript #css https://codepen.io/mrtrimble/pen/mdEgzzR

💡Задача "Максимально раздвижное окно" Условие: дан целочисленный массив, а также размер k подмассива, начинающегося от левой границы, и заканчивающегося в процессе выполнения алгоритма у правой границы. На каждом шаге можно просматривать k последовательных элементов скользящего массива. На каждом шаге надо определить максимальное значение скользящего. Пример: Ввод: nums = [1,3,-1,-3,5,3,6,7], k = 3 Вывод: [3,3,5,5,6,7] Объяснение: Скользящее на каждой итерации Max -------------------------- ----- [1 3 -1] -3 5 3 6 7 3 1 [3 -1 -3] 5 3 6 7 3 1 3 [-1 -3 5] 3 6 7 5 1 3 -1 [-3 5 3] 6 7 5 1 3 -1 -3 [5 3 6] 7 6 1 3 -1 -3 5 [3 6 7] 7 Ввод: nums = [1], k = 1 Вывод: [1] Решение Пишите свое решение в комментариях👇 @javascriptv