Как стать автором
Обновить
0
0

Пользователь

Отправить сообщение

Создание плагина для Фигмы: дизайнеры захотели — разработчик подсуетился

Уровень сложностиСредний
Время на прочтение17 мин
Количество просмотров3.5K

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

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

Читать далее
Всего голосов 12: ↑12 и ↓0+12
Комментарии0

Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика

Время на прочтение4 мин
Количество просмотров29K

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

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

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

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

Читать далее
Всего голосов 14: ↑13 и ↓1+14
Комментарии19

9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров62K

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

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

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

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

Читать далее
Всего голосов 8: ↑5 и ↓3+3
Комментарии19

Как проходит собеседование Junior фронтенд-разработчика

Время на прочтение8 мин
Количество просмотров78K
Меня зовут Максим Чеченёв, я фронтенд-разработчик уже почти девять лет. Работаю в компании MessageBird в Амстердаме и наставником на курсе «Веб-разработчик» в Яндекс.Практикуме. Ещё я веду канал в телеграме «Сеньор Разработчик».

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


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


Собеседование фронтенд-разработчика на начальных этапах мало чем отличается от любого другого.

Обычно собеседование можно разбить на три части:

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

Читать дальше →
Всего голосов 20: ↑18 и ↓2+24
Комментарии34

Автоматическая виртуализация рендеринга произвольной вёрстки

Время на прочтение29 мин
Количество просмотров23K

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

Лонгрид
Всего голосов 20: ↑16 и ↓4+15
Комментарии57

Модули в JavaScript

Время на прочтение9 мин
Количество просмотров59K


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

Читать дальше →
Всего голосов 52: ↑52 и ↓0+52
Комментарии11

Библиотека Frontend-разработчика, часть 1: Основы

Время на прочтение5 мин
Количество просмотров32K

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

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

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

Ну, удиви
Всего голосов 4: ↑2 и ↓2+2
Комментарии12

Производительность анимаций на сайтах

Время на прочтение14 мин
Количество просмотров21K

image


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

Всего голосов 14: ↑14 и ↓0+14
Комментарии3

Настройка Webpack 5 с нуля

Время на прочтение10 мин
Количество просмотров209K


Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

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

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


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

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

Вебпак также умеет делать много других вещей, но данная статья посвящена основам его настройки и использования.
Читать дальше →
Всего голосов 15: ↑15 и ↓0+15
Комментарии12

Веб-компоненты в реальном проекте

Время на прочтение16 мин
Количество просмотров9.6K


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


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

Читать дальше →
Всего голосов 11: ↑11 и ↓0+11
Комментарии7

Планка найма для инженеров: что это за зверь?

Время на прочтение19 мин
Количество просмотров28K
Последние пять лет Рекурсивный Кактус трудился фулстек-разработчиком в топовой технологической компании, но сейчас решил сменить работу.

За последние полгода Рекурсивный Кактус (так он представился при регистрации на нашем сайте) готовился к будущим собеседованиям, выделяя каждую неделю минимум 20-30 часов на упражнения LeetCode, учебники по алгоритмам и, конечно, практику интервью на нашей платформе для оценки своего прогресса.

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


Время Занятие
6:30 – 7:00 Подъём
7:00 – 7:30 Медитация
7:30 – 9:30 Решение задач по алгоритмам
9:30 – 10:00 Путь на работу
10:00 – 18:30 Работа
18:30 – 19:00 Путь с работы
19:00 – 19:30 Общение с женой
19:30 – 20:00 Медитация
20:00 – 22:00 Решение задач по алгоритмам
Всего голосов 30: ↑28 и ↓2+38
Комментарии105

Шейдеры 3D-игр для начинающих

Время на прочтение19 мин
Количество просмотров24K
image

Хотите научиться добавлять в свою 3D-игру текстуры, освещение, тени, карты нормалей, светящиеся объекты, ambient occlusion и другие эффекты? Отлично! В этой статье представлен набор техник затенения, способных поднять уровень графики вашей игры на новые высоты. Я объясняю каждую технику таким образом, чтобы вы могли применить/портировать эту информацию в любом стеке инструментов, будь то Godot, Unity или что-то иное.

В качестве «клея» между шейдерами я решил использовать великолепный игровой движок Panda3D и OpenGL Shading Language (GLSL). Если вы пользуетесь таким же стеком, то получите дополнительное преимущество — узнаете, как использовать техники затенения конкретно в Panda3D и OpenGL.
Читать дальше →
Всего голосов 46: ↑46 и ↓0+46
Комментарии6

Шейдеры 3D-игр для начинающих: эффекты

Время на прочтение18 мин
Количество просмотров14K
[Первая часть]

Разобравшись с основами, в этой части статьи мы реализуем такие эффекты, как контуры объектов, bloom, SSAO, размытие, глубина резкости, пикселизация и другие.

Контуры



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

Diffuse материала


Шейдеру контура необходима входящая текстура для распознавания и раскраски краёв. Кандидатами стать такой входящей текстурой могут быть диффузный цвет из материалов, цвета из диффузных текстур, нормали вершин или даже цвета из карт нормалей.

