🖥 Раскрываем силу JavaScript: сокращение размера пакета NPM на 99%

Рассмотрим способы улучшения метрик в Lighthouse с 38% до 82% и сокращения FCP (First Contentful Paint, время первой отрисовки контента веб-страницы) с 5,7 до 1,0-1,7 секунды (речь пойдет о проектах с использованием Design System Package — пакета дизайн-системы).

Начну с того, как мы, команда разработчиков Insider, пришли к этому. Разработав 11 различных продуктов для нашей компании, мы использовали дизайн-систему, чтобы лучше управлять фронтенд-частью этих продуктов.

Поскольку дизайн-система содержала все компоненты, был создан JavaScript-файл размером 13,6 МБ. Как вы понимаете, первоначальная загрузка пакета размером 13,6 МБ, даже при запуске одностраничного приложения, создает негативное впечатление о производительности и не радует пользователя.

Что мы предприняли?

📌 Читать

@javascriptv

Читать полностью…

🎄 React Monochromatic Landscape Generator - Генератор ландшафта, выполненный с помощью SCSS, SVG и библиотеки Babel.js

https://codepen.io/dilums/pen/ExZjMey

@javascriptv

Читать полностью…

Крепкий фундамент дома не выстоит за зыбучем песке. Качественное приложение сложно создать без продуманной архитектуры.

Случалось ли вам исправлять один баг, после чего возникало ещё 5? Или перестать понимать, что происходит в коде, который вы же написали?

Так бывает, когда приложению не хватает архитектуры.

А если она есть?

С таким приложением проще и приятнее работать. Его легче расширять, изменять, тестировать, отлаживать и понимать. У вас самих (и ваших коллег) будет уходить куда меньше времени на исправление ошибок.

И именно этому учат в Слёрм на курсе по архитектуре приложений — он стартует 22 января.

Узнать программу вы можете по ссылке.

Спикеры курса:

✔️Егор Лукьянов, Senior software engineer
Более 15 лет в IT, отвечает за архитектуру платформы анализа больших данных. Руководит бэкенд-разработкой на Python.

✔️Александр Вагнер, Solution Architect & co-founder в TorrowTechnologies
Более 8 лет в IT, строит с нуля компанию и платформу Torrow. Имеет богатый опыт создания и разработки high-load веб-сервисов и приложений.

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

Записаться на поток вы можете на сайте Слёрм
Реклама. ООО «Слёрм» г. Лиски, ОГРН 1193668020545 Erid: 2Vtzqw9rgKd

Читать полностью…

✌️ Игра камень, ножницы, бумага на чистом CSS.

https://codepen.io/alvaromontoro/pen/BaaBYyz

@javascriptv

Читать полностью…

🌀Циклы в JavaScript

Что такое циклы?
Циклы — быстрый и простой способ многократного выполнения каких-либо действий, позволяющий не возвращаться в точку рестарта раз за разом. Цикл можно сравнить с будильником на мобильном телефоне. Вы настраиваете будильник на определенные дни, например с понедельника по пятницу, и рассчитываете на повторение сигнала будильника в каждый из этих дней. Иначе вам пришлось бы настраивать будильник ежедневно. Цикл избавляет вас от таких повторяющихся задач. Существует множество типов циклов, но все они играют практически одну и ту же роль — повторяют определенную задачу несколько раз.

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

Три основных типа циклов
Существует три основных типа циклов: for, while и do...while. Хотя все три выполняют одну и ту же задачу, есть незначительные различия в их использовании.

Цикл for
Цикл for является наиболее распространенным и наиболее лаконичным способом записи циклической структуры в JavaScript. Выполнение цикла for состоит из трех шагов: инициализации, проверки условия и увеличения/уменьшения переменной. Приведенная ниже схема отражает эти три этапа.

📌Продолжение

Читать полностью…

🖥 𝗧𝗵𝗲 𝘀𝘁𝗮𝘁𝗲 𝗼𝗳 𝗼𝗽𝗲𝗻 𝘀𝗼𝘂𝗿𝗰𝗲 𝗶𝗻 𝟮𝟬𝟮𝟯 by GitHub

