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
加入频道
This media is not supported in your browser
VIEW IN TELEGRAM
Генератор паролей, реализованный с помощью HTML | CSS | JS

https://codepen.io/dev_loop/pen/vYYxvbz
👍12
Задача

Подумайте, что будет выведено в консоль после выполнения программы. PS (открыли комменты)

Ответ
В кризис выживет только IT-сфера - успей залететь.

Frontend 53XApps – курс с оплачиваемой стажировкой

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

Курс Dev House и 53x Apps даст вам:
🔸Код-ревью после каждого урока;
🔸Групповое наставничество - не более 30 учеников на одного преподавателя;
🔸Идеологию и принципы работы фреймворков, научит понимать и работать с фреймворком Vue.js (или любым другим);
🔸Интерактивные вебинары и записи занятий;
🔸Качественное обучение востребованной профессии;
🔸Актуальная программа;
🔸Поддержка во время обучения;
🔸Доступ к сообществу учеников и специалистов.

А лучшие студенты попадут на оплачиваемую стажировку в компанию 53x Apps.))

Курс пройдет онлайн с 1 апреля по 31 августа.
Формат — прямые трансляции, домашние задания, ланч тайм с приглашенными экспертами, сообщество учеников в Telegram, постоянные код-ревью с преподавателем.

Всего 30 мест в группе, успей записаться на новый поток
👍3😁1
JavaScript Records и Tuples - записи и кортежи - новый неизменяемые типы в JavaScript.

https://fjolt.com/article/javascript-records-and-tuples
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Pixi.js - 2D фреймворк с поддержкой WebGL

Pixi js позволяет отображать, анимировать и управлять интерактивной графикой, легко создавать игры и приложения с использованием JavaScript и других технологий HTML5.

Особенности / преимущества:
✔️Кроссплатформенность
✔️Удобный API
✔️Использует WebGL и Canvas
✔️Удобная документация
✔️Можно загрузить собственные спрайт-листы, графику, шрифты
✔️Поддержка Multi-Touch


Сайт: https://www.pixijs.com/
GitHub: https://github.com/pixijs/pixijs
👍3👎1
AnimXYZ

Настраиваемая и производительная CSS-анимация с использованием CSS-переменных
JavaScript по стандарту ES6+

#1: что это такое, с чего начать, как внедрять и запускать
#2: способы объявления переменных и констант в стандарте ES6+
#3: примитивные типы number, string, Infinity, NaN, boolean, null, undefined, Symbol
#4: приведение типов, оператор присваивания, функции alert, prompt, confirm
#5: арифметические операции: +, -, *, /, **, %, ++, --
#6: условные операторы if и switch, сравнение строк, строгое сравнение
#7: операторы циклов for, while, do while, операторы break и continue
#8: объявление функций по Function Declaration, аргументы по умолчанию
#9: функции по Function Expression, анонимные функции, callback-функции
#10: анонимные и стрелочные функции, функциональное выражение
#11: объекты, цикл for in
#12: методы объектов, ключевое слово this
#13: клонирование объектов, функции конструкторы
#14: массивы (array), методы push, pop, shift, unshift, многомерные массивы
#15: методы массивов: splice, slice, indexOf, find, filter, forEach, sort, split, join
#16: числовые методы toString, floor, ceil, round, random, parseInt и другие
#17: методы строк - length, toLowerCase, indexOf, includes, startsWith, slice, substring#18: коллекции Map и Set
#19: деструктурирующее присваивание
#20: рекурсивные функции, остаточные аргументы, оператор расширения
#21: замыкания, лексическое окружение, вложенные функции
#22: свойства name, length и методы call, apply, bind функций
#23: создание функций (new Function), функции setTimeout, setInterval и clearInterval
👍73👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный tabbar, сделанный при помощи SCSS

https://codepen.io/milanraring/pen/qBEPzKB
👍7
Что такое и зачем нужны алгоритмы?🤔

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

Прочитав статью, вы узнате:
1. Что такое алгоритмы и зачем они нужны;
2. Насколько востребованы навыки работы с алгоритмами;
3. Какие задачи решают с помощью алгоритмов.

Переходите по ссылке и осваивайте навык работы с алгоритмами🚀
🔥2👍1
Создание игры на Three.js

