Javascript

🖥 Интересный codepen-проект

Интересная идея; можно сделать что-то похожее — и будет, что показать на собесе.
Solar system — анимация описания планет солнечной системы. Проект реализован с помощью CSS и JavaScript.

🔜 Код на Codepen

@javascriptv

🖥 При виде этого не сталкивающийся с JS программист переживает шок — как это?!

⏩А ты сможешь с ходу объяснить, почему так?

Начнём с того, что для сравнения JavaScript приводит обе стороны равенства к одному типу.
Также вспомним, что если число начинается с 0, JS предполагает, что оно написано в восьмеричном формате, и выполняет необходимые преобразования.

И в этом всё дело, 018 — недопустимое восьмеричное число (в 8-ричной системе цифры от 0 до 7). А раз в числе 018 есть восьмёрка, то JavaScript теперь рассматривает его как обычное десятичное, то есть равное 18. Получается, что '018' == 18 — выражение является истинным.

При этом 017 — допустимое восьмеричное число, поэтому JS представляет его как 8-ричное число 15, потому что 1×8¹ + 7×8⁰ = 15. А строку '017' он рассматривает как десятичное число, в результате чего получается 17. Но 15 не равно 17, поэтому второе выражение неверно.

Такие вот дела, ох уж это автоприведение типов 🙃

@javascriptv

💡Лайфхак для работы с JS в IntelliJ IDEA 🖥

Если вы используете бесплатную IntelliJ IDEA Community Edition, то из поддержки JS и CSS там только весьма скудная syntax highlighting only подсветка синтаксиса, но есть простой способ её улучшить.

В этом нам поможет плагин TextMate Bundles https://plugins.jetbrains.com/plugin/7221-textmate-bundles, который уже встроен в современных версиях IDEA. В этом плагине уже встроены бандлы для JavaScript и CSS, причём, с достаточно неплохой подсветкой синтаксиса. Загвоздка в том, что эта подсветка не работает из коробки, т.к. её перекрывает та самая syntax highlighting only подсветка.

Чтобы всё заработало, идём в Settings > Editor > File Types и удаляем File name patterns для CSS (syntax highlighting only) и JavaScript (syntax highlighting only). Тоже самое можно проделать и для SQL (syntax highlighting only).

Пример было/стало для JavaScript на картинке

@javascriptv

🖥 Явное управление ресурсами в TypeScript — using

Недавно в TypeScript’е появилось новое ключевое слово using. Оно позволяет нам сделать код чище и более линейным, избавившись от try/finally.

Но мы можем использовать using не только, когда открываем файл или подключение к базе данных — это как Undo/Redo только наоборот, сперва мы выполняем какое-то действие, а в конце отменяем его:
- создали объект, удалили
- показали спиннер и скрыли, когда получили данные
Причем отмена удобно происходит в самом конце функции, даже если мы используем async/await.

Вот простой пример, как можно использовать using, чтобы показывать/скрывать спиннер в React коде:

useEffect(() => {
  (async () => {
    using manager = new LoadingManager(setIsLoading);
    await Promise.resolve().then(() => console.log("promise.resolve"));
  })();
 }, []);

/**
 * Класс, который управляет состоянием спиннера
 */
class LoadingManager {
  constructor(private setIsLoading: (value: boolean) => any) {
    this.setIsLoading(true);
    console.log("constructor");
  }

  [Symbol.dispose]() {
    this.setIsLoading(false);
    console.log("disposer")
  }
}

// В консоли будет выведено в следующем порядке
// constructor

К сожалению, нельзя опустить переменную manager, но это лучше, чем лепить везде try/finally.

@javascriptv

⚡️ Вышел новый плагин для Figma, который позволяет превращать дизайны в полноценные работающие приложения на SwiftUI.

Использовать Trace можно бесплатно.

▪ Попробовать

@javascriptv

Folded Paper Login Form - Форма входа в систему в виде сложенной бумаги, реализованная на чистом CSS.

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

@javascriptv

🖥 Moment.js — отличная библиотека JS для работы с датой и временем

npm install moment --save

Объект moment в Moment.js является изменяемым. Это означает, что такие операции, как add, subtract или set, изменяют исходный объект moment. При первом использовании Moment.js для многих могут быть непривычны сценарии наподобие этого:

var a = moment('2016-01-01'); 
var b = a.add(1, 'week'); 
a.format();
"2016-01-08T00:00:00-06:00"

🖥 GitHub
📁 Доки

@javascriptv

🖥 Проверь себя

Подвержен ли этот код SQL-инъекциям? Пиши в комментах

@javascriptv

