Наверняка многие, желая создать интернет-магазин, сталкивались с вопросами. Выгодно ли? Насколько трудно создать? Сколько стоит? Какие подводные камни? Давайте попробуем разобраться.
Михаил @YellowRabbid
Пользователь
Интернет-магазин «на минималках»
12 мин
Написать эту статью меня побудила публикация «Интернет-магазин как черная дыра в бюджете». На мой личный взгляд, сумма, которая там выведена, отвечает только личным представлениям автора и произвольному набору допущений, озвученных в статье, поэтому решил поделиться своим опытом.
Минимальный размер контента в CSS grid
3 мин
Туториал
Перевод
Иногда, когда вы пишете компонент, то вдруг замечаете странную полосу горизонтальной прокрутки. Снова и снова вы пытаетесь исправить положение, только чтобы позже понять, что причина в чём-то другом. Сколько раз так было? В этой статье я растолкую хитрую проблему, которая может стоить часов проб и ошибок; связана эта проблема с макетом сетки CSS, и я подумал, что о ней стоит написать. Прежде чем начать, я хочу дать некоторый контекст. Вот несколько вещей, которые следует принять во внимание. Представьте, что вы:
Учитывая всё это, давайте погрузимся в проблему.
- Столкнулись с этой проблемой в середине рабочего дня. Вы устали, и у вас есть много работы, которую нужно сделать.
- Вы уже проголодались.
- Первопричину проблемы легко упустить, поскольку она не связана с компонентом, над которым вы работаете.
Учитывая всё это, давайте погрузимся в проблему.
В чём разница между узлом и элементом DOM?
4 мин
Перевод
Объектная модель документа (Document Object Model, DOM) — это интерфейс, который рассматривает HTML- или XML-документы в виде древовидных структур, каждый узел которых является объектом документа. DOM, кроме того, предоставляет набор методов для выполнения запросов к дереву документа, для изменения его структуры и для выполнения с ним некоторых других действий.
При работе с DOM, кроме того, используется термин «элемент». Элементы очень похожи на узлы, но, всё же, это — не одно и то же. В чём же разница?
При работе с DOM, кроме того, используется термин «элемент». Элементы очень похожи на узлы, но, всё же, это — не одно и то же. В чём же разница?
Агрегаторы вакансий для разработчиков: сравниваю 10+ самых популярных
7 мин
Только самый-самый ленивый человек не написал о том, как искать работу на удаленке. Большинство советов про то, как откликнуться, пройти собеседование и так далее. Меня интересует другое — где вообще удобно искать вакансии. Составил свой рейтинг, протестировав 10 самых известных агрегаторов.
Как фотка в портфолио влияет на получение работы и заказов. Обзор исследований
5 мин
Почти наверняка вам кажется, что реклама или пропаганда действуют на кого угодно, но точно не на вас. Вы всегда действуете рационально и не подвержены подобному влиянию. Но, скорее всего, это не так. Люди подвержены когнитивным искажениям. И это нормально.
Если вы спросите у любого эйчара, уделяет ли он внимание фотке и внешности кандидата, 10 из 10 скажут: «Конечно же нет, мы смотрим только на опыт!» Ну, ещё на софт-скиллы и вот это всё. Ведь смотреть на внешность и оценивать человека по этому критерию — это шаг к дискриминации. Но даже если эйчар (или прямой наниматель) хочет быть предельно беспристрастен, то бессознательно он всё равно воспринимает и учитывает свои ощущения от фото. Даже если не говорит вам об этом. Даже если не говорит об этом самому себе.
Чтобы этого избежать, нужно знать, что такой эффект есть, и научиться у себя его ловить. А чтобы этим воспользоваться в своих корыстных целях, нужно знать, на что подсознательно клюёт большинство людей.
Я нашла несколько научных статей, где учёные сравнивали эффект от фоток с разными выражениями лица в контексте найма на работу.
Если вы спросите у любого эйчара, уделяет ли он внимание фотке и внешности кандидата, 10 из 10 скажут: «Конечно же нет, мы смотрим только на опыт!» Ну, ещё на софт-скиллы и вот это всё. Ведь смотреть на внешность и оценивать человека по этому критерию — это шаг к дискриминации. Но даже если эйчар (или прямой наниматель) хочет быть предельно беспристрастен, то бессознательно он всё равно воспринимает и учитывает свои ощущения от фото. Даже если не говорит вам об этом. Даже если не говорит об этом самому себе.
Чтобы этого избежать, нужно знать, что такой эффект есть, и научиться у себя его ловить. А чтобы этим воспользоваться в своих корыстных целях, нужно знать, на что подсознательно клюёт большинство людей.
Я нашла несколько научных статей, где учёные сравнивали эффект от фоток с разными выражениями лица в контексте найма на работу.
SEO-friendly HTML для верстальщика
7 мин
Туториал
В этой статье не будет подробного разбора всех аспектов SEO-friendly сайта. Я собрал здесь лишь тот объем информации, с которым мне необходимо было познакомиться для решения SEO-задач в компании ВсеИнструменты.
Тестовое задание для фронтендера
6 мин
На Хабре уже было 244 статьи о карьере, тысячи комментариев о плохих собеседованиях разработчиков и множество недовольных программистов всех сортов и расцветок. Не то что бы это был необходимый минимум для успешного найма, но когда начал давать тестовые задания, становится сложно остановиться.
Верстальщик — такой человек, который хорошо разбирается в HTML и CSS и немного знает JavaScript. Ну то есть понимает, как в целом всё работает, но сильно не погружается. При этом бывает непросто выбрать хорошего верстальщика, потому что всех учат по-разному.
Чтобы решить эту проблему, собираем в одном месте опыт десятков собеседований с верстальщиками. Вместе с Дашей Владыко из фронтенд-аутсорса «Лига А.» рассказываем, на что смотреть в тестовом задании джунов и мидлов, и как отличить хороший результат от плохого. Плюс несколько практических советов — например, как выбирать плагины и составить тестовое задание.
Привет, Хабр! Меня зовут Мария, я уже достаточно долго проработала менеджером в студии по разработке сайтов, чтобы понять, что потолок для меня здесь достигнут, и решить отправиться в самостоятельное плавание. Под катом — рассказ о том, как я оборудовала собственную студию дома, набирала команду и организовывала её работу.
Ресурсы для поиска удаленной работы для нетехнарей
2 мин
Возможно у вас тоже есть друзья-нетехнари, которые терзают вас вопросами "как попасть в айти?", и "где искать постоянную удаленную работу?". У меня на этот случай есть заготовленный списочек, который уже сэкономил мне много часов на таких вопросах. Хочу поделиться им с вами и попробую его обновлять, если Хабр позволяет обновлять публикации.
Тем, у кого уровень английского "London is the capital of Great Britain", я советую идти на популярные российские ресурсы и искать там по фильтру "удаленная работа". А тем, чей уровень английского позволяет, кто хочет получать з/п в долларах и готов заморочиться с оформлением ИП или самозанятости, можно спокойно предлагать поискать иностранную компанию.
Это, конечно, не исчерпывающий список, и будет круто, если вы дополните его в комментариях. Удачи в поиске!
Что нужно знать о популярных JS-фреймворках
22 мин
Привет! Меня зовут Дима Чудинов, я наставник на веб-факультете Яндекс.Практикума, Head of Group, Front-end, ABBYY.
Студенты недавно задали мне вопрос: «Что лучше: Angular или React?». Я начал отвечать и понял, что мне понадобится для этого статья. Позже я понял, что и одной статьи не хватит.
О том, какой фреймворк выбрать, я расскажу в другой раз. А в этой статье опишу историю создания фреймворков и их особенности. Выбрать рабочий инструмент статья не поможет. Зато поможет вести споры с другими разработчиками на кухне (если не будет карантина) и в сети. Статья будет полезна новичкам, которые только начинают своё знакомство с фреймворками и библиотеками, и поможет взглянуть на «зоопарк» веб-технологий сверху.
Бесплатные хостинги для веб-разработчиков
4 мин
Привет, Хабр!
Одним из наиболее популярных направлений разработки сегодня является веб. И когда нужно разместить свой проект где-нибудь, кроме localhost, многие сталкиваются с трудностями, ведь хостинг должен быть быстрым, удобным и, желательно, бесплатным :)
В этом списке вы найдете 15 бесплатных сервисов, где легко сможете разместить свой проект и не заплатите ни копейки. Погнали!
Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт
7 мин
Перевод
Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.
Интернет-кочевники — кто это, сколько зарабатывают, и это вообще законно?
6 мин
Я переезжаю 7 раз в год. Собираю все вещи, выезжаю из старой квартиры и въезжаю в новую. В среднем за 3 года — это один переезд через каждые 52 дня. Иногда новое жильё находится в другой части города, иногда в другой стране.
Если на этом остановить рассказ, то люди думают, что я беглый преступник или цирковой артист. Это не так, хотя я и могу метать ножи.
Таких людей, как я, уже очень много. Настолько много, что некоторые прогрессивные государства создают специальные условия, чтобы сделать страну привлекательнее для нас. В то время, как для чиновников других стран кочевники — это до сих пор люди с кожаным шатром, бубном и персональным стадом лошадей.
Если ты работаешь в IT, то ты особенно предрасположен к кочевничеству. В этой статье попробую познакомить тебя с современными кочевниками. В конце мы возьмём интервью у нескольких представителей.
Возможно, тебе понравится и захочется попробовать. Будет куча ссылок на коммьюнити и ресурсы для поиска работы/заказов.
Думать как фронтенд-разработчик
7 мин
Туториал
Перевод
Привет, Хабр! У нас стартанул новый поток курса Frontend-разработчик, а я делюсь с вами небольшим чек-листом для фронтендера о том, как мыслить при создании макета, какие вопросы задавать себе самому. Смело кладите её в закладки, если хотите рассказать своему падавану джуну, с какой стороны подойти к дизайну макета, но не хотите тратить своё время на объяснение относительно несложных вещей.
End User Monitoring — контролируем производительность фронтенда с помощью Instana
10 мин
На прошлой неделе мы выложили пост про то, как мы мониторим backend и микросервисную инфраструктуру с помощью Instana, и пообещали написать продолжение про мониторинг frontend.
В итоге мы решили не ограничиваться обзором Instana в качестве инструмента контроля frontend, а копнуть немного глубже и рассказать, для чего вообще нужен End User Monitoring, с какими проблемами производительности фронта мы сталкиваемся чаще всего, какие мы используем сценарии работы с собранными данными, и как Instana помогает нам контролировать пользовательский опыт в целом.
Пентест вебсайта с помощью Owasp Zap
7 мин
Сегодня защита веб-приложения имеет решающее значение, поэтому осваивать пентест инструменты приходится и самим разработчикам. О мощном фреймворке WPScan для пентеста WordPress мы уже писали, но сайты бывают и на других движках. Именно поэтому сегодня разберем более универсальный пентест-инструмент OWASP ZAP (Zed Attack Proxy).
Что такое OWASP ZAP?
OWASP (Open Web Application Security Project) — всемирная некоммерческая организация, деятельность которой направлена на повышение безопасности ПО.
OWASP ZAP (Zed Attack Proxy) — один из самых популярных в мире инструментов безопасности. Это часть сообщества OWASP, а значит, что этот инструмент абсолютно бесплатный.
Почему многие выбирают OWASP ZAP?
Он предназначен для пользователей с широким спектром опыта в области безопасности, поэтому отлично подходит для разработчиков и функциональных тестировщиков, которые плохо знакомы с пентестами.
ZAP создает прокси-сервер между клиентом и вашим сайтом. Пока вы перемещаетесь по своему веб-сайту, он фиксирует все действия, а затем атакует сайт известными методами.
Открытый исходный код!
Проект был запущен в 2010 году, но до сих пор дорабатывается и регулярно обновляется.
Настройка среды ZAP
ZAP является кроссплатформенным и для своей работы требует только наличия JAVA 8+. Поэтому можно обойтись без Kali Linux или других ОС для белого хакинга.
Различные методы брутфорс атак WordPress
5 мин
Туториал
В этой статье вы узнаете о том, как взламывать учетные данные сайтов на WordPress с помощью различных брутфорс атак.
Содержание:
- Предварительные требования
- WPscan
- Metasploit
- Люкс Burp
- Как обезопасить сайт от брутфорса?
Предварительные требования
- Сайт на WordPress. Здесь мы будем использовать собственную лабораторию для пентеста, о созданию которой был посвящен наш предыдущий пост.
- Kali Linux (WPscan). Более подробно о WPScan и его возможностях мы уже писали, а вместо Kali Linux можно использовать любую другую из ОС для белого хакинга.
- Burp Suite (Intruder). Более подробно о данном инструменте можно узнать здесь.
WPscan
WPscan – это фреймворк, который используется в качестве сканера уязвимостей методом «черного ящика». WPscan предустановлен в большинстве дистрибутивов Linux, ориентированных на безопасность, а также доступен в виде подключаемого модуля.
Здесь мы будем использовать WordPress, размещенный на локальном хосте.
Во время перебора можно использовать:
- Собственные общие списки логинов и паролей
- Базы логинов и паролей, которые уже есть в Kali Linux
Делаем поиск в веб-приложении с нуля
26 мин
Туториал
В статье «Делаем современное веб-приложение с нуля» я рассказал в общих чертах, как выглядит архитектура современных высоконагруженных веб-приложений, и собрал для демонстрации простейшую реализацию такой архитектуры на стеке из нескольких предельно популярных и простых технологий и фреймворков. Мы построили single page application с server side rendering, поддерживающее просмотр неких «карточек», набранных в Markdown, и навигацию между ними.
В этой статье я затрону чуть более сложную и интересную (как минимум мне, разработчику команды поиска) тему: полнотекстовый поиск. Мы добавим в наш контейнерный рай ноду Elasticsearch, научимся строить индекс и делать поиск по контенту, взяв в качестве тестовых данных описания пяти тысяч фильмов из TMDB 5000 Movie Dataset. Также мы научимся делать поисковые фильтры и копнём совсем немножко в сторону ранжирования.
В этой статье я затрону чуть более сложную и интересную (как минимум мне, разработчику команды поиска) тему: полнотекстовый поиск. Мы добавим в наш контейнерный рай ноду Elasticsearch, научимся строить индекс и делать поиск по контенту, взяв в качестве тестовых данных описания пяти тысяч фильмов из TMDB 5000 Movie Dataset. Также мы научимся делать поисковые фильтры и копнём совсем немножко в сторону ранжирования.
Услышал интересное мнение по поводу лэндингов. Согласны или нет?
4 мин
Само слово “лэндинг” это некоторый миф. Некая расплывчатая сущность, которая выдает поверхностную местечковую работу за качественный и полномасштабный проект. Еще десять лет назад – лэндингом называли простую разметку текста под размещение графики и контента. Далее это понимание трансформировалось в посадочную страницу для выдачи в результате ранжирования поисковых систем. После чего эта же посадочная страница стала использоваться вообще на все случаи жизни, и в конце концов превратилась в отдельностоящий продукт, который при минимальных затратах (как финансовых, так и смысловых) подменил собой полноразмерный сайт. Причем информационная часть осталась только на 5%, все остальное заменили собой блоки не несущие практически никакой интеллектуалльной нагрузки, кроме некоторой псевдо-визуализации. Давайте разберемся почему эволюционно случилось так, что это копеечную поделку стали воспринимать как обособленную разработку.