Pull to refresh
110.7
Karma
37
Rating
Евгений Шкляр @evil_me

Редактор

  • Followers 168
  • Following 1

35 инструментов для веб-разработчика на каждый день

HTML Academy corporate blog Website development *Typography *Vector graphics *Software

Кроме редактора кода, терминала, браузера и гита веб-разработчики пользуются вагоном и маленькой тележкой маленьких инструментов, которые выполняют какую-то одну задачу, но могут пригодиться в ежедневной работе. Предлагаем вам нашу подборку — надеемся, что что-то пригодится, а по поводу чего-то вы и вовсе скажете «А что, так можно было?».

Краткое содержание: проверка кода по стандартам, проверка вёрстки и стилей, работа с кодом, работа с графикой (SVG, фавиконки, конвертеры и сжималки), работа с текстом (типографы и конвертеры всего во всё).

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

Читать далее
Total votes 27: ↑25 and ↓2 +23
Views 19K
Comments 15

Используйте фавиконки правильно

HTML Academy corporate blog Website development *CSS *HTML *Design
Tutorial

Фавиконка — это иконка, которая отображается во вкладке браузера перед названием страницы, в закладках и на рабочем столе для веб-приложений.

Фавиконки — ответственность верстальщика. Под катом рассказ о том, как подключить обязательную фавиконку и каким должен быть набор иконок, как использовать иконки в SVG, что нужно дополнительно сделать для устройств от Apple, и почему хорошо использовать webmanifest для подключения всех фавиконок к вашему сайту.

Читать далее
Total votes 19: ↑17 and ↓2 +15
Views 7.4K
Comments 11

Листаю очень плохую книжку по веб-разработке

HTML Academy corporate blog Website development *HTML *Studying in IT Reading room

Вот она, лежит у меня на столе. Прямиком из 2008 года, ждала, чтобы я её прочитал и научился делать сайты. Самостоятельно. Самоучитель же. Триумф!

А если тут ещё и предлагают самый быстрый способ, то точно успех, смогу всему научиться, пока пишу эту статью. Смогу ведь, да?

В общем, давайте вместе полистаем старую книжку.

Полистать
Total votes 75: ↑47 and ↓28 +19
Views 19K
Comments 114

Руководство по инструментам доступности

HTML Academy corporate blog Web design *Website development *Accessibility *Web services testing *
Translation
Tutorial

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

Это перевод статьи Nic Chan «A Complete Guide To Accessibility Tooling» из журнала Smashing Magazine.

Читать далее
Total votes 17: ↑17 and ↓0 +17
Views 6.4K
Comments 0

Смущающая разработка софта. 4 байки с завода

Abnormal programming *System administration *Development Management *Reading room 1C *

Моя первая настоящая работа была странной

2013 год. Четвёртый курс информационной безопасности, я вроде разбираюсь в визуальном бейсике и самонадеянно ищу вакансии программиста на hh. Их там не то что бы сильно много, поэтому через десять минут поисков я отправляю резюме на какой-то завод, где в вакансии есть нужные слова. Они приглашают меня на собеседование, и через три дня у меня есть работа.

1С-программистом с нулевым знанием 1С. С записью в трудовой «Системный администратор» с нулевыми знаниями системного администрирования. Ну то есть как — эникействовать же все могут, вот и могу. Наверное.

Так прошёл целый год, полный переписывания легаси на 1С, софта для этикеток на С++ и дельфи, включения бухгалтерских компьютеров обратно в розетку и, конечно, вообще без визуального бейсика.

Этот случай так запал мне в душу, что я на всякий случай запомнил некоторые странности оттуда (и ещё с других мест, где мне нужно было работать с программистами). Байки, во. Пусть будут байки о разработке.

Дисклеймер. Всё пишу по расплывчатым воспоминаниям, поэтому если бывшие коллеги читают это — привет на сто лет.

Читать далее
Total votes 18: ↑16 and ↓2 +14
Views 17K
Comments 21

Не лезьте в геймдев, он вас сожрёт (но вам понравится)

HTML Academy corporate blog Website development *Game development *Game design *

Не зря говорят, что геймдев безжалостен (и особенно к новичкам).

Rovio сделали Angry Birds с какой-там-сорок-с-лишним попытки, всякие новички регулярно проваливают ответственную задачу по доделыванию своих инди пиксельных платформеров на юнити, Башурова вон вообще забанил Эпл, хотя казалось бы — целый Башуров. Короче, жуть и ужас.

Тем страннее, что онлайн-школа по веб-разработке, в которой я работаю, решила ввязаться в геймдев и сделать свою игру. Да, в маркетинговых целях, но игру. Онлайн, настоящую. С игроками и призами. С основной валютой, побочной валютой, рейдами, боссами и пвп. До сих пор поверить не могу, как мы на это согласились.

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

