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
加入频道
12 хитростей JavaScript, которых вы не найдете в большинстве уроков

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

https://bookflow.ru/12-hitrostej-javascript-kotoryh-vy-ne-najdete-v-bolshinstve-urokov/
👍7
Узнайте, как создать, протестировать и развернуть одностраничное приложение с помощью Vue 3 + Vite и Pinia

Созданный в 2014 году, Vue.js, несомненно, является одним из ведущих frontend-фреймворков на данный момент, и с растущим сообществом и расширяющейся экосистемой кажется, что его позиции будут прочными еще долгое время. Я работал с Vue 2 несколько лет назад в нескольких проектах и нашел это восхитительным опытом.

https://labs.pineview.io/learn-how-to-build-test-and-deploy-a-single-page-app-with-vue-3-vite-and-pinia/
👍1
👋 Мы — команда айтишников. В текущих условиях компания не может работать как работала, и мы решили переехать всей командой.

💬 Создали канал для таких же, как мы, — тех, кто хочет уехать. Собираем всё самое полезное про релокацию. Рассказываем, с чем столкнулись сами, ищем лайфхаки и способы похачить систему (например, нашли несколько способов, как жить за границей на рубли).

👨‍💻 А вообще, мы HR-IT-чувачки (то есть без лишней скромности профи в сфере трудоустройства) и сейчас готовим новый проект: будем помогать айтишникам организовать переезд и устроиться на работу в валюте. И ещё сверху грант будем давать💰

👉 Что для этого нужно? Пока что — присоединиться к каналу RelocationDev и следить за новостями😉 Скоро обо всём расскажем — в мельчайших подробностях.
💩15👎4👍2😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Примеры анимации загрузки на чистом CSS

https://codepen.io/jenning/pen/YzNmzaV
👍11
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