uniform struct
  { vec4 diffuse
  ;
  } p3d_Material;

out vec4 fragColor;

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

Здесь показан небольшой фрагментный шейдер, который рендерит диффузный цвет материала геометрии в текстуру буфера кадров. Эта текстура диффузного цвета из буфера кадров будет входящей текстурой для шейдера контуров.
Читать дальше →
Всего голосов 43: ↑41 и ↓2+39
Комментарии5

Создание браузерных 3d-игр с нуля на чистом html, css и js. Часть 2/2

Время на прочтение43 мин
Количество просмотров13K
В данной статье мы продолжим создавать трехмерную браузерную игру лабиринт на чистом html, css и javascript. В предыдущей части мы сделали простой 3-мерный мир, реализовали движение, управление, столкновения игрока со статическими объектами. В этой части мы будем добавлять гравитацию, статическое солнечное освещение (без теней), загружать звуки и делать меню. Увы, как и в первой части, демок здесь не будет.
Читать дальше →
Всего голосов 13: ↑13 и ↓0+13
Комментарии4

Создание браузерных 3d-игр с нуля на чистом html, css и js. Часть 1/2

Время на прочтение27 мин
Количество просмотров89K
Современная вычислительная техника позволяет создавать классные компьютерные игры! И сейчас, достаточно популярны игры с 3d-графикой, так как, играя в них, ты окунаешься в вымышленный мир и теряешь всякую связь с реальностью. Развитие интернета и браузерных технологий сделало возможным запускать головоломки и стрелялки в любимом Хроме, Мозилле или еще в чем-то там (про Эксплорер помолчим) в онлайн-режиме, без загрузки. Так вот, здесь я расскажу о том, как создать простую трехмерную браузерную игру.

Выбор жанра, сюжета и стилистики игры является достаточно интересной задачей, и от решения этих вопросов может зависеть успех игры. Кроме этого, свои нюансы вносит и выбор технологии, на основе которой будет создаваться продукт. Моя цель – показать элементарные основы этого увлекательного процесса, поэтому я буду делать 3-мерный лабиринт с незамысловатым оформлением. Более того, я это сделаю на чистом коде без использования библиотек и движков, типа three.js (хотя большие проекты лучше делать все-таки на нем), чтобы показать, как можно создать движок для своих нужд. Полностью самописная игра может быть оригинальной, а потому интересной. В общем, оба подхода имеют свои плюсы и минусы.
Читать дальше →
Всего голосов 14: ↑14 и ↓0+14
Комментарии13

Сайты для обучения программированию: Топ 100

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

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

Итак, сайты для обучения программированию онлайн, ТОП 100:
Читать дальше →
Всего голосов 41: ↑37 и ↓4+46
Комментарии61

Snoop Project невероятный инструмент интернет разведки, которого пользователи рунета ждали так долго — доступен

Время на прочтение5 мин
Количество просмотров81K
image

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


【Статья обновлена】в связи с развитием функционала Snoop Project.
Если вам до боли знаком такой софт, как namechk или spiderfoot, то «Snoop Project» вас явно порадует, он даёт «им» фору вместе взятым и это не желтый заголовок «Статья вечерняя» — это реальная «forensic-работа» по цифровым следам в киберпространстве…
Читать дальше →
Всего голосов 42: ↑28 и ↓14+23
Комментарии67

RTL Styling 101 — подробное руководство по RTL-стилизации в CSS

Время на прочтение15 мин
Количество просмотров18K


Перевод «RTL Styling 101 — An extensive guide on how to style for RTL in CSS» Ахмада Шадида.

Более 292 миллионов людей во всём мире говорят на арабском, как на родном языке. К ним отношусь и я, поэтому иногда разрабатываю сайты, которые должны поддерживать оба направления написания текста: слева направо (LTR – Left To Right) и справа налево (Right To Left).
Всего голосов 18: ↑18 и ↓0+18
Комментарии2

Autofill: чего не знают веб-разработчики, хотя должны знать

Время на прочтение14 мин
Количество просмотров78K


Многим известно, что в мобильной версии Safari можно отсканировать свою банковскую карту. Но многие ли разработчики умеют создавать формы, поддерживающие эту возможность?

Готов поспорить, что немногие.

Дело осложняет полное отсутствие документации от Apple по работе этой функции. Но тут есть один момент. Функция сканирования банковских карт является подмножеством автозаполнения — браузерного функционала, давно игнорируемого веб-разработчиками. Понятно, почему они не уделяли ему должного внимания: когда регулярно заполняешь форму тестовыми данными, автозаполнение обычно мешает. Но для наших пользователей это важная функция. В Google выяснили, что при использовании автозаполнения пользователи на 30% быстрее заполняют формы. Так что давайте изучим работу автозаполнения, разберёмся, как создавать формы, поддерживающие кросс-браузерное автозаполнение, и воспользуемся преимуществами новых возможностей наподобие сканирования банковских карт.
Читать дальше →
Всего голосов 40: ↑39 и ↓1+38
Комментарии12

Информация

В рейтинге
Не участвует
Откуда
Yerevan, Yerevan, Армения
Дата рождения
Зарегистрирован
Активность

Специализация

Frontend Developer