WebDEV
8.97K subscribers
2.2K photos
12 videos
2.72K links
Сообщество веб-разработчиков.

На канале можно найти: видео-уроки, полезные статьи, новости из мира IT и веб-разработки.

Ссылка: @Portal_v_IT

Сотрудничество: @oleginc, @tatiana_inc

Канал на бирже: telega.in/c/webb_dev

РКН: clck.ru/3L2oTf
Download Telegram
​​Signale — это настраиваемый консольный логгер. Из коробки есть 16 разных логгеров, но можно создавать свои, либо изменять встроенные.

GitHub

#node #js #logger
Что можно сделать с помощью CSS-свойства border-radius? Автор материала, говорит, что больше, чем кажется на первый взгляд. В частности, речь идёт о том, что углы элементов, скруглённые с помощью этого свойства, могут иметь весьма интересную форму.

CSS: интересные возможности border-radius

#css #article
Что такое SOLID, как расшифровывается и что означает?

Мы рассмотрим эти принципы на схематичных примерах. Главная цель примеров заключается в том, чтобы помочь читателю понять принципы SOLID, узнать, как их применять и как следовать им, проектируя приложения.

Принципы SOLID, о которых должен знать каждый разработчик

#solid #article
​​X-Chart — библиотека, которая позволит вам создавать красивые и отзывчивые чарты. Приятная анимация, drag and drop и большой выбор типов чарта, делают x-chart одной из лучших диаграммных библиотек.

Демо | GitHub

#js #chart
Принцип позиционирования flexbox позволяет гибко и интуитивно строить лэйаут. Чтобы достичь этого, он позволяет элементу контейнеру самому решать как расположить дочерние элементы. Всё это хорошо звучит в теории. Но давайте посмотрим как это выглядит на практике.

В этой статье мы рассмотрим 5 наиболее распространённых свойств модели flexbox. Мы рассмотрим как можно использовать их и как будут выглядеть результаты.

Как работает Flexbox

#css #flexbox
Функциональное программирование  —  это такой стиль разработки программ, в котором широко используются некоторые специфические возможности по работе с функциями. Речь идёт, в частности, о передаче функций другим функциям в качестве аргументов и о возврате функций из других функций.

Материал посвящён каррированию. Мы поговорим о том, как работает каррирование, и о том, как знание этого механизма может пригодиться JS-разработчику.

Каррирование функций в JavaScript

#js #article
Ученые Стэнфордского университета провели опрос, который показал, что 46% респондентов составляют мнение о сайте на основании его внешнего вида и интерфейса. Если дизайн не нравится пользователю, то и весь контент кажется ненадежным и не заслуживающим доверия.

В этой статье хочу поговорить о том, какие есть способы для того, чтобы улучшить дизайн сайта.

Как улучшить дизайн сайта

#design #article
Forwarded from Daily Coding 🔥
​​Моя компания не взлетела, 6 уроков ценою в 4 года жизни и $150 000

О том, как мы работали по 10 часов в сутки без выходных, получили инвестиции, прошли во ФРИИ, набрали более ста тысяч пользователей в США, нас хотел купить Sports Illustrated, но в итоге мы закрыли компанию.

Читать подробности
​​Slidebars — это JQuery фреймворк позволяющий очень быстро подобрать необходимые стили для мобильного меню без определённой привязки к источнику. Slidebars может редактировать и обрабатывать все основные размеры мобильного меню сайта.

Демо | GitHub

#js #sidebar
​​Несколько красивых эффектов подчеркивания при наведении на ссылки

CodePen

#css #animation
​​dlocator — библиотека позволяет реализовать паттерн service locator но с модулями и зависимостями. Больше похоже на контейнер зависимостей.

Как использовать:
1. Сделать модуль
2. Каждый модуль может реализовывать сервисы
3. Каждый модуль может использовать другие сервисы

Все это удобно в тех случаях, когда у вас большое приложение с тонкими связями между модулями.