GitHub только что опубликовал свой последний отчет о состоянии открых проектов. Авторы отметили тренд на использование разработчиками технологий искусственного интеллекта и тренд на создание приложений на основе искусственного интеллекта.

Они выделили основные тенденции:

🔹 Разработчики все чаще используют генеративный ИИ: Все больше разработчиков работают с моделями OpenAI ( 92% ) и с моделями других ИИ-компаний; в 2023 году проекты генеративного ИИ с открытым исходным кодом входят в десятку самых популярных проектов по количеству контрибьюторов.

🔹 Наблюдается тренд на работу с облачными приложениями:
Развертывание облаков становится стандартом; резко возросло количество использования разработчиками Docker контейнеров, IaC и других облачных нативных технологий.

🔹 В 2023 году на GitHub было создано 98 млн новых проектов (за 2022 год - 85.7 млн, за 2021 - 61 млн, за 2020 - 60 млн). Общее число проектов достигло отметки в 420 млн (+27%), а число публично доступных репозиториев - 284 млн (+22%).

🔸 За год добавлено около 65 тысяч новых проектов, связанных с машинным обучением, это на 248% больше, чем в прошлом году. Число AI-проектов за год выросло на 148%.

🔸 Аудитория GitHub за год выросла на 20.2 млн пользователей (+26%) и теперь достигает 114 млн (в прошлом году было 20.5 млн, позапрошлом - 73 млн, три года назад - 56 млн). На первом месте по числу разработчиков находится США, на втором - Индия, на третьем - Китай, на четвёртом Бразилия, на пятом - Великобритания, на шестом - РФ, на седьмом Германия. К 2027 году Индия обгонит США как крупнейшее сообщество разработчиков на GitHub

🔸Javascript остается самым популярным язком. Второе место сохраняет за собой Python.Популярность TypeScript выросла на 37 %. и он вытеснил на четвёртое место язык Java. 5, 6 и 7 места удержали за собой языки С#, C++ и PHP. На восьмое место поднялся язык С, который вытеснил на девятое место Shell. Десятое место занял Go.

🔸 𝗥𝘂𝘀𝘁 растет быстрее всех остальных языков в этом году (рост на 40 % по сравнению с предыдущим годом).

🔸 𝟰.𝟯 миллиона открытых и приватных репозиториев используют 𝗗𝗼𝗰𝗸𝗲𝗿𝗳𝗶𝗹𝗲𝘀. Это является следcтвием роста использования Terraform и других облачных нативных технологий, который мы наблюдали в течение последних нескольких лет.

🔸 Сингапур занял первое место по количеству новых разработчиков на душу населения.

📌 Полный отчет
📌 Видео

ai_machinelearning_big_data

Читать полностью…

⚡️ UI Vs UX

@javascriptv

Читать полностью…

🔥 Morph Three.js Particles ( Christmas🎄)

Бесплатный шаблон для создания крутых проектов для портфолио для креативных разработчиков.

Live - https://christmas.misterprada.com
Код - https://github.com/MisterPrada/morph-particles

@javascriptv

Читать полностью…

💡Совет по CSS💡

Вы можете создавать управляемые прокруткой микровзаимодействия с помощью animation-timeline и пользовательских свойств 🔥

