9 ошибок начинающего веб-разработчика


Содержание

Какие типичные ошибки в программировании совершают новички — отвечают эксперты

Нам в редакцию Tproger пришел вопрос от подписчика, которым мы хотим поделиться с вами:

«Какие типичные ошибки в программировании совершают новички?»

Мы обратились за разъяснениями к нашим экспертам, а полученные ответы предоставляем вашему вниманию.

Ильназ Гильязов , эксперт курса «Профессия веб-разработчик» университета digital-профессий Нетология

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

Сегодня существует большое количество источников информации различной степени качества: начиная от классики Computer Science, написанной 10-15 лет назад, до современных школ обучения, где преподают практики. Я бы рекомендовал с особой осторожностью относиться к современным инфо-бизнесменам, за неделю обещающих из вас сделать программиста.

Типичная ошибка новичка – скакать от источника к источнику, пытаясь охватить все. Такая практика приводит к забавному эффекту: представьте, что вы пытаетесь научится танцевать, посещая занятия в разных школах – скорее всего вы так и не научитесь танцевать. Но, такой подход вполне применим с точки зрения выбора самой школы танцев. Поэтому важно выбрать правильный источник и работать с ним. Ключевые критерии отбора источников: актуальность информации, уровень ее подачи и наполненность практическими задачами (умение решать конкретные задачи).

Отсутствие практики. Я очень часто сталкивался с тем, что на первых порах некоторым начинающим все понятно и они просто не делают практические задания, потому что там все просто. Через какое-то время они банально ничего не могут написать из того, что в их понимании уже не так просто, так как нет практического навыка.

Ключевые критерии: наличие практики по изучаемому материалу и приближенность практики к реальной жизни.

Непонимание контекста задачи. К сожалению, с детства нас учат тому, что в задаче сформулированы все первоначальные данные и условия, а также четко определено, что нужно сделать.

В разработке программных продуктов нужно же больше анализировать конкурентов, т.к. они уже проделали работы по решению задачи до вас. Приведу очень простой пример – если вы поставите начинающему программисту задачу сделать сервис по подбору дебетовых карт, допустим по % на остаток, то он сделает вам сервис, в котором процент будет одним числом. Если же посмотреть на реальные продукты, которые решают подобную задачу, то процент может быть не только одним числом. Поэтому учиться этому нужно сразу, а для этого решать не игрушечные задачи, а задачи, которые встречаются в реальном мире (пусть и в упрощенном варианте).

Андрей Коваленко , со-основатель и CTO Voximplant

Главная ошибка новичка заключается в том, что он спешит. Вместо того, чтобы изучать язык, платформу или фреймворк, он вводит вопрос в Google/Stack Overflow и просто копирует результат. Это плохо не только потому что без системных знаний невозможно понять новые технологии «изнутри», но и просто потому что в скопированных ответах могут быть ошибки. Если не разобраться досконально, вместо кода получится «лоскутное одеяло» из кусков Stack Overflow, в котором сам автор разбирается крайне поверхностно. Как следствие, развивать это решение дальше будет крайне сложно.

Михаил Субботин , преподаватель израильской высшей школы IT и безопасности HackerU

Я бы задал этот вопрос иначе: «Какие опасности подстерегают новичка в программировании?». По моему мнению, самая главная из них — самоуверенность. Если новичок решил задачу с первого раза, то у него может сложиться впечатление, что все легко и можно расслабиться. Но это не так — наоборот, если задача была решена, надо работать еще больше, чтобы выйти на тот уровень, на котором возникают ошибки, или ты не можешь предложить решение. Иначе тебя обойдут те, кто не был столь уверен в своих знаниях, но много и усердно работал. С другой стороны, решение задачи может быть не самым оптимальным, но без стремления найти другие решения и «поиграть» с ними новичок может запомнить свое первое решение и предлагать его всегда, даже если оно больше не уместно.

Андрей Кузьмичев , заместитель генерального директора RU-CENTER

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

Какие же основные ошибки могут совершать начинающие программисты?
1. Не пытаться искать информацию. Если вы начинающий программист, наверняка кто-то уже сталкивался с вашим вопросом, и решение есть в открытом доступе, мануалах, FAQ и т/ д. Поиск ответа также может показать выбранное решение проблемы с другой стороны. И возможно, это решение только ухудшит ваш проект. Очень полезно использовать опыт других программистов.
2. Не бросать неверное решение. Если Вы поняли, что выбранное решение – не самое лучше, смело отбрасывайте его и начинайте заново. Плохой код и много “костылей” в программе не сделают её удобной для эксплуатации, даже если в итоге она заработает.
3. Ошибка вытекает из пункта два – ухудшать, а не улучшать код. Всегда нужно стараться, пусть и понемногу, улучшать код, но не ухудшать его временными решениями.
4. Не планировать. В этом вопросе важно найти оптимальный вариант, т.к. чересчур подробное планирование может только затруднить подготовку проекта. Нет идеальных планов, но, особенно для крупных проектов, планирование необходимо.

Также начинающему программисту стоит обратить внимание на некоторые моменты, касающиеся уже непосредственно написания кода: инкапсуляция, правильно подобранные инструменты, тестирование (а лучше автотестирование) и т. п. Как говорится, все приходит с опытом, но если заранее учесть возможные ошибки – опыт вы получите намного быстрее.

Диана Гомонова , руководитель отдела маркетинга в веб-студии Craft Group

Статус новичков в программировании наши разработчики перешагнули уже давно. Однако даже тем, кто стал гуру, есть что вспомнить. Ведь все они тоже были когда-то на заре своей карьеры и совершали ошибки. И вот какие: использование в работе непроверенной информации, нежелание углубляться в проблему, поверхностное ее изучение, выбор некорректного источника для обучения (что потом плохо сказывалось на результатах работы), разработка новой фичи ради фичи (увидел что-то новенькое, и принялся делать, забывая о нюансах и подводных камнях) и лишние, бесполезные вложенности в HTML.

Сергей Вересов , руководитель проектного офиса «Павелецкая» компании «Первый БИТ»

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

2. Склонность к «красивым» решениям. Если есть возможность решить задачу сложно и красиво или просто и утилитарно, новичок выберет «красоту». Естественно, такие «решения» сложнее поддерживать, масштабировать и использовать вторично. Избавиться от такой склонности поможет работа в команде и получение регулярной обратной связи от коллег, которые вынуждены мучиться с такой «красотой».

3. Использование объектов не по назначению. Связано также с недостатком опыта. Это можно исправить регулярной практикой в команде и постоянным изучением инструментов работы.

4. Пренебрежение стилю написания кода, форматированию, названию переменных и объектов. Конечно же, коллегам не приносит радости читать такой код. Работа в команде и обратная связь с куратором поможет искоренить у новичка это пренебрежение.

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

Резюме. Нужно понимать, что все эти ошибки относятся к программированию за деньги. Если вы программируете для удовольствия, то это другое. Ошибок в программировании, которые относятся к работе, довольно много. Выше перечислены только основные. Можно упомянуть еще пренебрежение к «юзабилити», недостаточное тестирование и отрицательное отношение к оценке кода коллегами, да и многое другое. Но новичку не стоит унывать, так как работа в команде позволит ему избавиться от всех этих недостатков.

Кирилл Меженцев , программист группы разработки карты рассрочки «Совесть»

Говоря о типичных ошибках новичков в программировании, как правило, смотрят на профессиональные знания и навыки и упускают из внимания возможные ошибки в самом рабочем процессе. Основываясь на своем опыте могу сказать, чего делать новичку точно не стоит:

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

Считать, что раз ты новичок, то все вокруг умнее тебя. Это круто (и так должно быть), когда в коллективе есть люди гораздо более опытные и знающие, готовые помочь и подсказать. Но не всегда стоит стопроцентно полагаться на их слова. Скорее – как на мнение. Например, у тебя возникла проблема и тебе сказали: «а, ну это здесь не так». Ты идешь разбираться, не можешь найти ошибку в указанном месте и считаешь, что просто недостаточно изучил тему, ты же джуниор. Но может случиться, что сам сеньор не очень понимает, о чем идет речь. Полностью погрузиться в контекст, не упуская ни одной детали, бывает сложно. Все мы люди. Поэтому полагаться на сеньора как на «истину в последней инстанции» не нужно, руководствуйтесь еще и фактами, доказательствами.

Перерабатывать. Работая с утра до полуночи, не отдыхая и не высыпаясь, вы берете у себя здоровье и силы в долг. Когда-то придётся его вернуть. Если я не справляюсь с нагрузкой за рабочие

8 часов, значит: а) я не настолько компетентен и переоценил свои способности, б) у меня проблемы с тайм-менеджментом, и я взял больше работы, чем реально выполнить за это время. Оба варианта – повод задуматься и исправить положение. Перерабатывая вы делаете хуже не только себе, но и работодателю. Кому нужен неделями не высыпающийся сотрудник, который от усталости не может перевернуть бинарное дерево? Да, бывают случаи, когда дедлайн горит, все пошло не так и «надо было вчера». Но после таких ситуаций обязательно нужно отдохнуть и провести оценку: что я должен сделать, чтобы не допускать этого в будущем?

