🔵 Создание многократно используемых компонентов React оптимальным способом

Представьте, что вы создали самое лучшее поле FormField для рассылки новостей компании. Теперь вы приступаете к следующему заданию — помогаете другой команде с разработкой компонента React, который почти не отличается от того, что вы только завершили. Как же использовать компоненты несколько раз в разных приложениях и командах?

Вы можете удивиться: “Я уже написал код. Достаточно только скопировать его из репозитория”.

➡️ Читать дальше

@javascriptv

​NSFWJS – JavaScript-библиотека для быстрой идентификации NSFW(not safe for work) контента

В основе библиотеки лежит нейронная сеть на tensorflow.js

⤷ Ссылка на проект

@javascriptv | #JavaScript #Web #Interesting

✒️ Как написать переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript

Для демонстрации темной темы понадобится простой HTML-файл. В раздел head включены CSS-файл styles.css и два файла JavaScript: darkmode.js и project.js.

Мета-параметры — кодировка, вид экрана и заголовок — упоминаются только для заполнения минимального раздела заголовка.

Кнопка переключения на темную тему —  darkmode  — расположена внутри элемента <header> на тринадцатой строчке.

➡️ Читать дальше

@javascriptv

Tuggable Light Bulb! 💡(GSAP Draggable && MorphSVG) - Интерактивная лампочка, сделанная с помощью Pug, Stylus и библиотеки Babel.js

#codepen #css #js

@javascriptv

​SpaceX-REST-API – API для получения данных о ракетах, капсулах, пусковых площадках и т.д. компании SpaceX

⤷ Ссылка на проект

@javascriptv | #Interesting #JavaScript

Glowing buttons - Простые светящиеся кнопки на чистом CSS. Эффект свечения появляется при наведении на кнопку.

https://codepen.io/bhadupranjal/pen/vYLZYqQ

@javascriptv

💻 Экспериментируем с пользовательскими функциями JavaScript на Trino

Trino  —  это быстрый дистрибутивный механизм SQL-запросов, предназначенный для аналитики больших данных. Он позволяет подключаться ко всем данным и запрашивать их в полном объеме без необходимости копировать их в унифицированную систему хранения.

➡️ Читать дальше
⚙️ Trino

@javascriptv

Minimal keyboard

Виртуальная клавиатура, реализованная с помощью SCSS, JavaScript и препроцессора Pug

#codepen #scss #js #ui_элементы

👉 https://codepen.io/Alca/pen/vYeyOwd

@javascriptv

🗺 HTML, JavaScript, YandexAPI и щепотку Bootstrap

Думаю, что все знают про YandexAPI, но знать недостаточно, надо применять. Сегодня разберу небольшую задачу, которая заключается в следующем:

необходимо создать форму, для ввода адресов точек отправления и прибытия;
создать карту и построить маршрут от точки отправления до точки прибытия.
Покажу одну из возможных реализаций на языке JavaScript, создам форму на HTML и приправлю все немножечко Bootstrap v5.

Что необходимо отобразить на странице для выполнения задачи:

поле ввода для точки отправления;
поле ввода для точки прибытия;
кнопку подтверждения отправки формы;
область для вывода карты с информацией откуда и куда в виде карточки, где карта располагается сверху, а прочая информация ниже.

➡️ Читать дальше

@javascriptv

🔥 Полезнейшая Подборка каналов

💡 Javascript / front
@javascriptv - javascript изучение
@about_javascript - javascript продвинутый
@JavaScript_testit -тесты JS
@htmlcssjavas - web
@hashdev - web разработка

🦾 Machine learning
@ai_machinelearning_big_data – все о машинном обучении
@data_analysis_ml – все о анализе данных.
@machinelearning_ru – машинное обучении на русском от новичка до профессионала.
@machinelearning_interview – подготовка к собеседования Data Science
@datascienceiot – бесплатные книги Machine learning
@ArtificialIntelligencedl – канал о искусственном интеллекте
@neural – все о нейронных сетях
@machinee_learning – чат о машинном обучении
@datascienceml_jobs - работа ds, ml


