Podman
Встречайте Podman - альтернативу Docker!
Podman — это еще один инструмент для разработки, управления и запуска контейнеров и образов контейнеров. Он относительный новичок на сцене контейнеризации: версия 1.0 была выпущена в 2019 году.
Весомое их различие в том, что Podman пока остается полностью бесплатным, а Docker частично платный.
Подробное их сравнение читайте в статье!
Ссылка на статью
#статьи
Встречайте Podman - альтернативу Docker!
Podman — это еще один инструмент для разработки, управления и запуска контейнеров и образов контейнеров. Он относительный новичок на сцене контейнеризации: версия 1.0 была выпущена в 2019 году.
Весомое их различие в том, что Podman пока остается полностью бесплатным, а Docker частично платный.
Подробное их сравнение читайте в статье!
Ссылка на статью
#статьи
box-shadow
Чтобы не мучаться над созданием красивой тени, можно обратиться к данному ресурсу. На нем собрана коллекция из 93 образцов!
Выберите понравившийся вариант, кликните по нему и готовый CSS код будет автоматически скопирован в буфер обмена.
Ссылка на сайт
#css
Чтобы не мучаться над созданием красивой тени, можно обратиться к данному ресурсу. На нем собрана коллекция из 93 образцов!
Выберите понравившийся вариант, кликните по нему и готовый CSS код будет автоматически скопирован в буфер обмена.
Ссылка на сайт
#css
Полезные JS сниппеты
Автор собрал в статье 58 полезных сниппетов JavaScript!
Например, один из них генерирует звездный рейтинг:
Все сниппеты смотрите по ссылке.
Ссылка на статью
#js
Автор собрал в статье 58 полезных сниппетов JavaScript!
Например, один из них генерирует звездный рейтинг:
const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);const start = StartScore(3); // start => '★★★☆☆'Все сниппеты смотрите по ссылке.
Ссылка на статью
#js
snipt.dev - это инструмент по поиску готовых сниппетов.
Напомним, что сниппет - это готовый фрагмент или кусок кода, который выполняет определенные задачи.
Например, вам нужно перемешать элементы в массиве. Вводите в поисковую строку "Shuffle an array" ("перемешать массив") и сервис выдает вам готовый вариант.
Для поиска доступны сниппеты JavaScript, TypeScript, Python и другие.
Ссылка на сайт
#инструменты
Напомним, что сниппет - это готовый фрагмент или кусок кода, который выполняет определенные задачи.
Например, вам нужно перемешать элементы в массиве. Вводите в поисковую строку "Shuffle an array" ("перемешать массив") и сервис выдает вам готовый вариант.
Для поиска доступны сниппеты JavaScript, TypeScript, Python и другие.
Ссылка на сайт
#инструменты
NuxtJS Content
Модуль Content в NuxtJS это headless CMS, основанная на файловой системе. Она предоставляет мощные функции для создания блогов, документации или просто добавления контента на обычный сайт.
Контент хранится в директории
Такой тип хранения данных идеален для документации инструментов разработки, и любого другого контента не требующего частого обновления. Если же контент должен динамически обновляться от действий пользователей, то тут без базы данных не обойтись.
Ссылка на официальный сайт
#vue
Модуль Content в NuxtJS это headless CMS, основанная на файловой системе. Она предоставляет мощные функции для создания блогов, документации или просто добавления контента на обычный сайт.
Контент хранится в директории
content/ в вашем проекте в виде файлов .md, .yml, .csv и .json и извлекать его можно также с помощью API.Такой тип хранения данных идеален для документации инструментов разработки, и любого другого контента не требующего частого обновления. Если же контент должен динамически обновляться от действий пользователей, то тут без базы данных не обойтись.
Ссылка на официальный сайт
#vue
Bun — это новая среда выполнения JavaScript, как Node и Deno. Она обладает собственным сборщиком, транспилером, таск-менеджером и встроенным клиентом npm и по мнению создателей является быстрее других.
Подробнее о Bun читайте на официальном сайте.
Ссылка на сайт
#nodejs
Подробнее о Bun читайте на официальном сайте.
Ссылка на сайт
#nodejs
Кнопки TailwindCSS
TailwindCSS – это CSS-библиотека, которая упрощает стилизацию HTML, тем же путем, как это делает Bootstrap – добавляя определенные классы к элементам.
Делимся готовой коллекцией красивых и эффектных кнопок с hover эффектами, созданных с помощью классов TailwindCSS.
Ссылка на сайт
#дизайн
TailwindCSS – это CSS-библиотека, которая упрощает стилизацию HTML, тем же путем, как это делает Bootstrap – добавляя определенные классы к элементам.
Делимся готовой коллекцией красивых и эффектных кнопок с hover эффектами, созданных с помощью классов TailwindCSS.
Ссылка на сайт
#дизайн
Wasp - это новый язык программирования для разработки full-stack веб-приложений с меньшим количеством кода.
Это простой декларативный язык, который упрощает разработку веб-приложений, но при этом позволяет использовать новейшие технологии, такие как React, Node.js и Prisma.
Упрочнит ли он свою позицию в вебе? Покажет время!
А пока можете познакомиться с ним поближе. В статье рассказывается: чем Wasp может быть полезен для веб-разработки, как он работает, на какой он сейчас стадии и каковы планы создателей на будущее.
И делимся ссылкой на официальный сайт, где можно почитать документацию.
Ссылка на статью
Ссылка на официальный сайт
#статьи
Это простой декларативный язык, который упрощает разработку веб-приложений, но при этом позволяет использовать новейшие технологии, такие как React, Node.js и Prisma.
Упрочнит ли он свою позицию в вебе? Покажет время!
А пока можете познакомиться с ним поближе. В статье рассказывается: чем Wasp может быть полезен для веб-разработки, как он работает, на какой он сейчас стадии и каковы планы создателей на будущее.
И делимся ссылкой на официальный сайт, где можно почитать документацию.
Ссылка на статью
Ссылка на официальный сайт
#статьи
overflow: hidden
Как достичь такого же результата, как у overflow: hidden, но без его использования?
Для этого есть два способа:
- использовать свойство clip-path
- использовать contain: paint.
Подробно о данных способах, читайте в статье!
Ссылка на статью
#css
Как достичь такого же результата, как у overflow: hidden, но без его использования?
Для этого есть два способа:
- использовать свойство clip-path
- использовать contain: paint.
Подробно о данных способах, читайте в статье!
Ссылка на статью
#css
Фильтрация объектов
Объекты JavaScript не являются итерируемыми, как массивы или строки, поэтому для них невозможно использовать метод filter().
Объект — это набор пар ключ-значение. Можно извлекать ключи, используя метод Object.keys(), значения с помощью Object.values(), а если нужно и то и другое, то с помощью метода Object.entries(). Эти методы как раз и помогут в фильтрации объектов!
В статье рассказывается, как фильтровать объекты по ключу.
Ссылка на статью
#js
Объекты JavaScript не являются итерируемыми, как массивы или строки, поэтому для них невозможно использовать метод filter().
Объект — это набор пар ключ-значение. Можно извлекать ключи, используя метод Object.keys(), значения с помощью Object.values(), а если нужно и то и другое, то с помощью метода Object.entries(). Эти методы как раз и помогут в фильтрации объектов!
В статье рассказывается, как фильтровать объекты по ключу.
Ссылка на статью
#js
Nunjucks
Nunjucks является мощным шаблонизатором для JavaScript. Его можно использовать в браузере, на стороне клиента и на стороне сервера Node.js. Но также, Nunjucks очень удобно применять для верстки сайтов.
На каждой странице сайта присутствуют одинаковые блоки: хедер, футер и др. Что бы заменить надпись, например, в хедере, нужно вручную вносить изменения на каждой странице сайта.
Шаблонизатор Nunjucks позволяет вынести все повторяющееся элементы в один базовый шаблон. При этом изменить надпись в хедере на всем сайте займет пару минут.
Кстати, Nunjucks был разработан командой Mozilla.
Ссылка на официальный сайт
#инструменты
Nunjucks является мощным шаблонизатором для JavaScript. Его можно использовать в браузере, на стороне клиента и на стороне сервера Node.js. Но также, Nunjucks очень удобно применять для верстки сайтов.
На каждой странице сайта присутствуют одинаковые блоки: хедер, футер и др. Что бы заменить надпись, например, в хедере, нужно вручную вносить изменения на каждой странице сайта.
Шаблонизатор Nunjucks позволяет вынести все повторяющееся элементы в один базовый шаблон. При этом изменить надпись в хедере на всем сайте займет пару минут.
Кстати, Nunjucks был разработан командой Mozilla.
Ссылка на официальный сайт
#инструменты
Mantine
Еще одна библиотека для быстрого создания React приложений!
Mantine - это библиотека более 120 настраиваемых компонентов и 30 хуков.
Mantine предлагает немало полезных функций. Например:
- c помощью данной библиотеки можно добавить темную тему в приложение, написав всего несколько строк кода;
- имеет полнофункциональную систему уведомлений;
- Transitions API для создания плавных анимаций
и многое другое!
Ссылка на официальный сайт
#react
Еще одна библиотека для быстрого создания React приложений!
Mantine - это библиотека более 120 настраиваемых компонентов и 30 хуков.
Mantine предлагает немало полезных функций. Например:
- c помощью данной библиотеки можно добавить темную тему в приложение, написав всего несколько строк кода;
- имеет полнофункциональную систему уведомлений;
- Transitions API для создания плавных анимаций
и многое другое!
Ссылка на официальный сайт
#react
Как стать веб-разработчиком с нуля в 2022? Узнайте на вебинаре.
→ Бесплатно, 26 июля в 19:00
На встрече расскажем, как освоить профессию с нуля и выйти на рынок труда через 10 месяцев, даже если до этого вы никогда не программировали.
◾️ Георгий Девяткин, наставник на курсе по веб-разработке, расскажет и покажет на примерах, как проходит рабочий день обычного веб-разработчика.
◾️ Олег Гордиенов, студент курса по веб-разработке Яндекс Практикума, поделится опытом обучения и трудоустройства. Олег нашёл работу ещё до того, как получил диплом разработчика.
На вебинаре вы узнаете:
— почему через веб-разработку реально попасть в IT;
— какие задачи решает веб-разработчик;
— какие навыки нужны для успешного старта карьеры.
В финале встречи вы получите пошаговый план, как выйти на стабильный доход в новой профессии.
→ Зарегистрироваться на вебинар
#реклама
→ Бесплатно, 26 июля в 19:00
На встрече расскажем, как освоить профессию с нуля и выйти на рынок труда через 10 месяцев, даже если до этого вы никогда не программировали.
◾️ Георгий Девяткин, наставник на курсе по веб-разработке, расскажет и покажет на примерах, как проходит рабочий день обычного веб-разработчика.
◾️ Олег Гордиенов, студент курса по веб-разработке Яндекс Практикума, поделится опытом обучения и трудоустройства. Олег нашёл работу ещё до того, как получил диплом разработчика.
На вебинаре вы узнаете:
— почему через веб-разработку реально попасть в IT;
— какие задачи решает веб-разработчик;
— какие навыки нужны для успешного старта карьеры.
В финале встречи вы получите пошаговый план, как выйти на стабильный доход в новой профессии.
→ Зарегистрироваться на вебинар
#реклама
Morgan — это промежуточное ПО для Node.js, которое регистрирует HTTP-запросы. Обычно оно используется в проектах Express.
Morgan упрощает работу по регистрации HTTP-запросов к приложению и от него. Обычно разработчики должны писать весь код ведения журнала вручную. Они указывают Node.js/Express.js - что, как и где сохранять.
А Morgan как раз может позаботиться об этом без участия разработчика. Он сам собирает журналы с сервера и подготавливает их к чтению.
Подробнее о том, как его использовать читайте в статье!
Ссылка на статью
#nodejs
Morgan упрощает работу по регистрации HTTP-запросов к приложению и от него. Обычно разработчики должны писать весь код ведения журнала вручную. Они указывают Node.js/Express.js - что, как и где сохранять.
А Morgan как раз может позаботиться об этом без участия разработчика. Он сам собирает журналы с сервера и подготавливает их к чтению.
Подробнее о том, как его использовать читайте в статье!
Ссылка на статью
#nodejs
Mesher - инструмент для создания сетчатых градиентов.
Сетчатый градиент — это сложный градиент на основе двухмерной сетки, также он называется mesh-градиентом.
Можно добавлять бесконечное количество цветов, создавая интересные фоны. На выходе генератор выдает готовый CSS код.
Ссылка на сайт
#дизайн
Сетчатый градиент — это сложный градиент на основе двухмерной сетки, также он называется mesh-градиентом.
Можно добавлять бесконечное количество цветов, создавая интересные фоны. На выходе генератор выдает готовый CSS код.
Ссылка на сайт
#дизайн
CMS, CRM, и ERP
CMS, CRM и ERP — это три основных программных решения для автоматизации основных бизнес-процессов, а также типы проектов над которыми часто приходится работать разработчикам.
Если не понимаете, что и для чего предназначено, то эта статья для вас. В ней рассказывается для чего эти типы ПО нужны и их ключевых функциях.
Ссылка на сайт
#статьи
CMS, CRM и ERP — это три основных программных решения для автоматизации основных бизнес-процессов, а также типы проектов над которыми часто приходится работать разработчикам.
Если не понимаете, что и для чего предназначено, то эта статья для вас. В ней рассказывается для чего эти типы ПО нужны и их ключевых функциях.
Ссылка на сайт
#статьи
column-rule
Если верстка состоит из колонок и между ними нужен разделитель, есть очень простой способ их создать - это свойство column-rule!
column-rule - это краткая форма записи для column-rule-width, column-rule-style, и column-rule-color, с помощью которых задаются стили для разделителя.
Подробности в статье!
Ссылка на статью
#css
Если верстка состоит из колонок и между ними нужен разделитель, есть очень простой способ их создать - это свойство column-rule!
column-rule - это краткая форма записи для column-rule-width, column-rule-style, и column-rule-color, с помощью которых задаются стили для разделителя.
Подробности в статье!
Ссылка на статью
#css
Шпаргалка GSAP
GSAP - это высокопроизводительная JavaScript библиотека анимации.
В шпаргалке представлены примеры синтаксиса GSAP со всеми базовыми свойствами и методами. Кликая на свойства в примерах, можно почитать подробное описание.
Удобно иметь под рукой!
Ссылка на шпаргалку
#инструменты
GSAP - это высокопроизводительная JavaScript библиотека анимации.
В шпаргалке представлены примеры синтаксиса GSAP со всеми базовыми свойствами и методами. Кликая на свойства в примерах, можно почитать подробное описание.
Удобно иметь под рукой!
Ссылка на шпаргалку
#инструменты
React-Responsive-Carousel — это npm пакет, используемый в React приложениях для создания карусели изображений или видео.
Хороший и быстрый вариант для создания карусели, адаптированной под все экраны!
На официально сайте можно посмотреть демо, а в статье подробно рассказывается, как ее создать и настроить.
Ссылка на статью
Ссылка на официальный сайт
#react
Хороший и быстрый вариант для создания карусели, адаптированной под все экраны!
На официально сайте можно посмотреть демо, а в статье подробно рассказывается, как ее создать и настроить.
Ссылка на статью
Ссылка на официальный сайт
#react
Fast Node Manager
Иногда для проектов требуются разные версии Node.js.
Часто возникают ошибки или проект не собирается по причине того, что на компьютере может быть уже самая последняя версия ноды, а проект был написан на одной из предыдущих.
Fast Node Manager - это менеджер версий Node.js, написанный на Rust. С помощью него вы можете устанавливать различные версии и удобно переключаться между ними.
В статье рассказывается, как использовать Fast Node Manager.
Ссылка на статью
#nodejs
Иногда для проектов требуются разные версии Node.js.
Часто возникают ошибки или проект не собирается по причине того, что на компьютере может быть уже самая последняя версия ноды, а проект был написан на одной из предыдущих.
Fast Node Manager - это менеджер версий Node.js, написанный на Rust. С помощью него вы можете устанавливать различные версии и удобно переключаться между ними.
В статье рассказывается, как использовать Fast Node Manager.
Ссылка на статью
#nodejs
Pebble - это коллекция бесплатных стильных иконок. Они доступны в форматах PNG и SVG, а так же в качестве React компонентов, построенных с помощью SVGR.
Ссылка на сайт
#дизайн
Ссылка на сайт
#дизайн