Алексей Рузин , ведущий разработчик Kokoc Group

1. Боязнь контакта.
Начинающие программисты часто стараются все делать самостоятельно или наоборот боятся решать задачи в одиночку. В первом случае человек может допустить большое количество ошибок, которых можно избежать, если обратиться за помощью к коллегам. Вторая крайность чревата тем, что программист не сможет проявить себя, так и останется начинающим. Лучший способ справиться с излишней самоуверенностью или страхом – заручиться поддержкой опытного коллеги, который может выступить в роли наставника. Прежде всего программисту стоит попытаться найти решение задачи самостоятельно, а если не получится, обратиться к коллеге. При этом важно не бояться и задавать дополнительные вопросы до тех пор, пока решение не будет понятно.

2. Копипаст.
Некоторые начинающие программисты копируют чужой общедоступный код – это нормально. Плохо, если код берется целиком, без разбора составляющих и чтения документации о них. Такой подход чреват поздними ошибками при эксплуатации кода, которые сложно диагностировать и устранить. Во-первых, разработчик уже успел «забыть» проблемный код. Во-вторых, исправление может затронуть не только проблемный, но и окружающий код, который его использует.

3. Непрозрачные названия переменных или функций.
Чтение кода занимает в 10 раз больше времени, чем написание, поэтому важно, чтобы он хорошо читался и программист быстро понимал, что именно этот код делает. Возьмем для примера язык Python.
Неопытные программисты могут назвать переменные так:

Но лучше написать так:

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

Например, такой код:

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

5. Погоня за модными технологиями.
Как правило, новые технологии имеют превосходство в одних областях за счет проигрыша в других. До тех пор, пока у начинающего программиста нет понимания этих особенностей, лучше использовать проверенные временем универсальные решения. Например, если программист разрабатывает приложение, которое хранит какие-то данные, не стоит спешить использовать самое последнее NoSQL-решение, только потому, что это модно. В большинстве случаев подойдет обычная SQL база-данных (MySQL, PostrgreSQL, SQLite) с большим объемом документации, стандартизированными подходами, описанными и давно решенными проблемами.

Напоследок:
• Всегда тестируйте свой код, в идеале, пишите автоматизированные тесты;
• Делайте бэкапы данных, в том числе, систему контроля версий кода;
• Не выкладывайте новый код на продакшн-сервер в пятницу вечером, потому что есть вероятность, что придется провести выходные, исправляя ошибки.

Александр Донсков , системный архитектор REG.RU

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

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

Многие начинающие разработчики используют технику copy-paste. Мы живем в прекрасное время, где любая проблема может решиться за несколько секунд с помощью поисковика. Но не стоит этим злоупотреблять. Бездумное копирование решений со stackoverflow не только не добавит в вашу копилку опыта, но и может что-то сломать в проекте. После того, как вы нашли проблему, постарайтесь ее решить с помощью документации, если это не получается сделать за вменяемый срок, то уже можно обращаться за помощью к великому Google. После того, как было найдено решение, необходимо понять, как оно работает, и только после этого, можно использовать его в коде.

Бывают ошибки с использованием неподходящих инструментов. Многие джуниоры, не успев дописать свой первый hello world, уже бегут осваивать новые технологии и прорывы в мире ПО,при этом не желая изучать фундаментальные вещи, которые являются основой всего современного стека технологий и кардинально не меняются десятилетиями. Как следствие появляется несколько значительных проблем:

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

Непонимание, где, как, а главное зачем использовать ту или иную технологию или инструмент, негативно сказывается на качестве кода и проекта в целом.

Приверженность к одному конкретному языку/технологии/OS/IDE и попытки навязать их другим (евангелизм), тоже часто говорит о том, что человек не понимает или не может объективно сравнить тот или иной инструмент для решении конкретной задачи.

Знать C или Ассемблер в совершенстве не обязательно, но знать, какие бывают протоколы, как они работают, иметь базовые представления о фундаментальных технологиях необходимо любому разработчику. Уже отталкиваясь от этих знаний, можно понять, в чем именно состоит проблема и как и чем ее можно решить.

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

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

9 ошибок начинающего веб-разработчика

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

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

Использование старого HTML

Ошибка: На заре интернета было куда меньше возможностей по оформлению страниц, чем сегодня. Но старые привычки трудно изжить, и многие разработчики всё ещё пишут на HTML так, словно они застряли в 1990-х. Например, используют

для создания макета страницы; применяют или

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

Последствия: Использование HTML десятилетней «свежести» может привести к излишнему усложнению разметки страницы и, как следствие, к непредсказуемости её отображения в разных браузерах. И далеко не только в Internet Explorer.

Как избежать: Для начала перестаньте использовать

для создания структуры страницы и применяете его только для вывода табличных данных. Ознакомьтесь с более современными инструментами. Используйте HTML для описания самого контента, а не способов его отображения. А для корректного отображения применяйте CSS.

«У меня в браузере всё работает»

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

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

Как избежать: Конечно, тестировать свой сайт во всех существующих браузерах и их версиях было бы пыткой. Но нужно хотя бы периодически проверять, как ваш сайт выглядит в некоторых наиболее популярных браузерах. Сегодня для этого есть бесплатные инструменты: виртуальные машины, сканеры сайтов. Например, с помощью http://browsershots.org/ или https://www.browserstack.com/ можно сделать снэпшоты того, как будет рендериться конкретная страница на всевозможных платформах. Работая с CSS, убедитесь, что «сбросили» все значения по умолчанию.

Кстати, если вы используете какие-то специфические CSS-решения, заточенные под конкретные браузеры, то обратите внимание на характерные для разных вендоров префиксы вроде -webkit-, -moz- или -ms-. Чтобы быть в курсе текущих тенденций, можете изучить эти ссылки:

Там описывается, почему стоит отойти от использования подобных префиксов. Практические рекомендации, как работать без префиксов, можно найти здесь: http://davidwalsh.name/goodbye-vendor-prefixes.

Плохие формы ввода

Ошибка: Предложить пользователям ввести какие-то данные (особенно в текстовые поля) и ожидать, что они введут их именно в том виде, в каком нужно.

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

Как избежать: Во-первых, удостоверьтесь, что вы безошибочно донесли до пользователей, какая именно информация вам от них нужна. Если вы просите ввести «адрес», то уточните, какой: рабочий, домашний, электронный? Чтобы дополнительно подстраховаться, используйте проверку корректности вводимых данных. Неважно, как это будет сделано на стороне браузера, главное, чтобы на сервере были уже проверенные данные. Никогда не используйте сцепленные T-SQL выражения для работы с полученными от пользователей данными без подтверждения корректности по каждому полю ввода.

Слишком большие ответы на сетевые запросы

Ошибка: Страница, заполненная многочисленными изображениями в высоком разрешении, уменьшенными с помощь атрибутов высота и ширины тэга . Слишком большие CSS- и JS-файлы, залинкованные со страницы. Излишне сложный и громоздкий исходный HTML-код.

Последствия: Если ваша страница слишком долго грузится/отображается, то это может заставить многих пользователей не дождаться завершения и закрыть вкладку или нетерпеливо обновлять страницу. Иногда излишне долгое ожидание загрузки может привести к возникновению ошибок.

Как избежать: Не думайте, что раз интернет из года в год становится быстрее, то это оправдывает раздувание размеров страниц. Вместо этого оптимизируйте свои проекты ради ускорения обмена сетевыми пакетами. Основная причина, по которой страницы становятся «тяжёлыми», — изображения. Чтобы минимизировать их влияние:

  1. Спросите себя, действительно ли необходима вся используемая вами графика? Откажитесь от ненужных графических украшательств. Можно воспользоваться сетевыми инструментами, чтобы определить, какие изображения нуждаются в дополнительном сжатии.
  2. Уменьшите размер изображений. Например, с помощью Shrink O’Matic или RIOT.
  3. Используйте предзагрузку. Это не ускорит первичную загрузку, но зато даст преимущество при просмотре других страниц сайта. Подробности можно почерпнуть из статьи: https://perishablepress.com/3-ways-preload-. avascript-ajax/

Миницифируйте залинкованные CSS- и JS-файлы. Для этого есть множество инструментов, например, Minify CSS и Minify JS.

И наконец, старайтесь использовать наиболее современную версию HTML и внимательно используйте тэги и

H Несколько советов начинающим веб-разработчикам в черновиках Recovery Mode

.collapse»>Содержание

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

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

Viewport

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

Не когда вы сверстали десктопную версию сайта и собрались начать адаптировать. Ни, боже упаси, после того как сделали адаптивную верстку. Всегда перед началом верстки. Перед!

Шрифты

Шрифты всегда была и будет моя самая нелюбимая часть верстки. Их нужно правильно подключить, правильно настроить и это на первых этапах вызывает головную боль(хотя казалось бы, в чем могут быть проблемы). Дальше по пунктам.

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

