JavaScript задачи с собеседований
4.66K subscribers
651 photos
92 videos
9 files
421 links
Задачи, тесты и теоретические вопросы по JavaScript. Так же react, vue, angular, node.js

Прислать задачу/вопрос в дар: @cyberJohnny
Сотрудничество: @cyberJohnny
Download Telegram
Cовет💡

Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.
🔥2
Двухфакторная аутентификация 😹
Multi Colored Text with CSS

Раскраска текста диагональными цветными полосами. На чистом CSS.

https://codepen.io/TajShireen/pen/YzZmbep
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Goey footer

Футер с анимацией стекающих капель. Реализован с помощью CSS.

#css
💡 Совет по JavaScript — Используй reduce для группировки элементов 🔴
👍3
PerfectPixel (https://www.welldonecode.com/perfectpixel/) — плагин для браузеров, позволяющий верстать сайты «пиксель в пиксель»

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

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

Необязательно сразу арендовать сервер и настраивать инфраструктуру. Для портфолио, MVP и небольших pet-проектов можно начать с бесплатных тарифов.

1. GitHub Pages - для статических сайтов

Подходит для портфолио, документации, лендингов и проектов на HTML, CSS и JavaScript.

Загружаете код в репозиторий — GitHub публикует сайт и выдаёт готовый адрес.

🔗 https://pages.github.com

2. Cloudflare Workers - для API и серверной логики

Позволяет запускать JavaScript и TypeScript на серверах Cloudflare рядом с пользователем.

Бесплатный тариф включает до 100 000 запросов в день. Хороший вариант для API, вебхуков, прокси и небольших backend-сервисов.

🔗 https://workers.cloudflare.com

3. Vercel - для Next.js и современного frontend

Подключаете GitHub, делаете push — Vercel автоматически собирает и публикует проект.

Для каждой ветки создаётся отдельная preview-ссылка. Бесплатный Hobby-тариф предназначен для личных и некоммерческих проектов.

🔗 https://vercel.com

4. Google Cloud Run - для Docker-контейнеров

Загружаете контейнер, а Google самостоятельно запускает и масштабирует приложение.

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

🔗 https://cloud.google.com/run

5. AWS Amplify - для full-stack приложений

Amplify объединяет хостинг, автоматическую сборку, CI/CD и сервисы AWS.

Подходит для React, Next.js, Vue и мобильных приложений. У новых аккаунтов доступ зависит от программы AWS Free Tier и предоставленных кредитов.

🔗 https://aws.amazon.com/amplify/

Важно: «бесплатно» не означает «без ограничений». Проверяйте лимиты, правила коммерческого использования и условия оплаты сверх бесплатной квоты.

Но для запуска первого проекта этих платформ более чем достаточно.
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по HTML 💡

Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩
👍4
‍🌳 Каждый Ethernet-коммутатор в мире до сих пор использует алгоритм, который Рада Перлман придумала в 1985 году.

Её разработка — Spanning Tree Protocol (STP) — решила одну из самых опасных проблем сетей: петли.

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

Перлман придумала способ превратить любую сложную топологию в дерево без циклов:

«Сначала выбирается корень. Затем каждый узел оставляет самый дешёвый путь к нему. Остальные связи блокируются».

Но самое необычное — её научная статья 1985 года начиналась не с обычной аннотации, а со стихотворения.

«I think that I shall never see
a graph more lovely than a tree…»

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

Рада Перлман позже получила прозвище «мать интернета» за вклад в сетевые технологии.

Иногда самые важные алгоритмы в истории начинаются не с формул, а со стихов.
🔥2
Ultimate Self-Hosting Guide () — руководство по самостоятельному хостингу.

Узнайте все о локальном хостинге (на локальных и частных веб-серверах) и управлении программными приложениями самостоятельно или в своей организации.

Включая облако, LLM, WireGuard, автоматизацию, Home Assistant и сети.

https://github.com/mikeroyal/Self-Hosting-Guide
Lightning CSS

Очень быстрый парсер, транспилятор, бандлер и минификатор CSS от создателя Parcel: поддерживает CSS-модули, добавляет вендорные префиксы на основе browserslist, интегрируется с webpack.

🌐Ссылка dev (https://lightningcss.dev/)
Релиз серверной JavaScript-платформы Bun 1.4, переписанной с Zig на Rust

Представлен выпуск платформы Bun 1.4, предназначенной для обособленного выполнения приложений, написанных на языках JavaScript и TypeScript, и нацеленной на использование в качестве прозрачной замены платформы Node.js. Ветка 1.4 примечательная переводом кодовой базы с языка Zig на язык Rust, осуществлённым с использованием AI-инструментов Claude. Код продолжает распространяться под лицензией MIT.

Подробнее:
https://opennet.ru/66111/
https://opennet.me/66111/
NGINX 1.31.4 вышел - с улучшениями PROXY protocol, HTTP/2, gRPC и важными security-фиксами

В релизе добавили поддержку PROXY protocol v2 для stream и mail upstreams.

Также поправили обработку :authority для HTTP/2 и gRPC upstreams, чтобы она лучше соответствовала стандартам.

Ещё усилили валидацию QUIC и gRPC, а главное — закрыли четыре проблемы с memory safety.

Если используете NGINX в качестве reverse proxy, TCP/UDP gateway или в gRPC-инфраструктуре, обновление точно стоит посмотреть.

https://blog.nginx.org/blog/nginx-1-31-4-proxy-protocol-v2-stricter-validation-and-more
This media is not supported in your browser
VIEW IN TELEGRAM
✅️ 3D-эффект перехода между элементами

В этом проекте интересным образом реализован эффект перехода между элементами. Так, например, вы можете, просматривая изображения в галереи, узнать подробности или описание, наведя на изображение. При этом, если до этого курсор был на другой карточке, то возникнет эффект «перекатывания кубика».

Посмотреть код и поиграть с эффектом можно тут:

https://codepen.io/noeldelgado/pen/nweYMz
This media is not supported in your browser
VIEW IN TELEGRAM
Platonic solids

Анимированный настраиваемый многогранник, выполненный с помощью CSS и JavaScript.

https://codepen.io/Dillo/pen/OJOjdQp
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Player/User Cards

Карточки игроков (пользователей) с просмотром дополнительной информации при наведении курсора мыши. Реализованы на чистом CSS.

https://codepen.io/alvaromontoro/pen/ebPEWb
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Color Palette

Палитра с оттенками цветов. Полноценно работает с компьютера. Логика переключения между оттенками написана на JavaScript.

https://codepen.io/onlyveen/pen/rwvKqb
👍1
⚡️ Релиз ChatGPT Images 2.5

Новое поколение (https://openai.com/index/introducing-chatgpt-images-2-5/) генератора изображений работает на 50% быстрее версии 2.0. Лучше проработаны текстуры, естественнее свет, точнее сохраняются ключевые черты объектов с референсных фотографий.

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

Ещё она научилась сразу генерировать изображения с прозрачным фоном и точнее держит сложные композиционные инструкции.

Релиз разделен на 2 варианта модели:

🟠GPT-Image-2.5 Flare - облегчённая, с низкой задержкой;

🟠GPT-Image-2.5 Sunburst - максимальная детализация.

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

Модель доступна в вебе, приложениях ChatGPT и Codex и через API.

Цены на Flare (https://developers.openai.com/api/docs/models/gpt-image-2.5-flare) и Sunburst (https://developers.openai.com/api/docs/models/gpt-image-2.5-sunburst) одинаковые:

$5 за миллион входных текстовых токенов, $8 - за тот же миллион в виде изображений и $30 за миллион выходных.

Есть кэширование - $1,25 (текст) и $2 (изображение).


@ai_machinelearning_big_data

#news #ai #ml