Привет! На связи Кристина, фронтенд-разработчик в отделе рекламных спецпроектов KTS.

Наша команда создает визуально эффектные проекты, цель которых — привлечь внимание пользователей. Мы постоянно экспериментируем с разными технологиями и подходами, и вот, наконец, добрались до 3D-анимаций. Недавно я начала изучать Three.js и хочу поделиться своим опытом.

В сети есть множество статей и уроков по Three.js для начинающих, но большинство из них — это теоретический материал. Я же хочу показать, как создавать 3D-анимации на практике. Эта статья будет первой в цикле о разработке простой игры, в которой нужно строить башню из блоков.

Для успешного прохождения туториала достаточно владеть JavaScript и ООП. Каждый этап сопровождается ссылкой на codepen с комментариями в коде. А в конце вас ждет играбельный codepen-блок: вы можете сразу посмотреть на промежуточный результат, в котором уже реализована базовая игровая механика. В статье же я пошагово разберу, как к этому результату прийти.

В статье описал разработку 13-ти игр на PixiJS. Около 70% текста - это описание механики игр, остальное - реализация на PixiJS. Получилось много текста, т.к. описывать советы для PixiJS интереснее с примером из игр.
Самая последняя игра будет самой сложной и интересной.

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

День только начинался, ничего не предвещало беды, как вдруг в чате с дизайнерами появился вопрос: «Есть ли плагин в фигме, который при наведении на страницу показывает все используемые текстовые стили?..» Гугл такой плагин не нашел, поэтому я вызвалась его написать, предварительно поизучав, как вообще это делается.

В статье рассказываю, как написать плагин, и что это проще, чем звучит на первый взгляд. +1 идея для тех, кому не хватает идей для пет-проектов.

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

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

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

Ну что, поехали!

Привет, Хабр!

Меня зовут Илья, я frontend-разработчик SimbirSoft. Долгое время вопрос изучения алгоритмов был холиварным. Со я временем убедился, что ни одно современное собеседование в крупную компанию не обходится без вопросов про алгоритмы, и в последний год их всё больше.

Даже если ты frontend-разработчик и решаешь прикладные задачи, тебе в любом случае придётся знать алгоритмы хотя бы на базовом уровне. Но статей на русском с объяснением алгоритмов и тем, как их реализовать на JavaScript, крайне мало. Поэтому хочу поделиться некоторыми алгоритмами сортировки и поиска, и немного рассказать про структуры данных. Знание алгоритмов и структур данных поможет вам в оптимизации приложений.

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

Из чего состоит собеседование

• знакомство,
• технические вопросы и/или задание,
• ваши вопросы.

Здравствуйте, меня зовут Дмитрий Карловский и я.. прибыл к вам из недалёкого будущего. Недалёкого, потому что там уже всё и все тормозят. Писец подкрался к нам незаметно: сначала перестали расти мощности компьютеров, потом пропускная способность сетей. А пользователи… они продолжали генерировать контент как не в себя. В итоге, за считанные годы UX интерфейсов деградировал настолько, что ими стало невозможно пользоваться и многие пользователи поспешили перейти на облачный стриминг своих браузеров, которые работают на суперкомпьютерах, принадлежащих корпорациям, которые не дают людям устанавливать на них блокировщики рекламы. Поэтому я пришёл к вам именно сейчас, в этот момент, когда проблема уже заметна, но ещё можно всё исправить, пока не стало слишком поздно.

Фронтенд-разработчики каждый день используют модули. Это может быть функция из локального файла или сторонняя библиотека из node_modules. Сегодня я кратко расскажу об основных модульных системах в JavaScript и некоторых нюансах их использования.

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

Многие, возможно, зададут вопрос: "А зачем книги? Есть же браузер, не?". Безусловно, разработчик должен уметь пользоваться поисковой строкой, уметь искать, и, наверное, самое главное - уметь правильно задавать вопросы, но книги нужны для более глубокого понимания того, с чем вы работаете. Книги позволяют взглянуть на некоторые вещи с "академической" стороны.
Мы можем провести аналогию с образованием в высших учебных заведениях. В любом ВУЗе мы читаем книги, которые были написаны кандидатами технических наук и профессорами, чтобы потом сдать сессию, получить хорошую стипендию и жить дальше до следующей сессии, повышая сложность материала на каждой контрольной точке. Теперь смотрим на сферу и видим, что мы читаем академический материал, после идем на собеседование, удачно его проходим, получаем желанный оффер, а после повышаем свою квалификацию к следующей контрольной точке (новому рабочему месту или новой должности). В принципе, с алгоритмом мы разобрались. Идем дальше.

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

При разработке сайтов, выходящих за рамки условного бутстрапа, рано или поздно возникают вопросы, связанные с производительностью анимаций. Особенно важными они являются в дизайнерских сайтах, вроде тех, что попадают в каталоги Awwwards, FWA, CSS Design Awards и.т.д. При этом часто задача создания анимаций и последующей оптимизации, если она будет нужна, ложится на плечи не очень опытных разработчиков, которые даже не знают с чего начать. Обычно все это выливается в тормозящие сайты, которыми невозможно пользоваться, и последующее негативное отношение ко всему классу таких проектов. В этой статье мы постараемся разобрать, где находится граница приемлемой производительности анимаций, какие узкие места часто встречаются и куда смотреть в инструментах разработчика в первую очередь.

• команда «webpack-dev-server» теперь выглядит как «webpack-serve»
• отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
• полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака

Что такое вебпак?

Всем привет! Меня зовут Артур, я работаю frontend-разработчиком в Exness. Не так давно мы перевели один из наших проектов на веб-компоненты. Расскажу, с какими проблемами пришлось столкнуться, и о том, как многие концепции, к которым мы привыкли при работе с фреймворками, легко перекладываются на веб-компоненты.

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

Типичный рабочий день Рекурсивного Кактуса:

Контуры

Diffuse материала

uniform struct
  { vec4 diffuse
  ;
  } p3d_Material;

out vec4 fragColor;

void main() {
  vec3 diffuseColor = p3d_Material.diffuse.rgb;
  fragColor = vec4(diffuseColor, 1);
}

На Github-e выложен OSINT-инструмент, заточенный (в том числе) для поиска %username по СНГ локации