Шаблоны макетов
Коллекция шаблонов макетов, созданных с использованием современных API-интерфейсов CSS, которые помогут вам создавать стандартные интерфейсы, такие как карточки, области динамической сетки и полностраничные макеты:
https://web.dev/patterns/layout/
#css
Коллекция шаблонов макетов, созданных с использованием современных API-интерфейсов CSS, которые помогут вам создавать стандартные интерфейсы, такие как карточки, области динамической сетки и полностраничные макеты:
https://web.dev/patterns/layout/
#css
👍24👎2
JavaScript: захват медиапотока из DOM-элементов
В этой статье вы изучите возможность захвата и записи медиаданных в процессе воспроизведения аудио и видеофайлов. Для наглядности вы даже создадите своё приложение, которое сможет сводить видео и аудио в единый файл.
Подробнее:
https://habr.com/ru/company/timeweb/blog/646831/
#javascript
В этой статье вы изучите возможность захвата и записи медиаданных в процессе воспроизведения аудио и видеофайлов. Для наглядности вы даже создадите своё приложение, которое сможет сводить видео и аудио в единый файл.
Подробнее:
https://habr.com/ru/company/timeweb/blog/646831/
#javascript
🔥18👍6
Создание генератора кроссвордов с помощью JavaScript
Это сложный, но интересный проект. Каких-то кардинально новых методов или возможностей JavaScript тут нет, но зато вы можете прокачать свои навыки создания сложных алгоритмов и чтения кода.
Автор рассмотрел основные особенности генератора, рассказал как они работают и оставил код проекта для детального изучения:
https://mitchum.blog/building-a-crossword-puzzle-generator-with-javascript/
#javascript
Это сложный, но интересный проект. Каких-то кардинально новых методов или возможностей JavaScript тут нет, но зато вы можете прокачать свои навыки создания сложных алгоритмов и чтения кода.
Автор рассмотрел основные особенности генератора, рассказал как они работают и оставил код проекта для детального изучения:
https://mitchum.blog/building-a-crossword-puzzle-generator-with-javascript/
#javascript
👍15🔥3
3 шаблона проектирования компонентов React, о которых вы должны знать
Среди десятков шаблонов проектирования есть те, которые используются наиболее часто из-за их эффективности, надёжности и универсальности. О трёх из них — шаблоне провайдера, шаблоне представления и компонента-контейнера, а также шаблоне составных компонентов — в статье:
https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about
#react #фронтенд
Среди десятков шаблонов проектирования есть те, которые используются наиболее часто из-за их эффективности, надёжности и универсальности. О трёх из них — шаблоне провайдера, шаблоне представления и компонента-контейнера, а также шаблоне составных компонентов — в статье:
https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about
#react #фронтенд
👍10🔥2
Оптимизация видео по размеру и качеству
Добавление видео в ваше приложение может повысить заинтересованность и удовлетворенность клиентов. Но при проблемах с воспроизведением видео может произойти прямо противоположное: видео раздражают и отталкивают клиентов.
В этой статье вы рассмотрите шаги по оптимизации видео на вашем веб-сайте, чтобы обеспечить быстрое воспроизведение и уменьшить количество зависаний:
https://www.smashingmagazine.com/2021/02/optimizing-video-size-quality/
Добавление видео в ваше приложение может повысить заинтересованность и удовлетворенность клиентов. Но при проблемах с воспроизведением видео может произойти прямо противоположное: видео раздражают и отталкивают клиентов.
В этой статье вы рассмотрите шаги по оптимизации видео на вашем веб-сайте, чтобы обеспечить быстрое воспроизведение и уменьшить количество зависаний:
https://www.smashingmagazine.com/2021/02/optimizing-video-size-quality/
👍11
Адаптивная галерея изображений с анимированными подписями
Адаптивное изменение размера изображений является общей потребностью. Современный CSS предоставляет инструменты для обеспечения придания адаптивности изображениям без искажений, например
https://moderncss.dev/responsive-image-gallery-with-animated-captions/
#css
Адаптивное изменение размера изображений является общей потребностью. Современный CSS предоставляет инструменты для обеспечения придания адаптивности изображениям без искажений, например
aspect-ratio или object-fit. В этой статье автор продемонстрировал современные возможности адаптивности на примере галереи изображений:https://moderncss.dev/responsive-image-gallery-with-animated-captions/
#css
🔥5👍1
Microsoft поддерживает добавление в JavaScript синтаксиса типов
Microsoft поддержала предложение добавить в JavaScript необязательный и стираемый синтаксис типов, чтобы сделать язык TypeScript быстрее и проще в использовании.
По сути, предлагается добавление аннотаций типов в код JavaScript, которые могут быть проверены внешними средствами проверки типов и обработаны как комментарии движком JavaScript во время выполнения. Если предложение будет одобрено, разработчики смогут запускать программы на TypeScript, Flow и других языках.
Подробнее можно прочитать в этой статье:
https://habr.com/ru/news/t/655749/
#javascript #новости
Microsoft поддержала предложение добавить в JavaScript необязательный и стираемый синтаксис типов, чтобы сделать язык TypeScript быстрее и проще в использовании.
По сути, предлагается добавление аннотаций типов в код JavaScript, которые могут быть проверены внешними средствами проверки типов и обработаны как комментарии движком JavaScript во время выполнения. Если предложение будет одобрено, разработчики смогут запускать программы на TypeScript, Flow и других языках.
Подробнее можно прочитать в этой статье:
https://habr.com/ru/news/t/655749/
#javascript #новости
👍20🔥1😁1
a11yphant — простой способ изучить основы веб-доступности
Это студенческий проект, который даёт возможность изучить важные вопросы доступности в пошаговой форме. Вам не нужно читать большое количество текста, чтобы разобраться. Вместо этого вы будете учиться, применяя концепции в коде.
Изучить основные проблемы доступности можно здесь:
https://a11yphant.com/
Это студенческий проект, который даёт возможность изучить важные вопросы доступности в пошаговой форме. Вам не нужно читать большое количество текста, чтобы разобраться. Вместо этого вы будете учиться, применяя концепции в коде.
Изучить основные проблемы доступности можно здесь:
https://a11yphant.com/
👍15❤3
Декларативная валидация данных с помощью функционального программирования и rule-based подхода
Здесь описан простой и эффективный принцип, который облегчает валидацию данных и позволяет писать масштабируемый и простой в поддержке код.
Подробнее:
https://bespoyasov.ru/blog/declarative-rule-based-validation/
Здесь описан простой и эффективный принцип, который облегчает валидацию данных и позволяет писать масштабируемый и простой в поддержке код.
Подробнее:
https://bespoyasov.ru/blog/declarative-rule-based-validation/
👍11🔥4
Ускоренное руководство по Fullstack Web3 с ASS (Anchor, Solana и Svelte)
Про Web3 сегодня слышали, пожалуй все, кто связан с IT. Многие пророчат ему светлое будущее и ожидают, что он заменит привычные стандарты работы сети на децентрализованный вариант. Поэтому имеет смысл познакомиться с ним поближе уже сейчас. Эта статья поможет вам разобраться с Web3 на практическом примере, а именно на приложении с популярным стеком Anchor, Solana и Svelte:
https://dev.to/0xmuse/accelerated-guide-to-fullstack-web3-with-ass-anchor-solana-and-svelte-1mg
#web3
Про Web3 сегодня слышали, пожалуй все, кто связан с IT. Многие пророчат ему светлое будущее и ожидают, что он заменит привычные стандарты работы сети на децентрализованный вариант. Поэтому имеет смысл познакомиться с ним поближе уже сейчас. Эта статья поможет вам разобраться с Web3 на практическом примере, а именно на приложении с популярным стеком Anchor, Solana и Svelte:
https://dev.to/0xmuse/accelerated-guide-to-fullstack-web3-with-ass-anchor-solana-and-svelte-1mg
#web3
❤9👍6😁1
Распространённые заблуждения о наследовании в JavaScript
Даже опытные разработчики могут ошибаться или заблуждаться в некоторых вопросах, не говоря уже о начинающих. Вопросы объектно-ориентированного программирования и их концепции некоторым могут показаться сложными, что и вызывает в будущем неверное понимание. В этой статье поговорили о заблуждениях, которые преследуют многих разработчиков в вопросе наследования:
https://medium.com/devschacht/eric-elliott-common-misconceptions-about-inheritance-in-javascript-f6137fc3a45a
#javascript
Даже опытные разработчики могут ошибаться или заблуждаться в некоторых вопросах, не говоря уже о начинающих. Вопросы объектно-ориентированного программирования и их концепции некоторым могут показаться сложными, что и вызывает в будущем неверное понимание. В этой статье поговорили о заблуждениях, которые преследуют многих разработчиков в вопросе наследования:
https://medium.com/devschacht/eric-elliott-common-misconceptions-about-inheritance-in-javascript-f6137fc3a45a
#javascript
👍6😁3👎1
Как быстро задать уникальный стиль для каждого элемента списка
Если речь идёт о списках, то сразу вспоминается нумерованный и ненумерованный варианты, где пункты либо отмечены последовательностью букв или цифр, либо одинаковым изображением или символом соответственно.
Но на самом деле списки можно сделать более привлекательными, добавив каждому элементу свою иконку. И для этого не потребуются даже псевдоклассы или псевдоэлементы. Посмотрите сами:
https://devdojo.com/basharath/style-each-list-item-css
#css
Если речь идёт о списках, то сразу вспоминается нумерованный и ненумерованный варианты, где пункты либо отмечены последовательностью букв или цифр, либо одинаковым изображением или символом соответственно.
Но на самом деле списки можно сделать более привлекательными, добавив каждому элементу свою иконку. И для этого не потребуются даже псевдоклассы или псевдоэлементы. Посмотрите сами:
https://devdojo.com/basharath/style-each-list-item-css
#css
👍38😁1
Полное руководство для начинающих по npm
Это действительно большое руководство по npm, которое подробно отвечает на множество вопросов, возникающих у новичков. Руководство состоит из девяти глав, каждая из которых представляет собой отдельную статью с примерами и различными нюансами.
Изучить можно здесь:
https://css-tricks.com/a-complete-beginners-guide-to-npm/
#npm
Это действительно большое руководство по npm, которое подробно отвечает на множество вопросов, возникающих у новичков. Руководство состоит из девяти глав, каждая из которых представляет собой отдельную статью с примерами и различными нюансами.
Изучить можно здесь:
https://css-tricks.com/a-complete-beginners-guide-to-npm/
#npm
👍18
Более 20 полезных компонентов для Vue
Хотите сделать интерфейс вашего приложения на основе Vue уникальным и привлекательным? Сегодня существует множество готовых компонентов, которые позволят вам не только достигнуть желаемого, но и сэкономят ваше время.
Подробнее о них:
https://medium.com/js-dojo/20-useful-vue-js-components-2022-3bf9fbe5b556
#vue
Хотите сделать интерфейс вашего приложения на основе Vue уникальным и привлекательным? Сегодня существует множество готовых компонентов, которые позволят вам не только достигнуть желаемого, но и сэкономят ваше время.
Подробнее о них:
https://medium.com/js-dojo/20-useful-vue-js-components-2022-3bf9fbe5b556
#vue
👍8
Как использовать шаблон проектирования «Адаптер» в React
Если, используя React, вам потребовалось подключить какую-то дополнительную библиотеку, то необходимо убедиться, что они будут нормально взаимодействовать. Для этого можно воспользоваться адаптером — шаблоном проектирования, который позволяет создать «оболочку» вокруг дополнительной библиотеки.
Как это сделать рассказали тут:
https://nuancesprog.ru/p/15479/
#javascript #react
Если, используя React, вам потребовалось подключить какую-то дополнительную библиотеку, то необходимо убедиться, что они будут нормально взаимодействовать. Для этого можно воспользоваться адаптером — шаблоном проектирования, который позволяет создать «оболочку» вокруг дополнительной библиотеки.
Как это сделать рассказали тут:
https://nuancesprog.ru/p/15479/
#javascript #react
👍9❤1
5 популярных JavaScript календарей и планировщиков в 2022 году
Многие из нас в качестве одного из первых учебных проектов делали тудушку. Но если говорить о настоящем проекте, то реализовывать для него календарь или список дел с нуля та ещё морока, да и времени уйдёт порядочно. Вместо этого можно воспользоваться одним из уже готовых вариантов, которые предлагают широкий выбор возможностей и настроек, при этом легко интегрируются. Подробнее о них в этой статье:
https://proglib.io/p/5-populyarnyh-javascript-kalendarey-i-planirovshchikov-v-2022-godu-2022-03-05
#javascript
Многие из нас в качестве одного из первых учебных проектов делали тудушку. Но если говорить о настоящем проекте, то реализовывать для него календарь или список дел с нуля та ещё морока, да и времени уйдёт порядочно. Вместо этого можно воспользоваться одним из уже готовых вариантов, которые предлагают широкий выбор возможностей и настроек, при этом легко интегрируются. Подробнее о них в этой статье:
https://proglib.io/p/5-populyarnyh-javascript-kalendarey-i-planirovshchikov-v-2022-godu-2022-03-05
#javascript
👍31🥰1👏1
Создание приложения с помощью Electron и Vue
JavaScript — это не только веб-разработка. Сегодня с помощью него можно создавать и полноценные мобильные или десктопные приложения. Для этого есть Electron — среда JavaScript, позволяющая создавать кроссплатформенные приложения. А в связке с Vue это сделать ещё проще. Посмотрите, как веб-разработчик может без особых усилий сделать полноценное приложение:
https://blog.logrocket.com/building-app-electron-vue/
#electron #vue
JavaScript — это не только веб-разработка. Сегодня с помощью него можно создавать и полноценные мобильные или десктопные приложения. Для этого есть Electron — среда JavaScript, позволяющая создавать кроссплатформенные приложения. А в связке с Vue это сделать ещё проще. Посмотрите, как веб-разработчик может без особых усилий сделать полноценное приложение:
https://blog.logrocket.com/building-app-electron-vue/
#electron #vue
👍23