​Создание красивого сайта с горизонтальным параллакс эффектом

В этом видео вы узнаете, как создать сайт с горизонтальным скроллом. Ключевой особенностью этого сайта будет являться красивый параллакс-эффект, который добавляет глубину и объем в сцену.

Здесь будет огромное количество приёмов CSS, анимации, а также плавный скролл, работа с трансформацией, переменными и параметрами, программирование в JavaScript частиц Canvas и многое другое:

https://youtu.be/QFq6PiZ1BQ8

#видео #фронтенд

​Как ускорить сайт с помощью Varnish HTTP Cache и Docker

Varnish — это ускоритель веб-приложений, также известный как обратный прокси c HTTP-кэшированием. Он способен ускорить доставку пакетов в 300–1000 раз, уменьшает время загрузки и способен справляться с пиковыми нагрузками трафика. О том, как его использовать и правильно настроить, читайте здесь:

https://nuancesprog.ru/p/16717/

#docker

​Интерактивная карта из любого изображения на чистом JavaScript

В этом видео автор покажет вам, как сделать интерактивную карту для сайта на чистом JS, на основе любой картинки. Работать карта будет с помощью JS и SVG. По примеру из видео вы научитесь создавать интерактивные элементы и добавлять к ним любой функционал.

Смотрите видео тут:

https://youtu.be/uN35_FX9LXo

#видео #туториал #фронтенд

​10 шпаргалок для веб-разработчика

Мы подготовили для вас подборку шпаргалок для фронтенда и бэкенда, которые включают в себя различные языки программирования и фреймворки. Подробнее:

https://tproger.ru/articles/10-shpargalok-dlja-veb-razrabotchika/

#шпаргалка

Locomotive Scroll — лёгкий способ сделать скролл плавным

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

Подробнее:

https://github.com/locomotivemtl/locomotive-scroll

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

​Создайте и разверните статический интернет-магазин с помощью Nuxt3, используя Pinia Store и Stripe Checkout в Firebase

Процесс создания интернет-магазина и развёртывания статически сгенерированных страниц в Firebase на самом деле достаточно прост, если вы используете Nuxt3.

Автор этой статьи поделился своей инструкцией по созданию такого сайта и вот, что у него получилось:

https://keith-mifsud.me/blog/build-and-deploy-nuxt3-static-site-with-pinia-and-stripe-checkout-on-firebase

#nuxt

​Логический border-radius

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

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

https://css-irl.info/logical-border-radius/

#css

​Нестандартный подход в разработке: как React интегрировали с «Битрикс»

В этой статье вы узнаете, как разработчики из INDEXIS применили нестандартный подход в разработке — интеграцию React-приложения с «Битрикс». Здесь описывается процесс интеграции, а также представлены примеры рабочего кода и задачи, которые специалисты решили в ходе проекта:

https://tproger.ru/articles/nestandartnyj-podhod-v-razrabotke-kak-my-integrirovali-react-s-bitriks/

#фронтенд #react #bitrix

Как создать многопользовательский чат с помощью WebSocket за 10 минут

WebSocket — мощный инструмент в руках веб-разработчика. С помощью него можно всего за 10 минут создать многопользовательский чат. Если ещё не работали с этой технологией, то обязательно читайте статью.

Здесь вы узнаете об основах работы с WebSocket, механизмах работы с соединениями и событиями, а также о том, как подключиться к базе данных и создать приложений на её основе:

https://nuancesprog.ru/p/16849/

#websocket

​Обзор Vue Composition API. Реальность оказалась сложнее

В этой статье рассматривается новый инструмент для приложений Vue.js — Composition API. С помощью Composition API мы можем создавать более компактные и гибкие приложения, при этом писать более понятный код.

Здесь вы найдёте подробные примеры кода и интересные рассуждения по интеграции нового API в проекты, а также познакомитесь со всеми преимуществами и возможностями: непрерывное и простое управление состояниями, возможность создавать гибкие и эффективные слои абстракции и не только. Подробнее:

https://tproger.ru/articles/obzor-vue-composition-api-realnost-okazalas-slozhnee/

#vue #compositionapi

Как отследить событие закрытия браузера и вкладки с помощью JavaScript

Отслеживание закрытия браузера или вкладки даёт возможность более точно отслеживать активность пользователя и лучше понимать что именно не нравится пользователям сайта. В этой статье описано, как с помощью JavaScript, а именно с помощью обработчиков событий для объектов window и document, можно успешно реализовать эту задачу:

https://nuancesprog.ru/p/16673/

#javascript

​Решаем популярные задачи с асинхронным кодом на JavaScript: часть вторая

Первая часть ждёт вас здесь. А здесь собрали для вас ещё несколько интересных задач с асинхронным кодом! Переходите по ссылке и попробуйте решить их все:

https://tprg.ru/VqX5

#javascript #задачи

​Как работают веб-приложения

В этом видео вы узнаете, как происходит обмен данными между веб-сервером и клиентом, а также о правилах доступа к ресурсам. Также вы рассмотрите базовые понятия веб-программирования и принципы работы серверных языков.

Подробнее:

https://www.youtube.com/watch?v=g94j-ahVR78

#видео

​Интервью с веб-разработчиком Pornhub

Неважно, как вы относитесь к порнографии, нельзя отрицать влияние сайтов для взрослых на развитие web-индустрии. Одним из самых популярных таких сайтов является pornhub.

Один из веб-разработчиков Порнхаба рассказал о работе над сайтом для взрослых, и это вылилось в познавательное интервью. В день всех влюблённых мы решили поделиться переводом этого интервью с вами:

https://tproger.ru/translations/pornhub-web-developer-interview/

#интервью

​React + TypeScript: необходимый минимум

Эта статья представляет собой минимальное введение по использованию TS в React. В ней вы узнаете, какие преимущества даёт такая связка и, в частности, TS. Также вы познакомитесь с основами TypeScript, его особенностями и большим количеством примеров кода.

Подробнее:

https://habr.com/ru/company/timeweb/blog/707744/

#typescript #react

А теперь спокойной ночи

​Автор популярного JS-пакета сидит без денег

Денис Пушкарев, автор популярного JavaScript-пакета core-js поделился своей ситуацией. Он рассказал, что не может получить достаточно денег от разработки open source-проектов.

Несмотря на то, что от этого пакета зависит работа множества крупных сервисов, он фактически не получал с этого никакого дохода. Зато получал множество недовольств за баги и недоработки.

Подробнее о ситуации и о том, что же делать ему и нам:

[https://tproger.ru/articles/avtor-populyarnogo-js-paketa-sidit-bez-deneg/

#javascript

​Свежий дайджест для питонистов уже у нас на сайте

Там вы узнаете, как написать веб-плеер с искусственным интеллектом, 5 неочевидных возможностей FastAPI, как написать чат-бота, используя webhook и многое другое.

Подробнее:

https://tproger.ru/articles/dajdzhest-python-3-pishem-ai-pleer-dlja-sajta-i-boremsja-s-lesnymi-pozharami/

#python

​Основы библиотеки cURL PHP

cURL — библиотека с открытым исходным кодом, используемая для отправки HTTP-запросов с различных языков программирования, включая C, PHP и другие. Она работает по множеству различных протоколов с синтаксисом URL. В данной статье рассмотрена работа библиотеки по протоколу HTTP/HTTPS:

https://tproger.ru/articles/osnovy-biblioteki-curl-php/

#php

​Почему вам стоит начать писать на TypeScript

TypeScript — то же самое, что и JavaScript, но переменные не могут менять типы. С момента разработки TypeScript активно развивался, сегодня это один из самых популярных языков программирования.

В этой небольшой статье автор делится собственным мнением о языке, а также рассказывает об основных особенностях и преимуществах TypeScript:

https://tproger.ru/articles/pochemu-vy-dolzhny-pisat-na-typescript-v-2023-godu/

#typescript #фронтенд