🖥 Truthy и Falsy в JavaScript

В JavaScript, truthy – это всё, что в логическом контексте считается истиной. Если что-то не является явно ложным (например, 0 или пустая строка ""), то это truthy.

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

▶️Допустим, вы пишете веб-приложение на JavaScript, и хотите проверить, заполнил ли пользователь поле с именем, прежде чем отправить форму. Вот где в игру вступают понятия truthy и falsy.

В JavaScript, если строка не пустая, она считается truthy, а пустая строка — это falsy. Это значит, что вы можете использовать простую проверку, чтобы узнать, заполнено ли поле:

let userName = form.userName.value; // значение, введённое пользователем

if (userName) {
  // Если userName truthy 
  console.log("Спасибо за заполнение имени, " + userName + "!");
} else {
  // Если userName falsy 
  console.log("Пожалуйста, заполните поле с именем.");
}

Этот пример показывает, как использование понятий truthy и falsy может сделать ваш код более кратким и читаемым. Вместо того чтобы писать сложные условия для проверки, не является ли строка пустой, не равна ли она null или undefined, вы можете просто проверить, truthy ли значение переменной.

Примеры falsy значений включают:
🟡0 и -0
🟡"" (пустая строка)
🟡null
🟡undefined
🟡NaN

Всё остальное в JavaScript считается truthy, включая:
🟡"0" (строка, содержащая символ нуля)
🟡"false" (строка, содержащая текст false)
🟡Пустые объекты {} и массивы []

@javascriptv

Читать полностью…

VK — не только соцсеть, но еще и крутое IT-комьюнити. Сейчас они строят суперапп Почты Mail.ru и ищут коллегу, готового улучшать пользовательский опыт.

В команде VK вы будете:
— работать над умной организацией рассылок;
— решать проблемы нежелательной почты;
— создавать способы для отслеживания онлайн-заказов;
— поддерживать платежные системы и ещё много всего.

Ты тоже можешь стать частью команды VK и развивать технологичную, современную и безопасную среду. Оффер ждет тебя тут > https://vk.cc/cveMSm

Читать полностью…

💻 7 приложений и сайтов, которые облегчат работу UX/UI дизайнера

Никто не будет спорить, что Figma круто изменила работу для UX/UI дизайнера, делая все проще и объединяя все необходимое в одном месте. Однако даже со всеми потрясающими возможностями и плагинами в Figma существуют и другие приложения и сайты, которыми дизайнеры пользуются каждый день и которые Figma заменить не может. Каждое из них выполняет особую задачу, которая выходит за пределы возможностей Figma. Поэтому хочется поделиться 7 приложениями и сайтами, которые можно использовать вместе с Figma. Этот список покажет, что иногда для достижения лучших результатов нужно использовать несколько инструментов.

1. Mobbin

Для исследования: Lyssna, Maze

2. Lyssna

3. Maze

4. Сбор данных: Typeform

Визуализация и UI: Fonts in Use, Designstripe, Palettemaker

5. Fonts in Use

6. Designstripe

7. PaletteMaker

@javascriptv

Читать полностью…

Kippo Hover Card Effect

Эффект раскрытия карточек при наведении, реализованный с помощью CSS и JavaScript.

#css #js

https://codepen.io/Hyperplexed/pen/zYWdYoo

@javascriptv

Читать полностью…

💥 Представляем вам оболочку Bun Shell

Кроссплатформенный язык оболочки и интерпретатор для создания cкриптов с использованием JavaScript.

https://bun.sh/blog/the-bun-shell

@javascriptv

Читать полностью…

🖥 30-Days-Of-JavaScript

Полное пошаговое руководство по изучению языка программирования JavaScript за 30 дней.

В курсе вы используете JavaScript для добавления интерактивности на веб-сайты, для разработки мобильных приложений, настольных приложений, игр, и в настоящее время JavaScript можно использовать для машинного обучения и AI.

Темп изучения у каждого разный – не удивляйтесь если вы будете проходить его дольше

🖥 Инструкци

@javascriptv

Читать полностью…

🔖 Вот 3 инструмента, которые можно использовать для эффективного поиска конфиденциальной информации в JS-файлах:

1. Hakrawler.
Извлечение файлов JavaScript.
🔗 Ссылка : https://github.com/hakluke/hakrawler