Второе. Не используйте Google Fonts как единственный способ подключения шрифта. Так же загружайте шрифт в директорию проекта и подключайте локально. Если вы сделаете это, то когда вы решите поверстать на компьютере на котором нет интернета у вас, хотя бы, не возникнет вопрос, почему у меня перестал работать шрифт.

Третье. Используйте Google Fonts (это не реклама, это реально удобно).

Четвертое. Используйте сервис Font2Web. Он практически полностью искореняет возможные проблемы с подключением шрифта.


Пиксель перфект верстка и динамичные сайты

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

А еще следует помнить, что все элементы на сайте динамические. Например, если вы верстаете страницу с записями блога, а в дизайне на этой странице только 4 поста с короткими заголовками длиной в 10 символов, то нужно помнить, что страница должна хорошо отображаться и если постов будет и 10, и 30. И так же хорошо должен отображаться заголовок состоящий из 10, 20, 40 символов, а не только из 10. И из-за роста количества символов в заголовке не должна плыть верстка.

Используйте Stack Overflow

Странно звучит для некоторых, но все же. Когда начинаешь постигать веб-разработку ты ещё не знаешь о куче крутых штук и сервисов помогающих в работе. И одна из самых важных и первых вещей для разработчика, это научиться пользоваться сервисом stack overflow. Для тех кто не знает, это сервис для разработчиков, где можно задать свой вопрос и получить ответ от других программистов. Так же база вопросов и ответов хранится, поэтому прежде чем задавать вопрос всегда необходимо проверить, может кто-нибудь уже задавал его ранее. Для тех кто плохо дружит с английским есть русская версия сайта(база вопросов/ответов там по-меньше, но так же отлично развивается).

Учитесь постепенно!

Это действительно важно. Много начинающих разработчиков на первых порах обучения очень сильно метаются между технологиями. Сегодня хочу учить html, завтра попробую jquery, потом попробую boostrap, на следующий день php, а может react выучить попробовать?

Пожалуйста, успокойтесь. Даже если ваша цель в итоге стать офигенным back-end программистом на php в любом случае в начале выучите html и css. Когда он станет вам понятен попробуйте узнать азы javascipt. Даже если вы не планируете писать код на нем, javascript для веб-разработчика обязательный стандарт поэтому эти знания точно лишними не будут. И когда вы сможете быстро и без запинок на гугленье сделать так чтобы при клике на кнопочку «меню», меню появлялось и при повторном клике пропадало, смело можете переходить к php.

Ещё один совет касательно изучения javascript. Сейчас многие опытные программисты могут меня захейтить, но этот совет мне дал именно более опытный программист, когда я только начинал. Javascipt проще начинать учить с библиотек.

То есть совсем простые вещи необходимо уметь делать на нативном js, но если какие-то функции и методы типа JSON.stringify или Array.prototype даются с трудом, то можно повременить. Выучите jQuery, сделайте парочку самых простых сайтов с его использованием. Попробуйте Vue.js, попробуйте собрать на нем какое-нибудь веб-приложение. С каждой выученной библиотекой понимание js будет все лучше и лучше. А там вы и сами не заметите как вернетесь к более глубокому постижению нативного javacript.

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

10 навыков, которые нужно освоить, чтобы получить работу front-end разработчика

Если вы хотите сменить свою специальность, чтобы получить новую, более высокооплачиваемую работу, сфера IT и front end подходят для этого как нельзя лучше.

Ключевые преимущества: высокая оплата, творческая работа и гибкий график. Но есть целый ряд и других причин, по которым сфера IT является привлекательным вариантом.

Сейчас я хочу сосредоточиться на front-end разработке. Если говорить обобщенно, front-end разработчики пишут сайты, используя HTML , CSS и JavaScript . Они же реализуют готовый дизайн на сайте.

Быстрый обзор текущих вакансий для front-end разработчиков показывает, что существует четкий набор навыков, которые указывают работодатели. Например, списки требований первых трех вакансий для front-end разработчиков, которые я нашел на Glassdoor.com , во многом идентичны: знания HTML , CSS и Javascript , контроль версий, фреймворки.

Это термины, с которыми вы познакомитесь, когда начнете изучать front-end разработку. Ниже приводится список 10 основных навыков, необходимых каждому front-end разработчику.

1. HTML / CSS

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

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

2. JavaScript / jQuery

Еще одним основным инструментом в арсенале начинающего front end разработчика должен стать JavaScript ( JS ). Если HTML — это язык разметки, а CSS — язык стилей, то JS — это язык программирования. Если HTML и CSS определяют представление страницы, JS определяет ее функционал.

Для простых сайтов или веб-страниц достаточно будет HTML/CSS . Но для интерактивных функций ( аудио и видео, игры, прокрутка, анимация страниц ) понадобится JS .

Одна интересная вещь, которую следует знать о JS — это наличие библиотек, таких как jQuery . Библиотеки — это коллекции плагинов и расширений, которые позволяют проще и быстрее использовать JS на сайте.

JQuery принимает общие задачи, для реализации которых требуется несколько строк JS-кода , и сжимает их так, чтобы это можно было сделать с помощью одной строки.

3. CSS и JavaScript-фреймворки

CSS и JavaScript-фреймворки представляют собой наборы файлов CSS или JS , которые выполняют огромный объем работы, предоставляя базовый функционал. Например, формы регистрации на сайте или в блоге. Вместо того чтобы начинать с чистого документа, вы начинаете с файла, в котором уже есть общий JS-код .

Front end разработка и что это сложно свидетельствует тот факт, что у фреймворков есть свои сильные и слабые стороны. Например, некоторые JS-фреймворки отлично подходят для создания сложных пользовательских интерфейсов, а другие — для отображения содержимого сайта.

Чтобы еще больше все упростить, можно использовать фреймворки совместно. Обычно используется пара Bootstrap с другим JavaScript-фреймворком , таким как AngularJS . Содержимое обрабатывает Angular , а внешний вид — Bootstrap ( с некоторым изменениями в CSS ).

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

4. Препроцессинг CSS

Одним из ограничений CSS является тот факт, что вы не можете определять переменные, функции или выполнять арифметические операции. Подобно CSS ( и JS ) фреймворкам, препроцессинг CSS — это еще один способ сделать вашу жизнь более простой.

Используя препроцессоры CSS , такие как Sass , LESS или Stylus , можно писать код на языке препроцессора, доверяя ему делать то, что может занять много времени при использовании CSS . Затем препроцессор преобразует код в CSS , чтобы он работал на сайте.

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

5. Контроль версий / Git

После написания кода HTML , CSS и программирования на JS front end web developer должен будет произвести ревизию проделанной работы. Если что-то пошло не так, последнее, что вам захочется, это начинать все с начала. Контроль версий — это процесс отслеживания и контроля изменений в исходном коде.

Программное обеспечение для управления версиями, такое как Open Source Stalwart Git — это инструмент для отслеживания изменений, чтобы иметь возможность вернуться к предыдущей версии и выяснить, что пошло не так.

6. Адаптивный дизайн

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

Адаптивный дизайн является неотъемлемой частью фреймворков CSS , таких как упомянутый выше Bootstrap .

7. Тестирование / отладка

Чтобы заставить все работать надлежащим образом, нужно тестировать код на наличие ошибок. Поэтому навыки тестирования и отладки являются обязательными для front-end разработчиков.

Существует несколько различных методов тестирования. Функциональное тестирование проверяет конкретный функционал сайта ( например, форму или базу данных ).

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

Тестирование — важная часть процесса разработки front end на Java . Но это еще одна область, для которой существуют различные фреймворки, которые помогут вам. Такие программы, как Mocha и Jasmine , предназначены для ускорения и упрощения процесса тестирования.

8. Инструменты браузера для разработчиков

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

Встроенные в современные браузеры инструменты для разработчиков обычно состоят из инспектора и консоли JavaScript . Инспектор позволяет увидеть, как выглядит HTML-код на странице, какой CSS связан с конкретным элементом на странице. А также позволяет редактировать HTML и CSS , просматривать произошедшие изменения в режиме реального времени.

Консоль JS позволяет просматривать ошибки, возникающие при попытке браузера выполнить JS-код .

9. Инструменты для построения и автоматизации / производительности

Производительность сайта зависит от количества времени, которое требуется для его загрузки. Если при front end программировании возникли проблемы со временем выполнения, необходимо предпринять шаги для их решения. Например, оптимизация изображений ( масштабирование и сжатие изображений для максимальной производительности ), минимизация CSS и JavaScript ( удаление ненужных символов из кода без изменения функционала ).

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

10. Командная строка

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

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

Даже если большая часть работы front end web developer выполняет через графический интерфейс, он может получить серьезное преимущество в глазах потенциального работодателя, если будет владеть навыком работы с командной строкой.

Не останавливайтесь в совершенствовании своих профессиональных навыков!

Данная публикация представляет собой перевод статьи « 10 Skills You Need to Land Your First Front End Developer Job » , подготовленной дружной командой проекта Интернет-технологии.ру

