Fresh 1.0
Fresh — это новый fullstack фреймворк для Deno. И недавно была выпущена его первая стабильная версия.
С Fresh рендеринг происходит не на клиентской стороне. Весь объемный рендеринг и вычисления могут выполняться на сервере, а на клиенте нужно только отрисовывать небольшие UI компоненты. А это значительно влияет на производительность сайта.
Подробности o Fresh читайте в статье!
Ссылка на статью
Ссылка на официальную страницу Fresh
#nodejs
#deno
Fresh — это новый fullstack фреймворк для Deno. И недавно была выпущена его первая стабильная версия.
С Fresh рендеринг происходит не на клиентской стороне. Весь объемный рендеринг и вычисления могут выполняться на сервере, а на клиенте нужно только отрисовывать небольшие UI компоненты. А это значительно влияет на производительность сайта.
Подробности o Fresh читайте в статье!
Ссылка на статью
Ссылка на официальную страницу Fresh
#nodejs
#deno
Pictogon - это онлайн-сервис для создания интерактивных картинок.
Например, с помощью него можно создавать интерактивные карты или схемы. Сервис позволяет выделять области на картинке и добавлять надписи, которые будут отображаться при наведении или щелчке мыши.
Сначала на сайте создается картинка с выделенными областями и надписями к ним, а затем всего лишь нужно встроить сгенерированный скрипт на ваш сайт!
Ссылка на сайт
#дизайн
Например, с помощью него можно создавать интерактивные карты или схемы. Сервис позволяет выделять области на картинке и добавлять надписи, которые будут отображаться при наведении или щелчке мыши.
Сначала на сайте создается картинка с выделенными областями и надписями к ним, а затем всего лишь нужно встроить сгенерированный скрипт на ваш сайт!
Ссылка на сайт
#дизайн
Бесплатные книги по вебу
Что почитать на досуге по вебу?
Делимся подборкой бесплатных книг!
В списке представлены ссылки на книги по HTML, CSS, JavaScript и другим общим темам.
Материалы полезны, как для новичков, так и для опытных разработчиков.
Например, для разработчика с опытом будет интересно почитать книгу "Learning JavaScript Design Patterns".
Ссылка на статью
#статьи
Что почитать на досуге по вебу?
Делимся подборкой бесплатных книг!
В списке представлены ссылки на книги по HTML, CSS, JavaScript и другим общим темам.
Материалы полезны, как для новичков, так и для опытных разработчиков.
Например, для разработчика с опытом будет интересно почитать книгу "Learning JavaScript Design Patterns".
Ссылка на статью
#статьи
Новый синтаксис media запросов
Теперь можно будет использовать операторы сравнения в media запросах в Chrome, начиная с 104 версии.
Данный синтаксис был доступен еще в Firefox 63, но для Chrome его можно назвать новым.
Такой синтаксис очень удобен для написания диапазонов.
Вместо того, чтобы писать:
Можно использовать следующую запись:
Подробности в статье!
Ссылка на статью
#css
Теперь можно будет использовать операторы сравнения в media запросах в Chrome, начиная с 104 версии.
Данный синтаксис был доступен еще в Firefox 63, но для Chrome его можно назвать новым.
Такой синтаксис очень удобен для написания диапазонов.
Вместо того, чтобы писать:
@media (min-width: 400px) and (max-width: 600px) { ...}Можно использовать следующую запись:
@media (400px <= width <= 600px ) { ...}Подробности в статье!
Ссылка на статью
#css
typeof в TypeScript
В Javascript оператор typeof используется для определения типа данных. Поскольку TypeScript является строго типизированным языком, то там typeof имеет другое предназначение.
О том, как работает typeof в TypeScript, читайте в статье!
Ссылка на статью
#js
В Javascript оператор typeof используется для определения типа данных. Поскольку TypeScript является строго типизированным языком, то там typeof имеет другое предназначение.
О том, как работает typeof в TypeScript, читайте в статье!
Ссылка на статью
#js
massCode - это бесплатный менеджер сниппетов кода для разработчиков. Он поможет создать и организовать свою собственную личную коллекцию сниппетов и иметь быстрый доступ к ней.
Ссылка на сайт
#инструменты
Ссылка на сайт
#инструменты
Zustand — это быстрое и масштабируемое решение для управления состоянием в React приложениях, созданное разработчиками Jotai и React springs.
Zustand известен своей простотой:
- Использует хуки для управления состояниями;
- Рендерит компоненты только при изменении значения состояния. Изменения в состоянии часто могут быть обработаны без повторного рендеринга компонента;
Подробнее об остальных особенностях Zusstand и о том, как его использовать читайте в статье.
Ссылка на статью
#react
Zustand известен своей простотой:
- Использует хуки для управления состояниями;
- Рендерит компоненты только при изменении значения состояния. Изменения в состоянии часто могут быть обработаны без повторного рендеринга компонента;
Подробнее об остальных особенностях Zusstand и о том, как его использовать читайте в статье.
Ссылка на статью
#react
Express 5
Express v5 пока еще доступен в бета-версии. Новая версия включает в себя множество новых функций и улучшений, направленных на повышение эффективности фреймворка. Однако это обновление может вызвать проблемы или генерировать предупреждения об устаревании.
В статье рассказывается, как перейти с Express v4 на Express v5, а так же рассматриваются обновления и функции, доступные в новой версии.
Ссылка на статью
#nodejs
Express v5 пока еще доступен в бета-версии. Новая версия включает в себя множество новых функций и улучшений, направленных на повышение эффективности фреймворка. Однако это обновление может вызвать проблемы или генерировать предупреждения об устаревании.
В статье рассказывается, как перейти с Express v4 на Express v5, а так же рассматриваются обновления и функции, доступные в новой версии.
Ссылка на статью
#nodejs
Конические градиенты
Фоновые градиенты в CSS могут быть линейными, радиальными, а еще конусообразными или коническими.
Делимся коллекцией простых и симпатичных конических градиентов с готовыми CSS стилями!
Ссылка на сайт
#дизайн
Фоновые градиенты в CSS могут быть линейными, радиальными, а еще конусообразными или коническими.
Делимся коллекцией простых и симпатичных конических градиентов с готовыми CSS стилями!
Ссылка на сайт
#дизайн
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