Веб-страница
22.1K subscribers
2.17K photos
561 videos
2 files
4.45K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​Критика монолитов стала обычным делом. Мол, уже всем очевидно, что распределённые микро-сервисы всегда лучше.

Интересно, что сама идея модульных микросервисов всплыла около десяти лет назад на подъёме идеологий гибкой разработки Agile и DevOps. И никто не спорит о её пользе, но если осмотреться, можно увидеть огромное количество хороших монолитных приложений, которые даже спустя десять лет великолепно работают без перехода на микросервисы. Как же так?

Интересная статья, в которой разобрались, когда хороший монолит всё-таки уместнее и как его создавать: https://habr.com/ru/company/ruvds/blog/676780/

#devops #архитектура
😁15👍8
​Нашли неплохой базовый курс для новичков: «Веб-технологии: начальный уровень»

Рассчитан на тех, кто ещё не знаком с веб-разработкой, но хочет получить начальные знания в данной области. Материал изложен простым языком и подойдёт всем новичкам: школьникам, студентам, учителям информатики и просто любому желающему разобраться с HTML5 и CSS3.

Курс состоит из 6 модулей, рассчитан на 3-5 часов. За курс вы изучите основы HTML5, изучите CSS3, познакомитесь с JavaScript и сверстаете простой лэндинг по макету: https://stepik.org/course/82108/promo?search=992854481

#курс
👍9
This media is not supported in your browser
VIEW IN TELEGRAM
Создаём лоадеры при помощи CSS

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

В этой статье собраны несколько вариантов, которые сможет реализовать даже неопытный верстальщик с помощью простого CSS:

https://techrocks.ru/2020/04/21/nice-preloaders-created-with-css/

#css
🏆18👍13⚡1
​Собираем и деплоим приложение на Node.js с помощью werf. Работа с базой данных

Это продолжение материала, посвящённого созданию и запуску приложения на Node.js с помощью werf. В прошлый раз автор рассмотрел базовое Node.js-приложение и его деплой в Kubernetes. Теперь же вы сможете дополнить его, добавив базу данных MySQL. Приложение получит все необходимые для этого компоненты и настройки.

Подробнее:

https://tproger.ru/articles/sobiraem-i-deploim-prilozhenie-na-node-js-s-pomoshhju-werf-rabota-s-bazoj-dannyh/

#devops #kubernetes #nodejs #sql
👍22😁3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Отрисовка в браузере большой анимации, или как уйти с mp4 к собственному формату видео

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

https://habr.com/ru/company/floor796/blog/673318/
👍29
Music App в рисованном стиле

Ловите интересную реализацию дизайна музыкального приложения, выполненную в рисованном стиле. Можете попробовать повторить его самостоятельно или, взяв его за основу, создать собственный вариант приложения:

https://codepen.io/havardob/pen/JjJXqZm

#codepen
👍8👎6❤4
​Регистрация и авторизация в веб-приложении с помощью Spring WebFlux

В последнее время очень много статей выходит по JavaScript. Давайте теперь посмотрим на работу Java. В этой статье вы узнаете, как сделать веб-приложение с помощью реактивного фреймворка Spring WebFlux:

https://tproger.ru/articles/registracija-i-avtorizacija-na-baze-postgresql-s-pomoshhju-spring-webflux/

#java #spring
🔥3👍2
​Dragula для Angular

Эта небольшая библиотека для Angular с не обычным названием позволяет быстро и удобно создавать drag&drop механику для ваших элементов. Попробуйте сами:

https://github.com/valor-software/ng2-dragula

#библиотека #angular
👍9
​Нецелевое использование assert-функций в TypeScript

Представьте, что у вас есть старый JS API, зависящий от мутирования передаваемого ему объекта, или не представляйте, а взгляните на код, с которым вы работаете сейчас и всплакните ещё раз. Так вот, автор этой статьи придумал, как применить assert-функцию, чтобы актуализировать старый код с учётом типов данных.

Подробнее:

https://habr.com/ru/company/ruvds/blog/664600/

#typescript
👍4🤡3😁2🤨1
​«Я всё время неправильно создавал формы в React.js»

