⭐️ Форма ввода стиля Google Keep в VanillaJS

Если вы когда-либо пользовались Google keep, вы должны быть знакомы с их динамической формой ввода для создания заметки. На первый взгляд форма выглядит простой, но найти решение может быть немного сложно.

✔️ Пример
❤️ Codpen

@javascriptv

✔️ Как использовать ESLint, чтобы повысить качество кода JavaScript и TypeScript

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

Однако каждая команда должна придерживаться единого стандарта программирования. Так код будет легче просматривать и поддерживать. В этом помогает ESLint.

ESLint  —  инструмент статической проверки кода, используемый для мониторинга качества и стилистической выдержанности кода JavaScript. TSLint, применявшийся ранее для проверки кода на TypeScript, уже устарел. Сегодня ESLint используется и для кода TypeScript.

Начинать работу с ESLint может быть непросто, особенно если проверять с его помощью код TypeScript. Предлагаем практическое руководство, которое поможет установить и настроить ESLint для проектов на JavaScript и TypeScript.

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

@javascriptv

🍪 Contact Form Template

Шаблон контактной формы. Реализовано с помощью JavaScript и CSS.

#css #js

https://codepen.io/see8ch/details/AqwqrZ

@javascriptv

Array.sort() в JavaScript

Давайте рассмотри такую ситуацию. Вы на собеседовании. И вам дали на рассмотрение множество строк.

const arr = [
"karachi",
"lahore",
"kolachi",
"islamabad"
]
И попросили отсортировать в алфавитном порядке.

Представим, что ваш шаг будет выглядеть так:

arr.sort((a, b) => {
return a < b;
});
Вам скажут, что это будет работать только с числами (на самом деле это не так), но не сработает для строк.

➡️ Читать

@javascriptv

🖥 Material Design - FAB Motion Animation

Анимация изменения дизайна при нажатии. Написана с помощью javascript и css.

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

https://codepen.io/equinusocio/pen/eNaNgq

@javascriptv

🖥 8 советов по разработке на JavaScript, которые освободят вас от переработок

#1. Удаление элементов массива
В процессе работы над проектом часто возникает необходимость удалить элемент из массива. Вероятно, первое, что приходит в голову,  —  использовать delete. Однако всем известно, что элемент после удаления станет неопределенным и не исчезнет полностью, а будет потреблять много времени при выполнении. Таким образом, это решение не отвечает нашим потребностям и не является оптимальным.

Для удаления элементов массива лучше использовать метод array.splice():

const array = ["b", "c", "d", "e"]

array.splice(0, 2) // ["b", "c"]

#2. Проверка пустоты объекта
Мы часто сталкиваемся с необходимостью проверить, является ли объект пустым. Выполнить это требование можно относительно простым и удобным способом  —  использовать метод Object.keys() для получения ключей объекта. Таким образом, мы вернем значение, содержащее эти ключи. Если возвращаемый массив имеет длину 0, то объект должен быть пустым.

Вот как выглядит этот метод:

Object.keys({}).length // 0

Object.keys({key: 1}).length // 1
#3. Отказ от частого использования with() и eval()
Рассмотрим проблемы, связанные с их использованием with() и eval().

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

#4. Сокращение console.log()
При отладке довольно хлопотно каждый раз писать console.log(). Поэтому можно использовать следующую форму для упрощения кода.

const c = console.log.bind(document)

#5. Фильтрация значений ошибок
При выполнении требований проекта мы часто сталкиваемся с false, 0, null, undefined и другими значениями, которые необходимо отфильтровать в массиве. Для этого можно использовать следующие методы:

const array = [3, 4, undefined, 8, 9, '', false];

array.filter(Boolean);

// [3, 8, 9]

#6. map() для унификации с элементами массива
Сначала вспомним, что представляет собой метод map(). Он служит для создания нового массива, состоящего из возвращаемого значения предоставленной функции, вызываемой один раз для каждого элемента в исходном массиве.

Для простоты и наглядности рассмотрим пример: выполнить по 3 операции со всеми элементами массива.

let arr = [1,2,3]

arr = arr.map(item=>item*2)

console.log(arr); //[ 1,6,9 ]

#7. Array.from() для преобразования массивоподобной структуры в массив
Метод Array.from() используется для создания нового поверхностного экземпляра массива из массивоподобного или итерируемого объекта. Если для вас это объяснение слишком отвлеченное, то можно определить и проще: объект с длиной и несколькими индексами.

let str = 'bcd'

str = Array.from(str)

console.log(str); // [ 'b', 'c', 'd' ]

#8. Быстрая очистка массива
В проектах мы часто сталкиваемся с тем, что нам нужно очистить массив. Длину массива можно установить на 0:

let array = ["b", "c", "d"]

array.length = 0

console.log(array) // []

@javascriptv

🌐 Textarea auto-expand

Автоматическое расширение текстовой области. Реализовано с помощью JavaScript и CSS.

#css #js #html

⭐️ Code

@javascriptv

🖥 7 репозиториев GitHub, которые должен знать каждый front-end разработчик

GitHub — это золотая жила ресурсов, и каждый разработчик это знает. Итак, в этой статье мы поделимся некоторыми из лучших репозиториев GitHub, о которых должен знать каждый фронтенд-разработчик. Давайте начнем.

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