Читать далее
Total votes 18: ↑9 and ↓9 0
Views 9.6K
Comments 5

Подкаст о том, как всё устроено в веб-разработке

HTML Academy corporate blog Website development *Studying in IT IT career

На дворе 2021, всё прогрессивное человечество уже года три слушает приятные голоса по дороге на работу, каждое медиа завело себе по 24 регулярных подкаста, а мы вот только решились.

«Тем лучше, меньше ошибок повторим» — подумали мы и запустили свой подкаст «Да как так-то». Позвали в гости разработчиков, наставников, тимлидов, продактов, проджектов, эйчаров и других видных людей из индустрии и расспросили о том, как всё устроено во фронтенде и как туда попасть новичкам.

Внутри — выпуски о вероятной необходимости высшего образования о том, что вероятно тимлиды не нужны. Но тут как у Шредингера — не узнаете, пока не послушаете.

Послушать
Total votes 8: ↑6 and ↓2 +4
Views 2.4K
Comments 2

Забудьте про div, семантика спасёт интернет

HTML Academy corporate blog Web design *Website development *Programming *HTML *

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.

Читать далее
Total votes 56: ↑50 and ↓6 +44
Views 52K
Comments 55

Все научились программировать. А дальше-то что?

HTML Academy corporate blog Programming *Studying in IT IT career

Где-то в мире живёт Серёжа — тридцатилетний продавец обуви и отец троих детей. 

Представим, что Серёже в какой-то момент надоело продавать одинаковые туфли и захотелось делать одинаковые лендинги. Он почитал статьи в интернете, посмотрел 70-часовые разборы разборов по вёрстке на Ютубе, прошёл курсы. Даже купил «Алгоритмы» Скиены, но пока не открывал. В общем, любым способом научился программировать. 

Как ему теперь поступить, чтобы мечта «максимально хорошо начать карьеру» стала реальностью (если это вообще выполнимо)? Как и в любой профессии, есть несколько вариантов. Сколько из них хороших — непонятно, будем разбираться.

Дисклеймер: осторожно, этот пост может задеть чувства Java и 1С-разработчиков, менеджеров проектов и владельцев парикмахерских.

Читать далее
Total votes 45: ↑29 and ↓16 +13
Views 31K
Comments 77

Что должно быть в макете сайта: шпаргалка для дизайнера

HTML Academy corporate blog Web design *Website development *Interfaces *Design

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

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

Осторожно, в статье очень много иллюстраций.

Читать далее
Total votes 9: ↑8 and ↓1 +7
Views 7.3K
Comments 16

«Я никогда не научусь верстать» и другие мифы о разработке

HTML Academy corporate blog Website development *Programming *IT career Lifehacks for geeks

Могу честно сказать — я побаиваюсь CSS. За последние годы он неслабо разросся, но вместе с этим пришла и монструозность (ну то есть чего вы всерьёз не можете сделать на CSS? Машину времени?). Мне сложно смотреть даже на селекторы, а из-за угла уже манят флексы с гридами и говорят — «псс, не хочешь немного сеток и бессоных ночей?». Больно думать о позиционировании текста на бесконечном холсте, когда всю жизнь расставлял кнопки мышкой на форме

Хотя мне должно быть проще, ведь я смотрю на фронтенд с сишарповой стороны баррикад, и хоть что-то в разработке понимаю. А тем, кто только-только приходит в IT, не представляю вообще как быть. Это уже изнутри становится понятно, что какие-то темы не такие страшные, а вот снаружи далеко не всегда так.

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

Читать далее
Total votes 4: ↑3 and ↓1 +2
Views 13K
Comments 5

Что написать в резюме, если нет опыта работы

HTML Academy corporate blog IT career

Люди меняют профессию по разным причинам — надоело, босс не очень или платят мало. Да и мало ли ещё что. Важно, что у всех есть вероятность однажды оказаться перед пустой формой для резюме вообще без опыта работы.

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

Осторожно, мы тут вовсю советуем загружать в резюме фотографию. Если не согласны — приходите в комментарии.

Читать далее
Total votes 17: ↑8 and ↓9 -1
Views 11K
Comments 9

Как реализовать drag&amp;drop на чистом JavaScript

HTML Academy corporate blog Website development *JavaScript *
Tutorial

В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться при сортировке карточек в таск-трекере, переносе между списками или вообще при перетаскивании файлов в окно браузера.

Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.

Читать далее
Total votes 8: ↑8 and ↓0 +8
Views 12K
Comments 5

17 ошибок, которые испортят любое резюме

HTML Academy corporate blog Personnel Management *IT career

Однажды «Лига А.» искала веб-разработчика примерно с годом опыта работы — ни больше, ни меньше. Мы завели вакансию, получили много резюме и много на что насмотрелись — в том числе, на кучу ошибок, которых легко можно было бы избежать.