Если вам часто приходится создавать формы с помощью React, то вы наверняка сталкивались с необходимостью использования множества useState для различных элементов формы.

В этой статье автор поделился собственным способом создания компонента формы, которые избавляет от этой проблемы и делает код более лаконичным:

https://dev.to/kuvambhardwaj/i-was-creating-forms-the-wrong-way-all-along-in-reactjs-hl3

#фронтенд #react
👍14💩8❤1👎1
Если что-то не работает — возвращай строку!
👍51😁24❤3👎3
​Wasp — язык для разработки полнофункциональных веб-приложений на Javascript без использования шаблонов

Встречайте Wasp — новый язык программирования для разработки полнофункциональных веб-приложений с меньшим количеством кода. Он упрощает разработку веб-приложений, но при этом позволяет использовать новейшие технологии, такие как React, Node.js и Prisma.

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

https://blog.devgenius.io/wasp-language-for-developing-full-stack-javascript-web-apps-with-no-boilerplate-84137afd4f4b
🤔21👎5👍3👌2
This media is not supported in your browser
VIEW IN TELEGRAM
Необычный datepicker на GSAP

Этот datepicker позволяет выбрать вам нужную дату, при этом обладая привлекательным внешним видом и нестандартной анимацией. Создан с помощью библиотеки GSAP, подробный код можно изучить здесь:

https://codepen.io/aaroniker/pen/MWQjxro

#codepen
👍27🔥7😁3
​Web Speech API в JavaScript: от текста к речи

Для того, чтобы преобразовать текст в речь в JavaScript существует готовое API под названием Web Speech API. Если хотите добавить на ваш сайт или в ваше приложение такую удобную функцию, то в этой статье автор вместе с читателями разбирается в её возможностях и функционале:

https://nuancesprog.ru/p/16036/

#javascript
👍17🔥2
​Гарвардский университет сегодня запускает бесплатный курс по веб-программированию с помощью Python и JavaScript

Вы, возможно, уже слышали о популярном курсе университета CS50, который охватывает множество тем и при этом доходчиво разъясняет каждую из них. А сегодняшний курс позволит вам более глубоко погрузиться в разработку с помощью Python, JavaScript и SQL с использованием таких фреймворков, как Django, React и Bootstrap.

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

https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript

#курс #javascript #python
👍16🔥1
​Как создавать игры на pixi.js

Небольшой плейлист по pixi.js для создания игр и динамики на сайте. Если вы давно хотели разрабатывать игры на javascript, то время пришло. Автор покажет вам, как с помощью библиотеки pixi.js можно создать игру:

https://youtu.be/chYS7Dt8_rA?list=PLoYUIcUCRmBxcMbtWDw0SbjAO3U_q3gBg

#видео #pixijs
👍9🔥3
​Как обнаружить мёртвый код во внешнем проекте

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

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

https://blog.logrocket.com/how-detect-dead-code-frontend-project/
👍2
​Виды анимации на верстке: свойства, особенности, примеры кода

Во фронтенде можно создать анимацию самыми разными способами. В этой статье высможете разобраться CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas, WebGL и ThreeJs. Причём не только с точки зрения удобства, но и эффективности, плавности и оптимизации.

Подробнее:

https://tproger.ru/articles/vidy-animacii-na-verstke-svojstva-osobennosti-primery-koda/

#фронтенд
👍25🎉1
​Fresh — новый full stack фреймворк для Deno

Ещё один плюс в пользу Deno. Как мы уже рассказывали ранее, Deno является аналогом Node.js, но при этом быстрее. Теперь ещё больше смысла перейти с устаревшего Node.js.

Fresh позиционируется как современный фреймворк на TS/JS, спроектированный для легкого создания высококачественных и производительных веб-приложений. Подробнее о нём:

https://habr.com/ru/post/674798/

#deno #fullstack
👎9👍7😁2
​Scrollbar в современном CSS

Полоса прокрутки присутствует сегодня на любом сайте видимо или невидимо. Это вполне обыденный элемент, на который обычно никто не обращает особого внимания.

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

https://habr.com/ru/post/674244/

#фронтенд #css
👍32👏1