2. LinkFinder
Поиск конечных точек в файлах JS.
🔗Link : https://github.com/GerbenJavado/LinkFinder

3. jsluice
Извлечение URL, путей, секретов и других интересных данных из исходного кода JavaScript.
🔗Link : https://github.com/BishopFox/jsluice

⚠️ Информация предоставлена исключительно с целью ознакомления. И побуждает обратить внимание на проблемы в безопасности.

@javascriptv

Читать полностью…

💻 Sparkly Stars - Анимация при наведении, сделанная с помощью Pug и библиотеки Babel.js

https://codepen.io/Alca/pen/XWgGbKm

@javascriptv

Читать полностью…

🖥 Build LLM Apps with LangChain.js

GitHub недавно сообщили, что JavaScript снова стал самым популярным языком программирования в мире. Чтобы поддержать веб-разработчиков, изучающих и разрабатывающих генеративный ИИ, deeplearning_ai только что запустили новый краткий курс по JavaScript.

В курсе Build LLM Apps with LangChain.js вы познакомитесь с элементами, характерными для разработки ИИ, включая:

(i) использование парсеров данных для получения данных из распространенных источников
(ii) промпты, которые используются для создания контекста LLM
(iii) Модули для поддержки RAG, такие как разделители текста и интеграция с векторными хранилищами
(iv) Работа с различными моделями для написания ИИ-приложений
(v) парсеры, которые извлекают и форматируют выходные данные для обработки последующим кодом.

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

Собрав все это воедино, вы поработаете над разговорным LLM-приложением для ответов на вопросы, способным использовать внешние данные в качестве контекста.

📌 Курс

@javascriptv

Читать полностью…

⚡️ "Page Replica" - это универсальный инструмент для скраппинга и кэширования веб-страниц, созданный на основе Node.js, Express и Puppeteer.

Он помогает пререндерить страницы веб-приложений (React, Angular, Vue,...), которые можно обслуживать через Nginx для SEO или других целей.

git clone https://github.com/html5-ninja/page-replica.git
cd page-replica

▪ Github

@javascriptv

Читать полностью…

🖥 Раскрываем силу JavaScript: сокращение размера пакета NPM на 99%

Рассмотрим способы улучшения метрик в Lighthouse с 38% до 82% и сокращения FCP (First Contentful Paint, время первой отрисовки контента веб-страницы) с 5,7 до 1,0-1,7 секунды (речь пойдет о проектах с использованием Design System Package — пакета дизайн-системы).

Начну с того, как мы, команда разработчиков Insider, пришли к этому. Разработав 11 различных продуктов для нашей компании, мы использовали дизайн-систему, чтобы лучше управлять фронтенд-частью этих продуктов.

Поскольку дизайн-система содержала все компоненты, был создан JavaScript-файл размером 13,6 МБ. Как вы понимаете, первоначальная загрузка пакета размером 13,6 МБ, даже при запуске одностраничного приложения, создает негативное впечатление о производительности и не радует пользователя.

Что мы предприняли?

📌 Читать

@javascriptv

Читать полностью…

🎄 React Monochromatic Landscape Generator - Генератор ландшафта, выполненный с помощью SCSS, SVG и библиотеки Babel.js

https://codepen.io/dilums/pen/ExZjMey

@javascriptv

Читать полностью…

Крепкий фундамент дома не выстоит за зыбучем песке. Качественное приложение сложно создать без продуманной архитектуры.

Случалось ли вам исправлять один баг, после чего возникало ещё 5? Или перестать понимать, что происходит в коде, который вы же написали?

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

А если она есть?

С таким приложением проще и приятнее работать. Его легче расширять, изменять, тестировать, отлаживать и понимать. У вас самих (и ваших коллег) будет уходить куда меньше времени на исправление ошибок.

И именно этому учат в Слёрм на курсе по архитектуре приложений — он стартует 22 января.

Узнать программу вы можете по ссылке.

Спикеры курса:

✔️Егор Лукьянов, Senior software engineer
Более 15 лет в IT, отвечает за архитектуру платформы анализа больших данных. Руководит бэкенд-разработкой на Python.

✔️Александр Вагнер, Solution Architect & co-founder в TorrowTechnologies
Более 8 лет в IT, строит с нуля компанию и платформу Torrow. Имеет богатый опыт создания и разработки high-load веб-сервисов и приложений.

