Menja — духовный наследник Fruit Ninja на JavaScript

Предлагаем вашему вниманию игру Menja, которая по сути является альтернативной версией Fruit Ninja, но с более геометрическим дизайном. Здесь вам необходимо разрубать пролетающие блоки.

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

https://codepen.io/MillerTime/details/BexBbE

#gamedev #codepen #javascript

30 seconds of code — полезные сниппеты на любой случай

На сайте 30secondsofcode.org собрана большая коллекция сниппетов JavaScript-кода, которые помогают работать с примитивами, массивами и объектами, а также включает алгоритмы, функции управления DOM и утилиты Node.js.

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

#javascript

​Как профессионально использовать сопоставимые типы TypeScript

Использовали ли вы когда-нибудь сопоставимые типы при работе с TypeScript ? Они позволяют сделать ваш код чище и более читаемым, убрав излишнее дублирование в некоторых частях.

О том, как они работают и как ими правильно пользоваться, узнаете здесь:

https://nuancesprog.ru/p/16399/

#typescript

​Многие смеются над тем, как ведёт себя JavaScript со сложением числе с текстом. Но вы только взгляните на С:

Полезные советы при вёрстке сайта на HTML и CSS

В этом небольшом видео вы узнаете некоторые неочевидные, но важные нюансы, которые помогут улучшить вам качество ваше страницы, повысить скорость её загрузки и сделать разработку немного проще:

https://www.youtube.com/watch?v=41kjGvSPaEw

#видео #html #css

​Как программисту записать свой трек

Наиболее привычным инструментом для программиста является редактор кода. Поэтому и музыку создавать будем там. Для этого нам потребуется Slang — язык программирования звук на основе, созданный с применением JavaScript.

Подробнее о языке, а также инструкция по использованию здесь:

https://github.com/kylestetz/slang

#slang #javascript

Красивые пуши для вашего сайта в стиле MacOS

Нашли для вас реализацию push-уведомлений, сделанных в стиле MacOS. В них можно разместить любую информацию на ваше усмотрение, а то, что они находятся в углу экрана делает их менее раздражающими.

Код тут:

https://codepen.io/jkantner/pen/XWzePgp

#codepen

​Функции высшего порядка в JavaScript – Руководство для начинающих

В JavaScript функции являются основой основ. По сути, программа на JavaScript это набор различных функций, взаимодействующих между собой. И, каким бы страшным не казалось название, функции высшего порядка — это просто такие функции, которые либо принимают другую функцию в качестве аргумента, либо возвращают её.

Подробнее о них:

https://www.freecodecamp.org/news/higher-order-functions-in-javascript/

#javascript #основы

Пишем код в стиле киберпанка

Для этого нам понадобится:

1. VS Code
2. Тема оформления SynthWave '84
3. Всё! Вы великолепны.

Тема SynthWave '84 добавляет ретростилистику и неоновое свечение вашему редактору кода. Как её установить можно посмотреть здесь:

https://github.com/robb0wen/synthwave-vscode

#vscode

Интерактивная шпаргалка по 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 #библиотека