18 ошибок. Начинающему веб-дизайнеру

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

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

Что сподвигло на написание этой статьи? Дело в том, что часто читатели присылают письма с вопросами, и просьбой посмотреть тот или иной макет, который они разработали подсказать какие-то мелочи, которые обычным делом допускаются новичками.

Хочется быть полезным и по возможности подсказать, но зачастую банально не хватает на все времени. Да и ошибки в основном одни и те же, как не странно. Поэтому я и решил написать эту статью, чтобы рассказать о ряде ошибок.

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

Одна стилистика на всем макете. Это очень распространенная ошибка новичков веб-дизайна, стремясь сделать красивый дизайн, порой забывают о стилистике и в итоге смешивают всевозможные стили. В итоге получается, что в одном месте кнопка глянцевая в другом flat, тоже самое с иконками и другими блоками. А этого желательно не допускать, а соблюдать единый стиль, оформления блоков, кнопок, элементов, шрифтов.

Использование неправильного цветового профиля. Создавая макет сайта, начинающий веб-дизайнер часто забывает установить цветовой профиль на sRGB, оставляя его просто RGB в фотошопе это AdobeRGB. В итоге после того как макет создан и в дальнейшем происходит его верстка и сохранение некоторых элементов «сохранить для web и устройств» у нас искажаются цвета. Дело в том, что AdobeRGB обладает наиболее широким диапазоном цветов по сравнению с sRGB который в свою очередь наилучшим образом подходит для подготовки изображений под web, но обладает меньшим диапазоном цветов, чем AdobeRGB. sRGB позволяет одинаково отображать изображения на большинстве устройств.

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

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

Не используется модульная сетка. Наверное, 90% начинающих веб-дизайнеров, если не больше не используют модульную сетку при разработке дизайн макетов сайтов. А зря, так как модульная сетка это очень удобный, полезный инструмент для веб-дизайнера. Чем она полезна, расписано в статье о модульной сетке.

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

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

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

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

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

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

Уделяйте внимание деталям. Внимание к деталям делает макет более привлекательным. Зачастую бывает, плывут пиксели, вылезают лесенки на границах переходов, обтравка у фотографий плохая (остался контур), тени грязные, неправильные тени и тому подобное.

Создавайте элементы дизайна (иконки, кнопки, тизеры и т.д.) сами. Разрабатывая такие элементы, вы набиваете руку и придаете большую уникальность дизайну. Конечно, бывают случаи, когда нет смысла изобретать велосипед, но в большинстве своем учитесь рисовать элементы дизайна сами.

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

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

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

Знание стилей слоя, которые легко создаются средствами css. Уделите немного времени изучению css3 и вы поймете какие стили слоя с легкостью можно сделать через css, а какие нет. Используйте эти знания на благо своих макетов.

Если у кого есть дополнения по поводу статьи, дополняйте в комментариях.

10 распространенных ошибок, которые совершают веб-разработчики

Дата публикации: 2015-09-14

От автора: существует бесконечное количество способов решить одну и ту же задачу – разработать сайт, который будет отлично работать в сегодняшнем современном интернете. Разработчики стоят перед выбором веб-хостинга, на чем писать HTML, CSS и JavaScript, какой дизайн использовать, а также какие JavaScript библиотеки/фреймворки подключить. После того, как вы сузили круг используемого инструментария, в сети можно найти кучу статей, форумов и шаблонов, которые помогут улучшить ваш сайт. И в независимости от того, какой путь был выбран, все разработчики ошибаются. Некоторые проблемы весьма специфичны, а другие имеют общий характер для всех веб-разработчиков. Итак, с помощью исследований, полученного опыта и последних наблюдений я хочу поделиться своим списком десяти общих ошибок, которые допускают веб-разработчики – и как их избегать.

1. Использование устаревшего HTML

Ошибка: Раньше в интернете было намного меньше решений по разметке, чем сейчас. Тем не менее, до сих пор олдфаги со своими старыми привычками и многие другие все еще пишут на HTML 20-го века. Пример – использование table для разметки макета, использование span или div там, где подойдут более семантические элементы, или теги, которые вообще исключены из стандарта типа center или font. Распространенная ошибка применение для добавления множественных отступов.

Последствия: HTML 10-ли летней давности может сильно усложнить разметку, и она будет вести себя противоречиво в разных браузерах. Это касается и последней версии браузера от Microsoft Edge и даже последних версий IE (11, 10, 9).

Как избегать: Прекратите использовать table для разметки контента и таблиц. Познакомьтесь, наконец, с передовыми тегами, как на whatwg.org. Используйте HTML для описания контента, а не для того, как это будет отображаться. Для отображения контента используйте CSS ( http://www.w3.org/Style/CSS/).

2. «В моем браузере все работает…»

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Как избегать: Тестировать сайт во всех браузерах и версиях во время разработки не очень практично. Но можно установить временные промежутки для проверки сайта во всех браузерах. Сейчас существует множество бесплатных сервисов для проверки: бесплатный VMs, сканеры сайтов. Сайты типа http://browsershots.org/ или https://www.browserstack.com показывают скриншот того, как определенная страница отрисовывается в различных браузерах/версиях/платформах. Инструменты как Visual Studio могут эмулировать работу некоторых браузеров при отображении страниц. При проектировании в CSS нужно сбросить все стили как на meyerweb.com.

Если вы используете определенные свойства CSS не поддерживающиеся в отдельных браузерах, не забудьте про вендорные префиксы -webkit-, -moz-, или -ms-. В качестве рекомендаций можно изучить пару ссылок, думаю оно того стоит:

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


3. Неправильные формы

Ошибка: Создание подсказок для всех полей формы (особенно для текстовых) и предположение, что пользователь введет то, что вы ожидаете.

Последствия: Все может пойти (и, скорее всего, пойдет) наперекосяк, если через чур доверять пользователю. Страницы могут упасть, если передать неверный тип данных или передать пустое поле. Еще более серьезной проблемой является умышленный взлом баз данных, возможно, через инъекции (см OWASP: Топ 10 2013-А1-инъекций).

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

4. Слишком долгое ожидание ответа от сервера

Ошибка: На странице полно графики в высоком разрешении, уменьшенной с помощью атрибутов width и height. Файлы CSS и JavaScript много весят. Исходный HTML код также излишне сложен и частично ненужнен.

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

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

Спросите себя «Мне действительно нужны все изображения?». Если нет, удалите ненужные. Можно просканировать сайт, чтобы узнать, какие изображения можно сжать.

Минимизируйте размер изображений с помощью инструментов Shrink O’Matic или RIOT.

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

Перед тем, как продолжить, хочу посоветовать вам, следить за новинками в HTML (см ошибку №1) и не забывайте про здравый смысл при использовании тегов style или script в верстке.

5. Написание кода, который «должен» работать

Ошибка: Будь то JavaScript код или серверный код, разработчик тестировал его на стадии разработки. Он проверил код и думает, что тот будет работать так же, после запуска сайта.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Как избегать: Человеку свойственно ошибаться, это нужно помнить и в программировании. Старайтесь с помощью JavaScript отлавливать ошибки. Хоть в статье и рассматривается JavaScript для приложений Windows, большинство тем также относятся и к веб-разработке, и тут много полезных советов! Еще один из способов создать надежный код, который можно будет легко модифицировать в будущем, это модульное тестирование.

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

6. Написание слишком обширного кода

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

Последствия: По мере появления новых версий браузеров, обслуживание и управление файлами кода становится громоздким и неудобным. Как и с ошибкой №1, это больше не нужно.

Как избегать: Используйте функцию обнаружения (техника Feature detection) в коде, а не обнаружение браузера/версии. Эта техника не только поможет радикально сократить ваш код, его станет намного легче читать и обслуживать. Библиотека Modernizr не только помогает с функцией обнаружения, но также автоматически делает фоллбэк старых версий браузеров, которые не поддерживают HTML5 или CSS3.

7. Неадаптивный дизайн

Ошибка: Предполагать, что у пользователя такой же размер монитора, как у разработчика или дизайнера.

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

Как избегать: Мыслите адаптивно. Применяйте адаптивный дизайн для вашего сайта. Очень популярная библиотека, когда дело касается адаптивного дизайна Bootstrap.

8. Создание бессмысленных страниц

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

Последствия: Страницы не видны поисковикам, а значит, имеют очень низкую посещаемость. Текст на странице может быть очень мелким для людей с ослабленным зрением.

Как избегать: Используйте SEO (search engine optimizations) и всевозможные инструменты в HTML для повышения доступности страницы. Не забудьте добавить ключевые слова и описание. Все это отлично пояснено на About Tech. Для еще большей доступности используйте атрибут alt=»описание изображения» для каждого тега img или area. Конечно, это не все, и еще много можно прочесть на About Tech. Также совместимость веб-страниц с Section 508 можно проверить на сайте Cynthia Says.

9. Создание неинтерактивных сайтов

Ошибка: Создание сайта, на котором каждое взаимодействие требует полного обновления страницы.

Последствия: Похожи с проблемой №4, страдает производительность страницы. У пользователя терпение не бесконечное, и с каждым обновлением страницы оно уменьшается.

Как избегать: Нужно проверить, действительно ли нужно напрягать сервер при каждом взаимодействии. Например, можно использовать скрипт на стороне клиента. Также можно воспользоваться AJAX или пойти еще дальше и использовать одностраничные сайты «SPA». Существуют JavaScript библиотеки/фреймворки, облегчающие работу с интерактивными элементами, как JQuery, KnockoutJS, и AngularJS.

10. Работать слишком много

Ошибка: Разработчик тратит слишком много времени на создание контента. Много времени уходит на повторяющиеся задачи или на набор кода.

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

Как избегать: Посмотрите, что вы можете сделать. Решите, может, стоит заменить ПО или сменить подход для каждого этапа разработки. К примеру, какой текстовый редактор вы используете по сравнению с Sublime Text или Visual Studio? В независимости от того, какой редактор вы используете, вы точно хорошо его изучили? Может, стоит потратить немного времени на штудирование документации, и вы найдете способ сэкономить пару часов. Например, как расширение к Visual Studio может увеличить производительность веб-разработчиков в этой статье.

Посмотрите в интернете, может быть есть другие инструменты, которые могут вам помочь! Например, поищите на сайте dev.modern.ie (по всем платформам и устройствам).

Автоматизация процессов также поможет снизить время на разработку и уменьшить количество ошибок. Примером может послужить Grunt, таск раннер, который может автоматизировать такие вещи, как минификация файлов (см ошибку №4). Другой пример — Bower, поможет управлять библиотеками/фреймворками (см ошибку №9).

А как насчет самого сервера? С помощью таких сервисов как Microsoft Azure Web Apps можно быстро создавать виртуальные сайты любым способом, что облегчит ваш бизнес!

Обобщение

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

Автор: Michael Palermo

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Как развиваться начинающему web-разработчику?

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

Живой пример: Есть толковый фронтендер(или бекендер по JS) пишет морду сайта на JS Фреймворке. Есть гуру бэкенда пишет API сайта. В случае с фулстаком(образно) он пишет обе задачи сам, но заведомо понятно, что он пишет это дольше и не факт что по последнему слову будет сделано.

Что нужно для развития дальше:
— Читайте блоги зарубежных программистов, они делают отличные архитектуры как в самом коде, так и решения в DB.
— Фреймворки PHP и JS — чем больше их будет тем лучше. Все они ускоряют разработку. Все чаты, соц авторизации, регистрации,и прочие первоочередные задачи давно уже написаны. Вы можете концентрироваться на более важных задачах.
— ООП тут очень спорный вопрос, на определенных этапах разработки оно решает, но когда этот уровень появляется, чаще всего прибегают к другому языку программирования и переписывают проект в угоду скорости (С++, Java, Python). Понимать нужно, поскольку фреймворки построены на этих парадигмах, но самостоятельно придумывать вам гибкие решения вряд ли придется(по крайней мере до Senior-а точно).
— Не изобретайте велосипеды. Разбирайтесь в чужом коде(Этот навык очень ценен после «решить/найти решение любую задачу»). Любой магазин чаще всего будет написан в лучшем случае на фреймворке, в худшем на OpenCart, Woedpress — что просто идиотизм, это блоговая система БЛОГОВАЯ. из за тренда выкручивают яйца.
— Учить английский и работать не на СНГ, Укр или места постсоветского пространства. Искать фирмы зарубежных филиалов и работать там. Поскольку так или иначе там уже работают профессионалы и знакомы с западным рынком, европейским. Там пишутся интересные проекты и появляются интересные решения.

GrIZZIy: Я сам окончил институт по специальности автоматизации, а это хоть и программирование, но не проф курс ИТ специалиста и все же, даже заграницей инженерно-айтишная специальность открывает возможности, поскольку вы можете работать как инженер и как программист(это проверено мной). По поводу курсов. Конечно это индивидуально, но курсы вам не нужны(если вы уже разобрались как работает веб и пишете модули под них, что то сверх нового они не откроют), большинство из них пересказывают документацию. А нужен человек наставник, который объяснить тонкости — коллега на уровень выше, это то что нужно будет. Мне самому не жалко было бы денег за хорошие курсы, но таких увы нету. А отдавать 300-800$ за то что я и сам могу найти, ну я бы не стал =) Большая часть либо объясняет основы, либо скидывает уж совсем устаревший материал.

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