🦫 Golang
@golang_interview - вопросы и ответы с собеседований по Go. Для всех уровней разработчиков.
@Golang_google - go для разработчиков
@golangtests - тесты и задачи GO
@golangl - чат Golang
@GolangJobsit - вакансии и работа GO
@golang_jobsgo - чат вакансий
@golang_books - книги Golang
@golang_speak - обсуждение задач Go
🐍 Python
@pythonl – python для датасаентиста
@pro_python_code – python на русском
@python_job_interview – подготовка к Python собеседованию
@python_testit тесты на python
@pythonlbooks - книги Python
@Django_pythonl django
@python_djangojobs - работа Python

🐧 Linux
@inux_kal - чат kali linux
@inuxkalii - linux kali
@linux_read - книги linux

👷‍♂️ IT работа

@hr_itwork - ит-ваканнсии

🔋 SQL
@sqlhub - базы данных
@chat_sql - базы данных чат

🤡It memes
@memes_prog - ит-мемы

⚙️ Rust
@rust_code - язык программирования rust
@rust_chats - чат rust

#️⃣ c# c++
@csharp_ci - c# c++кодинг
@csharp_cplus чат

☕️ Java
@javatg - Java для програмистов
@javachats Java чат
@java_library - книги Java
@android_its Android разработка
@java_quizes - тесты Java
@Java_workit - работа Java
@progersit - шпаргалки ит

cpc-days | 3d carousel

3D-карусель просмотра праздников по дням в месяце. Реализован с помощью CSS и JavaScript.

#3D #карусель #css #javascript

https://codepen.io/MarkBoots/pen/ExbbvOv

@javascriptv

Range Slider With Glowing Gradient - слайдер диапазонов с интересным градиентом полосы

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

@javascriptv

Day and Night

Анимация смены дня и ночи, выполненная с помощью SVG, SCSS и JavaScript.

#css #js

https://codepen.io/TurkAysenur/pen/bGawdKv

🗒​ remember

приложение для заметок, которое позволяет вам делать заметки, включая текст, изображения, видео, ссылки, списки, флажки и поддержку фрагментов кода

⚙️ Ссылка на проект

@javascriptv | #Interesting #JavaScript #Useful

Rooster Animation

Анимированный петух, реализованный на чистом CSS, без использования JavaScript

#codepen #css #ui_элементы

https://codepen.io/mdusmanansari/pen/GRxKNKP

@javascriptv

⚙️ ​gltfjsx

Консольный инструмент, который может превращать GLTF ассеты в реакт-компоненты

⤷ Попробуйте сами
⤷ Ссылка на проект

#JavaScript #3D #Interesting

@javascriptv

​​Серверный JavaScript | Node.JS [ru] - канал для тех кому интересен JS не только со стороны фронта но и бэка. Там вы найдете много инфы и новостей о Node.JS.

Вам сюда: 👉 @we_use_js

В общем добро пожаловать!

🦾 Как уменьшить размер компонента React: 3 профессиональных приема

В процессе работы многие фрагменты кода увеличиваются настолько, что над ними легко потерять контроль. Речь идет о компонентах React. Обрастание компонента множеством функций, JSX и конфигураций становится одной из главных проблем для тех, кто начинает изучать React. Рассмотрим, как ее избежать.

Возьмем в качестве примера один из компонентов пользовательского интерфейса —  table. Попробуем оптимизировать его объем, используя для этого 3 приема.

Компонент table будет иметь несколько функций, которые можно расширить в дальнейшем.

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

➡️ Читать дальше

@javascriptv

Timekeeping

Небольшое приложение - таймер, созданный на Vue и анимированный библиотекой gsap.

#js #vue

https://codepen.io/Sicontis/pen/qBVMzLj

@javascriptv