Ссылка на GitHub: https://github.com/ryanmcdermott/clean-code-javascript

Алгоритмы JavaScript и структура данных
Алгоритмы и структуры данных, реализованные в JavaScript, с пояснениями и ссылками на дополнительную литературу.

Этот репозиторий содержит примеры многих популярных алгоритмов и структур данных на основе JavaScript.

Каждый алгоритм и структура данных имеют свой собственный отдельный README с соответствующими пояснениями и ссылками для дальнейшего чтения (в том числе на видео YouTube).

Ссылка на GitHub: https://github.com/trekhleb/javascript-algorithms

Вы не знаете JavaScript
Это серия книг по JavaScript. Это серия книг, глубоко погружающих в основные механизмы языка JavaScript.

Ссылка на GitHub: https://github.com/getify/You-Dont-Know-JS

Лучшая практика NodeJS
Это хранилище представляет собой краткое изложение и кураторство самого рейтингового контента на Node.js лучшие практики, а также контент, написанный здесь сотрудниками. Это поможет многим разработчикам получить высококачественные знания о серверной разработке с помощью NodeJS.

Ссылка на GitHub: https://github.com/goldbergyoni/nodebestpractices

Контрольный список Frontend
Идеальный контрольный список интерфейсов для современных веб-сайтов и дотошных разработчиков. Он основан на многолетнем опыте интерфейсных разработчиков, с дополнениями, взятыми из некоторых других контрольных списков с открытым исходным кодом.

Ссылка на GitHub: https://github.com/thedaviddias/Front-End-Checklist

Бесплатно для разработчиков
Список предложений SaaS, PaaS и IaaS, которые имеют бесплатные уровни, представляющие интерес для DevOps и infra dev.

Объем этого конкретного списка ограничен вещами, которые разработчики инфраструктуры (системные администраторы, практики DevOps и т.д.), вероятно, сочтут полезными.

DSA в JavaScript
Этот репозиторий содержит структуры данных и алгоритмы, объясненные и реализованные в JavaScript + eBook.

Ссылка на GitHub: https://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript

@javascriptv

✅ Perlin Noise

Анимация голограммы. Реализована с помощью JavaScript и CSS.

#анимация #css

https://codepen.io/vcomics/pen/djqNrm

@javascriptv

🔥 Полезные библиотеки Javascript

Auto-Photoshop-StableDiffusion-Plugin - удобный подключаемый модуль, который позволяет легко создавать изображения c stable diffusion внутри Photoshop, используя Automatic1111-sd-webui в качестве бэкенда.

git clone https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git

🖥 Github

@javascriptv

✅ Photoshot — веб-приложение для создания аватаров с искусственным интеллектом с открытым исходным кодом.

⚙️ GitHub

yarn install

#typescript #soft #github

@javascriptv

🖥 Отслеживайте местоположения через VPN, используя одну строку JavaScript

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

Некоторое время назад браузеры выступали за то, чтобы предоставлять разработчикам больше возможностей для создания новых и улучшенных интерфейсов в Интернете. Это мнение изменилось с тех пор, как технологические гиганты стали собирать информацию о пользователях и отслеживать каждое действие, даже через разные веб-сайты.

Это осознание положило начало гонке вооружений между разработчиками API-интерфейсов браузера и разработчиками скриптов отслеживания. С тех пор, чем больше функций и опций у вашего браузера, тем больше у вас возможностей отслеживать каждого пользователя с более высокой степенью детализации.

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

@javascriptv

⭐️ Attempt CSS3 Clickable Slider

Кликабельный слайдер. Реализован с помощью JavaScript и CSS.

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

https://codepen.io/johnmotyljr/pen/kWwBOw

@javascriptv

✅ Mitosys Canvas

Фоновая анимация в виде деления клеток, реализованная с помощью JavaScript.

#js

https://codepen.io/supah/pen/BqREob

@javascriptv

❄️ Новогодний лоадер со снежком

Этот лоадер добавит новогоднего настроения вашему сайту. 3D-эффект здесь смотрится особенно хорошо, добавляя глубины и реалистичности. Посмотреть, как он реализован можно тут:

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

#codepen #css #loader

@javascriptv

🖥 Before/After Image Slider

Слайдер "До/После", выполненный с помощью SVG, CSS и JavaScript.

#css #js

https://codepen.io/Coding-in-Public/pen/NWyjZwO

@javascriptv

🛡 15 источников со шпаргалками для разработчиков

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

✔️ Шпаргалки

@javascriptv

🖥 Touch device jelly menu concept

Анимация желейного меню при прокрутке. Реализована с помощью JavaScript и CSS.

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

https://codepen.io/sol0mka/pen/AEbgXK

@javascriptv

🖥 Planck.js

Planck.js – небольшой физический 2D движок на JavaScript, что отлично подойдет для написания HTML5-игр. Интересный для ознакомления проект.

🖥 Github
✔️ Документация

@javascriptv

🖥 Subcolor – инструмент для генерации оттенков между двумя разными цветами

Представлен в двух видах: js-библиотеки и веб-сервиса

@javascriptv