Если вы всё ещё не используете Figma или делаете это неуверенно? Тогда мы идём к вам!
Figma — мощный онлайн-сервис для разработки интерфейсов и других графических дизайнов. В Figma доступно множество инструментов, которые позволяют удобно создавать макеты сайтов.
А полноценно познакомиться со всей функциональностью сервиса и добавить его мощь в свой арсенал поможет курс на YouTube:
https://www.youtube.com/playlist?list=PLM2Q6lcZo4MexclJrYxA0Is42qWBBuHpB
#фронтенд #figma
Figma — мощный онлайн-сервис для разработки интерфейсов и других графических дизайнов. В Figma доступно множество инструментов, которые позволяют удобно создавать макеты сайтов.
А полноценно познакомиться со всей функциональностью сервиса и добавить его мощь в свой арсенал поможет курс на YouTube:
https://www.youtube.com/playlist?list=PLM2Q6lcZo4MexclJrYxA0Is42qWBBuHpB
#фронтенд #figma
👍13
Критика монолитов стала обычным делом. Мол, уже всем очевидно, что распределённые микро-сервисы всегда лучше.
Интересно, что сама идея модульных микросервисов всплыла около десяти лет назад на подъёме идеологий гибкой разработки Agile и DevOps. И никто не спорит о её пользе, но если осмотреться, можно увидеть огромное количество хороших монолитных приложений, которые даже спустя десять лет великолепно работают без перехода на микросервисы. Как же так?
Интересная статья, в которой разобрались, когда хороший монолит всё-таки уместнее и как его создавать: https://habr.com/ru/company/ruvds/blog/676780/
#devops #архитектура
Интересно, что сама идея модульных микросервисов всплыла около десяти лет назад на подъёме идеологий гибкой разработки 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
#курс
Рассчитан на тех, кто ещё не знаком с веб-разработкой, но хочет получить начальные знания в данной области. Материал изложен простым языком и подойдёт всем новичкам: школьникам, студентам, учителям информатики и просто любому желающему разобраться с 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
Современные сайты достаточно тяжёлые, поэтому не загружаются моментально. Чтобы ваши пользователи поняли, что сайт или контент грузится, а не просто крашнулась страница, стоит добавить лоадеры, которые покажут, что процесс идёт.
В этой статье собраны несколько вариантов, которые сможет реализовать даже неопытный верстальщик с помощью простого 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
Это продолжение материала, посвящённого созданию и запуску приложения на 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/
Представьте, что вам необходимо создать веб-страницу размером 5000х5000 пикселей, которая содержит сотни зацикленных движущихся объектов и при это должна быстро загружаться и поддерживать все современные браузеры. Представили?
А вот автор этой статьи не только представил, но и реализовал. Результатом своей работы он поделился здесь:
https://habr.com/ru/company/floor796/blog/673318/
👍29
Music App в рисованном стиле
Ловите интересную реализацию дизайна музыкального приложения, выполненную в рисованном стиле. Можете попробовать повторить его самостоятельно или, взяв его за основу, создать собственный вариант приложения:
https://codepen.io/havardob/pen/JjJXqZm
#codepen
Ловите интересную реализацию дизайна музыкального приложения, выполненную в рисованном стиле. Можете попробовать повторить его самостоятельно или, взяв его за основу, создать собственный вариант приложения:
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
В последнее время очень много статей выходит по 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 с не обычным названием позволяет быстро и удобно создавать
https://github.com/valor-software/ng2-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
Представьте, что у вас есть старый JS API, зависящий от мутирования передаваемого ему объекта, или не представляйте, а взгляните на код, с которым вы работаете сейчас и всплакните ещё раз. Так вот, автор этой статьи придумал, как применить assert-функцию, чтобы актуализировать старый код с учётом типов данных.
Подробнее:
https://habr.com/ru/company/ruvds/blog/664600/
#typescript
👍4🤡3😁2🤨1
«Я всё время неправильно создавал формы в React.js»
Если вам часто приходится создавать формы с помощью React, то вы наверняка сталкивались с необходимостью использования множества
В этой статье автор поделился собственным способом создания компонента формы, которые избавляет от этой проблемы и делает код более лаконичным:
https://dev.to/kuvambhardwaj/i-was-creating-forms-the-wrong-way-all-along-in-reactjs-hl3
#фронтенд #react
Если вам часто приходится создавать формы с помощью React, то вы наверняка сталкивались с необходимостью использования множества
useState для различных элементов формы.В этой статье автор поделился собственным способом создания компонента формы, которые избавляет от этой проблемы и делает код более лаконичным:
https://dev.to/kuvambhardwaj/i-was-creating-forms-the-wrong-way-all-along-in-reactjs-hl3
#фронтенд #react
👍14💩8❤1👎1
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
Встречайте 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
Этот 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
Для того, чтобы преобразовать текст в речь в 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
Вы, возможно, уже слышали о популярном курсе университета 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
Небольшой плейлист по 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/
В большом и старом проекте неизбежно появляется мёртвый код, который уже не несёт никакой пользы, но вполне может вызвать проблемы и неожиданное поведение приложения.
Лучшим способом избежать этих проблем является использование готовых инструментов, которые позволяют легко обнаружить мёртвый код и устранить его. В этой статье рассматриваются три инструмента и способа для решения этой задачи:
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/
#фронтенд
Во фронтенде можно создать анимацию самыми разными способами. В этой статье высможете разобраться 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
Ещё один плюс в пользу Deno. Как мы уже рассказывали ранее, Deno является аналогом Node.js, но при этом быстрее. Теперь ещё больше смысла перейти с устаревшего Node.js.
Fresh позиционируется как современный фреймворк на TS/JS, спроектированный для легкого создания высококачественных и производительных веб-приложений. Подробнее о нём:
https://habr.com/ru/post/674798/
#deno #fullstack
👎9👍7😁2