Как делать формы с адресом электронной почты пользователя?
В этой статье рассматриваются способы, как создать формы для пользовательского ввода, которые помогут легко защитить адрес электронной почты от спам-ботов.
Автор предлагает несколько решений на: 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
This media is not supported in your browser
VIEW IN TELEGRAM
Download interaction
Анимация статуса загрузки, реализованная с помощью CSS и JavaScript.
#анимация #css #javascript
https://codepen.io/milanraring/pen/jOEOmbv
@javascriptv
Анимация статуса загрузки, реализованная с помощью CSS и JavaScript.
#анимация #css #javascript
https://codepen.io/milanraring/pen/jOEOmbv
@javascriptv
👍17❤2🔥1
8 неэффективных практик JavaScript, которых лучше избегать
Самая большая ответственность каждого программиста заключается в том, чтобы написанный им код был легко тестируемым и сохранял работоспособность с течением времени.
Даже незначительные мелочи могут оказывать негативное влияние на код, а в итоге — и на программный продукт. Подобные проблемы я испытал на собственном опыте. Поэтому решил рассказать о непродуктивных практиках программирования и о том, почему следует избегать их любой ценой.
▪ Читать
@javascriptv
Самая большая ответственность каждого программиста заключается в том, чтобы написанный им код был легко тестируемым и сохранял работоспособность с течением времени.
Даже незначительные мелочи могут оказывать негативное влияние на код, а в итоге — и на программный продукт. Подобные проблемы я испытал на собственном опыте. Поэтому решил рассказать о непродуктивных практиках программирования и о том, почему следует избегать их любой ценой.
▪ Читать
@javascriptv
👍15❤2👎2🔥2