Курс будет проходить в формате потока: эксперты будут отвечать на вопросы студентов, проводить встречи с подробным разбором сложных заданий.

Записаться на поток вы можете на сайте Слёрм
Реклама. ООО «Слёрм» г. Лиски, ОГРН 1193668020545 Erid: 2Vtzqw9rgKd

Читать полностью…

✌️ Игра камень, ножницы, бумага на чистом CSS.

https://codepen.io/alvaromontoro/pen/BaaBYyz

@javascriptv

Читать полностью…

🌀Циклы в JavaScript

Что такое циклы?
Циклы — быстрый и простой способ многократного выполнения каких-либо действий, позволяющий не возвращаться в точку рестарта раз за разом. Цикл можно сравнить с будильником на мобильном телефоне. Вы настраиваете будильник на определенные дни, например с понедельника по пятницу, и рассчитываете на повторение сигнала будильника в каждый из этих дней. Иначе вам пришлось бы настраивать будильник ежедневно. Цикл избавляет вас от таких повторяющихся задач. Существует множество типов циклов, но все они играют практически одну и ту же роль — повторяют определенную задачу несколько раз.

Зачем нужны циклы?
Циклы используются для написания повторяющихся задач на JavaScript, избавляя от необходимости писать одну и ту же строку кода несколько раз. Они повышают читаемость кода и упрощает его, минимизируя количество строк.

Три основных типа циклов
Существует три основных типа циклов: for, while и do...while. Хотя все три выполняют одну и ту же задачу, есть незначительные различия в их использовании.

Цикл for
Цикл for является наиболее распространенным и наиболее лаконичным способом записи циклической структуры в JavaScript. Выполнение цикла for состоит из трех шагов: инициализации, проверки условия и увеличения/уменьшения переменной. Приведенная ниже схема отражает эти три этапа.

📌Продолжение

Читать полностью…

🖥 Подборка из интересных 20 мини-проектов на чистом Javascript

Никаких фреймворков или библиотек, только JS, HTML5 и CSS

Среди проектов:
*️⃣форма для заполнения
*️⃣бронирование мест в кинотеатре
*️⃣видеоплеер
*️⃣карточки мемори
*️⃣конвертер между валютами
*️⃣счётчик до НГ

Самое то, чтобы прокачать понимание JS, отточить работу с событиями, потренировать разные техники
Just JS it 🔥

https://javascript-mini-projects.netlify.app/

@javascriptv

Читать полностью…

🚗Программирование будущего: беспилотный автомобиль, управляемый JavaScript и ИИ

Вы когда-нибудь мечтали о беспилотном автомобиле?

Теперь это уже не причудливая фантазия. Представьте, что едете по дороге, не держа руки на руле, а строчки кода ведут вас по дороге. Звучит безумно, но еще безумнее то, что этот код заставляет автомобиль не только двигаться, но и уклоняться от препятствий. А если ситуация становится сложной, машина сама нажимает на тормоза.

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

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

Как проводник, JavaScript взаимодействует с электронным блоком управления (ЭБУ) автомобиля, отвечающим за приводную систему, рулевые механизмы и педали ускорения. С помощью тщательно продуманных алгоритмов он преобразует абстрактные инструкции в реальное движение, позволяя автомобилю автономно перемещаться по дороге. По сути, JavaScript наделяет автомобиль интеллектом для принятия решений в доли секунды, превращая строки кода в динамичное управление автомобилем.

📌Читать дальше

@javascriptv

Читать полностью…

🖥JavaScript нужен не везде!

Возможно, вы думаете: "везде, где я использую JS - это единственный верный вариант". Возможно, это и так, но полезно знать, что и разработчики браузеров, и авторы спецификаций переносят на CSS и HTML многие функции, для которых еще несколько лет назад требовался JS. Именно об этом и пойдет речь в этой статье.

https://www.htmhell.dev/adventcalendar/2023/2/

#html #css #javascript

@javascriptv

Читать полностью…

Закрутилось завертелось и все готово

@javascriptv

Читать полностью…

🔥Подборка лучших обучающих каналов для программистов.

➡️Делитесь с коллегами и Сохраняйте себе, чтобы не потерять

🔥 DevOPs
Devops для программистов
Книги Devops

