Frontend разработчик
11.7K subscribers
1.75K photos
489 videos
44 files
2.7K links
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.

По всем вопросам @evgenycarter

РКН clck.ru/3KoFrk
加入频道
CSS Triggers - подробная информация обо всех CSS-свойствах: что они делают, как влияют на рендеринг страницы и тому подобное

https://csstriggers.com/
Переписываем тестовое задание для junior frontend на TypeScript и react-hooks

https://bookflow.ru/perepisyvaem-testovoe-zadanie-dlya-junior-frontend-na-typescript-i-react-hooks/
Основные принципы дизайна для не дизайнеров

https://www.freecodecamp.org/news/fundamental-design-principles-for-non-designers-ad34c30caa7/
Меняем цвет шрифта с помощью css в зависимости от фона

https://bookflow.ru/menyaem-tsvet-shrifta-s-pomoshhyu-css-v-zavisimosti-ot-fona/
Понимаем каррирование в JavaScript

https://bookflow.ru/ponimaem-karrirovanie-v-javascript/
7 полезных уловок с rest параметрами и spread операторами на JavaScript объектах

https://bookflow.ru/7-poleznyh-ulovok-s-rest-parametrami-i-spread-operatorami-na-javascript-obektah/
Умная анимация с кастомными Css-свойствами

https://bookflow.ru/umnaya-animatsiya-s-kastomnymi-css-svojstvami/
PixiJS

Эту библиотеку используют в качестве игрового движка, но на самом деле у нее более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Поэтому рекомендую веб-разработчикам присмотреться к Pixi.

Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas. Но первый работает заметно быстрее, особенно когда нужно одновременно анимировать сотни и даже тысячи объектов. Скорость достигается за счет того, что WebGL — инструмент низкоуровневый. А значит без дополнительных фреймворков кодить для него трудоемко: нужно прописывать каждую мелочь в управлении текстурами и шейдерами. И здесь на сцену выходит PixiJS, который берет это на себя.

Сайт https://www.pixijs.com/

Исходники на Github https://github.com/pixijs/pixi.js
CSS библиотека с набором красивых переключателей

https://github.com/JNKKKK/MoreToggles.css
5 вопросов по JavaScript на которые вы должны знать ответ

https://bookflow.ru/5-voprosov-po-javascript-na-kotorye-vy-dolzhny-znat-otvet/
Обработка миллионов строк данных потоками на Node.js
Приходилось ли вам обрабатывать с помощью Node.js одновременно миллионы строк базы данных и выводить всё это на веб-страницу?
Это непросто, но у нас есть готовое решение.

https://dev.to/_patrickgod/fetching-millions-of-rows-with-streams-in-node-js-487e
КАК ИСПРАВИТЬ ПРОБЛЕМЫ CSS РАЗМЕТКИ?

https://www.cat-in-web.ru/css-issues/
Режимы наложения + гриды

https://bookflow.ru/rezhimy-nalozheniya-gridy/
Эффект масштабирования фонового изображения с помощью CSS Clip-path

https://tympanus.net/codrops/2020/03/11/background-scale-hover-effect-with-css-clip-path/
Как съесть слона: способы детализации большого текста

https://bookflow.ru/kak-sest-slona-sposoby-detalizatsii-bolshogo-teksta/
Полезные инструменты для HTML-верстки

https://bookflow.ru/poleznye-instrumenty-dlya-html-verstki/
CSS: полное руководство по функции calc()

https://bookflow.ru/css-polnoe-rukovodstvo-po-funktsii-calc/
Как создать автокомплит на чистом HTML

https://bookflow.ru/how-to-create-an-autocomplete-input-with-only-html/
Пример работы с Mirage JS — библиотекой для моков API. С ее помощью можно удобно тестировать и прототипировать приложения, не полагаясь на бекенд. Примеры на Vue.js.

https://www.smashingmagazine.com/2020/02/api-mocking-mirage-vue-javascript/
👍1