Category: Frontend

22
Ноя
2020

Как удалить изображение которые уже выбрал в инпуте

работаю над формой отправки и в ней есть функция загрузки своего изображения, но так-же должна быть возможность его удалить(к примеру если пользователь передумал или мискликнул), столкнулся с проблемой удаления уже загруженного файла, логи…

20
Ноя
2020

Как оптимизировать код JS

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

function plus() {

var num1, n…

19
Ноя
2020

Удаление определенного элемента массива по нажатию на кнопку

Есть карточки, каждая карточка это элемент массива, в каждой карточке есть кнопка которая должна удалять этот элемент из массива, у каждой карточки есть айди заданный через html, многое перепробовал, но в итоге ничего, можете помочь?
HTML

16
Ноя
2020

js и элементы на странице

Всем привет. Прошу помощи. Пишу на python, js вижу 3 раз в жизни. Есть 2 функции, кот кое-как сам написал на js прямо в html.Они получаю данные из модели и отображают на страницу. По итогу, при переходе на страницу, выводится 100 позиций и…

12
Ноя
2020

Проблема с nextElementSibling при разработке галереи

Делаю галерею, при нажатии на один из картинок появляется модалка с фулскрином этого изображения, наподобие fancybox, и возникла ошибка с nextElementSibling. Проблема в том что при верстке не все элементы стоят друг за другом, структура ве…

11
Ноя
2020

Проблема с добавлением класса следующему элементу nodelist

Делаю галерею в модальном окне, наподобие fancybox только на чистом js, и возникла ошибка "Cannot read property ‘classList’ of undefined" при задавании класса следующему элементу, как можно это исправить? У меня такое ощущение чт…

11
Ноя
2020

👶 🌍 10 советов начинающему веб-разработчику

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

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

Итак, мои 10 советов новичку: сначала теоретических

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

1. Ставьте конкретные цели

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

2. Не торопитесь: это марафон, а не спринт

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

3. Двигайтесь медленно, но уверенно

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

4. Умейте быстро находить решения

Умение самостоятельно решать проблемы – один из самых важных навыков разработчика. Вы можете подумать, что опытные программисты знают ответы на все вопросы. Это совсем не так! Они могут знать некоторые вещи наизусть, но есть многое все-таки ищут в Google. Если вначале на поиск ответов вам может понадобиться 3 часа, то в следующий раз на это уйдет гораздо меньше времени. Научившись исправлять наиболее часто встречающиеся проблемы вы станете более быстрым и эффективным.

5. Подкрепляйте теорию практикой

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

6. Будьте готовы к неудачам

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

7. Никогда не прекращайте учиться

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

Перейдем к практическим советам

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

8. Изучите верстку и программирование

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

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

Процесс становления веб-разработчика не заканчивается изучением только нативного JS, поскольку фреймворки и библиотеки ускоряют процесс программирования. Новичку не стоит сразу же стремиться к такому ускорению. Лучше всего начинать в вакууме, избегая всех дополнительных ресурсов до тех пор, пока вам не станет удобно со стандартным языком. Хотя некоторые специалисты считают использование фреймворков жульничеством, не обращайте внимания на эти нелепые обвинения. Стоит изучить хотя бы самые популярные из них: react.js, vue.js и angular.js.

Если же вы решили заняться бэкэндом, придется выучить PHP, Python, Ruby, C# или NodeJS (JavaScript). Здесь тоже сложно обойтись без облегчающих взаимодействие с сервером фреймворков и библиотек.

9. Используйте внешние ресурсы

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

10. Придерживайтесь методологии и комментируйте

Используйте одну методологию и обязательно комментируйте код. Постарайтесь выработать собственный стиль его написания – так и вам будет легче и после вас люди смогут разобраться с программой. Можете быть уверены – за грамотные комментарии вас впоследствии никто не проклянет.

***

Прокачайте уровень

Если вы только начинаете осваивать профессию, стоит обратить внимание на курс по веб-разработке от Geek Brains и Mail.ru. Начав с основ, здесь можно получить необходимые для старта карьеры знания. Актуальная программа, 2 – 3 вебинара в неделю и 2 месяца стажировки. Под руководством опытным преподавателей студенты наработают необходимую для дальнейшего развития в сфере IT базу и получат помощь в трудоустройстве.

09
Ноя
2020

Как делается фронтенд для Java-приложений?

Я столкнулся с тем, что не понимаю, как обычно реализуется фронт для Java-приложения. У меня есть несколько предположений о том, как это может быть:

Фронт делается при помощи JSP, thymeleaf или других Java-фреймворков для фронтенда, т.е. …

09
Ноя
2020

🎨 22 тенденции веб-дизайна в 2020 году, о которых нужно знать

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

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

В конце концов, быть в курсе возникающих или развивающихся тенденций жизненно важно, если хочешь оставаться на вершине горы. Так какие же эти новые тренды? Что сработает лучше всего в 2020?

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

1. Hero Images и Headers

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

Ниже приведен пример с официального сайта Samsung с одним из последних трендов веб-дизайна 2020 года:


Hero Images – это отличный способ привлечь потенциальных покупателей, фон в таком случае становится объектом внимания и перестает быть серым.

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

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

2. Пустое пространство и минималистичный дизайн

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

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

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

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

Если хотите применить этот подход в веб-дизайне на практике, взгляните на пример от Squarespace:


Несмотря на наличие на главной странице пустого пространства, она по-прежнему смотрится элегантно и привлекательно.

3. Эмоциональный дизайн

Веб-дизайн направлен на налаживание взаимодействия с пользователем. Если вы в этом преуспеете, то заставите посетителя возвращаться на сайт снова и снова.

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

Люди часто называют их “связующими”, и в результате даже не замечают, как втянулись:


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

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

4. Динамический скроллинг

Динамическая прокрутка набирает обороты, и все крупные компании движутся в этом направлении. Причина проста: чем привлекательнее смотрится веб-сайт, тем красивее продукт. С запуском Note 20 в августе этого года, я решил зайти на сайт Samsung, чтобы посмотреть спецификации смартфонов и Galaxy Watch 3.

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


5. Градиент 2.0

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

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

Пользователи по всему миру тепло приняли нововведение. Оно позволяет сделать веб-сайт менее скучным и более привлекательным:


6. Темный интерфейс

Темная тема стала трендом практически в каждом приложении. Она есть в WhatsApp и Skype, Gmail, Facebook, YouTube и во многих других приложениях.

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

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

Для максимального эффекта нужны контрастирующие цвета с оттенком: к примеру, #000000 идеально сочетается с #FFFFFF или желтым и так далее.

Представленный на скриншоте веб-сайт пояснит, что я имею в виду:


7. Scroll-generated веб-сайты

Scroll-generated веб-сайты (прим. переводчика – “основанные на скроллинге”) – один из последних трендов, подхваченных веб-дизайнерами.

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

Когда же мы говорим о динамическом скроллинге, то в данном случае весь контент изначально присутствует на странице, и все, что нам нужно, это прокрутить до него.

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


8. Интерактивные курсоры

Анимированные курсоры меняют внешний вид указателя на что-то привлекательное.

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

Для лучшего понимания взгляните на веб-сайт ниже:


9. 3D-дизайн

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

Так как в последнее время люди стали использовать более высокоскоростное интернет-соединение, веб-разработчики начали запускать трехмерные веб-сайты. При правильном использовании 3D-дизайн будет смотреться привлекательно и реалистично.

Прекрасный пример веб-сайта на скриншоте ниже:


10. Оптимизированная навигация

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

Для вдохновения взгляните на скриншот сайта Bikebear:


11. Фокус на улучшении UI и UX

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

В 2018 году интернет охватила волна модернизации UI и UX. Люди сфокусировались на дизайне настолько, что кто-то построил на этом карьеру. Причина проста: UI отвечает за привлекательность сайта, UX – за удобство для пользователя.

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

Ниже представлен скриншот с LambdaTest:


12. Большие жирные шрифты

Крупные и жирные шрифты на Hero Image ворвались в тренды с прошлого года. Они привлекают внимание и передают вложенный вами посыл. Такие шрифты легко разместить, а чтобы они лучше смотрелись, поработайте над цветовым контрастом и тенью.

Пример того, как применить это на практике, представлен ниже:


13. Художественные иллюстрации

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

Это один из наиболее популярных трендов 2020 года в веб-дизайне. Такие иллюстрации можно часто наблюдать в различных видео типа TED, музыкальных клипах и т.д. Можно сказать, что они твердо и уверенно идут вперед.

Ниже представлена демонстрация от Lisa Glanz:


14. Сеточный дизайн

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

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

Лучший пример – Pinterest:


15. Слияние фотографии с графикой

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

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

В качестве примера для демонстрации я выбрал Wix:


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

16. Анимация, запускаемая пользователем

Часто анимация отображается на сайте через @keyframes и другие фреймворки, вроде anime.js. Суть тренда заключается в использовании анимации через взаимодействие с пользователем.

Такой подход завлекает посетителя и в целом улучшает user experience.

Этот сайт показывает удачный пример запускаемой пользователем анимации:


17. Плавающие элементы

Плавающие элементы можно рассматривать как дополнение трехмерных компонентов, о которых мы говорили ранее. Элемент “парит в воздухе” – таким образом создаются увлекательные изображения и шаблоны в веб-дизайне.

99designs используем в качестве демонстрации:


18. Истории с графикой

Отзывы всегда были неотъемлемой частью покупок, и все мы зачастую прочитаем пару-тройку, выбирая товар. А вы знали, что отзыв клиента о товаре может рассказать целую историю?

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

Истории с графикой могут вывести завлечение читателей на новый уровень.

Сайт, используемый в качестве демонстрации, – Apple:


19. Графики данных на веб-сайтах

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

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

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

Для демонстрации использован сайт Uber:


20. Черное и белое

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

В качестве примера сайта я использовал Dribbble:


21. Геометрические фигуры и узоры

Геометрические формы помогают веб-дизайнерам создавать что-то захватывающее и мощное из обычного изображения.

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

Используемый для демонстрации сайт отражает истинную красоту геометрических фигур и паттернов:


22. Эксперименты с иллюстрациями

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

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

Прекрасным примером служит приведенный ниже веб-сайт:


Заключение

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

Статья публикуется в переводе. Автор оригинального текста Harish Rajora.

***

Дизайн и веб-разработка – близнецы-братья. Многие талантливые frontend-программисты начинали свой путь в профессии как дизайнеры. Если вы планируете сменить специализацию или задумываетесь о дополнительных навыках, обратите внимание на курс онлайн-академии GeekBrains. Начав с основ, вы пройдете стажировку в реальной команде и удачно обновите резюме.

06
Ноя
2020

Как скрыть элемент при прокрутке определённого блока (секции)?

Есть текст с id = arrowText. Задача: при прокрутке 2 слайда (у которого id = about) чтобы данный текст скрывался. Есть вариант сокрытия при помощи js?
ВАЖНО! Не скролл с вариантом типа:
`if(scrolled >= 1000)
{$("#arrowText").h…

06
Ноя
2020

Как стать фронтенд-разработчиком в 2021 году: дорожная карта

Хотите узнать, как стать фронтенд-разработчиком в 2021 году? Составили для вас схему развития и приложили материалы для изучения.
— Читать дальше «Как стать фронтенд-разработчиком в 2021 году: дорожная карта»

02
Ноя
2020

Objects are not valid as a React child (found: TypeError: response[0].includes is not a function). REACT

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

30
Окт
2020

💰 Сколько получает веб-разработчик после обучения

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

Более 14 000 вакансий на HH.RU и почти 17 000 заказов для фрилансеров на Upwork – таков спрос на веб-разработчиков в ноябре 2020 г. Выбрав эту профессию, вы можете не сомневаться в своей востребованности, но денежный вопрос – один из главных в начале карьеры. Чтобы ответить на него, мы написали эту статью.

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

Если вы только знакомитесь с веб-разработкой, вначале прочитайте гайд по профессии.

Откуда цифры

Данные о зарплате веб-разработчиков взяты с карьерных сайтов:

  1. HeadHunter – крупнейший ресурс, который может служить ориентиром для всех профессий;
  2. Superjob – вторая площадка по количеству айтишников;
  3. Хабр Карьера – доска с предложениями только в IT.

Ставки для фрилансеров смотрели на Upwork – известной международной базе заказов. Там часто указывают оплату за час работы, а не за весь проект: проще сравнивать с окладом в офисе. Если вы сидите на другой площадке и получаете меньше – знайте, где еще стоит зарегистрироваться =)

Статистика актуальна по состоянию на начало ноября 2020 г.

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

Уровни специалистов

Как во многих других специальностях, вакансии в веб-разработке делятся на три уровня: Junior, Middle, Senior. Чтобы было понятнее, к какому уровню себя отнести, опишем их особенности.

Junior

Знает языки программирования и пишет несложный рабочий код, который проверяют старшие коллеги. Опыта мало – 0-1,5 года. Пока не представляет процесс разработки целиком, выполняет полученные задания.

Middle

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

Senior

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

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

Доход веб-разработчиков, окончивших обучение

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

PHP

Язык, на котором работает 79% всего интернета. Разрабатывался специально для создания сайтов, поэтому легко изучается и хорошо подходит именно для этой цели. Совместим со всеми основными платформами и языками, включая HTML, SQL и JavaScript. На PHP часто пишут готовые «движки» сайтов – ему всегда есть применение.

Подробнее…

В офисе:

Junior – 15 000 руб. – 100 000 руб.

Middle – 30 000 руб. – 230 000 руб.

Senior – 65 000 руб. – 315 000 руб.

На фрилансе:

Junior – $3/час – $25/час

Middle – $12/час –$75/час

Senior – $16/час –$100/час

***

JavaScript

Язык для создания динамического контента. Все, что меняется на сайте без перезагрузки страницы – обычно пишется на JavaScript. Всплывающие подсказки, «живой» поиск, выпадающие меню, слайдеры, анимация и т.п.

Позволяет разработать клиентскую (внешнюю) и серверную (внутреннюю) часть сайта. А с помощью платформы Node.js – даже писать десктопные приложения. Входит в «большую тройку» языков, которые должны знать все веб-разработчики – HTML, CSS, JavaScript.

Подробнее…

В офисе:

Junior – 15 000 руб. – 120 000 руб.

Middle – 40 000 руб. – 340 000 руб.

Senior – 100 000 руб. – 460 000 руб.

На фрилансе:

Junior – $3/час – $25/час

Middle – $13/час –$40/час

Senior – $20/час –$100/час

***

Python

Пожалуй, простейший для изучения незнакомыми с программированием людьми язык. Создан для написания короткого кода. На нем реализовано множество программ: он использовался в редакторе изображений GIMP и игре World of Tanks.

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

Подробнее…

В офисе:

Junior – 25 000 руб. – 170 000 руб.

Middle – 40 000 руб. – 280 000 руб.

Senior – 120 000 руб. – 306 000 руб.

На фрилансе:

Junior – $5/час – $35/час

Middle – $15/час –$50/час

Senior – $15/час –$100/час

***

Go

Go, он же Golang – быстро набирающий популярность язык программирования, нацеленный на производительность. Хороший компромисс между читаемостью и эффективностью для компьютеров.

Многопоточный, на нем можно быстро запустить сайт, и для многих стандартных функций существуют готовые пакеты. Go несложно освоить, но он отличается от других объектно-ориентированных языков вроде C++ или Python. Чаще используется в крупных дорогих проектах.

Подробнее…

В офисе:

Junior – 30 000 руб. – 80 000 руб.

Middle – 55 000 руб. – 260 000 руб.

Senior – 90 000 руб. – 697 000 руб.

На фрилансе:

Junior – $7/час – $35/час

Middle – $20/час –$100/час

Senior – $20/час –$125/час

***

Java

Самый известный язык программирования в мире. Две основные сферы применения – веб-разработка и приложения под Android. По популярности конкурирует с Python; тоже кросс-платформенный, но с более строгим синтаксисом. Поэтому с Java комфортнее опытным кодерам, чем начинающим. Также используется в больших бизнес-проектах – например, в информационных системах банков.

Подробнее…

В офисе:

Junior – 28 000 руб. – 140 000 руб.

Middle – 50 000 руб. – 290 000 руб.

Senior – 50 000 руб. – 351 000 руб.

На фрилансе:

Junior – $3/час – $25/час

Middle – $5/час –$30/час

Senior – $27/час –$70/час

***

Ruby

Благодаря фреймворку Rails язык общего назначения Ruby стал применяться в веб-девелопменте. Создавался, чтобы «сделать программистов счастливыми»: лаконичен и прост для понимания, если разобраться.

Способен существенно сократить код и время разработки. На нем написаны, к примеру, платформа аренды жилья Airbnb и хостинг для программного кода GitHub.

Подробнее…

В офисе:

Junior – 20 000 руб. – 140 000 руб.

Middle – 50 000 руб. – 275 000 руб.

Senior – 100 000 руб. – 510 000 руб.

На фрилансе:

Junior – $5/час – $20/час

Middle – $12/час –$60/час

Senior – $20/час –$100/час

Иллюстрация с pixabay.com
Иллюстрация с pixabay.com

Вывод

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

Так, в одних языках Junior получает больше, но на уровне Senior «потолок» ниже. Некоторые специалисты чаще востребованы на фрилансе, в то время как других хантят крупные компании.

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

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

29
Окт
2020

Задание массива из таблицы. React

Всем привет. Я разрабатываю страничку и у меня возникает несколько проблем. Первая и самая важная, когда я пытаюсь вызвать последнее API MoveProperty у меня вылетает 400 ошибка. Это вызвано тем что вместо одного из параметров я передаю пус…

28
Окт
2020

Открытие и скачивание файла

Кейс такой:

Имеются файлы с различным расширением
мне необходимо открыть в браузере файл если это возможно (например pdf, картинки, txt и т.д.), иначе нужно его скачать.
ссылку на файл можно сгенерировать только на фронте (vue js). Мне из…

28
Окт
2020

отваливается шаблоны после изменения html или css в gulp-file-include

Всем привет, использую gulp в верстке и столкнулся с такой проблемой.Установил я пакет gulp-file-include, настроил таск в gulp.js
подключаю шаблон header на главную, запускаю gulp работает вроде все нормально, но как только делаю изменения…

28
Окт
2020

отваливается шаблоны после изменения html или css в gulp-file-include

Всем привет, использую gulp в верстке и столкнулся с такой проблемой.Установил я пакет gulp-file-include, настроил таск в gulp.js
подключаю шаблон header на главную, запускаю gulp работает вроде все нормально, но как только делаю изменения…

28
Окт
2020

Как отменить создание дополнительной картинки в webpack 5?

Всем привет.
У меня такая история: взял я одну сборку webpack и начал переписывать под себя как тут выскочила но не ошибка,баг – одним словом: в новой версии webpack вместо url-loader, raw-loader и file-loader стали использовать asset, ass…

27
Окт
2020

Uncaught Error: Objects are not valid as a React child (found: Error: Request failed with status code 400)

Всем привет. Я создаю страничку на React и у меня вылетает эта ошибка. Как я понимаю тут проблема в работе с массивами. Однако данный код нормально работал, до изменения API, сейчас я получаю ошибку.
Может кто-то подсказать где я ошибаюсь?…

27
Окт
2020

Почему выскакивает ошибка компиляции в Webpack?

Помогите пожалуйста решить проблему webpack:
код ошибки:
она появляеться когда запускаю build сборку. Вот git repo с проектом.
Не пойму что за проблема, гуглил но толком ничего не нашел или нашел но не помогло.
Как решить данную проблемы?…

24
Окт
2020

🌐 Собираем портфолио начинающему веб-разработчику

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

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

***

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

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

Что нужно учесть приступая к работе

  1. Проект должен отражать востребованные навыки и быть действительно нужным для клиента или компании. Решайте реальные проблемы через свои проекты. Объясняйте и показывайте – какие.
  2. Показывайте, чем вы хотели бы заниматься в дальнейшем.
  3. Постарайтесь, чтобы ваши работы выглядели оригинально, добавьте что-то необычное.
  4. 5-7 проектов для начала – это неплохо, но если вы делали что-то объемное, может хватить и 3.

Где брать работы для портфолио

1. Вы наверняка делали какие-то проекты в процессе или после обучения. Бесплатные курсы иногда включают их в программу. Такое практикуется, например, в сертификации Free Code Camp или в недорогом курсе Bootcamp от Udemy. Он пропитан практикой, предоставляет возможность общаться с другими студентами и получать фидбек.

2. Сделайте сайт-визитку и реализуйте там интересные фичи:

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

3. Участвуйте в конкурсах и хакатонах. Даже если вы делали проект в команде, его можно положить в портфолио, указав свой вклад с доказательствами в виде скриншотов.

4. Загляните в генераторы челленджей. Например, на Sharpen или Briefz. Просто замените design на develop и пробуйте создавать то, что там предлагается.

5. Стажировки. Если вас не возьмут на работу, вы все равно успеете «прикоснуться к великому» и пополнить портфолио проектом, над которым работали в компании. Даже если не попадете на саму стажировку, скорее всего останется сделанное вами тестовое задание. Его можно доработать и тоже приложить к портфолио (о некоторых других вариантах мы уже писали). Также можно посмотреть вакансии для начинающих на форуме DOU и стажировки в их дайджестах.

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

7. Создайте сайт по бартеру. Можно, например, помочь начинающему дизайнеру с разработкой, чтобы он помог вам с дизайном. Если таких знакомых на примете нет, предлагайте свои услуги на разных платформах: ищите людей, которые предлагают что-то в обмен на разработку. Вот несколько вариантов:

  • группа ВК «По бартеру»;
  • Simbi;
  • Trade Made (приложение, правда только под Android);
  • Swap Right (сразу из объявления понятно, что нужно человеку и что он может дать взамен).

8. Попробуйте себя в волонтерском проекте. Представьте, что новичку можно получить международный опыт, не выходя из дома! Искать интересные варианты стоит на разных платформах:

  • IT-волонтер – здесь некоммерческие организации публикуют «вакансии» по IT-профессиям.
  • Social Coder пишут, что опыт не важен (но начинающие участники проекта будут помогать более опытным) и ищут именно ИТ-специалистов. Списка задач на выбор здесь нет: для участия нужно зарегистрироваться, рассказать о своем опыте и чем хотите заниматься. После этого вас соединяют с некоммерческой организацией, которая ищет как раз такого человека. В среднем проекты длятся 2 месяца, но бывает по-разному.
  • Volunteermatch – программа, которая специализируется на волонтерских вакансиях.
  • Волонтерские программы ООН для разработчиков.
  • В Free UK Genealogy можно присоединиться к команде разработчиков открытых проектов. Найти совпадающий с вашими интересами несложно.

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

9. Можно помогать и проектам на краудфандинговых платформах. Для этого выбираем любую из них и ищем в Google: создание сайта site:(адрес выбранной вами платформы). Находим какой-нибудь интересный проект, которому требуется разработка сайта, и предлагаем помощь ее создателю. Несколько примеров: на Kickstarter, а также на Mola Mola – раз и два.

10. Копируйте несложные сайты, что-нибудь добавляя, изменяя и улучшая. Попробуйте решить некую проблему или сделать какой-то элемент более удобным. Для вдохновения: Jake Dow-Smith Studio, MCA, TRA, Jonty Davies, Глущенкоиздат, The Storytellers.

11. Есть ряд несложных проектов, которые новичку стоит иметь у себя в портфолио: простые игры, листы To-Do, страницы поисковиков. Представьте, что это ваше практическое задание, но помните – нужно внести в него свое оригинальное видение и решение. Остальные идеи можно посмотреть здесь и здесь.

12. Поработайте над уже существующим открытым проектом. Свое участие в виде скриншотов тоже можно добавлять в портфолио.

На Code Triage собраны проекты c GitHub, которые нуждаются в помощи. Лучше отсортировать их по языку программирования.

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

На First Timers Only можно посмотреть и другие ресурсы по open source.

Показываем, как выглядят портфолио начинающих веб-разработчиков

  1. Fatma Sümer
  2. Pritika Roy
  3. Ronald, например, добавляет свои работы с курсов.
  4. Ritika Soni
  5. Портфолио Chigbogu на GitHub

Проекты есть. Что дальше?

1. Регулярно пополняйте портфолио свежими работами.

2. Включайте в описание проекта ссылку на репозиторий GitHub, где клиент или работодатель смогут посмотреть ваше решение задачи через код, а не только красивую картинку. Давайте ссылки на Link to your CodePen projects.

3. Опишите, когда и для кого вы делали этот проект (даже если для мамы или в качестве эксперимента), и какие требования предъявлялись к продукту. Читателю нужно понимать, в каком контексте реализовывалось решение.

4. Самые удачные проекты ставьте в начало портфолио.

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

***

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

18
Окт
2020

🔠 Разгоняем Google Fonts

Google Fonts – самый удобный сервис для работы с веб-шрифтами. Рассказываем, как сделать его еще лучше и быстрее!

Главным источником контента в вебе по-прежнему остается текст, зна…

16
Окт
2020

Реализовать полоску прокрутки и слайдер на React

Имеется у меня вот такой макет. Есть на нем полоса прокрутки (вверху) и слайдер (снизу). Не очень понимаю, как реализовать это нативно, ну мол чтобы элементы так сказать уходили за край, но потом имели вариант вернуться. Мне посоветовали в…

16
Окт
2020

Реализовать полоску прокрутки и слайдер на React

Имеется у меня вот такой макет. Есть на нем полоса прокрутки (вверху) и слайдер (снизу). Не очень понимаю, как реализовать это нативно, ну мол чтобы элементы так сказать уходили за край, но потом имели вариант вернуться. Мне посоветовали в…

14
Окт
2020

Построить графовое дерево python

Хочу рисовать в браузере граф, как здесь, чтобы потом отправить его на вычисления? Есть ли возможность сделать это средствами python? И можно ли воспользоваться фреймворком Dash?
Готов рассмотреть варианты и без использования браузера.