> А нужен человек наставник, который объяснить тонкости — коллега на уровень выше, это то что нужно будет.

Согласен с коллегой. Книг, курсов, вебинаров в инете — море. Но вся сложность — построить последовательность «теория\практика», что крайне трудно без наставника.
Вопрос в том, что где найти наставника, когда ты еще не работаешь и кому ты в принципе нужен?
Если поставить себя на место наставника, то возникает вопрос: а зачем мне тратить время на незнакомого пацанчика, который ничего не знает?
Но я бы ответил так, что обучая мы сами обучаемся. Проверено многими преподавателями — когда начинаешь обучать, понимаешь, что сам то почти ничего и не знаешь.
Вывод: обучать полезно как обучаемому, так и обучающему.

Artem Gapchenko: это из за разности контор и заказчиков. Многие фирмы и так имеют у себя штатных программистов и фирме нужно, что бы продукт был написан на определенных технологиях, потому что так будет проще поддерживать и развивать непосредственно силами заказчика.

Говнокода у всех хватает, от индусов до самых дорогих спецов из японии.

Послушай человека, у которого 4 года опыта управления веб-студией.

Тебе нужно в первую очередь понять, где ты хочешь работать и только потом уже думать о технологиях и их прокачке. Когда ты узнаешь, где ты хочешь работать, над какими проектами, то узнаешь и какие технологии там используются. Потом устраивайся туда junior’ом и так вырастешь быстрее всего.
Заодно, посмотришь, надо ли тебе оно и может тебе идти в другую область с другими технологиями.

Помимо программистских советов есть еще чисто практичные и зачастую они решают, например, ты любишь делать законченный продукт или ковыряться в старом коде? Все эти басни и бредни про фреймворки, пойми, эти люди, которые до тебя писали код на твоей будущей работе, мозгами намного хуже тех же программистов, которые создали тот же WordPress, зато они позволяют себе хаять его. Так вот ты придешь и будешь за таким человеком искать ЕГО баги 4-х летней давности. А представь, что баги эти от кривой архитектуры.

Далее, опять про фреймворки, сами по себе они тоже глючат, там есть куча нюансов, ускоряют разработку они далеко не всегда, как писали на хабре «это фабрика над фабрикой».

Поэтому, в чем лучше кодить: в wordpress или в каком-нибудь symfony — это вопрос спорный, холиварный. Ни то ни другое не идеальное. Соответственно, какой стек технологий тебе учить, выбирать нужно отталкиваясь от того, чем хочешь заниматься. А учить стек лучше не на курсах, а идти джуниором.

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

Потом, не забывай еще главное, мы живем в стране, где даже автомобиль нормальный сделать не могут, качество разработки здесь абсолютно такое же, то есть никакое, люди они одинаковые, что в АВТОВАЗЕ, что в Яндексе, поэтому на весь этот флёр вокруг каких-то там разработчиков клади болт.