Совсем недавно единственным способом создания и развертывания игр был выбор игрового движка, такого как Unity или Unreal, изучение языка, а затем упаковка игры и развертывание ее на выбранной платформе.

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

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

https://blog.logrocket.com/creating-game-three-js/
😁2👍1
Новый формат получения IT специальности - Буткемп. Что это такое?

Буткемп — методика, которую использовали в лагерях для подготовки солдат. Чтобы стать полноценным бойцом, в обычных условиях новобранцу нужно 3-4 года. В условиях Bootcamp такого результата достигали за 4 месяца. Эффективность методики обоснована тем, что на период кемпа человек полностью погружается в процесс обучения и быстрей воспринимает информацию. Сейчас этот метод обучения активно используют в Гарварде, IT-компаниях, бизнес-проектах и образовательных программах.

Для обучения IT специальностям (прежде всего программирование) формат начали использовать в 2011 году в США. Он быстро доказал свою эффективность и стал популярным. К примеру, за 2020 год IT буткемпы выпустили 24975 американцев. Для стран бывшего СССР, это новый формат.

В 2018 году в России открылся первый - Эльбрус Буткемп. С тех пор его выпускниками стали 752 человека. 93% из них нашло работу в течение 3 месяцев после выпуска. 

Буткемп работает как оффлайн (Москва и Санкт-Петербург), так и онлайн.

Подробнее о формате Буткемп можно узнать на мероприятии в ближайший вторник
💩6👍5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Intro.js - JS библиотека для создания пошагового руководства пользователя для проекта

Intro.Js позволяет создать презентацию, которая с помощью подсказок шаг за шагом отобразит существующие характеристики продукта, или научит пользоваться тем, или иным функционалом на сайте.

Особенности / преимущества:
✔️Открытый исходный код
✔️Удобный API
✔️Легкая библиотека размером около 15 КБ
✔️Широкие возможности кастомизации
✔️Легко интегрировать в проект
✔️Кроссплатформенность

Сайт: https://introjs.com/
GitHub: https://github.com/usablica/intro.js
👍2
NoJS — Делаем калькулятор на чистом HTML and CSS. Без Javascript!

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

Demo https://quarknerd.github.io/noJS/calc.html
👍8💩2
This media is not supported in your browser
VIEW IN TELEGRAM
Jest - фреймворк для тестирования в JavaScript

Фреймворк разработан для проверки правильности работы любого JavaScript кода.

Особенности:
👉 Не требует дополнительных настроек
👉 Тесты выполняются параллельно
👉 Простая установка
👉 Работает с проектами, использующими Babel, TypeScript, Node, React, Angular, Vue и т.д
👉 Удобный API

Сайт: https://jestjs.io/
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
The Impossible Lightbulb

Лампочка, которую невозможно включить: открывается дверь и злой мишка снова ее выключает. Анимация реализована с помощью GSAP.

https://codepen.io/jh3y/pen/dyXBKog
👍8🔥3🥰3
Свойство flex-direction

Свойство flex-direction указывает, как гибкие элементы размещаются в flex-контейнере – вертикально или горизонтально. Это свойство также определяет, будут ли эти гибкие элементы отображаться по порядку или в обратном порядке.

Подписывайтесь на канал 👉@coddy_academy

#css
👍1
Хотел что-то изменить в жизни? 
Задумался о новой работе или оплатил обучающие курсы? Обрадовался окончанию пандемии и открытию границ?

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

Я владею стартапом по робототехнике, делаю мобильные игры и пытаюсь сохранить на плаву несколько школ программирования для детей.

Подписывайся на канал!
Пишу хронику выживания, ищу интересных людей и планирую выйти победителем к концу года.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
GitHub Dark Mode Toggle

​Переключатель тёмной темы, реализованный на CSS и JS

https://codepen.io/chintuyadav/pen/yLaaVYa

#codepen #css #js
Почему я ненавижу турбо-страницы от Яндекса

Яндекс запустил свою версию "ускоренных страниц" под названием “Турбо” в далеком 2017 году. Это был эксперимент, но прошло уже 5 лет, и я вижу в этой технологии больше проблем, чем их решения.

Далее делюсь личным опытом взаимодействия с турбо, который может отличаться от мнения остальных пользователей, разработчиков и владельцев интернет ресурсов, чьи страницы ускоряет Яндекс.
👍3