🌟 Docker/Kubernets
Docker
Kubernets

🏆 Golang
Golang - подробные гайды, разбор кода, лучшие практики, заметки
Golang собеседование
Golang вакансии
Golang книги
Golang задачи и тесты
Golang чат
Golang news - новости go

#️⃣C#

С# академия
С# заметки — код, лучшие практики, заметки программиста c#
С# задачи и тесты
С# библиотека - актуальные бесплатные книги
C# вакансии - работа

⚡Машинное обучение

Machine Learning - полезные статьи новости гайды и разбор кода
Ml Собеседование - подготовка к собеседовению мл, алгоритмам, кодингу
Ml ru - актуальные статьи, новости, код и обучающие материалы
Ml Jobs - вакансии ML
ML Книги - актуальные бесплатные книги МО
ML чат

🚀 Data Science

Анализ данных - полезные фишки, код, гайды и советы, маст-хэв датасаентиста
Data Jobs - ds вакансии
Аналитик данных
Data Science книги - актуальные бесплатные книги
Big data

🐍 Python

Python/django
Python Собеседование - подготовка к собеседовению python и разбор алгоритмов
Pro python - статьи, новости, код и обучающие материалы
Python Jobs - вакансии Python
Python чат
Python книги

☕ Java

Java академия
Java вакансии
Java чат
Java вопросы с собеседований
Java книги

💻 C++

C++ академия
С++ книги
C++ задачи - подготовка к собеседовению мл, алгоритмам
C++ вакансии

💥 Хакинг Kali Linux

Kali linux
linux_kal - kali чат
Информационная безопасность

🐧 Linux

Linux academy

🦀 Rust
Rust программирование
Rust чат

🛢Базы данных
Sql базы данных
Библиотека баз данных
SQL чат

📲 Мобильная разработка
Android разработка
Мобильный разработчик гайды и уроки

🖥 Javascript/React/PHP
Javascript академия
React программирование
PHP
Книги frontend
Задачи frontend

🇬🇧 Английский для программистов

🧠 Искусственный интеллект
ИИ и технологии
Neural - нейросети для работы и жизни
Книги ИИ
Artificial Intelligence

😂 IT мемы

📓 Книги
Библиотеки Книг для программситов

💼 Папка с вакансиями:
Папка Go разработчика:
Папка Python разработчика:
Папка Data Science
Папка Java разработчика
Папка C#

Читать полностью…

☑ Вышел Angular 17.1

https://github.com/angular/angular/releases/tag/17.1.0

@javascriptv

Читать полностью…

🖥 Loading — красивая загрузка в виде анимированного шара. Реализована с помощью CSS и JavaScript

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

https://codepen.io/ma77os/pen/JjMRmLP

@javascriptv

Читать полностью…

⚡️ Metrognome - Гном-метроном, реализованный с помощью CSS и библиотеки GSAP.js.

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

@react_tg

Читать полностью…

✨Волшебство веб-разработки: создаем цифровую страну чудес

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

Что такое веб-разработка?
Веб-разработка — это процесс, напоминающий строительство дома. Только тут используются не кирпичи и раствор, а код, который создает сайты и веб-приложения. Это искусство и наука генерации онлайн-пространств, которыми мы пользуемся каждый день.

Компоненты веб-разработки
1. HTML (Hypertext Markup Language, язык гипертекстовой разметки)
Это фундамент цифрового дома. Он структурирует контент веб-страницы, определяя, что является заголовком, абзацем, изображением или ссылкой.

Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple introduction to web development.</p>
<img src="hello.jpg" alt="Greetings Image">
<a href="https://example.com">Explore More</a>
</body>
</html>

2. CSS (Cascading Style Sheets, каскадные таблицы стилей)
Это краски и декор для дома. CSS стилизует HTML-элементы, придает веб-странице визуально привлекательный вид.

Пример:
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
text-align: center;
}

h1 {
color: #333;
}

p {
color: #666;
}

img {
width: 300px;
border-radius: 10px;
}

3. JavaScript
Это электричество, оживляющее дом. JavaScript придает интерактивность, делает веб-страницу динамичной и отзывчивой.

Пример:
function greetUser() {
alert("Hello, dear visitor! Welcome to our webpage.");
}