Я тебе расскажу, как это работает с точки зрения бизнеса в России, а не со стороны парняги в свитере и очёчках:
1) Есть богатый дядя, который наворовал в своё время денег, у него есть сын, сын начитался хабра и бизнес молодости, взял у бати своего миллионов 50-100 и пошел пилить абсолютно никому не нужный стартап, нанял 30 человек, поставил компы, вот сюда нужно знать не столько сами технологии, сколько МОДНЫЕ технологии, смотришь модные тренды и их учишь или просишься джуниором, вауаля, и вот ты в струе.
Делали делали, сыночке надоело пилить стартап, у него пати на мальдивах, свадьба, дети и тд — все разбежались.
2) Есть государство или крупная контора, которая так или иначе, принадлежит кому-то из власть имущих, им нужно какой-то проект, они этот проект отдают фирме (то есть сыну, брату, свату), у которой сайт визитка. Эта фирма отдаёт это другой фирме, та отдает это еще двум-пяти фирмам. Где-то там в конце сидишь ты за компом и делаешь то, что тебе написали в ТЗ. Чтобы тебе что-то изменить в этом ТЗ, это должно пройти через 8 ртов и кучу согласований, и ты вообще лучше сиди и поменьше высовывайся. В таких конторах будешь пилить и пилить какую-нибудь хрень, в которой уже запутались все вокруг, но ты как-то делай, ведь скоро сдача. А потом они за два дня до сдачи, всей аравой посредников и программистов собираются в одном месте и наконец-то звонят главному заказчику и спрашивают, а как надо делать, то есть то, что ты спрашивал месяц назад. Иногда этот брейншторм помогает, иногда нет. Как туда устроиться? Опять таки, иди джуном.
Примечательно, что качество продукта таких контор обычно хуже самой захудалой Джумлы, зато там все хаят CMS, но чтобы им в продукте прикрутить голосовалку, им нужно напрячь 8 ртов, распилить бюджет в тысяч 180-400, через кучу согласований сделать всё через жопу, но через ООП и какую-нибудь Symfony. Круто.
3) Компании типа Яндекса, каких-нибудь банков. В таких компаниях обычно умные люди только на самом верху — это основатели компании, усмотреть за всеми аспектами фирмы им технически невозможно, поэтому часть продукта у них хорошая, основная, например, как поиск у гугла, а 90% других сервисов полное говно (посмотрите, что сделали эти «умы» из яндекса, вроде, с кинопоиском). Зато ЧСВ у каждого там Васи на уровне основателя компании. Вот эти Васи и делают там 90% продуктов, которые, как-бы второстепенны. Чтобы туда попасть надо не технологии учить, а изучать тренды какого-нибудь хабра, что там сейчас ценятся, какие авторы зарубежные: «Мега алгоритмическое программирование Алана Коуэла» и тд, таких книжек прочитать штук 10, выучить всё азы чистого программирования без фреймворков, одеться как мудак, чтобы выглядеть еще мудачее того гика, который тебя будет собеседовать, а то они ранимые и завистливые и опять таки, устроиться джуном.
4) Компании локальные по созданию сайтов и прочего программирования. В таких фирмах свободы намного больше, чем в первых трёх, но нет столько денег, зато сразу видно продукт, который делаешь. Тут тебе пригодится и вордпресс и битрикс. Туда тоже лучше идти джуном. В таких компаниях шанс того, что ты потом запустишь боком собственный проект намного выше, т.к. у тебя будет опыт создания веб-сервисов, сайтов за Реальные сроки и ты будешь видеть ход их развития. Но с точки зрения денег, редкий случай, когда они тебе могут предложить даже столько, сколько в стартапе.
Поэтому, если для души программировать, получать удовольствие, то варианты 1 и 4. Если хочется работы, от которой многие воют, то 2, 3.

5) Есть еще компании, которые работают на запад, денег сейчас там в теории, может быть столько же, сколько и в стартапе у богатого буратино, там тебе сильно повезет, если будете делать пункт 4, если 2-3, то можешь брать веревку и мыло.
Стартапы таким компаниям дают мало когда, ведь хипстеру миллионеру нужна атмосфера, нужны работнички перед глазами, а не на аутсорце. А вот латать баги в 6 летнем коде по цене продавщицы в ларьке Нью-Йорка — это запросто, это аутсорц. Текучка в таких местах дикая, поэтому они, отчаявшись, ищут негров за рубежом, никто вменяемый этим заниматься не хочет у них на родине. Поэтому если на аутсорце будет создание сайтов или каких-нибудь новых систем, это большая удача.
Туда тоже нужно идти джуниором. Еще они почти всегда требуют английский, а если у тебя есть английский, зачем тебе они?

6) Учишь английский, вордпресс, джумлу, магенто, цсс и идешь искать клиентов на английском языке. Из тебя вылупляется фрилансер, в перспектике открываешь собственную контору номер 5.

Есть еще лайфхак, берешь абонемент в дорогой фитнес центр и знакомишься там с парнями, когда-нибудь тебе повезет и выйдешь на кого-нибудь богатого из чиновничков или олигаршьих родственников. Всем говори, что ты программист и у тебя есть «команда». Этого хватит, у богатых всегда «куча идей» куда бы просрать бабки (стартап) или наоборот где-то «намутить денег» (пункт 2). Они тебе сами предложат «тему», если ты обмолвишься, что ты программист. Всё, что у тебя будет к тому моменту, это сайт визитка, понимаешь к чему я клоню? Пункт 2, но ты будешь сверху, вторым ртом. Если повезет, будет и пункт 1, но ты будешь ко-фаундерем, ты посмотришь модные технологии и будешь под смузи составлять вакансии с reactJS, Angular, high load и еще кучу умных слов. А на биржах заказы пусть обычные люди ищут, которые за деревьями леса не видят. Или идут через жопу в пункт 2, когда надо заходить с другой стороны. Think different.
Тот, кто на основании выше написанного лайфхака понял, что он ходил по кругу, а ключик в другом месте открывается, может мне скинуть денег за совет на кошелек R738086405346
Точнее, это даже не совет, это инструкция, которая действительно рабочая.

Почему веб-разработчик в топе востребованных профессий и как им стать

Интернет — это почти 3,5 миллиарда пользователей и свыше миллиарда сайтов. Стремительное развитие информационных технологий привело к появлению профессий, о которых 10 лет назад никто даже не думал. Верхние строчки в рейтингах самых востребованных и высокооплачиваемых IT-специальностей занимает профессия веб-разработчика.

Дефицит веб-разработчиков

В мире более 11 миллионов веб-разработчиков разного профиля и уровня. Однако, по данным CMS Magazine и «Рейтинга Рунета», 62% компаний и веб-студий остро ощущают нехватку кадров. Вот как они ответили на вопрос о дефиците сотрудников в сфере веб-разработки.

На сегодняшний день только четверть всех веб-студий устраивает количество их штатных сотрудников. Получается, программистов много, но всё равно не хватает. Почему?

  • 15,9% работодателей считают, что уровень образования потенциальных сотрудников не соответствует требованиям рынка (нет достойного портфолио, отсутствует опыт командной работы).
  • 15% компаний полагают, что на рынке в принципе мало квалифицированных веб-программистов, способных разрабатывать сложные проекты (особенно в регионах).
  • 7,3% компаний замечают, что многие специалисты веб-разработки предпочитают фриланс работе в штате.
  • 6,3% веб-студий полагают, что сотрудничества не получается из-за несовпадения зарплатных ожиданий соискателей с возможностями работодателей.

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

Взгляните, например, вот на этот график «Рейтинга Рунета».

Из статьи «Рынок веб-разработки остаётся рынком „ручного“ труда»

Разработчики-фрилансеры занимают довольно крупную нишу в дорогих проектах. Им достаётся 6% проектов стоимостью от 100 до 300 тысяч рублей и 8,3% проектов дороже 300 тысяч рублей.

Требуется веб-разработчик

Убедиться в востребованности профессии веб-программиста легко. Достаточно зайти на любой онлайн-сервис по трудоустройству.

Только в Москве почти полторы тысячи вакансий. Среди IT-компаний и веб-студий за хороших разработчиков идёт нешуточная борьба.

28,4% компаний ищут сотрудников с помощью job-ресурсов, 21,4% — через социальные сети и по рекомендациям, 16,2% признают достаточно эффективным раздел с вакансиями на собственном сайте и 12,7% хантят сотрудников «со школьной скамьи», то есть приглашают на стажировку талантливых студентов, отслеживают медалистов и олимпиадников, устраивают конкурсы для студентов и так далее.

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

Владимир Завертайлов, основатель и руководитель интернет-студии «Сибирикс»

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

Квалификация

Под веб-разработчиком работодатель обычно понимает универсального специалиста full-stack.

Full-stack состоит из front-end- и back-end-разработки. Разработчики front-end обеспечивают создание внешнего вида сайта (портала, проекта). Back-end-разработка включает в себя теневую сторону ресурса, то, чего не видно пользователю, изнанку сайта. Но, независимо от специализации, веб-программист должен знать полный цикл. Без этого невозможно представить, как тот кусок задачи, который ты реализуешь, будет интегрироваться с общим проектом.

На сегодняшний день стандартом веб-разработки (full-stack) является следующий комплекс знаний.

Вёрстка + браузерный язык программирования + серверный язык + язык для работы с базами данных + фреймворк(и).

Получить такой комплекс знаний можно на GeekBrains. Это образовательная площадка, где собраны лекции и вебинары для тех, кто хочет изучать программирование. Специализация «веб-разработчик» рассчитана на 11 месяцев (плюс стажировка) и состоит из нескольких курсов.

  1. HTML / CSS. Это основы создания сайтов. Обучение идёт через практику: студенты разрабатывают сайт интернет-магазина, изучая параллельно свойства и возможности HTML / CSS.
  2. JavaScript — первый и второй уровни. Этот язык программирования призван сделать сайт живым: он взаимодействует с посетителем ресурса, реагирует на движения курсора, клики мыши и нажатия на клавиши. В первом курсе по JavaScript даются азы, во втором полученные знания закрепляются.
  3. Основы баз данных. Это 20 интенсивных видеоуроков о системах хранения и обработки данных, для доступа к которым используется язык SQL (Structured Query Language).
  4. PHP — первый и второй уровни. Этот язык программирования входит в тройку самых популярных. На первом уровне студенты изучают принципы объектно-ориентированного программирования и учатся правильно использовать основные конструкции языка. Второй уровень позволяет отточить владение PHP до виртуозности.
  5. HTML5 и CSS3. Эта связка даёт возможность верстать макеты, создавать и редактировать статические сайты. На курсе студенты проходят все этапы создания рекламного сайта для коммерческой организации.
  6. AngularJS / D3.js. Здесь студенты учатся работать с D3.js в симбиозе с мощнейшим фреймворком построения одностраничных веб-приложений Angular.js.
  7. Yii framework. Это один из самых популярных и востребованных фреймворков на PHP. На лекциях рассматривается базовый и продвинутый шаблоны приложения и разрабатывается аналог программы Evernote. В качестве домашнего задания студентам предлагается создать программу-календарь, которую впоследствии можно использовать в портфолио.


