Javascript

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

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

@javascriptv

👍12🔥5❤3

5.08K views02:11

Javascript

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

@javascriptv

👍6❤3🔥2

4.91K views10:01

Javascript

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

@javascriptv

🔥12❤2🥰2👏2😁1

5.37K views17:18

Javascript

🖥

Раскрываем силу 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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11❤3🔥2

6.64K viewsedited 07:54

Javascript

This media is not supported in your browser

VIEW IN TELEGRAM

❄️ Snow — анимация падающего снега, реализованная на CSS.

https://codepen.io/alphardex/pen/dyPorwJ

#анимация #css

@javascript

👍21🔥7😁2🎉2

5.68K viewsedited 04:34

Javascript

⚡️ "Page Replica" - это универсальный инструмент для скраппинга и кэширования веб-страниц, созданный на основе Node.js, Express и Puppeteer.

Он помогает пререндерить страницы веб-приложений (React, Angular, Vue,...), которые можно обслуживать через Nginx для SEO или других целей.

git clone https://github.com/html5-ninja/page-replica.git
cd page-replica

▪ Github

@javascriptv

👍9❤8🔥2

5.19K views07:02

Javascript

✨Волшебство веб-разработки: создаем цифровую страну чудес

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

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

Компоненты веб-разработки
1. HTML (Hypertext Markup Language, язык гипертекстовой разметки)
Это фундамент цифрового дома. Он структурирует контент веб-страницы, определяя, что является заголовком, абзацем, изображением или ссылкой.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a simple introduction to web development.</p>
    <img src="hello.jpg" alt="Greetings Image">
    <a href="https://example.com">Explore More</a>
</body>
</html>

2. CSS (Cascading Style Sheets, каскадные таблицы стилей)
Это краски и декор для дома. CSS стилизует HTML-элементы, придает веб-странице визуально привлекательный вид.

Пример:
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
text-align: center;
}

h1 {
color: #333;
}

p {
color: #666;
}

img {
width: 300px;
border-radius: 10px;
}

3. JavaScript
Это электричество, оживляющее дом. JavaScript придает интерактивность, делает веб-страницу динамичной и отзывчивой.

Пример:

function greetUser() {
    alert("Hello, dear visitor! Welcome to our webpage.");
}

Инструменты веб-разработки
🔵Редакторы кода. Для написания и организации кода используются такие редакторы, как Visual Studio Code, Sublime Text и Atom.
🔵Браузеры. Chrome, Firefox, Safari — это испытательные полигоны разработчика, отображающие код. Вы часто будете переключаться между ними для обеспечения совместимости.
🔵Система контроля версий (Git). Git помогает отслеживать изменения в коде и упрощает совместную работу и управление проектом.

Начало работы над первой веб-страницей
1. Создание папки. Создайте папку для проекта. Это похоже на подготовку строительной площадки.
2. Написание HTML. Откройте редактор кода и создайте HTML-файл. Добавьте в него основную структуру страницы.
3. Добавление CSS. Задействуйте для страницы стили, используя CSS. Экспериментируйте с цветами, шрифтами и макетами.
4. Внесение JavaScript (опционально). Если вам нужна интерактивность, добавьте в проект JavaScript.
5. Предварительный просмотр в браузере. Откройте HTML-файл в браузере, чтобы увидеть свое творение.

Веб-разработка — это цифровое творчество. Погружаясь в него, помните: каждая веб-страница — это холст, который ожидает творческого прикосновения. Углубляйтесь в код, экспериментируйте и дайте волю воображению.

@javascriptv

Please open Telegram to view this post

VIEW IN TELEGRAM

👍26❤6🤯4🔥3

4.95K viewsedited 10:17

Javascript

3:07

This media is not supported in your browser

VIEW IN TELEGRAM

🖥

Build LLM Apps with LangChain.js

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

В курсе Build LLM Apps with LangChain.js вы познакомитесь с элементами, характерными для разработки ИИ, включая:

