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
加入频道
Npkill, утилита для поиска и удаления неиспользуемых node_modules

https://npkill.js.org/
50 бесплатных ресурсов для создания веб-интерфейсов

https://dev.to/davidepacilio/50-free-tools-and-resources-to-create-awesome-user-interfaces-1c1b
Верстать быстро и красиво: 15 популярных CSS фреймворков

https://www.mockplus.com/blog/post/css-framework
This media is not supported in your browser
VIEW IN TELEGRAM
Реализация кнопки "TOP" (прокрутка вверх) на чистом CSS

В примере показано, как с помощью position: sticky, scroll-behavior: smooth
и нативного поведения якорей реализовать кнопку, возвращающую в начало страницы без использования JS

https://moderncss.dev/pure-css-smooth-scroll-back-to-top/
CSS Scroll Shadows
Генератор теней для индикации доступной прокрутки 

https://css-scroll-shadows.now.sh/
This media is not supported in your browser
VIEW IN TELEGRAM
Форма кредитной карты

Форма кредитной карты с гладкими и приятными микровзаимодействиями. Включает форматирование чисел, проверку и автоматическое определение типа карты. Она построена на Vue.js, а также полностью адаптивная.

https://github.com/muhammederdem/vue-interactive-paycard

https://codepen.io/JavaScriptJunkie/pen/YzzNGeR
This media is not supported in your browser
VIEW IN TELEGRAM
Навигация в стиле Stripe

Уникальность этой навигации заключается в том, что контейнер popover трансформируется под содержимое. В этом переходе есть элегантность по сравнению с традиционным поведением открытия и закрытия нового поповера.

https://lokeshdhakar.com/dev-201-stripe.coms-main-navigation/
Подборка из 25 готовых кнопок для проектов с эффектами на hover и active на чистом css
Все кнопки реализованы на codepen

https://dev.to/webdeasy/top-20-css-buttons-animations-f41
Лучшие способы организовать свойства CSS

https://medium.com/swlh/better-ways-to-organise-css-properties-9a066e7ded62
​Интересное использование псевдоэлементов :before и :after

https://zendev.com/2019/03/28/cool-uses-of-before-after-pseudoelements.html
Современное тестирование React-приложений

Серия статей, посвященная лучшим практикам тестирования в React:

1️⃣ Modern React testing, part 1: best practices
https://blog.sapegin.me/all/react-testing-1-best-practices/

2️⃣ Modern React testing, part 2: Jest and Enzyme
https://blog.sapegin.me/all/react-testing-2-jest-and-enzyme/

3️⃣ Modern React testing, part 3: Jest and React Testing Library
https://blog.sapegin.me/all/react-testing-3-jest-and-react-testing-library/
9 проектов, сделав которые ты станешь FrontEnd мастером

Подборка из 9 различных проектов, каждый с отдельной темой и своей фреймворком или библиотекой JavaScript в качестве технологического стека, который вы можете создать и добавить в свое портфолио.

https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h
Шпаргалка по гридам - https://yoksel.github.io/grid-cheatsheet/