Этот пост — попытка структурировать наш опыт в поиске разработчиков и поделиться полезными советами для всех, кто ищет работу.

Читать далее
Total votes 24: ↑9 and ↓15 -6
Views 5K
Comments 20

Тестовое задание для фронтендера

HTML Academy corporate blog Web design *Website development *HTML *IT career

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

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

Чтобы решить эту проблему, собираем в одном месте опыт десятков собеседований с верстальщиками. Вместе с Дашей Владыко из фронтенд-аутсорса «Лига А.» рассказываем, на что смотреть в тестовом задании джунов и мидлов, и как отличить хороший результат от плохого. Плюс несколько практических советов — например, как выбирать плагины и составить тестовое задание.

Читать далее
Total votes 9: ↑8 and ↓1 +7
Views 19K
Comments 23

Что должен уметь верстальщик, чтобы его все хотели

Website development *IT career Design
В иерархии фронтенд-разработки верстальщики располагаются где-то здесь: 


Фронтенд-разработка в 2020, холст, масло

В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.
Читать дальше →
Total votes 17: ↑15 and ↓2 +13
Views 26K
Comments 28

Удалёнка. 15 правил для тех, кто никогда не пробовал, но приспичило

IT career Offices of IT companies Lifehacks for geeks IT-companies Remote work
Tutorial
Удалённая работа — это отлично. Грустно может быть только если вы никогда так не работали, а сейчас пришлось. Но в этом тоже ничего страшного, главное — соблюдать простые правила.

Из-за сами знаете чего мы всей HTML Academy покинули офис и дружно сидим по домам (своим), поэтому я собрал от всех по пять советов для начинающих удалёнщиков, заботливо отсортировал и перемешал результат с фотографиями рабочих мест. Читайте, смотрите, вдохновляйтесь и работайте. Удалёнка — норм! 
Читать дальше →
Total votes 20: ↑18 and ↓2 +16
Views 20K
Comments 28

Как получать 100 тысяч за код. Полное руководство для начинающих

Website development *Studying in IT IT career
Tutorial

Сохраните в закладки сейчас, скажите спасибо через год. В конце каждого этапа — ссылки для внеклассного чтения.


Что нужно знать, чтобы получать зарплату 100 тысяч

1. Познакомьтесь с веб-разработкой


Ситуация на 1 этапе

Продолжительность этапа: 1 месяц.


Что изучить на этом этапе.


  1. Структуру HTML.
  2. Отличия фронтенда и бэкенда.
  3. Разметку и оформление текста.
  4. Как размечать страницу по макету.
  5. Как ставить ссылки и вставлять изображения.
  6. Основы CSS — правила, селекторы, свойства и каскадирование.
  7. Хотя бы немного понимать, как работает и где применяется JavaScript.

Сначала будет много непонятных слов, аббревиатур и голова пойдёт кругом. В одном JavaScript десятка три направлений, поэтому нужно понять, ваше ли это вообще. Смотрите видео на Ютюбе или тренируйтесь на интерактивных курсах. Другой вариант — по учебникам, но с ними сложнее всего. Электронные пока держатся, а вот бумажные устарели ещё до публикации.


Ещё 7 шагов
Total votes 52: ↑30 and ↓22 +8
Views 42K
Comments 91

Пост про хорошие рюкзаки (спасите)

Gadgets Offices of IT companies Lifehacks for geeks

— Да у тебя просто рюкзака нормального не было!



Мне катастрофически не везёт с рюкзаками.


Как обычно бывает: до покупки с ними как будто конфетно-букетный период. Всё выглядит здорово, удобно и эргономично, много места, и лямочка там, где надо, и крепления удобные. Смотришь в магазине и нарадоваться не можешь. А потом, когда документально оформили отношения, появляется беда. Лямка на самом деле не там, крепление цепляется за рукав, ноут болтается, спине неудобно, мало места, в транспорте он занимает всё свободное пространство и вызывает ненависть попутчиков, плюс зачем там вообще USB!?


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

Читать дальше →
Total votes 31: ↑21 and ↓10 +11
Views 24K
Comments 103

Пост про кучу хлама на рабочем столе

Offices of IT companies Lifehacks for geeks

Уже несколько лет твержу себе — у всех вещей должно быть своё место. И вот сколько твержу, ровно столько же забываю на рабочем столе штуки, которые для работы никак не нужны. Выбрасываю лишнее, структурирую важное и складываю в кучки всякое, но каждый раз всё замусорено до основания. И мне надоело.


Потому что ну как же выкинуть тот красивый блокнот с логотипом компании (пятый в очереди на использование) или наконец-то унести домой давно забытый квадрокоптер. В итоге всё начинает выглядеть так:



Рабочее место редактора


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

Читать дальше →
Total votes 56: ↑44 and ↓12 +32
Views 42K
Comments 346

Information

Rating
211-th
Works in
Date of birth
Registered
Activity