🔤Знаете ли вы, что можно повысить производительность кода JS, изменив способ импорта?

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

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

Теперь вы можете загружать их только тогда, когда они вам нужны.

@javascriptv

🖥 Простая задачка на понимание работы с замыканиями, и умение применять их на деле
Проверь себя!

/** 
* Нужно написать функцию, которая принимает число N и возвращает функцию,
* вызов которой первые N раз возвращает 'yes', а потом – 'no'.
*/
function canGetCount(n) {
    // code here
}

const getOne = canGetCount(2);
 
getOne()  === 'yes'
getOne()  === 'yes'
getOne()  === 'no'

@javascriptv

Современная фронтенд-разработка: мир HTML, CSS, JavaScript и популярных фреймворков

Фронтенд-разработка — это динамично развивающаяся дисциплина, которая занимается созданием и улучшением интерфейса веб-приложений. Разработчики в этой области применяют различные технологии для улучшения дизайна, удобства использования и производительности веб-страниц. В этой статье мы отправимся в путешествие по освоению фронтенд-разработки. Начнем с основополагающих элементов — HTML, CSS и JavaScript, — а потом перейдем к популярными фронтенд-фреймворкам, таким как React и Vue.js.

HTML: скелет страниц
HTML (HyperText Markup Language) — это основной язык разметки для создания веб-страниц. Он используется для определения структурных элементов и организации контента. Базовая структура HTML-страницы выглядит следующим образом:

📌 Читать

@javascriptv

🖥 Красивый слайдер на чистом CSS

Удачно впишется в сайт с любым дизайном

@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Figtree", sans-serif;
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background: #000;
}

.container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 1em;
  width: 800px;
  height: 500px;
  transition: all 400ms;
}

.container:hover .box {
  filter: grayscale(100%) opacity(24%);
}

.box {
  position: relative;
  background: var(--img) center center;
  background-size: cover;
  transition: all 400ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .box:hover {
  filter: grayscale(0%) opacity(100%);
}

.container:has(.box-1:hover) {
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
}

.container:has(.box-2:hover) {
  grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
}

.container:has(.box-3:hover) {
  grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}

.container:has(.box-4:hover) {
  grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
}

.container:has(.box-5:hover) {
  grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
}

.box:nth-child(odd) {
  transform: translateY(-16px);
}

.box:nth-child(even) {
  transform: translateY(16px);
}

.box::after {
  content: attr(data-text);
  position: absolute;
  bottom: 20px;
  background: #000;
  color: #fff;
  padding: 10px 10px 10px 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  transform: translateY(60px);
  opacity: 0;
  transition: all 400ms;
}

.box:hover::after {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 400ms;
}

https://codepen.io/petrovpetr/pen/rNRXrNw

@javascriptv

📚 Book reviews - Верстка реализована при помощи CSS Grid. Анимации созданы библиотекой gsap.

https://codepen.io/BlogFire/pen/RwMwjMP

@javascriptv

Тренды UX/UI дизайна на 2024 год

Больше, чем детские ланч-боксы. Бенто-боксы.

Бенто-боксы — это суть упакованной еды в японской культуре. Они хорошо известны своей способностью хранить продукты в организованном виде и сохранять чистоту.

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

Bento UI — очередная дизайнерская тенденция, которая начала набирать популярность на таких платформах, как Dribbble и Behance, и была замечена миллионами дизайнеров. Однако концепция “модульного” дизайна началась с панелей управления для сайтов. Это включает в себя панели управления продажами и финансами, например PayPal, аналитику, наподобие Google Ads, и многое другое.

Помните Windows Phone и Lumia? В общем-то, интерфейс, который они использовали, был ранними версиями Bento UI. Позже Microsoft также внедрили эту концепцию в меню запуска Windows на рабочем столе в Windows 8.

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

📌Подробнее

@javascriptv

A moment of pure CSS

Создано без использования JS. Анимации реализованы при помощи CSS keyframes.

https://codepen.io/ivorjetski/pen/yLjeqgb

#css

@javascriptv

🖥 Rotating border

Граница сделана из псевдоэлементов, которые анимируются в CSS.

#css

https://codepen.io/Chokcoco/pen/dypaobm

@javascriptv

Changing background colour with CSS - Ползунок с изменением заднего фона сайта.

https://codepen.io/CupOfTegan/pen/KKrqXmP

@javascriptv

Совет по CSS 💡

Одно правило CSS для отображения звездочки (*) для всех обязательных полей

@javascriptv

🎮 Pac-Man

Историческая дань уважения и точный ремейк оригинальной аркадной игры Pac-Man , написанный на JS.

▪Github

@javascriptv