Полноценный кейс для портфолио можно составить во время двухмесячной стажировки от GeekBrains. На ней выпускники проходят весь путь от генерации идеи до реализации проекта и учатся взаимодействовать с командой. Также всегда есть шанс попасть на оплачиваемую стажировку с последующим трудоустройством в одну из компаний-партнёров GeekBrains или найти единомышленников для стартапа.

Сливки

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

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

Средняя зарплата веб-разработчика по стране — 60 310 рублей, в Москве — 75 270 рублей, в регионах — 46 790 рублей.

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

Как стать веб-разработчиком за 5 месяцев: пошаговое руководство

Содержание

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

Каждую секунду на свет появляется от 3 до 5 сайтов, а каждую минуту – 80 новых интернет-пользователей. Всё это технологическое «цунами» управляется разумом и руками веб-разработчиков. Зарплата вполне соответствует важности работы. Даже начинающие программисты на отечественном рынке могут рассчитывать получать от 50000 рублей в месяц.

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

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

Перед теми, кто решил освоить специальность веб-программиста самостоятельно, встаёт непростой выбор – с чего же правильно начать. Конечно, всегда существует возможность получить полноценное IT-образование в одном из ведущих технических ВУЗов, ранга МГУ им. М. Ломоносова, МГТУ им. Н. Баумана, СПбГУ, МФТИ и ИТМО. Но подобный курс обойдётся в круглую сумму от 60 до 350 тысяч рублей в год. Существует и более быстрый и дешёвый вариант стать веб-разработчиком «с нуля» – полугодовые онлайн-курсы, вроде российского Yandex.Практикума или зарубежного агрегатора «Курсера».

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

Прочему надо начать с фронтенда

Сразу оговоримся, в этой статье мы расскажем лишь об обучении одному из двух основных видов профессии веб-программиста – о фронтенд-разработке (от англ. frontend, т. е. «внешний интерфейс»). Эти специалисты занимаются созданием и настройкой программного обеспечения для интернет-ресурсов в части, непосредственно взаимодействующей с пользователями. Фронтенд-разработчик создаёт «лицо» сайта. Он отвечает за всё, что мы видим и чем пользуемся – от цвета и расположения кнопок, до работы скриптов и их взаимодействия с браузерами.

В отличие от своих коллег бэкенд-разработчиков, ответственных за «серверную» часть веб-ресурса, frontend developer должен иметь более широкий кругозор. Фронтенд знает не только как сверстать сайт, но и прекрасно понимает, что у него под серверным «капотом», разбирается в принципах адаптивной вёрстки, веб-дизайна, юзабилити и SEO-оптимизации, а также имеет навыки мобильной разработки. Такой мощный «коктейль» навыков даёт начинающему программисту более широкую область профессионального применения, что автоматически повышает его востребованность у работодателей.

Какими навыками полезно обладать фронтенд-разработчику

  • Активно интересоватьсяIT. А лучше, хотя бы на любительском уровне разбираться в современных интернет-технологиях.
  • Знать английский язык. Вся актуальная учебная литература и технические документации к IT-инструментарию изначально написана на нём. Английский — международный язык общения команд разработчиков из разных стран. Верный гугл-переводчик тут не спасёт.
  • Иметь навыки командной работы. Во-первых — это дисциплинирует. Во-вторых, в системе работы с версиями без этого умения никуда.
  • Обладать стрессоустойчивостью. Навык пригодиться, чтобы работать с многочисленными правками клиентов и оставаться хладнокровным при нахождении очередных багов.
  • Быть коммуникабельным. Успех в создании программного продукта часто зависит от умения нескольких работающих над ним специалистов находить общий язык.
  • Мыслить нестандартно. Пунктуальность, коммуникативность и умение анализировать информацию обязательны для хорошего программиста. Но, чтобы стать профессиональным веб-разработчиком, создающим прорывные веб-продукты, необходимо уметь выходить за рамки обыденного.

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

Месяц 1 — Изучаем HTML и CSS

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

Невозможно понять веб-разработку в отрыве от практики. Для того, чтобы получить минимально необходимый набор знаний по HTML и CSS, лучше всего воспользоваться одним из образовательных MOOC-сервисов, вроде HTML Academy, Нетология, Coursera, Code Academy или Codebra. Здесь можно одновременно получать теоретические знания и практически закреплять их на тестовых упражнениях. Первые занятия подобных курсов, содержащие необходимый для новичка минимум, обычно даются бесплатно. За более углублённые знания придётся заплатить.

Краткий веб-курс по созданию сайта от Code Academy научит азам HTML и CSS

Удобные по формату видеоуроки по основам HTML и CSS выложены в свободном доступе на сайте одного из крупнейших образовательных онлайн-ресурсов Khan Academy. Много полезной информации по спецификациям содержит англоязычный сайт Консорциума Всемирной паутины (W3C), отвечающего за разработку главных веб-стандартов.

Не стоит опасаться, что для изучения языков HTML и CSS обязательно понадобится сильная образовательная база. На начальном уровне, о котором и идет речь, достаточно знаний по математике, информатике и английскому, которые получает любой выпускник средней школы. Результатом первого месяца работы должно стать овладение базовым набором тегов и свойств таблиц стилей, позволяющим менять цвета, шрифты, размер и ориентацию элементов веб-страницы.

Месяц 2 — Изучаем сеточную систему Bootstrap

На данный момент Bootstrap – один наиболее популярных и удобных CSS-фреймворков. Этот инструмент позволяет создавать визуальный вид веб-страниц при помощи таблицы стилей (CSS). В недавнем прошлом эту нишу занимали десктопные визуальные HTML-редакторы от Microsoft (Sharepoint Designer) и Adobe (Dreamweawer).

Изначально Bootstrap (под именем Twitter Blueprint) создавался компанией Twitter для внутренних нужд. Позже он был выложен в общий доступ и дополнен всеми компонентами, необходимыми для работы полноценного WEB-фреймворка. Сегодня в Bootstrap содержатся не только готовые стили CSS, но и скрипты HTML и JavaScript, а также собственный иконочный шрифт. Удобно и то, что фреймворк можно скачивать не полностью, а только необходимые элементы.

Работа с кодом в сеточной системе Bootstrap

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

Итогом двух первых стадий обучения фронтенд-разработке должно стать создание простейшего статического сайта без CMS. Он должен быть сверстан при помощи Bootstrap.

Месяц 3 — Изучаем JavaScript

Пришло время заняться изучением динамических скриптов, работающих на стороне клиента. Без подобного «живого» украшения не обходится ни один современный сайт. Главным помощником новичка в этом деле станет кроссплатформенный язык JavaScript (JS).

Сегодня JavaScript поддерживается каждым браузером в мире и считается оптимальным средством создания динамических веб-приложений. По данным авторитетного ресурса StackOverflow, более 90 % программистов называют изучение JS самым важным элементом подготовки фронтенд-разработчика.

Изучение JavaScript начинается с основополагающих понятий — синтаксиса, переменных и архитектуры языка. После овладения основами, ученик переходит на расширенные возможности JS в рамках взаимодействия с браузером через интерфейсы клиентских Web API.

Нелишним будет затронуть тему JavaScript-фреймворков — библиотек, размещённых на открытых источниках, например, на GitHub), которые помогают упрощать решения сложных программных задач. Наиболее популярные из них — связка React + Redux/ Flux, Ember и Angular. Можно выбрать один наиболее удобный JS-фреймворк, который поможет понять основные механизмы веб-разработки в части динамических элементов сайта.

Для быстрого изучения JS отлично подходят бесплатные онлайн-курсы компаний Udacity, SnoopCode и Code Academy, а также веб-учебник от сообщества разработчиков Mozilla и его отечественный «собрат» js.ru. Для более углублённого погружения в тему можно воспользоваться книгами электронного формата, многие из которых можно без труда найти в свободном доступе. Единственный минус – большая часть подобной литературы доступна только на английским языке.

Популярная учебная литература по JavaScript

  • Серия книг «Вы не знаете JavaScript» (You Don’t Know JS);
  • Серия учебников MDN’s JavaScript Guide;
  • Эрик Эллиот «Программируем JavaScript-приложения» (Programming JavaScript Applications);
  • Марейн Хавербек «Выразительный Javascript» (Eloquent JavaScript);
  • Илья Кантор «Современный учебник JavaScript» (Modern JavaScript Tutorial);
  • Дэвид Макфарланд «JavaScript и jQuery. Исчерпывающее руководство» (Javascript & Jquery: The Missing Manual);
  • Хенрик Йоретег «Человеческий JavaScript» (Human JavaScript);
  • Аксель Раушмайер «Говорить на JavaScript» (Speaking JavaScript);
  • Эдди Османи «Изучаем шаблоны проектирования в JavaScript» (Learning JavaScript Design Pattern).

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