npm | GitHub

#js #nodejs
Функции в JavaScript никак не привязаны к своему контексту this, с одной стороны, здорово – это позволяет быть максимально гибкими, одалживать методы и так далее.

Но с другой стороны — в некоторых случаях контекст может быть потерян. То есть мы вроде как вызываем метод объекта, а на самом деле он получает this = undefined.

Такая ситуация является типичной для начинающих разработчиков, но бывает и у «зубров» тоже.

Привязка контекста и карринг

#js #article
​​Поддержка PWA на Windows

Хотя поддержка Progressive Web Apps в основном реализована на мобильных платформах, Google не забывает и о десктопе. В десктопном Chrome 67 появилась кнопка установки PWA, а уже Chrome 70 привнес несколько улучшений для пользователей Windows.

Теперь Chrome показывает поп-ап «Install app?» для PWA (после того, как вы какое-то время взаимодействовали с ними). Если вы установите PWA, браузер создаст ярлык для PWA в меню «Пуск». По аналогии с мобильным опытом, интерфейс браузера будет скрыт в открытом PWA.

Google обещает, что выкатит эту функциональность для Mac и Linux в 72 версии.

Мы уже писали про PWA, если вы еще не знаете что это, то советую почитать.
​​WhatRuns — это расширение для браузера, которое бесплатно разведает для вас все о внутренностях любого сайта.

Нажмите на иконку и получите список инструментов, которые используются на странице, аккуратно рассортированных по категориям — от плагинов и виджетов до аналитики и CMS. Можно даже установить постоянный надзор, настроив почтовые уведомления с обновлениями списка.

whatruns.com

#extensions
Grid макеты имеют основополагающее значение для дизайна веб-сайтов, а модуль CSS Grid — это самый мощный и простой инструмент для его создания.

Автор считает, что всем фронтенд разработчикам придется изучать эту технологию в недалеком будущем. В этой статье он быстренько расскажет вам об основах CSS Grid.

Учим CSS Grid за 5 минут

#css #grid #article
​​Highcharts — весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту.

Одно из самых больших преимуществ применения Highcharts – совместимость со старыми браузерами, такими как IE 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Демо | GitHub

#js #charts
Если вы занимаетесь изучением JavaScript, то вы, наверняка, сталкивались с понятием функция высшего порядка. Может показаться, что это что-то очень сложное, но, на самом деле, это не так.

Материал предназначен для начинающих, он направлен на объяснение концепции функций высшего порядка, и на демонстрацию того, как пользоваться ими в JavaScript.

Функции высшего порядка в JavaScript

#js #article
​​InlineTweet.js — благодаря этой библиотеке, вы сможете добавить кнопку Tweet к любому тексту на веб-странице.

Просто добавьте span с нужными атрибутами и InlineTweet автоматически добавит выбранный текст в ссылку. При нажатии по тексту, он сгенерирует твит, вместе с хэштегами и URL.

Демо | GitHub

#js
Модуль CSS Grid — это фантастический инструмент для создания макетов веб-сайтов. Он позволяет вам экспериментировать с макетами быстрее, чем любой другой инструмент, которые я пробовал.

В этой статье я научу вас, как это сделать.

Как быстро спроектировать сайт с помощью CSS Grid

#css #grid #article
​​BasicScroll — это библиотека добавляет на страницу красивую параллакс анимацию при скролле. Вы можете задавать параметры для анимации в CSS или использовать JS для еще лучшей анимации.

Плавная анимация отлично работает на мобильных устройствах и ПК.

Демо | GitHub

#js #scroll #parallax
В этой статье вы найдете несколько удобных команд для работы с npm  — менеджером пакетов, входящим в состав Node.js. Из всего множества существующих мы выбрали те, которые могут быть наиболее полезны при ежедневном использовании.

npm: полезные сокращения и трюки

#js #npm #article