Инструменты веб-разработки
🔵Редакторы кода. Для написания и организации кода используются такие редакторы, как Visual Studio Code, Sublime Text и Atom.
🔵Браузеры. Chrome, Firefox, Safari — это испытательные полигоны разработчика, отображающие код. Вы часто будете переключаться между ними для обеспечения совместимости.
🔵Система контроля версий (Git). Git помогает отслеживать изменения в коде и упрощает совместную работу и управление проектом.

Начало работы над первой веб-страницей
1. Создание папки. Создайте папку для проекта. Это похоже на подготовку строительной площадки.
2. Написание HTML. Откройте редактор кода и создайте HTML-файл. Добавьте в него основную структуру страницы.
3. Добавление CSS. Задействуйте для страницы стили, используя CSS. Экспериментируйте с цветами, шрифтами и макетами.
4. Внесение JavaScript (опционально). Если вам нужна интерактивность, добавьте в проект JavaScript.
5. Предварительный просмотр в браузере. Откройте HTML-файл в браузере, чтобы увидеть свое творение.

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

@javascriptv

Читать полностью…

❄️ Snow — анимация падающего снега, реализованная на CSS.

https://codepen.io/alphardex/pen/dyPorwJ

#анимация #css

@javascript

Читать полностью…

Clocktober day 21: Perspective - Стильные часы для вашего сайта

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

@javascriptv

Читать полностью…

⚡️ Rainbow cloud trail — переливающееся облако, следующее за курсором. Реализована с помощью CSS и JavaScript

https://codepen.io/creativeocean/pen/LYMmbvZ

@javascriptv

Читать полностью…

🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— Сложность алгоритмов. Разбор Big O
— Я счастлив, что больше не веб-разработчик
— Mobile Web, навигация и при чем тут Nginx
— Микрофронтенд для самых маленьких
— Кастомизация бессерверных функций без применения промежуточного ПО
— KISS your website или как написать уважаемый сайт на аутсорсе, глава первая
— Что выбрать: Npm, Yarn или Pnpm?
— Pixel Combats Api
— Анатомия shadcn/ui
— Валидация формы с помощью AJV, Vue.js и TypeScript
— Về Chúng Tôi – Giới Thiệu Thông Tin Về Nhà Cái Zbet.com
— Created a new Repository for OneLink Social page maker.
— A Tiny JS Library For Parsing Numbers From Words
— JavaScript Closures: Demystified
— Episode 23/50: Zoneless without Signals, Roadmap, Signal Inputs
— When for..of loop is preferred over forEach
— 6 Javascript array methods You missed in 2023
— Fixing Fetch Waterfalls in React
— Svelte journey | Part 2
— PokeData App

Посмотреть:
🌐 Type Predicates Solve This Common TypeScript Error (⏱ 05:01)
🌐 You Should Be Using Types Instead Of Interfaces In TypeScript (⏱ 00:52)

Хорошего дня!

@javascriptv

Читать полностью…

erid: LjN8KPSoC

Каждый день мы просыпаемся и идём к компьютеру писать код.

Но новогодние праздники — отличный повод отвлечься и показать, чему вы научились за год. Поэтому мы  запускаем телеграм-игру «Код сурка», чтобы вы могли блеснуть знаниями в веб-разработке и получить за это ценные призы.

Забрать их легко — достаточно отвечать на вопросы о веб-разработке (их будет аж 1200) и набирать баллы за правильные ответы. Чем выше вы вскарабкаетесь в рейтинге — тем круче призы.

К слову: разыграем профессию на выбор победителя, 2 «инженерии», 7 курсов по вёрстке и JavaScript, 20 безлимитных доступов к тренажёрам на месяц и 70 доступов к тренажёрам на неделю.

Ну и самое приятное — все участники акции смогут легко получить безлимитный доступ к тренажёрам Академии на время игры, а после игры — скидки и бонусы.

Присоединяйтесь, и пусть каникулы не проходят зря.

Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880.

Читать полностью…

🔥 Топ бесплатных курсов для программистов.

HTML- http://html.com
CSS- http://css-tricks.com
JavaScript- http://Javascript.info
PHP- http://php.net
React- http://react-tutorial.app
API- http://rapidapi.com/learn
Bootstrap- http://getbootstrap.com
MySQL- http://MySQL.com
Git и GitHub- http://learngitbranching.js.org

@javascriptv

Читать полностью…