TailwindCSS — это CSS-фреймворк. Он похож на Bootstrap, Foundation или Bulma, но у него есть несколько фич, за которые его можно полюбить.
И вот небольшая подборка полезных сервисов и шпаргалок, которые вам помогут познакомиться с ним поближе:
— Интерактивный пример почтового ящика Intercom на Tailwind CSS, который поможет попробовать фреймворк на практике: https://play.tailwindcss.com/O2Uz6b4uLs?layout=horizontal
— Tailwind Cheat Sheet, шпаргалка по всем классам утилит и свойствам: https://nerdcave.com/tailwind-cheat-sheet: https://nerdcave.com/tailwind-cheat-sheet
— Meraki UI, набор нескольких готовых компонентов Tailwind CSS, которые можно кастомизировать перед копипастом: https://merakiui.com/components/
— Tailwind.run(), онлайн-площадка для Tailwind CSS с поддержкой пользовательской конфигурации сборки. С её помощью можно посмотреть, как итоговый вариант будет выглядеть на разных устройствах: https://tailwind.run/new
#библиотека #tailwind #инструменты
И вот небольшая подборка полезных сервисов и шпаргалок, которые вам помогут познакомиться с ним поближе:
— Интерактивный пример почтового ящика Intercom на Tailwind CSS, который поможет попробовать фреймворк на практике: https://play.tailwindcss.com/O2Uz6b4uLs?layout=horizontal
— Tailwind Cheat Sheet, шпаргалка по всем классам утилит и свойствам: https://nerdcave.com/tailwind-cheat-sheet: https://nerdcave.com/tailwind-cheat-sheet
— Meraki UI, набор нескольких готовых компонентов Tailwind CSS, которые можно кастомизировать перед копипастом: https://merakiui.com/components/
— Tailwind.run(), онлайн-площадка для Tailwind CSS с поддержкой пользовательской конфигурации сборки. С её помощью можно посмотреть, как итоговый вариант будет выглядеть на разных устройствах: https://tailwind.run/new
#библиотека #tailwind #инструменты
👍19👎3🔥1🤬1
А вы знали, что механизм обработки ошибок в Go кардинально отличается от большинства языков программирования?
Да и вообще, подход Go к обработке ошибок — одна из самых спорных и неправильно используемых фич. Так вот, именно правильная обработка ошибок как ничто другое показывает уровень скила Golang-разработчика.
В статье разбираемся в самых популярных способах обработки ошибок в вместе с ведущим разработчиком трайба «Автоматизация бизнес-процессов» МТС Диджитал: https://tprg.ru/clEe
#go
Да и вообще, подход Go к обработке ошибок — одна из самых спорных и неправильно используемых фич. Так вот, именно правильная обработка ошибок как ничто другое показывает уровень скила Golang-разработчика.
В статье разбираемся в самых популярных способах обработки ошибок в вместе с ведущим разработчиком трайба «Автоматизация бизнес-процессов» МТС Диджитал: https://tprg.ru/clEe
#go
🤮12👍6
Пишем полноценное приложение для распознавания голоса с помощью Vue.js
В этом видео показана пошаговая инструкция как создать приложение с распознаванием речи, используя Vue.js, Vite и JavaScript Speech Recognition API. В итоге на вопрос «который час?», например, приложение выдаст поп-ап с временем:
https://youtu.be/ST7PKGe1NzA
#vue
В этом видео показана пошаговая инструкция как создать приложение с распознаванием речи, используя Vue.js, Vite и JavaScript Speech Recognition API. В итоге на вопрос «который час?», например, приложение выдаст поп-ап с временем:
https://youtu.be/ST7PKGe1NzA
#vue
👍23
Music App в рисованном стиле на чистом CSS
Интересный codepen-проект с нестандартным дизайном приложения для прослушивания музыки: https://codepen.io/havardob/pen/JjJXqZm
#codepen #css
Интересный codepen-проект с нестандартным дизайном приложения для прослушивания музыки: https://codepen.io/havardob/pen/JjJXqZm
#codepen #css
👍18
Что почитать веб-разработчику: «Новая большая книга CSS» Дэвида Макфарланда
В отличие от большинства уроков на YouTube, книга — реальное руководство как использовать CSS в полной мере. Судя по отзывам, книга отлично подойдёт как начинающим, так и более опытным специалистам. А новое для себя найдут не только фронтенд-, но и бэкенд-разработчики.
Основное достоинство книги в том, что теория написана на доступном языке, а в конце каждой главы есть упражнения, которые помогают закрепить её на практике. Из дополнительных плюсов — наличие расширенного руководства по Flex, Sass и адаптивной, и мобильной верстке. Помимо отдельных свойств, рассматривается несколько подходов к формированию разметки с помощью CSS.
#книги
В отличие от большинства уроков на YouTube, книга — реальное руководство как использовать CSS в полной мере. Судя по отзывам, книга отлично подойдёт как начинающим, так и более опытным специалистам. А новое для себя найдут не только фронтенд-, но и бэкенд-разработчики.
Основное достоинство книги в том, что теория написана на доступном языке, а в конце каждой главы есть упражнения, которые помогают закрепить её на практике. Из дополнительных плюсов — наличие расширенного руководства по Flex, Sass и адаптивной, и мобильной верстке. Помимо отдельных свойств, рассматривается несколько подходов к формированию разметки с помощью CSS.
#книги
👍28❤1
Если вы всё ещё не используете 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