.search {
  animation: shrink;
  animation-timeline: scroll();
  animation-range: 0 calc(var(--header-height) * 0.5);
}
@ keyframes shrink {
  to { width: calc(100% - var(--button-size); }
}

Параметр --header-height используется для определения высоты контейнера для заголовка. Вы можете использовать его для диапазона анимации, используемого в различных анимациях прокрутки.

Для другого примера, вы можете анимировать раскрытие бокс-тени на заголовке после того, как поиск завершился

header {
  animation: shadow;
  animation-timeline: scroll();
  animation-range:
    var(--header-height)
    calc(var(--header-height) * 1.5);
}
@ keyframes shadow {
  to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}

Все работает с помощью анимации-таймлайна scroll(), которая подключается к прокрутке страницы. А затем с помощью параметра --header-height в разных диапазонах анимации

@javascriptv

Читать полностью…

🎉🎉🎉 JavaScript был создан за 10 дней, а объявлен миру 28 лет назад 🥳.

С днем рождения, JavaScript!

Пусть ты никогда не перестанешь удивлять нас 🥹.

Лайк за JavaScript🔥

@javascriptv

Читать полностью…

🔥 8 красиво оформленных сайтов со световыми режимами для вашего следующего проекта:

→ http://wiza.co
→ http://cal.com
→ http://rows.com
→ http://clay.earth
→ http://alignui.com
→ http://flowbase.co
→ http://outverse.com
→ http://sequencehq.com

@javascriptv

Читать полностью…

🪄 Руководство по универсальному дизайну

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

https://universaldesignguide.com

@javascriptv

Читать полностью…

💻 Linear-style Cursor Glow - изящный эффект свечения при наведении. Реализованный с помощью SCSS и JavaScript.

https://codepen.io/davidkpiano/pen/gOoNZNe

@javascriptv

Читать полностью…

🆕Node v20.10.0🆕

22 ноября вышла новая версия node JS.

Вот несколько значительных изменений, которые были внесены:

▪️Флаг --experimental-default-type для изменения модульной системы по умолчанию в Node.js.
▪️Флаг --experimental-detect-module для автоматического определения синтаксиса ES модулей в "неоднозначных" JavaScript файлах.
▪️Добавлен параметр 'flush' в функции записи файлов fs.writeFile для принудительной записи данных на постоянное хранилище после успешной операции записи.
▪️Добавлен флаг --experimental-websocket, который добавляет глобальный объект WebSocket, стандартизированный WHATWG.
▪️Исправлена проблема с кэшированием компиляции V8 для vm.Script.

Это лишь малый список изменений и нововведений, подробнее вы можете изучить на официальном сайте:
📢NodeJS📢

@javascriptv

Читать полностью…

🌐 Переместитесь в будущее IT с YaC/e 2023!

Онлайн-конференция от Яндекса YaC/e 2023 уже доступна к просмотру, и это настоящая кладезь знаний для разработчиков и профессионалов в IT!

🔍 Что вас на ней ждет?

🌐 свежие тренды в веб-технологиях
🌐 инсайды из опыта разработчиков Яндекс, соосновательницы AI-компании прямиком из Китая и тех, кто посвятил IT всю жизнь
🌐 новые данные о влиянии ИИ и машинного обучения на веб-разработку

🔗 Переходите по ссылке на бесплатную видеозапись и попадите в мир новых возможностей для разработчиков.

Читать полностью…

Clocktober day 21: Perspective - Стильные часы для вашего сайта

https://codepen.io/jkantner/pen/BaMazpK

@javascriptv

Читать полностью…

⚡️ Rainbow cloud trail — переливающееся облако, следующее за курсором. Реализована с помощью CSS и JavaScript

https://codepen.io/creativeocean/pen/LYMmbvZ

@javascriptv

Читать полностью…

🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— Сложность алгоритмов. Разбор Big O
— Я счастлив, что больше не веб-разработчик
— Mobile Web, навигация и при чем тут Nginx
— Микрофронтенд для самых маленьких
— Кастомизация бессерверных функций без применения промежуточного ПО
— KISS your website или как написать уважаемый сайт на аутсорсе, глава первая
— Что выбрать: Npm, Yarn или Pnpm?
— Pixel Combats Api
— Анатомия shadcn/ui
— Валидация формы с помощью AJV, Vue.js и TypeScript
— Về Chúng Tôi – Giới Thiệu Thông Tin Về Nhà Cái Zbet.com
— Created a new Repository for OneLink Social page maker.
— A Tiny JS Library For Parsing Numbers From Words
— JavaScript Closures: Demystified
— Episode 23/50: Zoneless without Signals, Roadmap, Signal Inputs
— When for..of loop is preferred over forEach
— 6 Javascript array methods You missed in 2023
— Fixing Fetch Waterfalls in React
— Svelte journey | Part 2
— PokeData App

Посмотреть:
🌐 Type Predicates Solve This Common TypeScript Error (⏱ 05:01)
🌐 You Should Be Using Types Instead Of Interfaces In TypeScript (⏱ 00:52)

Хорошего дня!

@javascriptv

Читать полностью…

erid: LjN8KPSoC

Каждый день мы просыпаемся и идём к компьютеру писать код.

Но новогодние праздники — отличный повод отвлечься и показать, чему вы научились за год. Поэтому мы  запускаем телеграм-игру «Код сурка», чтобы вы могли блеснуть знаниями в веб-разработке и получить за это ценные призы.

Забрать их легко — достаточно отвечать на вопросы о веб-разработке (их будет аж 1200) и набирать баллы за правильные ответы. Чем выше вы вскарабкаетесь в рейтинге — тем круче призы.

К слову: разыграем профессию на выбор победителя, 2 «инженерии», 7 курсов по вёрстке и JavaScript, 20 безлимитных доступов к тренажёрам на месяц и 70 доступов к тренажёрам на неделю.

Ну и самое приятное — все участники акции смогут легко получить безлимитный доступ к тренажёрам Академии на время игры, а после игры — скидки и бонусы.

Присоединяйтесь, и пусть каникулы не проходят зря.

Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880.

Читать полностью…

🔥 Топ бесплатных курсов для программистов.

HTML- http://html.com
CSS- http://css-tricks.com
JavaScript- http://Javascript.info
PHP- http://php.net
React- http://react-tutorial.app
API- http://rapidapi.com/learn
Bootstrap- http://getbootstrap.com
MySQL- http://MySQL.com
Git и GitHub- http://learngitbranching.js.org

@javascriptv

Читать полностью…

⚡️ CSS Spinners. - 3 разных анимации загрузки для сайта.

https://codepen.io/timhilton/pen/ZEVzRgG

@javascriptv

Читать полностью…

🧮Первые шаги в JavaScript: создание калькулятора

JavaScript — это динамически типизированный скриптовый язык высокого уровня, известный прежде всего как язык веб-разработки. Он позволяет разработчикам добавлять динамическое поведение на сайты, делая их более интерактивными и отзывчивыми. JavaScript может манипулировать HTML и CSS, обрабатывать пользовательский ввод, а также взаимодействовать с веб-серверами для получения и обновления данных.

Настройка среды разработки
Чтобы начать работу с JavaScript, не нужна специальная среда разработки. Понадобится лишь веб-браузер и текстовый редактор.

В данном случае будем использовать простую HTML-страницу для демонстрации возможностей JavaScript.

Вот базовая HTML-структура для калькулятора:

<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<! - Calculator content goes here →
</body>
</html>

Написание JavaScript-кода: сложение двух чисел
Теперь приступим к добавлению JavaScript-кода на HTML-страницу. JavaScript-код можно разместить в HTML-документе между тегами <script>. Будем создавать функции для обработки пользовательского ввода и выполнения вычислений. Вот простой пример функции JavaScript, которая складывает два числа:

📌 Читать

@javascriptv

Читать полностью…

💡Совет CSS и JS💡

Этот вариант теперь работает во всех браузерах и поддерживает настройки движения через CSS и JS

Размытый текст при выходе?

@ keyframes fade {
  to { opacity: 0; filter: blur(2rem); }
}
h2 {
  animation: fade;
  animation-timeline: view();
  animation-range: cover 40% cover 85%;
}

Как насчет круглой формы на прокрутке? Это анимированный клип-патч

@ keyframes unclip {
  to { clip-path: ellipse(220% 200% at 50% 175%); }
}

Создайте клип-пат с большим размером, смещенный по вертикали. При прокрутке анимируйте его

.content {
  clip-path: ellipse(220% 200% at 50% 300%);
  animation: unclip both linear;
  animation-timeline: --article;
  animation-range: entry;
}

Вторая секция сочетает в себе открепление и одновременное уменьшение масштаба изображения

@ keyframes scale-down {
  0% { scale: 5; }
}
img {
  animation: scale-down;
  animation-timeline: --article; 
  animation-range: entry;
}

Читать полностью…

🆕Bun 1.0.15🆕

Bun — это современная среда выполнения JS типа Node.js или Deno со встроенной поддержкой JSX и TypeScript. Она разрабатывалась с акцентом на трех вещах:

▪️быстрый запуск
▪️высокая производительность
▪️самодостаточность

В Bun 1.0.15 осуществились такие нововведения:

- tsc запускается в 2 раза быстрее
- Стабильный клиент WebSocket
- Подсветка синтаксических ошибок
- Более чистые стеки
- expect.extend()
- TensorFlow.js

📌Читать далее

@javascriptv

Читать полностью…

Shotcut WebTools — универсальные инструменты для веб разработчиков и не только

Этот полезный набор инструментов и утилит, предназначенных для упрощения вашей повседневной работы в Интернете, предлагает такие решения, как «Website Status Checker», «User Agent Finder» и т.д

Инструменты платформы позволяют упростить ряд задач, таких как проверка статуса веб-сайтов или определение user agent, что делает их незаменимыми помощниками в работе

Стоимость: #бесплатно

#web #утилиты

@javascriptv

Читать полностью…

🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— JSX: как разделять логику и отрисовку в разметке, сгенерированной методом map
— Topics API — как персонализированная реклама может работать без cookie
— Atomic CSS здорового человека
— Ваша емайл-рассылка нуждается в AMP-emails прямо сейчас
— Server-side rendering и практики работы с запросами
— По заветам кота Вжуха: превращаем веб-приложение в сервис на платформе VK Mini Apps
— План «Барбаросса» от Vue.js
— «Hello world!» или путь к становлению специалистом. База JavaScript
— Как появились веб-пуши Apple в Тинькофф
— Talkvio — не капибара и не старый пикабу. Модуль серверной индексации для поисковиков для Nginx. Альтернатива Next.js
— The Case of Retro Bowl: A Study
— Code Smell 233 - Collections Count
— Challenge 1 Solution AdventJs 2023 by Midudev.
— Comparing Apples and Oranges: Rust and JavaScript in AOC 2023 Day 1
— Rust is SLOW actually? - AOC 2023 day 1 performance comparison
— Trebuchet?!
— Creating a Responsive Website Using HTML CSS and JavaScript
— Full Spectrum Mastery: Navigating Full Stack Software Engineering
— Recriando o method lodash pull() em vanilla JS
— Scope In JavaScript

Посмотреть:
🌐 Новые CSS анимации! (⏱ 11:38)
🌐 I Cannot Believe No One Knows This JavaScript String Feature (⏱ 00:52)
🌐 I Cannot Believe TypeScript Recommends You Do This! (⏱ 07:45)
🌐 Deepfake video при помощи Google Colab (⏱ 14:29)

Хорошего дня!

@javascriptv

Читать полностью…

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен.

С 6 по 12 декабря проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения.

За эти 7 дней обучения ты:

1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Узнаешь сколько можно зарабатывать и как работать;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов.

👉 Проскочить на интенсив бесплатно

Читать полностью…

⭐️ Expanding Gallery View ( jus' flex it ) - красивая интерактивная галерея, выполненная с помощью Pug и чистого CSS, без использования JavaScript

https://codepen.io/jh3y/pen/QWQVOZV

@javascriptv

Читать полностью…

🖥 MatryoshBox (CSS) - полноценная анимированная сцена, сделанная с помощью SCSS без использования JavaScript

https://codepen.io/amit_sheen/pen/WNEOPQa

@javascriptv

Читать полностью…

⚡Уроки по JavaScript

1. DOM, События, Анимация, Библиотеки
2. Введение в JavaScript, Консоль разработчика
3. Строковый и логический тип данных
4. Шаблонные строки, Случайные числа, Округление чисел
5. Массивы на JavaScript
6. Объекты на JavaScript
7. Диалоговые окна, Условия if и switch
8. Циклы на JavaScript
9. Функции на JavaScript и решение задач
10. Дата и время на языке JavaScript

#video #js

https://www.youtube.com/watch?v=HU78HrKW9XI&amp;list=PLuY6eeDuleINoCQtGZsMoVVCSgEH7gKQ5

@javascriptv

Читать полностью…