Javascript

Ваш Level Up в мире Frontend-разработки WEBIK — канал для каждого, кто стремится проверить и углубить свои знания в вебе. Там публикуют: ✓ Тесты на понимание кода с объяснениями ✓ Разборы задач и вопросов с собеседований ✓ Авторские обучающие статьи простым языком ✓ Макеты и эффекты для ваших пет-проектов ✓ Крутые рецепты кода ✓ Очень смешные мемасики Вступай в WEBIK и становись крутым web разрабом!

💡Лайфхак для работы с 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

☕️ Освойте Java с нуля на курсе «Профессия Java-разработчик». Станьте IT-специалистом, которому уже в начале карьеры готовы платить до 100 000 рублей в месяц. Что вам даст этот курс? ✅ Изучите синтаксис Java и пройдёте основы объектно-ориентированного программирования. ✅ Узнаете, как работать с файловой системой, сетью и базами данных — познакомитесь с SQL. ✅ Научитесь вести контроль версий в Git. ✅ Создадите 2 мощных приложения для портфолио: разработаете поисковый движок и книжный интернет-магазин — аналог ЛитРес. ✅ Новая работа уже через 8 месяцев. Узнать подробнее о курсе можно здесь: https://epic.st/JREHA Оставьте заявку на курс сейчас и получите 3 месяца бесплатного обучения и год английского в подарок! Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

🖥 Явное управление ресурсами в 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

Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript! 🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний. Вы освоите создание программ с использованием основных конструкций языка, сможете составлять программы из нескольких модулей и научитесь анализировать ошибки в коде с помощью отладочной печати. 💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности. Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉

⚡️ Вышел новый плагин для Figma, который позволяет превращать дизайны в полноценные работающие приложения на SwiftUI. Использовать Trace можно бесплатно. ▪ Попробовать @javascriptv

Как разрабатывать CLI на Node.js? Узнайте на бесплатном практическом уроке от OTUS, где вы вместе с опытным экспертом разберете: 1. Введение в CLI-разработку 2. Основы работы с Node.js 3. Создание интерфейса CLI 4. Обработку пользовательского ввода 5. Взаимодействие с файловой системой и внешними API 6. Тестирование и отладку 7. Лучшие практики и советы разработки CLI ⏲ Встречаемся 6 марта в 20:00 мск в рамках курса «JavaScript Developer. Professional». Доступна рассрочка на обучение! Пройдите небольшой тест прямо сейчас, чтобы посетить бесплатный урок и получить запись: https://otus.pw/qrAe/?erid=LjN8JtuQA

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. 📌Подробнее

A moment of pure CSS Создано без использования JS. Анимации реализованы при помощи CSS keyframes. https://codepen.io/ivorjetski/pen/yLjeqgb #css @javascriptv

Изучите JavaScript на продвинутом уровне, на практике познакомьтесь с актуальным технологическим стеком Всего за 5 месяцев под руководством топовых специалистов из ведущих компаний Актуальная программа поможет создать резюме мечты для крупных работодателей Есть рассрочка, пройдите короткий тест и узнайте, готовы ли вы к обучению: https://otus.pw/fxoh/?erid=LjN8K3j23

🖥 Rotating border Граница сделана из псевдоэлементов, которые анимируются в CSS. #css https://codepen.io/Chokcoco/pen/dypaobm @javascriptv

Уже решили, чем займётесь 23 марта? Присоединяйтесь к конференции «Я💛Фронтенд 2024»: в Москве и онлайн! Послушаем выступления спикеров, узнаем последние новости веба, поучаствуем в активностях с подарками, и, конечно, познакомимся друг с другом. Регистрируйтесь и присоединяйтесь офлайн или онлайн — трансляция пройдёт по всему миру. Реклама. ООО "Яндекс". ИНН 7736207543