(i) использование парсеров данных для получения данных из распространенных источников
(ii) промпты, которые используются для создания контекста LLM
(iii) Модули для поддержки RAG, такие как разделители текста и интеграция с векторными хранилищами
(iv) Работа с различными моделями для написания ИИ-приложений
(v) парсеры, которые извлекают и форматируют выходные данные для обработки последующим кодом.

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

Собрав все это воедино, вы поработаете над разговорным LLM-приложением для ответов на вопросы, способным использовать внешние данные в качестве контекста.

📌 Курс

@javascriptv

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10❤4🔥2😁1

4.4K views08:01

Javascript

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️

Metrognome - Гном-метроном, реализованный с помощью CSS и библиотеки GSAP.js.

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

@react_tg

Please open Telegram to view this post

VIEW IN TELEGRAM

😁18❤8🥰2👍1🔥1

4.86K views08:02

Javascript

This media is not supported in your browser

VIEW IN TELEGRAM

💻 Sparkly Stars - Анимация при наведении, сделанная с помощью Pug и библиотеки Babel.js

https://codepen.io/Alca/pen/XWgGbKm

@javascriptv

👍20❤2🔥2

5.18K views15:28

Javascript

This media is not supported in your browser

VIEW IN TELEGRAM

🖥

Loading — красивая загрузка в виде анимированного шара. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/ma77os/pen/JjMRmLP

@javascriptv

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12❤3🔥3

4.78K views09:01

Javascript

🔖 Вот 3 инструмента, которые можно использовать для эффективного поиска конфиденциальной информации в JS-файлах:

1. Hakrawler.
Извлечение файлов JavaScript.
🔗 Ссылка : https://github.com/hakluke/hakrawler

2. LinkFinder
Поиск конечных точек в файлах JS.
🔗Link : https://github.com/GerbenJavado/LinkFinder

3. jsluice
Извлечение URL, путей, секретов и других интересных данных из исходного кода JavaScript.
🔗Link : https://github.com/BishopFox/jsluice

⚠️ Информация предоставлена исключительно с целью ознакомления. И побуждает обратить внимание на проблемы в безопасности.

@javascriptv

🔥9👍5❤2

4.87K views10:02

Javascript

☑

Вышел Angular 17.1

https://github.com/angular/angular/releases/tag/17.1.0

@javascriptv

Please open Telegram to view this post

VIEW IN TELEGRAM

GitHub

Release v17.1.0 · angular/angular

17.1.0 (2024-01-17)
compiler

Commit
Description

