Webchic - frontend, backend, ci/cd
995 subscribers
273 photos
22 videos
1.11K links
Канал о Web разработке, для фронтов и full stack.

По рекламе @adtgassetsbot
Admin: @Aleksei

🐍Python - @python_lounge
👨‍💻Другие языки - @cccoding
🥷Хакер/ИТ безопасность - @it_ha
Download Telegram
​​Использование типов TypeScript вместо Swagger

Сегодня я расскажу о том, как мы можем с помощью типов написать простое расширение для ExpressJS.

Статья
​​Проверка наличия свойства в объекте JS

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

Чтобы узнать, определен ли в объекте некоторый ключ, нужно использовать оператор in.

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

Он возвращает true или false, в зависимости от того, удалось ли найти требуемое поле.
​​Как реализовать sharing в социальных сетях․

Помимо разработки самого лендинга с конфигуратором нужно было реализовать возможность шаринга созданного украшения с сопроводительным текстом в социальные сети. Для этого требовалось создать приложения в Facebook и VKontakte и настроить необходимые разрешения, а в коде разобрать и подключить API этих соцсетей и запустить функционал шаринга. Также нужно было собрать email поделившихся пользователей для проведения розыгрыша. Мы решили все это сделать на JavaScript.

[ Статья ]
This media is not supported in your browser
VIEW IN TELEGRAM
Думаешь стартануть бизнес?

И так уже третий год?

Причины две — лень и страх перед неизвестностью.

Вторую
уже решил канал Деньги есть везде.

В ленте ежедневно постят готовые бизнес-планы с расчетом доходов и необходимых вложений:

• бизнес на продаже ж/д билетов;
• бизнес на ультрафиолетовой печати;
• бизнес по доставке обедов.

Прости, но теперь у тебя только одна причина.

Подпишись и помни, что Деньги есть везде.
​​Не очень известные возможности Chrome Devtools

Chrome Devtools, безусловно, мощнейший инструмент для разработки, дебага, профайлинга и тестирования в браузере. С каждым релизом в него завозят всё новые и новые фичи.
В этой статье собраны самые малоизвестные возможности
​​UI-компоненты для React: топ-10 библиотек и фреймворков

Пользовательский интерфейс — это «вау!»-фактор любого приложения. Что касается React-приложений, UI может быть довольно сложным. В этой статье мы собрали лучшие библиотеки и фреймворки, содержащие компоненты UI для React-приложений. Они точно пригодятся вам при создании пользовательских интерфейсов.

Читать...
​​3 кастомных хука React которые могут быть вам полезны(часть 2).

useToggle: с помощью этого хука можно переключаться между двумя состояниями: TRUE и FALSE. Такой подход уменьшает количество кода с «ручной» логику

useTitle: хук используется для установки заголовка страницы.

usePrevious: чтобы получить предыдущее состояние, можно юзать этот хук. Возможно вам даже не потребуется писать кастомную логику и что-то допиливать.
​​☕ Angular must die: фреймворк обходится компаниям в миллиарды долларов

Angular усложняет разработку UI и увеличивает расходы компаний. Пора от него избавиться?

Статья
​​Реализация элементарного переключателя темной/светлой темы на ReactJS с помощю Class-Components

Ссылка на код
​​6 полезных инструментов для фронта с уклоном в CSS

Spirit - браузерный инструмент анимации, помогающий дизайнерам и разработчикам создавать свои анимации и управлять ими в режиме реального времени.

Meanderer - Маленькая библиотека JavaScript для создания отзывчивых траекторий анимации.

Transition.css - Переходы на CSS.

CSS Scan - Hаведите курсор на любой элемент и мгновенно получите его CSS, цвета, ресурсы, анимацию, шрифт и размеры.

Parsel - Парсер CSS-селекторов в два килобайта.

Glassmorphism - Эффект основан на размытии фона с прозрачностью и для демонстрации глубины и контекста интерфейса использует уложенные слои.
​​Менять профессию после 30: больно или нет?

Однажды в одном из рабочих чатов мы обсуждали, кто и как попал в профессию. Выяснилось, что примерно половина из нас работает «не по диплому». Коллеги рассказывали свои истории, которые откликнулись нашему рекрутеру, которая сама, к слову, по образованию физик-математик. В итоге родился этот пост-письмо про то, страшно ли менять профессию «на ходу».

Читать...
​​Вместо background лучше использовать background-color , если требуется поменять только цвет фона. В целом разницы никакой но на code review могут придираться

🔴 Не так
.example {
background: tomato;
}

✅ Вот так
.example {
background-color: tomato;
}
​​console.trace();

Выводит трассировку стека в консоль.

function foo() {
function bar() {
console.trace();
}
bar();
}
foo();

В консоли отобразится следующая трассировка:

bar
foo
<anonymous>
​​HTML <base> Тэг

<base> тег определяет базовый URL для всех относительных URL - адресов в документе.
В документе может быть только один единственный <base> элемент, и он должен находиться внутри элемента <head>.

Пример:
<head>
 <base href="https://www.some-website.com/">
</head>

<body>
<img src="images/stickman.gif">
<a href="article/about-us">About us</a>
</body>
​​Проверка наличия свойства в объекте JS

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

Чтобы узнать, определен ли в объекте некоторый ключ, нужно использовать оператор in.

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

Он возвращает true или false, в зависимости от того, удалось ли найти требуемое поле.
​​UI-компоненты для React: топ-10 библиотек и фреймворков

Пользовательский интерфейс — это «вау!»-фактор любого приложения. Что касается React-приложений, UI может быть довольно сложным. В этой статье мы собрали лучшие библиотеки и фреймворки, содержащие компоненты UI для React-приложений. Они точно пригодятся вам при создании пользовательских интерфейсов.

Читать...
​​☕ Angular must die: фреймворк обходится компаниям в миллиарды долларов

Angular усложняет разработку UI и увеличивает расходы компаний. Пора от него избавиться?

Статья
​​Самопаркующаяся тачка в 500 строк кода
С помощью генетического алгоритма натренируем тачку парковаться самостоятельно.

Статья
​​DOM, который построил Chrome. Или не построил? Или не Chrome? Или не DOM?

Обычный, теневой, виртуальный, инкрементальный… Как получилось, что простой программный интерфейс доступа к элементам веб-страниц обзавелся таким количеством «родственников»? Чем современные фреймворки не устраивает стандартная объектная модель документа или просто DOM? Что и как на самом деле отрисовывает браузер в процессе рендера веб-страницы?

Статья
​​☕ ТОП-10 актуальных книг по JavaScript на русском языке: от новичка до профессионала

Когда-то этот язык был нужен для добавления интерактивности веб-страницам, а теперь на нем пишут мощные приложения и активно используют его на стороне сервера. Читайте подборку актуальной литературы по JavaScript на русском языке.

Статья