WebDev+ | Веб-разработка
8.3K subscribers
508 photos
242 videos
10 files
703 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
В VS Code Insiders теперь по умолчанию включён IntelliSense в терминале

Да-да, теперь терминал сам подскажет тебе, что писать — без всяких плагинов и настроек.

Переключаешь ветку? Появятся предложения.
Запускаешь npm-скрипт? Подскажет команды.

Всё работает из коробки

@WebDev_Plus
👍12🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Оператор присваивания через логическое ИЛИ (||=) — очень удобная штука в JavaScript

Он присваивает значение справа, только если значение слева — false

Отлично подходит для задания значений по умолчанию в объектах или переменных 📖

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍174🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Веб-дизайнеры и разработчики, это может быть библиотека анимаций нового уровня

😮 Ссылка: тык

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
10😍3
This media is not supported in your browser
VIEW IN TELEGRAM
Сайт дня — FRA

Портфолио дудл-художника в интерактивном стиле

> https://fradesign.it/

@WebDev_Plus
7🔥4
Избегай использования относительных и запутанных импортов в коде

Они сложны в поддержке и плохо читаются.

Лучше используй алиасы с абсолютными путями.

Это работает как в проектах на JavaScript, так и на TypeScript

@WebDev_Plus
7🔥1
Суперполезная шпаргалка по CSS FlexBox

@WebDev_Plus
👍9
React Native позволяет разрабатывать приложения для iOS и Android, используя единый код на JavaScript.

А этот курс научит вас использовать его для создания приложений под macOS.

Вы узнаете, как работать с компонентами, интегрировать API, управлять состоянием, настраивать маршрутизацию и многое другое.

@WebDev_Plus
👍3
Удобная шпаргалка по Git

@WebDev_Plus
👍62
This media is not supported in your browser
VIEW IN TELEGRAM
Идеи веб-дизайна в тёмной теме.

Галерея лучших примеров — для вдохновения:

http://dark.design

@WebDev_Plus
👍31
This media is not supported in your browser
VIEW IN TELEGRAM
Не допускай растянутых изображений на своём сайте.

Выглядит ужасно 🏆

А решается одной строкой CSS

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
7
Наткнулся на крутой инструмент для визуализации JSON

jsoncrack.com — открытый проект, который превращает любой JSON в наглядную графовую диаграмму.

Идеально, если нужно быстро понять структуру вложенных данных или показать API-ответ заказчику.

➣ Репозиторий: github.com/AykutSarac/jsoncrack.com

Работает прямо в браузере, поддерживает импорт/экспорт, сохранение схемы и тёмную тему 😎

Подойдёт фронтам, бэкендерам и аналитикам.

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
12👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Полезный совет по DevTools для доступности

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

DevTools → Rendering → Emulate vision deficiencies

@WebDev_Plus
9🎉2
В JavaScript можно превратить HTML-элемент в скриншот

Вот минималистичный пример, как сохранить HTML-элемент как PNG с помощью библиотеки modern-screenshot

domToPng(HTML_ELEMENT) — превращает DOM-элемент в PNG-картинку в формате data URL.

Создаётся <a>-элемент со ссылкой на изображение.

Устанавливается имя файла и запускается автоклик, чтобы браузер начал скачивание

@WebDev_Plus
5🔥4❤‍🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачайся в веб-разработке с курсами от команды Chrome. Бесплатно, по темам, интерактивно

Что внутри: HTML, CSS, JS, доступность, тестирование и ещё куча всего полезного. Можно идти по порядку, а можно сразу нырнуть в то, что интересует больше всего

Забираем здесь 😎

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
8👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Эффектная коллекция анимированных компонентов.

Более 100 штук в наличии. Открытый исходный код и бесплатно:

👉 https://github.com/kokonut-labs/kokonutui

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
6
This media is not supported in your browser
VIEW IN TELEGRAM
Создавай впечатляющие изображения своего веб-сайта или приложения

Просто перетащи скриншот и наблюдай за магией:

shots․so

@WebDev_Plus
5👍3
This media is not supported in your browser
VIEW IN TELEGRAM
На твоём сайте может быть эта проблема:

Если плохой контраст — никто ничего не читает.

Используй этот трюк в DevTools и срочно поправь цвета

@WebDev_Plus
11🔥3
CSS-функции скоро станут доступны, и самое время немного запутать JavaScript-разработчиков (а может, и бэкендеров).

Нет, это не те же функции, что в JS. Как и в случае со свойствами CSS, порядок внутри не имеет значения — всё можно писать в обратном порядке.

Вы можете попробовать это в последней версии Chrome, включив флаг "Experimental Web Platform features": https://codepen.io/t_afif/pen/MYwMaYE 😨

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
3
Хочешь изучить алгоритмы и структуры данных на JavaScript? Этот репозиторий — то, что нужно. С пояснениями и примерами, многие из которых на русском.

https://github.com/trekhleb/javascript-algorithms/blob/master/README.ru-RU.md 🤔

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥3