Веб-страница

17 November 2024 07:54

screenshot-to-code | Генерируем веб-приложение по скриншоту / Figma-концепту

Простой инструмент для преобразования скриншотов, макетов и дизайнов Figma в чистый, функциональный код с использованием ИИ. Поддерживает Claude Sonnet 3.5 и GPT-4o.

Цена: бесплатно
Репозиторий проекта

А какие OCR вы используете? Поделитесь в комментариях.

@neuro_channel

Веб-страница

16 November 2024 08:32

Лучший способ создания паттерна проектирования Singleton в JavaScript и TypeScript

Паттерн проектирования Singleton гарантирует, что у класса есть только один экземпляр и предоставляет глобальную точку доступа к этому экземпляру. Этот паттерн полезен, когда необходим именно один объект для координации действий в системе.

В этой статье собраны эффективные методы реализации паттерна Singleton в JavaScript и TypeScript.

#паттерны #javascript #typescript

Веб-страница

15 November 2024 07:04

CBLT — безопасный, быстрый и минималистичный веб-сервер на языке программирования Rust

Rust не имеет аналогов Nginx, Lighttpd, Caddy, HAProxy, Apache, Tomcat, Jetty и т.д. Все эти веб-сервера написаны на C, Go, Java и других языках. Как тогда написать свой веб-сервер на Rust без всех этих технологий?

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

#rust #бэкенд

Веб-страница

14 November 2024 06:31

Минутка важных статистических исследований

На графике показано, как меняется средний возраст потери девстенности у мужчин.

Бэкендеры, выводы делайте сами 😏

Веб-страница

13 November 2024 08:07

Шарите в Git? Давайте проверим

Мы приготовили для вас тест, который поможет проверить свои знания по продвинутым техникам и настройкам. Сможете ответить правильно на все вопросы?

Пройти тест

#тест

Веб-страница

12 November 2024 11:03

Meshery — инструмент для упрощения работы с инфраструктурой на базе Kubernetes

Этот облачный менеджер с открытым исходным кодом позволяет проектировать и урпавлять всей инфраструктурй и приложениями на базе Kubernetes. Он также предлагает визуальное и совместное управление GitOps, избавляя вас от необходимости использовать YAML при управлении развертыванием Kubernetes в нескольких кластерах.

#инструменты@tproger_web #devops@tproger_web #бэкенд@tproger_web #kubernetes@tproger_web

Веб-страница

11 November 2024 11:59

Полный супремITизм!

СупремITизм — целое искусство обучать цифровым профессиям. И именно это движение стало главной темой продуктовой презентации от «Школы 21», на которой мы недавно побывали.

«Школа 21» — про друзей, силу коммьюнити, поддержку внутри и реально интересный путь к профессии мечты.

Вот что еще узнали о «Школе»:

— Бесплатное обучение с нуля по методике «равный равному» — согласитесь, проще всего понять информацию, объяснив ее другу
— Гибкий график и кампусы 24/7 по всей России. Но самое крутое — возможность общаться и работать в команде с пирами из других городов
— Индивидуальный трек, который выстраивается с помощью нейронки, и несколько направлений — от разработки и DevOps до кибербезопасности и Data Science
— 100% студентов находят работу во время или после обучения
— Публичный цифровой профиль, чтобы работодатели сразу видели, какие вы крутые айтишники
— Геймификация — учитесь играя: зарабатывайте коины и ачивки (ну, или пенальти, если, например, заснете в кампусе)

Важно: «Школа 21» — про прокачку скилов на практике в кругу друзей. В общем, поступайте и узнавайте все сами.

Веб-страница

10 November 2024 15:03

Типизированные CSS переменные с @property

Наконец-то все ключевые браузеры стали поддерживать правило @property, которое позволяет определять типы, а также наследование и начальное значение для пользовательских свойств.

В этой статье разобрались когда и почему традиционные резервные значения могут не сработать и как функции @property позволяют нам писать более безопасные и устойчивые определения пользовательских свойств CSS.

#css

Веб-страница

09 November 2024 14:04

6 проектов на React.js для начинающих

Если вы только недавно познакомились с React и хотите набить руку, то это видео вам поможет. Здесь автор рассказывает, как сделать 6 различных проектов:

00:04:09 Счётчик
00:10:13 Модальное окно
00:22:35 Quiz (опросник)
00:37:22 Список пользователей
01:07:36 Конвертер валют
01:34:18 Коллекция фотографий

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

#видео #react #начинающим

Веб-страница

09 November 2024 08:03

Дизайнеры всё

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

#инструменты #дизайн #figma

Веб-страница

08 November 2024 15:01

Почему page.goto() замедляет ваши тесты Playwright

Ваши тесты должны быть стабильными, потому что нет ничего хуже ненадёжного набора тестов. Кроме того, ваши тесты должны быть быстрыми, потому что никто не хочет часами ждать, пока вы получите зелёный свет, чтобы внедрить критически важное исправление. Но знаете ли вы, что выполнение тестов замедляется с помощью самого простого действия в Playwright — page.goto()?

