JavaScript задачи с собеседований


Channel's geo and language: Russia, Russian
Category: Technologies


Задачи, тесты и теоретические вопросы по JavaScript. Так же react, vue, angular, node.js
Прислать задачу/вопрос в дар: @cyberJohnny
Сотрудничество: @cyberJohnny

Related channels  |  Similar channels

Channel's geo and language
Russia, Russian
Statistics
Posts filter


Импорт локальных изображений vs использование изображений из папки / public в Next.js


Совет по веб-доступности 💡

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


🌐 Человек, который создал первый веб-браузер, сервер и заложил основу современного интернета.

В 1989 году Тим Бернерс-Ли, работая в CERN, предложил систему для обмена связанными документами. А уже к концу 1990 года написал первый браузер-редактор WorldWideWeb, первый веб-сервер и сформулировал базовые технологии веба: HTML, HTTP и URL.

Первый сайт работал по адресу info.cern.ch и рассказывал о самом проекте World Wide Web.

Ключевой момент случился в 1993 году, когда CERN сделала технологию Web общедоступной. Это позволило ей быстро распространиться по всему миру без патентных барьеров и лицензий.

Позже Бернерс-Ли основал W3C, чтобы развивать открытые веб-стандарты и сохранять совместимость между браузерами и платформами.

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


🛠️ Awesome SRE - большая подборка ресурсов для Site Reliability Engineering

Репозиторий awesome-sre собирает полезные материалы по SRE и Production Engineering в одном месте.

Внутри есть подборки по:

- Monitoring и Observability
- Incident Response и Post-Mortem
- On-Call
- Chaos Engineering
- Automation и Toil Reduction
- Capacity Planning
- SLO / SLI
- Performance
- книгам, докладам, статьям и гайдам

Также собраны инструменты вроде Prometheus, Ansible, Puppet, SaltStack, Chaos Monkey, Gatling и другие решения для эксплуатации production-систем. :

Хорошая база, если изучаете SRE, DevOps, reliability engineering или готовитесь к собеседованию.

GitHub:
https://github.com/dastergon/awesome-sre


Если вы занимаетесь ручным тестированием и хотите перейти к автоматизации, отдельных уроков по JavaScript и Playwright может быть недостаточно. Чтобы уверенно писать автотесты, важно понимать, как устроен весь процесс: от проверки API и интерфейса до запуска тестов в CI/CD.

Курс «Автоматизатор тестирования на JavaScript» поможет выстроить эту систему на практике. Вы научитесь писать автотесты для API и UI, работать с Jest и Playwright, проектировать тестовый фреймворк и запускать проверки с помощью Docker и GitHub CI.

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

Старт курса — 30 сентября. Пройдите вступительное тестирование и узнайте условия обучения: https://vk.cc/d2bLGJ

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576


Card Carousel

Этот элемент веб-дизайна реализован с использованием HTML и CSS. Он представляет собой карусель карточек, и при наведении на карточку применяются CSS трансформации. Это позволяет создать интерактивный и привлекательный элемент на веб-странице.

🌐Ссылка на код (https://codepen.io/william-goldsworthy/pen/JzVajj)




Pure horizontal slider with sliding menu

Увлекательный проект, в котором вёрстка выполнена с использованием HTML и CSS, а логика раскрытия меню и карточек реализована с помощью JavaScript. Этот проект представляет собой горизонтальный слайдер с возможностью скольжения меню.

🌐Ссылка на код (https://codepen.io/kristen17/pen/KKrzbYo)


CSS совет 💡

Возможно, ты не знал об этом новом и самом простом способе вертикально центрировать контент в блочном макете.


Совет по HTML 💡

Семантический способ выделить часть текста ✅




Fancy Button

Кнопка с эффектом обрезанных углов, реализованная на чистом CSS.

https://codepen.io/bloqhead/pen/ErOjEL




⚡️ Релиз 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


Color Palette

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

https://codepen.io/onlyveen/pen/rwvKqb


Player/User Cards

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

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




Platonic solids

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

https://codepen.io/Dillo/pen/OJOjdQp


✅️ 3D-эффект перехода между элементами

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

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

https://codepen.io/noeldelgado/pen/nweYMz


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

20 last posts shown.