This media is not supported in your browser
VIEW IN TELEGRAM
«watching-you» или анимация, которая следит за пользователем
«watching-you» — это JS-библиотека для создания анимаций, которые наблюдают за мышью, DOM или просто за вводимыми значениями. По сути, такая анимация будет подглядывать за действиями пользователя везде, где вы хотите.
Если элемента нет на экране, то анимация автоматически прекращает просмотр. Также библиотека поддерживает несколько фреймворков, поэтому её легко добавить в любой проект.
Источник: https://github.com/jj811208/watching-you?ref=reactjsexample.com
А посмотреть крутые примеры можно здесь: https://jj811208.github.io/watching-you/
#js
@javascriptv
«watching-you» — это JS-библиотека для создания анимаций, которые наблюдают за мышью, DOM или просто за вводимыми значениями. По сути, такая анимация будет подглядывать за действиями пользователя везде, где вы хотите.
Если элемента нет на экране, то анимация автоматически прекращает просмотр. Также библиотека поддерживает несколько фреймворков, поэтому её легко добавить в любой проект.
Источник: https://github.com/jj811208/watching-you?ref=reactjsexample.com
А посмотреть крутые примеры можно здесь: https://jj811208.github.io/watching-you/
#js
@javascriptv
👍19🔥5❤1
Новогодний шар — выбираем подарки близким
Если вы не знаете, какой подарок подарить родителям или друзьям, то почему бы не выбрать их с помощью новогоднего шара? Снежный шар написан на JS с помощью HTML и CSS. Нажав на кнопку, шар выберет из списка подарок только один.
Полный код по ссылке:
https://codepen.io/thestemdiaries/pen/qBKbgjQ
#js #html
Если вы не знаете, какой подарок подарить родителям или друзьям, то почему бы не выбрать их с помощью новогоднего шара? Снежный шар написан на JS с помощью HTML и CSS. Нажав на кнопку, шар выберет из списка подарок только один.
Полный код по ссылке:
https://codepen.io/thestemdiaries/pen/qBKbgjQ
#js #html
👍5❤3🔥1
Как делать формы с адресом электронной почты пользователя?
В этой статье рассматриваются способы, как создать формы для пользовательского ввода, которые помогут легко защитить адрес электронной почты от спам-ботов.
Автор предлагает несколько решений на: JavaScript, HTML + CSS, а также некоторые онлайн-сервисы, такие как Formspree, для создания контактных форм:
https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/
#js #html #css
В этой статье рассматриваются способы, как создать формы для пользовательского ввода, которые помогут легко защитить адрес электронной почты от спам-ботов.
Автор предлагает несколько решений на: JavaScript, HTML + CSS, а также некоторые онлайн-сервисы, такие как Formspree, для создания контактных форм:
https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/
#js #html #css
👍7❤3🔥3
Для всех, кто еще не попробовал новую модель GPT4, рекомендуем бота абсолютно бесплатного
Поможет написать код, диплом, придумает шутку и станет незаменимым помощником в любых задачах!
Бот: @Chatgpturbobot
Please open Telegram to view this post
VIEW IN TELEGRAM
👎8❤6🔥2
Полезные ресурсы для изучения JavaScript
1. The AirBnB style guide — руководство по стилю кода JavaScript.
2. 30 seconds of code — полезные сниппеты JS с объяснением кода. На сайте представлено более 100 примеров: от Linked List до алгоритмов.
3. JavaScript-algorithms — алгоритмы и структуры данных, реализованные на JavaScript, с пояснениями и ссылками для дополнительного изучения.
#js
1. The AirBnB style guide — руководство по стилю кода JavaScript.
2. 30 seconds of code — полезные сниппеты JS с объяснением кода. На сайте представлено более 100 примеров: от Linked List до алгоритмов.
3. JavaScript-algorithms — алгоритмы и структуры данных, реализованные на JavaScript, с пояснениями и ссылками для дополнительного изучения.
#js
👍16🔥4👏4❤2
Полезные API для фронтенд-разработчика
— Fake Store API — интерфейс, который используется в создании интернет-магазинов. Данный API генерирует тестовые данные для заполнения, например, карточки товара или профиль пользователя.
— Unsplash API — это простой JSON API с базой бесплатных и качественных изображений для разработчиков.
— Count API помогает отслеживать количество просмотров страницы и клики на сайте.
#api #фронтенд
— Fake Store API — интерфейс, который используется в создании интернет-магазинов. Данный API генерирует тестовые данные для заполнения, например, карточки товара или профиль пользователя.
— Unsplash API — это простой JSON API с базой бесплатных и качественных изображений для разработчиков.
— Count API помогает отслеживать количество просмотров страницы и клики на сайте.
#api #фронтенд
❤11👍4🔥2
Highlight.js — библиотека для выделения синтаксиса
Highlight.js — это библиотека на JavaScript, которая позволяет легко подсвечивать синтаксис кода на веб-страницах. Она поддерживает более чем 180 языков программирования и настроена для автоматического обнаружения языка. Библиотека также имеет возможность настройки стилей подсветки кода, что позволяет адаптировать её для различных дизайнерских концепций веб-сайтов.
Подробнее:
https://highlightjs.org/
#библиотека #javascript
Highlight.js — это библиотека на JavaScript, которая позволяет легко подсвечивать синтаксис кода на веб-страницах. Она поддерживает более чем 180 языков программирования и настроена для автоматического обнаружения языка. Библиотека также имеет возможность настройки стилей подсветки кода, что позволяет адаптировать её для различных дизайнерских концепций веб-сайтов.
Подробнее:
https://highlightjs.org/
#библиотека #javascript
👍6❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Split Slick Slideshow
Вертикальное слайд-шоу, реализованное с помощью jQuery и слайдера Slick.
#слайдер #jquery #slick
https://codepen.io/supah/pen/zZaPeE
@javascriptv
Вертикальное слайд-шоу, реализованное с помощью jQuery и слайдера Slick.
#слайдер #jquery #slick
https://codepen.io/supah/pen/zZaPeE
@javascriptv
👍12🔥5❤3👎1
HTML-формы и валидация с помощью Pristine.js
Валидация форм на веб-сайте очень важна, так как позволяет проверить правильность ввода данных, улучшает пользовательский опыт и упрощает обработку данных на стороне сервера.
Pristine.js позволяет упростить и ускорить процесс валидации HTML форм на веб-сайте. В этой статье вы узнаете, как использовать Pristine.js для проверки введённых пользователем данных в реальном времени, в том числе на пустые поля, правильный формат email и телефонных номеров, длину строки и т.д.
https://blog.openreplay.com/html-form-validation-with-pristinejs/
#html #pristinejs
@javascriptv
Валидация форм на веб-сайте очень важна, так как позволяет проверить правильность ввода данных, улучшает пользовательский опыт и упрощает обработку данных на стороне сервера.
Pristine.js позволяет упростить и ускорить процесс валидации HTML форм на веб-сайте. В этой статье вы узнаете, как использовать Pristine.js для проверки введённых пользователем данных в реальном времени, в том числе на пустые поля, правильный формат email и телефонных номеров, длину строки и т.д.
https://blog.openreplay.com/html-form-validation-with-pristinejs/
#html #pristinejs
@javascriptv
👍14🔥2❤1
CodeFactor — сервис для автоматической проверки качества кода
Он анализирует ваш код и находит потенциальные проблемы, такие как дублирование кода, проблемы с производительностью и безопасностью
CodeFactor интегрируется с популярными системами управления версиями, такими как GitHub, GitLab и Bitbucket, и предоставляет отчёты об анализе кода прямо в ваш репозиторий
Стоимость: #бесплатно (но есть платные тарифы)
#code #git
@javascriptv
Он анализирует ваш код и находит потенциальные проблемы, такие как дублирование кода, проблемы с производительностью и безопасностью
CodeFactor интегрируется с популярными системами управления версиями, такими как GitHub, GitLab и Bitbucket, и предоставляет отчёты об анализе кода прямо в ваш репозиторий
Стоимость: #бесплатно (но есть платные тарифы)
#code #git
@javascriptv
👍19🔥3❤2
Подробный гайд по Flexbox
Flexbox поддерживается всеми современными браузерами, поэтому понимае основ и умение использовать данную технологию в проекте — важная часть в изучении фронтенд разработки.
На этом сайте собраны 20 полезных уроков, которые помогут изучить Flexbox и прокачать свои скилы. Первые 13 видео направлены на понимание основ Flexbox — строк, столбцов, осей, переноса, выравнивания, центрирования и компоновки. Последние 7 — это отдельные части кода, в которых вы создадите всё, от навигации до макета мобильного приложения с помощью Flexbox:
https://flexbox.io/
#flexbox
@javascriptv
Flexbox поддерживается всеми современными браузерами, поэтому понимае основ и умение использовать данную технологию в проекте — важная часть в изучении фронтенд разработки.
На этом сайте собраны 20 полезных уроков, которые помогут изучить Flexbox и прокачать свои скилы. Первые 13 видео направлены на понимание основ Flexbox — строк, столбцов, осей, переноса, выравнивания, центрирования и компоновки. Последние 7 — это отдельные части кода, в которых вы создадите всё, от навигации до макета мобильного приложения с помощью Flexbox:
https://flexbox.io/
#flexbox
@javascriptv
👍9❤6🔥2🤔2
Codeply — набор готовых решений для веб-разработчика
Мало того, что вы можете написать, отредактировать и просмотреть код на одной странице — платформа также предлагает множество инструментов
К таковым можно отнести Bootstrap Builder, SASS Compiler, JSFiddle Integration и т.д
При этом здесь же для вас есть набор уже готовых конструкций, созданных другими пользователями. Например, CSS-анимации, интересные наборы сеток и многое другое
Стоимость: #бесплатно
#code #web
Мало того, что вы можете написать, отредактировать и просмотреть код на одной странице — платформа также предлагает множество инструментов
К таковым можно отнести Bootstrap Builder, SASS Compiler, JSFiddle Integration и т.д
При этом здесь же для вас есть набор уже готовых конструкций, созданных другими пользователями. Например, CSS-анимации, интересные наборы сеток и многое другое
Стоимость: #бесплатно
#code #web
👍10❤3🔥1
Полезная библиотека для понимания работы JS
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
#js
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
#js
🔥16👍5❤4👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Project Management Dashboard UI
Пользовательский интерфейс панели управления проектами, реализован на CSS и JS.
#анимация #css #js
https://codepen.io/aybukeceylan/pen/OJRNbZp
@javascriptv
Пользовательский интерфейс панели управления проектами, реализован на CSS и JS.
#анимация #css #js
https://codepen.io/aybukeceylan/pen/OJRNbZp
@javascriptv
❤9👍6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Unicycle Range Slider
Ползунок диапазона с отображением числового значения на флаге. Реализован с помощью CSS и JavaScript.
#ползунокдиапазона #css #javascript
https://codepen.io/jkantner/pen/wvarNEp
@javascriptv
Ползунок диапазона с отображением числового значения на флаге. Реализован с помощью CSS и JavaScript.
#ползунокдиапазона #css #javascript
https://codepen.io/jkantner/pen/wvarNEp
@javascriptv
👍12❤3🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Custom Tooltip
Меню при нажатии на которое появляется пользовательская подсказка.
https://codepen.io/Adir-SL/pen/VwXGPmy
@javascriptv
Меню при нажатии на которое появляется пользовательская подсказка.
https://codepen.io/Adir-SL/pen/VwXGPmy
@javascriptv
👍8❤4🔥2
🔥 Top it channels
🖥 Java
@javatg - выучить Java с senior разработчиком по профессиональной методике.
@javachats - чат для ответов на вопросы по Java
@java_library - библиотека книг Java
@android_its - Android разработка
@java_quizes - тесты Java
@Java_workit - работа Java
@progersit - шпаргалки ит
👣 Golang
@Golang_google - восхитительный язык от Google, мощный и перспективный.
@golang_interview - вопросы и ответы с собеседований по Go. Для всех уровней разработчиков.
@golangtests - интересные тесты и задачи GO
@golangl - чат изучающих Go
@GolangJobsit - отборные вакансии и работа GO
@golang_jobsgo - чат для ищущих работу.
@golang_books - полезные книги Golang
@golang_speak - обсуждение языка Go
🖥 Linux
@linux -топ фишки, гайды, уроки по работе с Linux.
@linux chat - чат linux для обучения и помощи.
@linux_read - бесплатные книги linux
🖥 SQL базы данных
@sqllib - библиотека баз данных
@sqlhub - повышение эффективности кода с грамотным использованием бд.
@chat_sql - чат изучения бд.
⭐️ Нейронные сети
@data_analysis_ml - data science
@vistehno - chatgpt ведет блог, решает любые задачи и отвечает на любые ваши вопросы.
@aigen - сети для генерации картинок. видео, музыки и многого другого.
@neural – погружение в нейросети.
🖥 Machine learning
@ai_ml – погружение в нейросети, ai, Chatgpt, midjourney, машинное обучение.
@machinelearning_ru – машинное обучении на русском от новичка до профессионала.
@machinelearning_interview – подготовка к собеседованию.
@datascienceiot – бесплатные книги Machine learning
@ArtificialIntelligencedl – канал о искусственном интеллекте
@machinee_learning – чат о машинном обучении
@datascienceml_jobs - работа ds, ml
@Machinelearning_Jobs - чат работы мл
🖥 Python
@pythonl - главный канал самого популярного языка программирования.
@pro_python_code – учим python с ментором.
@python_job_interview – подготовка к Python собеседованию.
@python_testit - проверочные тесты на python
@pythonlbooks - современные книги Python
@python_djangojobs - работа для Python программистов
@python_django_work - чат обсуждения вакансий
🖥 Javascript / front
@react_tg - - 40,14% разработчиков сайтов использовали React в 2022 году - это самая популярная библиотека для создания сайтов.
@javascript -канал для JS и FrontEnd разработчиков. Лучшие практики и примеры кода. Туториалы и фишки JS
@Js Tests - каверзные тесты JS
@hashdev - погружение в web разработку.
@javascriptjobjs - отборные вакансии и работа FrontEnd.
@jsspeak - чат поиска FrontEnd работы.
👷♂️ IT работа
@hr_itwork -кураторский список актуальных ит-ваканнсии
🤡It memes
@memes_prog - ит-мемы
⚙️ Rust
@rust_code - Rust избавлен от болевых точек, которые есть во многих современных яп
@rust_chats - чат rust
#️⃣ c# c++
C# - объединяет лучшие идеи современных языков программирования
@csharp_cplus чат
С++ - Универсальность. Возможно, этот главный плюс C++.
📓 Книги
@programming_books_it - большая библиотека. программиста
@datascienceiot -ds книги
@pythonlbooks - python библиотека.
@golang_books - книги Golang
@frontendbooksit - front книги
@progersit - ит-шпаргалки
@linux_read - Linux books
@java_library - Java books
🖥 Github
@github_code - лучшие проекты с github
@bigdatai - инструменты по работе с данными
🖥 Devops
Devops - специалист общего профиля, которому нужны обширные знания в области разработки.
📢 English for coders
@english_forprogrammers - Английский для программистов
💡 ChatGpt bot
@Chatgpturbobot - бесплатный бот ChatGpt
@javatg - выучить Java с senior разработчиком по профессиональной методике.
@javachats - чат для ответов на вопросы по Java
@java_library - библиотека книг Java
@android_its - Android разработка
@java_quizes - тесты Java
@Java_workit - работа Java
@progersit - шпаргалки ит
@Golang_google - восхитительный язык от Google, мощный и перспективный.
@golang_interview - вопросы и ответы с собеседований по Go. Для всех уровней разработчиков.
@golangtests - интересные тесты и задачи GO
@golangl - чат изучающих Go
@GolangJobsit - отборные вакансии и работа GO
@golang_jobsgo - чат для ищущих работу.
@golang_books - полезные книги Golang
@golang_speak - обсуждение языка Go
@linux -топ фишки, гайды, уроки по работе с Linux.
@linux chat - чат linux для обучения и помощи.
@linux_read - бесплатные книги linux
@sqllib - библиотека баз данных
@sqlhub - повышение эффективности кода с грамотным использованием бд.
@chat_sql - чат изучения бд.
@data_analysis_ml - data science
@vistehno - chatgpt ведет блог, решает любые задачи и отвечает на любые ваши вопросы.
@aigen - сети для генерации картинок. видео, музыки и многого другого.
@neural – погружение в нейросети.
@ai_ml – погружение в нейросети, ai, Chatgpt, midjourney, машинное обучение.
@machinelearning_ru – машинное обучении на русском от новичка до профессионала.
@machinelearning_interview – подготовка к собеседованию.
@datascienceiot – бесплатные книги Machine learning
@ArtificialIntelligencedl – канал о искусственном интеллекте
@machinee_learning – чат о машинном обучении
@datascienceml_jobs - работа ds, ml
@Machinelearning_Jobs - чат работы мл
@pythonl - главный канал самого популярного языка программирования.
@pro_python_code – учим python с ментором.
@python_job_interview – подготовка к Python собеседованию.
@python_testit - проверочные тесты на python
@pythonlbooks - современные книги Python
@python_djangojobs - работа для Python программистов
@python_django_work - чат обсуждения вакансий
@react_tg - - 40,14% разработчиков сайтов использовали React в 2022 году - это самая популярная библиотека для создания сайтов.
@javascript -канал для JS и FrontEnd разработчиков. Лучшие практики и примеры кода. Туториалы и фишки JS
@Js Tests - каверзные тесты JS
@hashdev - погружение в web разработку.
@javascriptjobjs - отборные вакансии и работа FrontEnd.
@jsspeak - чат поиска FrontEnd работы.
👷♂️ IT работа
@hr_itwork -кураторский список актуальных ит-ваканнсии
🤡It memes
@memes_prog - ит-мемы
⚙️ Rust
@rust_code - Rust избавлен от болевых точек, которые есть во многих современных яп
@rust_chats - чат rust
#️⃣ c# c++
C# - объединяет лучшие идеи современных языков программирования
@csharp_cplus чат
С++ - Универсальность. Возможно, этот главный плюс C++.
📓 Книги
@programming_books_it - большая библиотека. программиста
@datascienceiot -ds книги
@pythonlbooks - python библиотека.
@golang_books - книги Golang
@frontendbooksit - front книги
@progersit - ит-шпаргалки
@linux_read - Linux books
@java_library - Java books
@github_code - лучшие проекты с github
@bigdatai - инструменты по работе с данными
Devops - специалист общего профиля, которому нужны обширные знания в области разработки.
@english_forprogrammers - Английский для программистов
@Chatgpturbobot - бесплатный бот ChatGpt
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2🔥1
🕘 Дата и время в JavaScript
JavaScript определяет класс Date для представления и оперирования числами с целью отображения даты и времени.
Объект Date создается с помощью конструктора Date(). Этот объект можно использовать, чтобы отображать год, месяц и день на веб-странице в виде таймера.
Результат работы конструктора Date() зависит от переданных ему аргументов.
▪ Читать дальше
@javascriptv
JavaScript определяет класс Date для представления и оперирования числами с целью отображения даты и времени.
Объект Date создается с помощью конструктора Date(). Этот объект можно использовать, чтобы отображать год, месяц и день на веб-странице в виде таймера.
Результат работы конструктора Date() зависит от переданных ему аргументов.
▪ Читать дальше
@javascriptv
👍12❤1🔥1
Шпаргалка по символам и иконкам для фронтенд-разработчика
AmpWhat — это интерактивный справочник с символьными объектами HTML, символами Unicode и 8859-1, кавычек, математических символов, а также греческих букв.
Если вам нужно вставить иконку или найти нужный символ не в формате изображения для вставки в HTML или для псевдоэлементов, то AmpWhat может помочь сгенерировать варианты за несколько секунд:
https://www.amp-what.com/
@javascriptv
AmpWhat — это интерактивный справочник с символьными объектами HTML, символами Unicode и 8859-1, кавычек, математических символов, а также греческих букв.
Если вам нужно вставить иконку или найти нужный символ не в формате изображения для вставки в HTML или для псевдоэлементов, то AmpWhat может помочь сгенерировать варианты за несколько секунд:
https://www.amp-what.com/
@javascriptv
👍12❤1🔥1