В этой статье вы найдёте примеры и способы ускорить выполнение тестов Playwright, избежав этой проблемы:

https://www.checklyhq.com/blog/why-page-goto-is-slowing-down-your-playwright-test/

#playwright #qa

Веб-страница

08 November 2024 07:33

Более 5 700 бесплатных векторных иконок для ваших проектов

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

Все иконки доступны в SVG-формате абсолютно бесплатно. Просто переходите по ссылке и забирайте: https://tabler.io/icons

#инструменты@tproger_web

Веб-страница

07 November 2024 08:02

Как добавить видео с прозрачным фоном на веб-сайт

Джейк Арчибальд из Shopify поделился своими наработками по этому вопросу и предложил сразу несколько способов реализации этой возможности.

Все подробности в статье: https://jakearchibald.com/2024/video-with-transparency/

#фронтенд

Веб-страница

06 November 2024 08:02

Работаю один: 10 тысяч строк кода без единого ворнинга

Подошёл тимлид:

Веб-страница

05 November 2024 07:01

Пишем одностраничное приложение с помощью htmx

JS-библиотеку htmx многие воспринимают как средство, которое спасает интернет от одностраничных приложений. Но автор этой статьи написал с помощью htmx простой список ToDo. После загрузки его страницы взаимодействие с сервером прекращается — всё остальное происходит локально на клиенте.

Как он это сделал? Выполнял серверный код в сервис-воркере. Сможете ли вы также? Конечно, мы вам даже инструкцию принесли:

https://habr.com/ru/companies/ruvds/articles/849854/

#htmx #javascript #html

Веб-страница

16 November 2024 15:06

У CSS теперь есть свой официальный логотип

Его выбрали по итогам голосования, организованного рабочей группой CSS-Next.

Почитать подробнее можно здесь.

#новости #css

Веб-страница

15 November 2024 15:03

Интерактивная галерея полароид-фото

Это классная идея для пет-проекта, который вы сможете повторить самостоятельно. Автор написал проект на ванильном CSS и JavaScript.

Посмотреть код можно по ссылке.

#codepen #javascript

Веб-страница

14 November 2024 15:04

Немного безумия вам в ленту

Нашёл для вас библиотеку, которая позволяет писать JavaScript код внутри Python. PythonMonkey — это движок JS от Mozilla, который встроили прямо в Python Runtime.

Что делать с этим безумием, решайте сами, а мы оставим ссылку на проект: https://github.com/Distributive-Network/PythonMonkey

#ненормальноепрограммирование #javascript #python

Веб-страница

13 November 2024 15:27

Как создавать сложные расширения Chrome

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

Но не волнуйтесь. Это руководство покажет вам, как сделать полнофункциональное расширение для Chrome на реальном примере!

В итоге у вас получится расширение для сохранения изображения с любых сайтов в ваш сервис через API.

#extensions #chrome

Веб-страница

12 November 2024 16:31

Как использовать серверы Redis и Memcached для кэширования

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

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

Сейчас мы вам расскажем про вариант создания кэша на сервере с помощью Redis и Memcached.

#бэкенд@tproger_web #redis@tproger_web #memcached@tproger_web

Веб-страница

11 November 2024 13:03

@prog_tools

Веб-страница

11 November 2024 06:12

10 рекомендаций по повышению производительности от экспертов JS React

Прокачайте навыки разработки на React рекомендациями по повышению производительности в JavaScript. Здесь вы узнаете, как оптимизировать код и повысить эффективность приложений React. Освоив эти приемы, вы сможете выделиться в конкурентном мире веб-разработки.

#react #советы

Веб-страница

10 November 2024 09:11

JavaScript-разработчик набирает npm install:

Веб-страница

09 November 2024 11:05

Самые «успешные» хакеры-воровайки использовали Python

Преступная группировка Carbanak, состоящая из хакеров украинской, литовской и других национальностей использовали Cobalt Strike — фреймворк для этичного хакинга на JavaScript + Python. Подробнее о том, как они наворовали более 1 млрд. долларов, можно узнать в новом подкасте Tproger.

Слушать на Яндекс. Музыке
Смотреть на YouTube
Другие способы слушать подкаст

Не скупитесь на лайки на Яндекс. Музыке, этим вы поможете проекту.

@zen_of_python

Веб-страница

08 November 2024 16:22

Ошибки в архитектуре, которые совершали Netflix, Slack, Trello, Airbnb и другие компании

Даже у самого многообещающего стартапа и крупной компании могут встречаться типичные ошибки в архитектуре, которые могут всё разрушить.

Давайте раз и навсегда разберемся, как лучше не делать, и как избегать факапов. В статье собрали 10 самых распространенных: с примерами и способами решения.

Мастхэв к прочтению: https://tprg.ru/0lof

Веб-страница

08 November 2024 08:33

