Интерактивная шпаргалка по CSS

Очень удобная шпаргалка, в которой собрана не только полезная информация по работе с CSS, но также различные генераторы, например, генератор теней, градиента, бордеров и так далее.

Сохраняйте в закладки:

https://htmlcheatsheet.com/css/

#шпаргалка #css

​Как создать цифровую валюту за 2 недели

Цифровая валюта — это не обязательно биткоин или эфир. Это могут быть и баллы лояльности или, как пример, бонусная валюта. Именно такую валюту с помощью PHP реализовали в компании, где работает автор статьи.

Здесь он рассказал почему решили создать собственное решение, какие были сложности, как система показала себя в деле и как повторить их опыт:

https://tproger.ru/articles/kak-sozdat-cifrovuju-valjutu-za-2-nedeli/

#php

​Разработчики, использующие Ember.js в своих проектах, подвергают их серьёзной угрозе

А всё благодаря обнаруженной случайно уязвимости загрязнения прототипа. На неё наткнулся ИБ-специалист Масато Кинугавой. Он обнаружил её в одном из доменов, принадлежащих Google, а копнув глубже понял, что первопричина кроется в фреймворке Ember.js.

Подробнее о проблеме:

https://www.securitylab.ru/news/534714.php

#javascript #emberjs #безопасность

Она, наверное, сениор

​6 проектов на React.js для начинающих

Если вы только недавно познакомились с React и хотите набить руку, то это видео вам поможет. Здесь автор рассказывает, как сделать 6 различных проектов:

— счётчик;
— модальное окно;
— опросник;
— список пользователей;
— конвертер валют;
— и коллекцию фотографий.

Каждый из проектов может пополнить ваше портфолио и пригодиться вам в будущем. Так что смотрите и учитесь:

https://youtu.be/eS0GL73tkmw

#видео #react #начинающим

​Как попасть в бэкенд-разработку на Java

Само собой вам необходимо владеть Java хотя бы на уровне понимания синтаксиса. Но это далеко не всё, ведь нужно уметь работать с необходимым инструментарием, включая Git, БД и прочее.

Если всё-таки хотите развиваться и работать в этой сфере, то переходите по ссылке и изучайте чек-лист по знаниям, которые вам точно понадобятся:

https://tprg.ru/S9AD

#бэкенд #java

​Создание сайта с 3D-анимацией прокрутки

В этом видео вы пошагово увидите, как создать сайт с потрясающей 3D-анимацией скролла, используя возможности современного HTML, CSS и JavaScript. После этого вы сможете самостоятельно разработать модель движения слайдов в глубину, поработать над кастомной анимацией, плавностью, красиво оформив композицию с помощью CSS, а также поработаете с аудио и видео контентом на странице, следуя советам из видео.

Подробнее:

https://youtu.be/GLbI7BGdQ3o

#видео #фронтенд

Разработчик сделал ремейк знаменитой игры ZUMA, используя только HTML, CSS и TypeScript

Не обошлось, конечно, без небольших хитростей в виде препроцессора SCSS, но при этом игра полностью реализована на фронтенде и даже код доступен.

Посмотрите сами:

https://codepen.io/lintingyou/pen/RwMLqRZ

#codepen #gamedev

​Управление состоянием в React с помощью Easy Peasy

В React многое завязано на управлении состоянием компонентов. Поэтому от того насколько эффективно этот процесс происходит зависит производительность всего проекта.

В этой статье вы узнаете, как использовать Easy Peasy для управления состоянием в React, разберёте основные концепции инструмента, а также преимущества перед другими решениями

https://blog.openreplay.com/easy-peasy-state-management-using-react-easy-peasy/

#фронтенд #react

Bongo Cat Codes

Вы наверняка видели этот забавный мем в виде gif’ок или видео. Автор этого проекта решил реализовать его с помощью HTML и CSS, а вернее препроцессоров Pug и SCSS. Рисунок, разумеется, сделан с помощью SVG, а анимация реализована силами CSS.

Посмотреть код можно тут:

https://codepen.io/carolineartz/pen/VwYwZaP

#codepen #pug #scss

​Лёгкий способ создания и анимирования векторной графики

Библиотека Snap.svg упрощает работу с SVG, позволяя применять новейшие функции SVG, такие как шаблоны, полные градиенты, группы и многое другое. При этом инструмент позволяет не только создавать собственные SVG-изображения, но и редактировать и анимировать файлы, созданные в других инструментах, например, в Adobe Illustrator, Inkscape или Sketch.

Подробнее о Snap.svg можно узнать тут:

http://snapsvg.io/

#javascript #svg #библиотека

И всё по новой

​Как работают глаза и что надо учитывать, создавая тёмную тему приложения

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

Как сделать всё грамотно, узнаете тут:

https://habr.com/ru/company/ispmanager/blog/694412/

#фронтенд

​Создаём собственную версию Twitter с React и TypeScript

В этом руководстве вы сможете познакомиться с различными технологиями, например MongoDB и PostgreSQL, TypeScript, Jest и другими.

К концу этого руководства у вас появится ещё одно приложение для портфолио, а также понимание, как работает веб-сайт со всех сторон:

https://dev.to/andrewbaisden/the-complete-modern-react-developer-2022-3257

#бэкенд #фронтенд

​Как думаете, ваш сайт достаточно быстрый, чтоб пользователь дождался его загрузки?

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

В этой статье вы узнаете о 10 советах, которые помогут вам повысить производительность страницы за счёт HTML и CSS:

https://levelup.gitconnected.com/html-css-features-tips-for-a-10x-fast-page-loading-speed-5fb6c2d88df8

#seo #css #html

Пианино на JavaScript для Chrome

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

Сделать своё пианино можно тут:

https://thecode.media/piano-js/

#javascript

​Пишем игру на JS/TS и развиваем навык работы с кодом

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

Подробнее:

https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #петпроект

​Адаптивный layout — как переверстать весь проект, не перевёрстывая его

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

Об этом способе можно подробнее узнать здесь на примере почты Mail.ru:

https://habr.com/ru/company/vk/blog/579798/

#фронтенд

​Разработка пользовательских хуков для React

С хуками разработка на React стала проще, но при этом разобраться непосредственно в работе этих хуков может быть достаточно тяжело. Эта статья поможет вам разобраться в достаточной важной и актуальной теме максимально доступным и понятным языком:

https://tproger.ru/articles/razrabotka-polzovatelskih-hukov-dlja-react/

#react #фронтенд