allow TS jsDocParsingMode host option to be programmatically set (#53126)

allow TS jsDocParsingMode host option to be programmatically set...

🔥14👍4❤1

4.58K views07:52

Javascript

🖥 30-Days-Of-JavaScript

Полное пошаговое руководство по изучению языка программирования JavaScript за 30 дней.

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

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

🖥

Инструкци

@javascriptv

Please open Telegram to view this post

VIEW IN TELEGRAM

👍16❤4🔥2

5.18K views08:02

Javascript

🔥Подборка лучших обучающих каналов для программистов.

➡️Делитесь с коллегами и Сохраняйте себе, чтобы не потерять

🔥 DevOPs
Devops для программистов
Книги Devops

🌟 Docker/Kubernets
Docker
Kubernets

🏆 Golang
Golang - подробные гайды, разбор кода, лучшие практики, заметки
Golang собеседование
Golang вакансии
Golang книги
Golang задачи и тесты
Golang чат
Golang news - новости go

#️⃣C#

С# академия
С# заметки — код, лучшие практики, заметки программиста c#
С# задачи и тесты
С# библиотека - актуальные бесплатные книги
C# вакансии - работа

⚡Машинное обучение

Machine Learning - полезные статьи новости гайды и разбор кода
Ml Собеседование - подготовка к собеседовению мл, алгоритмам, кодингу
Ml ru - актуальные статьи, новости, код и обучающие материалы
Ml Jobs - вакансии ML
ML Книги - актуальные бесплатные книги МО
ML чат

🚀 Data Science

Анализ данных - полезные фишки, код, гайды и советы, маст-хэв датасаентиста
Data Jobs - ds вакансии
Аналитик данных
Data Science книги - актуальные бесплатные книги
Big data

🐍 Python

Python/django
Python Собеседование - подготовка к собеседовению python и разбор алгоритмов
Pro python - статьи, новости, код и обучающие материалы
Python Jobs - вакансии Python
Python чат
Python книги

☕ Java

Java академия
Java вакансии
Java чат
Java вопросы с собеседований
Java книги

💻 C++

C++ академия
С++ книги
C++ задачи - подготовка к собеседовению мл, алгоритмам
C++ вакансии

💥 Хакинг Kali Linux

Kali linux
linux_kal - kali чат
Информационная безопасность

🐧 Linux

Linux academy

🦀 Rust
Rust программирование
Rust чат

🛢Базы данных
Sql базы данных
Библиотека баз данных
SQL чат

📲 Мобильная разработка
Android разработка
Мобильный разработчик гайды и уроки

🖥 Javascript/React/PHP
Javascript академия
React программирование
PHP
Книги frontend
Задачи frontend

🇬🇧 Английский для программистов

🧠 Искусственный интеллект
ИИ и технологии
Neural - нейросети для работы и жизни
Книги ИИ
Artificial Intelligence

😂 IT мемы

📓 Книги
Библиотеки Книг для программситов

💼 Папка с вакансиями:
Папка Go разработчика:
Папка Python разработчика:
Папка Data Science
Папка Java разработчика
Папка C#

❤7👍5🤔1

4.89K views06:01

Javascript

💥 Представляем вам оболочку Bun Shell

Кроссплатформенный язык оболочки и интерпретатор для создания cкриптов с использованием JavaScript.

https://bun.sh/blog/the-bun-shell

@javascriptv

❤11🔥3👍2

4.93K views08:03

Javascript

Закрутилось завертелось и все готово

@javascriptv

👍25😁17🔥3

9.85K viewsedited 05:45

Javascript

This media is not supported in your browser

VIEW IN TELEGRAM

Kippo Hover Card Effect

Эффект раскрытия карточек при наведении, реализованный с помощью CSS и JavaScript.

#css #js

https://codepen.io/Hyperplexed/pen/zYWdYoo

@javascriptv

🔥10❤6👍3

4.73K views08:00

Javascript

🖥

JavaScript нужен не везде!

Возможно, вы думаете: "везде, где я использую JS - это единственный верный вариант". Возможно, это и так, но полезно знать, что и разработчики браузеров, и авторы спецификаций переносят на CSS и HTML многие функции, для которых еще несколько лет назад требовался JS. Именно об этом и пойдет речь в этой статье.

https://www.htmhell.dev/adventcalendar/2023/2/

#html #css #javascript

@javascriptv

Please open Telegram to view this post

VIEW IN TELEGRAM

You don't need JavaScript for that - HTMHell

A collection of bad practices in HTML, copied from real websites.

❤15🔥2👍1

4.58K views07:02

Javascript

💻

7 приложений и сайтов, которые облегчат работу UX/UI дизайнера

Никто не будет спорить, что Figma круто изменила работу для UX/UI дизайнера, делая все проще и объединяя все необходимое в одном месте. Однако даже со всеми потрясающими возможностями и плагинами в Figma существуют и другие приложения и сайты, которыми дизайнеры пользуются каждый день и которые Figma заменить не может. Каждое из них выполняет особую задачу, которая выходит за пределы возможностей Figma. Поэтому хочется поделиться 7 приложениями и сайтами, которые можно использовать вместе с Figma. Этот список покажет, что иногда для достижения лучших результатов нужно использовать несколько инструментов.

1. Mobbin

Для исследования: Lyssna, Maze

2. Lyssna

3. Maze

4. Сбор данных: Typeform

Визуализация и UI: Fonts in Use, Designstripe, Palettemaker

5. Fonts in Use

6. Designstripe

7. PaletteMaker

@javascriptv

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥9❤4👍4🎉1

5.13K viewsedited 10:02

About

Blog

Apps

Platform