Более 5 700 бесплатных векторных иконок для ваших проектов

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

Все иконки доступны в SVG-формате абсолютно бесплатно. Просто переходите по ссылке и забирайте: https://tabler.io/icons

#инструменты

Веб-страница

07 November 2024 16:01

Стильный переключатель на чистом CSS

Этот свитч сделан с использованием чистых HTML и CSS. Никакого SVG. Посмотреть, как это работает можно на странице проекта:

https://codepen.io/josetxu/pen/NWEPmGz

#html #css #codepen

Веб-страница

06 November 2024 15:31

Watching-you: анимация, которая следит за вами

JS-библиотека «Watching-you» специально создана для анимаций, которые наблюдают за мышью, DOM или просто за вводимыми значениями. Если нужного элемента нет на экране, то анимация автоматически прекращает просмотр. Также библиотека поддерживает несколько фреймворков, поэтому её легко добавить в любой проект.

Почитать подробнее: https://github.com/jj811208/watching-you?ref=reactjsexample.com

Посмотреть интересные примеры: https://jj811208.github.io/watching-you/

#javascript #библиотека

Веб-страница

05 November 2024 13:02

24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое

Большое видео от freeCodeCamp, где вы узнаете, как сделать 24 различных проекта на CSS.

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

0:00:00 Добро пожаловать в CSS Challenges!
0:03:40 Задача: Цветная кнопка
0:05:45 Решение: Цветная кнопка
0:12:03 Задача: Расширяемая строка поиска
0:14:27 Решение: Расширяемая строка поиска
0:18:22 Задача: Плитка CodePen
0:19:57 Решение: Плитка CodePen
0:25:54 Задача: Анимация загрузки 1
0:27:12 Решение: Анимация загрузки 1
0:30:10 Задание: Анимация загрузки 2
0:31:30 Решение: Анимация загрузки 2
0:34:13 Задание: Мишень для стрельбы из лука
0:35:31 Решение: Мишень для стрельбы из лука
0:38:15 Задание: Карусель слов
0:39:26 Решение: Карусель слов
0:43:18 Задание: Флаг Франции
0:45:47 Решение: Флаг Франции
0:49:34 Задание: Флаг Германии
0:50:39 Решение: Флаг Германии
0:52:42 Задание: Флаг Мадагаскара
0:53:48 Решение: Флаг Мадагаскара
0:58:34 Задание: Флаг Швейцарии
1:00:25 Решение: Флаг Швейцарии
1:04:43 Задание: Флаг Японии
1:05:51 Решение: Флаг Японии
1:08:25 Задание: Флаг Швеции
1:10:31 Решение: Флаг Швеции
1:16:25 Задание: Флаг Нигера
1:18:04 Решение: Флаг Нигера
1:22:12 Задача: Верстка профиля на Github
1:24:51 Решение: Верстка профиля на Github
1:30:17 Задача: Тумблер
1:33:03 Решение: Тумблер
1:39:12 Задача: Туз пик
1:40:08 Решение: Туз пик
1:43:30 Задача: 4 Червы
1:44:29 Решение: 4 червы
1:49:21 Задание: Настраиваемый индикатор прогресса
1:51:34 Решение: Настраиваемый индикатор прогресса
1:54:55 Задание: Переворачивая карточка
1:57:42 Решение: Переворачивая карточка
2:03:02 Задание: Анимация загрузки 3
2:05:03 Решение: Анимация загрузки 3
2:08:14 Задание: Меню Instagram Stories
2:11:22 Решение: Меню Instagram Stories
2:20:26 Задание - Анимированный индикатор прогресса
2:22:43 Решение - анимированный индикатор прогресса
2:26:42 Задача - График коммитов Github
2:29:18 Решение - График коммитов Github
2:33:02 Поздравляю, вы выполнили задания по CSS!

#видео #css

Веб-страница

04 November 2024 15:31

Основы программирования на JS для новичков

Небольшой, но полезный курс для тех, кто только начинает вкатываться во фронтенд и JavaScript.

Чтобы вам было проще ориентироваться, мы добавили тайм-коды:

00:00 - зачем и кому нужно это видео?
00:57 - что общего у программистов и поваров?
02:26 - понятие "Алгоритм"
03:46 - понятие "Блок-схема"
05:43 - понятие "Программа"
09:33 - ПРАКТИКА, задание на подумать
12:07 - разбор Мышления Программиста
16:35 - основные элементы мышления программиста
21:57 - Как развить мышление программиста?
26:41 - Создадим блок-схему калькулятора
37:00 - ПРАКТИКА с кодом!
49:10 - пишем калькулятор
1:00:42 - что такое и как работают ФУНКЦИИ?
1:09:00 - Домашнее задание!
1:09:45 - моя реализация домашки
1:15:25 - АНОНС следующего курса по JS!

Нужны ли вам вообще тайм-коды к таким постам? Поставьте ❤, если оставляем формат и 😐, если только мешает.

#курс #javascript