Месяц 4 — Дополняем сайт на CMS своими программными улучшениями

Научившись создавать статическое и динамическое наполнение веб-страниц, можно сделать новый шаг по пути веб-разработчика и научиться улучшать сайт на основе готового движка CMS. Система управления контентом сайта (Content Management System) — наиболее популярное решение для быстрого создания и дальнейшего администрирования современных сайтов. Работа с CMS даёт новичку в IT прямой путь к получению первого коммерческого заказа.

Существует четыре основные разновидности систем управления контентом — самописные, коробочные, конструкторы и студийные. Для начального этапа обучения веб-разработке оптимальным будет вариант некоммерческой коробочной CMS —программного продукта с открытым кодом (open source) и большим набором готовых модулей для различных задач. Главным недостатком такого движка является повышенная уязвимость, но это с лихвой компенсируется общим качеством продукта, его доступностью, гибкостью настроек и лёгкостью в использовании.

Русскую версию CMS WordPress можно в 1 клик скачать с официального сайта

Для свободного скачивания доступны десятки вариантов подобных CMS. Наиболее известные — Drupal, Joomla, Opencart, Magento. Но лидером по популярности среди них является WordPress (WP). Начать своё практическое знакомство с CMS мы рекомендуем именно с этого движка. На этой системе управления контентом сегодня находятся до 20 миллионов сайтов, среди которых порталы таких гигантов медиа-индустрии, как Reuters, The Wall Street Journal, Forbes, BBC America и Variety.

При помощи этой CMS можно опубликовать свой сайт буквально за 10 минут. Разумеется, при наличие хостинга и домена. Можно скачать и установить дистрибутив самому, но некоторые хостинг-провайдеры уже предлагают WP среди CMS для предустановки.

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

С помощью чего изучать WordPress «с нуля»

  • Курсы WPBeginner’s WordPress* и видеоканал WPBeginner.
  • Курс «Как создать, развивать и продвигать сайт»* от платформы Udemy.
  • Курс WordPress Quick Start* от платформы WP Apprentice.
  • Курс Customizing WordPress от платформы Level Up Tutorials.
  • Серия видеоуроков Let’s Build WordPress.
    * – Бесплатно после регистрации.

Месяц 5 — Создаем полноценный сайт при помощи HTML, CSS, Bootstrap и JavaScript

Последнюю часть вводного курса фронтенд-разработки следует посвятить созданию собственного программного продукта. В процессе создания своего веб-ресурса можно применить все навыки, полученные за предыдущие месяцы.

Это может быть одностраничный landing page или интернет-магазин со сложной структурой. Главное, чтобы в этом проекте отразился уровень полученных знаний и присутствовали оригинальные находки, свидетельствующие о творческом подходе к делу.

Обеспечить созданный сайт надёжным и доступным размещением в Сети поможет веб-хостинг с единоразовой оплатой от Eternalhost.

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

Сколько потребуется времени

Чтобы усвоить необходимый минимум для веб-программиста, нужно уделять занятиям примерно 10-15 часов в неделю. При соблюдении регулярного плана, этого срока хватит для изучения основ веб-разработки даже, если начинать с базового уровня компьютерной грамотности. При этом, важно не перегружать себя информацией, равномерно распределяя уроки на все дни недели и оставляя выходные на восстановление сил.

Создание портфолио

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

GitHub – крупнейшая в мире платформа для веб-разработки

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

Не переставайте учиться

Нужно помнить, что профессия веб-разработчика основывается на постоянном совершенствовании знаний. Для того чтобы развиваться профессионально вовсе не обязательно записываться на дорогостоящие курсы или выписывать не менее дорогую специализированную литературу. Многие книги по программированию популярных издателей, типа Apress, O’Reilly и AW можно найти в официальном свободном доступе.

Не менее важным источником знаний о веб-разработке могут послужить крупные площадки типа Free Code Camp и StackOverflow, объединяющие IT-специалистов со всего мира. Множество руководств по конкретным вопросам разработки доступно в формате видео-инструкций на тематических каналах YouTube. Ну и конечно, не стоит забывать об официальной документации к программным продуктам. Она остаётся самым проверенным источников информации для веб-разработчиков.

Заключение

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

  1. HTML и CSS;
  2. JavaScript;
  3. Веб-фреймворк;
  4. Работа с шаблонами CMS;
  5. Вёрстка сайтов.

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

SavePearlHarbor

Ещё одна копия хабора

10 частых ошибок начинающих веб-разработчиков

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

Использование старого HTML

Ошибка: На заре интернета было куда меньше возможностей по оформлению страниц, чем сегодня. Но старые привычки трудно изжить, и многие разработчики всё ещё пишут на HTML так, словно они застряли в 1990-х. Например, используют

для создания макета страницы; применяют или

Последствия: Использование HTML десятилетней «свежести» может привести к излишнему усложнению разметки страницы и, как следствие, к непредсказуемости её отображения в разных браузерах. И далеко не только в Internet Explorer.

Как избежать: Для начала перестаньте использовать

для создания структуры страницы и постарайтесь как можно реже применять его для вывода табличных данных. Ознакомьтесь с более современными инструментами. Используйте HTML для описания самого контента, а не способов его отображения. А для корректного отображения применяйте CSS.

«У меня в браузере всё работает»

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

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

Как избежать: Конечно, тестировать свой сайт во всех существующих браузерах и их версиях было бы пыткой. Но нужно хотя бы периодически проверять, как ваш сайт выглядит в некоторых наиболее популярных браузерах. Сегодня для этого есть бесплатные инструменты: виртуальные машины, сканеры сайтов. Например, с помощью http://browsershots.org/ или https://www.browserstack.com/ можно сделать снэпшоты того, как будет рендериться конкретная страница на всевозможных платформах. Работая с CSS, убедитесь, что «сбросили» все значения по умолчанию.

Кстати, если вы используете какие-то специфические CSS-решения, заточенные под конкретные браузеры, то обратите внимание на характерные для разных вендоров префиксы вроде -webkit- , -moz- или -ms- . Чтобы быть в курсе текущих тенденций, можете изучить эти ссылки:

Там описывается, почему стоит отойти от использования подобных префиксов. Практические рекомендации, как работать без префиксов, можно найти здесь: http://davidwalsh.name/goodbye-vendor-prefixes.

Плохие формы ввода

Ошибка: Предложить пользователям ввести какие-то данные (особенно в текстовые поля) и ожидать, что они введут их именно в том виде, в каком нужно.

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

Как избежать: Во-первых, удостоверьтесь, что вы безошибочно донесли до пользователей, какая именно информация вам от них нужна. Если вы просите ввести «адрес», то уточните, какой: рабочий, домашний, электронный? Чтобы дополнительно подстраховаться, используйте проверку корректности вводимых данных. Неважно, как это будет сделано на стороне браузера, главное, чтобы на сервере были уже проверенные данные. Никогда не используйте сцепленные T-SQL выражения для работы с полученными от пользователей данными без подтверждения корректности по каждому полю ввода.

Слишком большие ответы на сетевые запросы

Ошибка: Страница, заполненная многочисленными изображениями в высоком разрешении, уменьшенными с помощь атрибутов высота и ширины тэга . Слишком большие CSS- и JS-файлы, залинкованные со страницы. Излишне сложный и громоздкий исходный HTML-код.

Последствия: Если ваша страница слишком долго грузится/отображается, то это может заставить многих пользователей не дождаться завершения и закрыть вкладку или нетерпеливо обновлять страницу. Иногда излишне долгое ожидание загрузки может привести к возникновению ошибок.

Как избежать: Не думайте, что раз интернет из года в год становится быстрее, то это оправдывает раздувание размеров страниц. Вместо этого оптимизируйте свои проекты ради ускорения обмена сетевыми пакетами. Основная причина, по которой страницы становятся «тяжёлыми», — изображения. Чтобы минимизировать их влияние:

  1. Спросите себя, действительно ли необходима вся используемая вами графика? Откажитесь от ненужных графических украшательств. Можно воспользоваться сетевыми инструментами, чтобы определить, какие изображения нуждаются в дополнительном сжатии.
  2. Уменьшите размер изображений. Например, с помощью Shrink O’Matic или RIOT.
  3. Используйте предзагрузку. Это не ускорит первичную загрузку, но зато даст преимущество при просмотре других страниц сайта. Подробности можно почерпнуть из статьи: https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Миницифируйте залинкованные CSS- и JS-файлы. Для этого есть множество инструментов, например, Minify CSS и Minify JS.

И наконец, старайтесь использовать наиболее современную версию HTML и внимательно используйте тэги и

Цукерберг рекомендует:  Коучинг - Пробую себя в качестве менторакоуча Java
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих