10 самых интересных статей по JavaScript за май + бонус


Оглавление (нажмите, чтобы открыть):

10 интересных JavaScript и CSS библиотек за январь 2020 года

Начнем интересную традицию! Ежемесячно наша редакция будет делать подборки самых интересных на наш взгляд библиотек по JavaScript и CSS и делать на них небольшой обзор.

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

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

Путь к тому, чтобы стать веб-разработчиком в 2020 году

Потрясающее репозиторий GitHub с исчерпывающей информацией о наиболее важных навыках, которыми должен обладать разработчик в 2020 году. Руководства организованы в виде очень подробных диаграмм, которые охватывают Front-end, Back-end и сторону разработки веб-приложений.

Анимированные линии MeshLine

Набор из пяти удивительных анимированных демонстраций, созданных с помощью WebGL, three.js и библиотеки MeshLine. Вы можете использовать примеры в своих проектах совершенно бесплатно. Если вы хотите дополнительно настроить демо, есть также большое руководство по Codrops.

Удаление фона у изображения

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

SimpleBar

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

RunJS

Отличное приложение MacOS, которое позволяет быстро опробовать идеи JavaScript и поэкспериментировать с новыми библиотеками. Редактор может работать с вводом Babel и TypeScript, транслировать и выполнять код, что дает вам мгновенные результаты. Отлично подходит для съемки обучающих видео.

Blendy

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

Brain.js

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

unDraw

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

Rallax

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

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Вступление
Привет. Хочу поведать мою историю в ИТ. 5 лет назад я начал пытаться зарабатывать на фрилансе. Учил Php по урокам Евгения Попова =) Первый заказа мне достался очень не просто, как сейчас помню как я пытался на фриланс биржах выудить хоть что то хоть даже бесплатно сделать. И вот мне улыбнулась удача и мне дали сделать что то типа маленького блога. Я тогда не знал ни о каком ооп писал как мог на php верстал таблицами. Было сложно, я на тот момент мало что мог понять даже в верстке, но спустя некоторое время я сдал блог. Он отвечал всем требованиям заказчика.

Как парусник ищущий остров среди бурлящего океана фриланса.

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

Ура! Меня взяли работать верстальщиком!

И вот, спустя пару месяцев засылания резюме мне улыбнулась удача. Меня взяли Верстальщиком на небольшую фирму. Общий штат который был около 30 чел. Их основной доход это магазинчики торгующие на европейском рынке. Первые пол года мне нравилось верстать я узнавал что то новое, но потом мне стало скучно. Потом, (спустя 2 года). Я начал рассылать резюме снова, но уже на должность frontEnd разработчика. И вот одна фирма откликнулась дала мне задание по js и по верстке. Задача по js показалась мне не подъемной но я ее сделал.
После чего меня благополучно взяли на работу. Но мне так и не удалось стать именно frontend, я верстаю, делаю всякие респонсив и.т.п . Но я не знаю как например написать приложение на бекбоне, ангуляре. Да я делаю всякие правки по js. Например сделать какую то плашку которая будет перетаскиваться с скролом, что то захайдить, сделать анимацию. Вообще всем тем что делается в View.

Я делаю то что могу, а то что не могу не дают. Это хорошо или плохо ,)?

Что то сделать с моделью, как вообще общаться с сервером как работает REST api это все не ком мне. Мне такие таски не дают, хотя я даже и не знаю как их делать, да и у и по верстке тасков много. Вот так я и нахожусь в заколдованном круге
Ах да. Я пытался порвать этот заколдованный круг, просил тимлидов давать больше задач по js, но мне давали что то Не очень сложное. Наверное на что то более сложное у меня бы и знаний не хватило. Да и смысл. Кто то же должен верстать, есть человек который сделает таск за 2 часа или я который сделает его за 2 дня.

Уныние, страх и ненависть, а больше СТЫД. (Даже Вася имеет право. )

Работу верстальщика относят к точке до. Например когда говорят делаю все от верстки дооо =) Ну вы понимаете. Т.е. верстка это удел нисшей касты. Даже на одном совещание сказали что то типо — да у нас демократия ДАЖЕ Вася (верстальщик) может что то предлагать.
Совещание было с важными шишками, ух как же было стыдно Васе.

Возможно если я уволюсь, поучусь, и буду искать работу исключительно как js программист (frontend), хотя бы джуниор. У меня что то и выйдет. Но я выплачиваю ипотеку, остался 1 год до выплачивать. Как говорил один знакомый гопник — жизнь — боль =)

Страница — ‘смысл жизни 404’

Я 5 лет назад шел на должность верстальщика как временную Так и остался на ней.

JavaScript

Статьи по программированию на Javascript. Полезные решения для сайтов.

Преобразование времени в устный формат на Javascript

Когда нас спрашивают на улице «который час», мы обычно отвечаем «половина восьмого» или «двадцать минут первого», вместо формального «девятнадцать часов и тридцать минут».

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

Смена пароля в «Ajax системе регистрации/авторизации»

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

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

Ajax авторизация и регистрация на PHP

Напишем систему авторизации и регистрации пользователей на PHP. Для работы скриптов потребуется интерпретатор PHP версии 5.3 и сервер MySQL 5.

Отслеживание рекламных кликов в РСЯ

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

В этом руководстве мы напишем обработчик событий для кликов по объявлениям РСЯ , а также создадим цель в Яндекс.Метрике для удобного просмотра статистики.

Фиксация элемента при прокрутке страницы

Речь пойдет о распространенной фиче — фиксации HTML элемента вверху окна браузера, при прокрутке страницы вниз.

Полноценный Python-интерпретатор у вас в браузере

Нашел очень интересную штуку. Brython — это интерпретатор языка Python, написанный на JavaScript.

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

Пишем чат на Tornado, Backbone и веб-сокетах

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

Локализация JavaScript приложений

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

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

Визуальный редактор с подстветкой синтаксиса Markdown

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

Добавляем кнопку «наверх» на свой сайт

Я думаю, что многие уже поняли о чем речь. Если нет, прокрутите эту страницу немного вниз, а потом нажмите на стрелку в левом верхнем углу. Такую анимацию очень просто создать при помощи JQuery.

Стоит ли учить JavaScript: перспективы, ситуация на рынке труда, мнения экспертов

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

Экскурс в теорию: информация о JavaScript, сферах применения и особенностях языка

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

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

В число основных особенностей JS входят:

  • Динамическая типизация — тип данных определяется в момент присваивания значения константе или переменной.
  • Интерпретируемый язык — код приложения интерпретируется при обращении, не требуется предварительная компиляция.
  • Функции как объекты первого класса, то есть функции в JavaScript можно возвращать из функций, передавать в качестве параметров в другие функции, присваивать переменным.
  • Поддержка прототипного и объектно-ориентированного подхода.
  • Универсальность — все популярные браузеры поддерживают JavaScript.

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

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

  • Библиотеки и фреймворки для создания приложений (React, Vue).
  • Сборщики (Webpack, Gulp).
  • Вспомогательные библиотеки (Lodash, Underscore).
  • Генераторы статических сайтов (Gatsby.js, Next.js).

Сферы применения JavaScript

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

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

  • Разработка нативных приложений. Например, с помощью фреймворка React Native создаются приложения для Android и iOS.
  • Серверная разработка. Например, Node.js применяется для бэкенд-разработки. Об этом направлении в перспективе выйдет отдельная статья.
  • Разработка десктопных приложений. Например, JS применяется в офисных пакетах Microsoft и OpenOffice, в приложениях компании Adobe.
  • Программирование оборудования и бытовой техники, например, платёжных терминалов, телевизионных приставок.

В данной статье рассматривается перспектива изучения JavaScript для использования в разработке фронтенда.

Популярность, рейтинг и перспективы JavaScript

Как отмечалось выше, по состоянию на середину 2020 года JavaScript входит в число самых популярных языков программирования. JS занимает седьмое место в индексе TIOBE, который составляется на основе статистики поисковых запросов. Этот язык на данный момент популярнее, чем PHP, Swift, Objective-C, Ruby.

JavaScript занимает первое место по популярности в сообществе разработчиков на GitHub. Этот показатель рассчитывается по количеству репозиториев.

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

О перспективах JavaScript подробно рассказывают эксперты в комментариях ниже. Стоит обратить внимание на два момента.

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

Второй момент: в настоящий момент растет популярность прогрессивных веб-приложений (PWA, progressive web apps). Эту технологию активно продвигает Google. Прогрессивные веб-приложения представляют собой гибрид сайта и мобильного приложения. В среднесрочной перспективе у PWA есть хорошие шансы отвоевать значительную долю рынка у нативных приложений.

Для разработки PWA применяется JavaScript. Например, сайты, созданные с помощью генератора Gatsby.js, поддерживают функциональность прогрессивного веб-приложения из коробки. Это ещё один плюс в пользу востребованности JS в ближайшей перспективе.

Сколько платят фронтендерам, или О зарплатах JavaScript-программистов

Заработок JavaScript-программиста зависит от уровня квалификации, региона проживания и работы, режима трудоустройства.

По данным trud.com на май 2020 года, средняя зарплата JavaScript-разработчика в России составляет 100 000 рублей. Больше всего вакансий на этом ресурсе с предложением зарплаты в диапазоне от 62 000 до 121 000 рублей (см. иллюстрацию). Чаще всего фронтенд-разработчики требуются в Москве, Санкт-Петербурге и Новосибирске.

По данным NewHR, вилка зарплат фронтенд-разработчиков уровня middle в июне 2020 года составляла от 160 000 до 190 000 рублей. По информации «Мой круг», медианная зарплата JavaScript-программиста в России во втором полугодии 2020 года составляла 85 000 рублей.

Мастер Йода рекомендует:  7 советов для разработчика о том, как искать работу в Германии


На сайте hh.ru по состоянию на конец июля 2020 года есть 81 вакансия для JavaScript-разработчиков в Казани (город взят для примера). Уровень зарплаты варьируется от 20 000 до 165 000 рублей.

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

Перспективы JavaScript: взгляд экспертов

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

Сергей Рубанов: спрос на рынке труда JavaScript-разработчиков сильно превышает предложение

По вашему опыту, почему стоит изучать JS?

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

Какие перспективы у этого языка программирования по сравнению с другими языками?

JavaScript — один из самых распространенных языков в мире. В индексе TIOBE в данный момент он занимает 7 место (и индекс растет), а по количеству репозиториев на GitHub и популярности по результатам опроса Stack Overflow он находится на первом месте и является вторым желаемым языком после Python. Пакетный менеджер npm является самым крупным пакетным менеджером из всех существующих. Все это говорит о том, что перспективы у языка великолепные.

Будет ли он востребован в будущем?

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

Каковы перспективы JS-разработчика на рынке труда?

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

Почему новичку стоит обратить внимание на этот язык?

количество информации, которую можно найти в интернете;

развитая экосистема в виде огромнейшего количества библиотек и инструментов для разработки;

очень хорошее комьюнити;

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

высокий спрос на рынке труда;

Сергей Рубанов, опытный разработчик и лидер сообществ. Приглашённый эксперт TC39 (комитет, который занимается разработкой языка JavaScript), участник WebAssembly Community Group, член команды Babel, соорганизатор BeerJS Moscow, WebAssembly Moscow, ведущий канала Juliarderity (совместно с Романом Дворновым).

Павел Черторогов: эх, а ведь были времена, когда разработчики стеснялись говорить, что они пишут на JavaScript. Сейчас всё не так

По вашему опыту, почему стоит изучать JS?

JavaScript в последние годы стал набирать безумные обороты.

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

А в браузерах обосновался старичок JavaScript. Причем если лет 5-10 назад было стыдно говорить, что ты программируешь на JavaScript, так как его было сложно считать удобным и производительным языком, то после выхода ES6 удобство резко возросло и продолжает расти благодаря работе комитета TC39 (куда входят куча спецов из больших компаний), который развивает синтаксис языка.

Производительность языка постоянно увеличивается. Но благодаря большому комьюнити, интересу больших интернет гигантов к языку, неуклонно растет количество инструментария, которые сильно облегчает разработку. Например, ESlint (проверка стиля кода), Prettier — автоформатирование кода, Babel — для транспилинга кода и напиcания всяких AST-трансформеров, JIT-компиляторов.

Но что не может не радовать, так это TypeScript, который позволяет писать статически типизированный код (Flowtype проиграл для меня войну). Статическая типизация позволяет писать более стабильный и качественный код, дает плюшки автоподстановки в IDE. В общем, корпоративный сектор все больше задач может доверить миру JavaScript. Современный джаваскрипт с классами, декораторами, интерфейсами, типизацией все больше и больше становится похожим на Java в хорошем смысле этого слова. А если учесть, что JavaScript сейчас работает как на клиенте (в браузере), так и на сервере (NodeJS), то это это для бизнеса открывает возможность писать изоморфные приложения.

Будет ли этот язык востребован в будущем?

За пару лет популярность JS должна будет только расти. Ведь столько еще чудовищных интерфейсов вокруг, столько мертвых страниц, сгенерированных сервером. JS будет теснить PHP и Ruby.

Так или иначе JavaScript еще будет востребован как минимум лет 10, дальше прогнозировать сложно.

Что угрожает JavaScript/TypeScript:

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

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

В любом случаем надо постоянно учиться и развиваться, чтоб соответствовать текущему времени. Но, к бабке не ходи, лет через 10 надо точно будет чему-то сильно переучиваться.

Каковы перспективы разработчика JS на рынке труда?

Сейчас есть некий перекос в сторону фронтенд-разработчиков, которые производят wow-эффект на клиентов. К примеру, на Украине сейчас активно ищутся React/Vue/Angular разработчики. И нередко зарплата таких фронтенд-специалистов с опытом 1-2 года по зарплате соизмерима со среднестатистическим Java-бэкендером с опытом 6-8 лет. Нужны легкие деньги после универа?! Вперед в JS!

Почему новичку стоит обратить внимание на JS?

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

Павел Черторогов, архитектор информационных систем, GraphQL-гуру.

Роман Дворнов: JavaScript вряд ли куда-либо денется в ближайшие годы

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

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

Кстати, о новом. JavaScript — один из немногих языков с таким немалым возрастом (был создан в декабре 1995-го), который настолько динамично развивается сегодня. Формально все началось в 2015 году, когда вышла новая редакция ES2015 (или ES6) и было решено выпускать новую редакцию каждый год, хотя на самом деле всё началось задолго до этого. Не каждый год случаются значительные изменения, но изменения происходят и чувствуется темп. Можно следить за работой TC39 (комитет работающий над спецификацией языка), участвовать в обсуждениях предложений, вносить свои предложения и так далее – процесс открыт, и это здорово. К тому же, сегодня имплементаторы внедряют новые фичи накануне принятия новой редакции спецификации языка, а не несколько лет спустя, как это было раньше.

Низкий порог входа всегда был предметом споров: с одной стороны, вовлекается больше людей, с другой — их уровень как специалистов невысок. Это, плюс часто неглубокое изучение, обычно и создает негативное отношение к языку. Чтобы использовать JavaScript эффективно, его нужно изучать полностью, и дополнительно множество смежных областей, а особенно Computer Science, как это делают в случае с другими языками. Все больше задач с применением JavaScript не уступают по сложности задачам решаемым с другими языками.

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

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

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

Роман Дворнов, эксперт в области фронтенд-разработки, ведущий канала Juliarderity (совместно с Сергеем Рубановым). Профиль на GitHub.

Андрей Оконечников: будем ли мы писать JS через несколько лет — неизвестно, но 99% что мы будем продолжать компилировать в JS

По вашему опыту, почему стоит изучать JS? Какие перспективы у этого языка программирования по сравнению с другими языками?

Несмотря на интересные альтернативы, такие как ReasonML, Kotlin и уже существующие языки, которые компилируются в JS, такие как ClojureScript и Elm, это никак особенно не влияет на всё растущую популярность JS. Причина для того, на мой взгляд, в низком пороге входа и огромной экосистеме (npm). На JS написано несколько миллионов опенсорс модулей, которые можно установить за считанные секунды. Плюс возможность открыть консоль разработчика в браузере и начать писать код.

Развитие распределенных сред разработки, которые работают напрямую из браузера, например CodeSandbox, ещё более уменьшают порог входа для новичков. Инструменты разработки становятся лучше и лучше, позволяя использовать JS в больших командах.

Одновременно с этим, растущая производительность JS runtimes, например V8, делает использование этого языка все более приемлемым на платформах вне веб-браузеров.

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

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

Будет ли JS востребован в будущем?

JavaScript никуда не денется в ближайшее время, хотим мы того или нет. На этом языке уже сейчас написано огромное количество кода, и количество это будет только увеличиваться. И даже если появится более современный язык, веб-браузеры все равно будут вынуждены поддерживать JS. Так устроен web — вечная совместимость. Будем ли мы писать JS через несколько лет — неизвестно, но 99% что мы будем продолжать компилировать в JS.

Каковы перспективы разработчика JS на рынке труда? Почему новичку стоит обратить внимание на JS?

Сейчас перспективы как никогда лучше. Особенно связанные с фронтендом. Веб превращается в платформу для по-настоящему сложных приложений, и рынок просто не способен удовлетворить потребность компаний. Но JS не единственный фактор. Умение писать CSS и доступный HTML важны сегодня как никогда. Рынок JS разработчиков наполняется в основном из backend-разработчиков, переквалифицирующихся во frontend. Если вы видите себя во frontend, я бы очень рекомендовал обратить внимание на основы дизайна, user experience, HTML + CSS и, конечно же, JavaScript.

Если вы дизайнер и уже умеете писать разметку и CSS, я бы так же советовал начать изучать JavaScript. В будущем граница между JS и CSS-программистами будет исчезать, так как очень сложно сделать хороший user experience в Web без использования обоих языков.

Андрей Оконечников, фронтенд-разработчик и UI-дизайнер родом из Ярославля, живущий в Вене, Австрия. Более 10 лет он придумывает и разрабатывает пользовательские интерфейсы, используя современные веб-технологии. До этого он работал дизайнером веб-сайтов и пользовательских интерфейсов. Комбинация опыта дизайнера и разработчика помогает ему лучше понимать проблемы пользователей и находить оригинальные решения в пользовательских интерфейсах.

Андрей работал с такими компаниями, как Yandex, JetBrains, Feedly, Netlify и многими другими. Он основатель консалтинг-компании component-driven.io, специализирующейся на дизайн системах и сложных веб-интерфейсах, и создатель macOS приложения цветовой пипетки для разработчиков и дизайнеров ColorSnapper.

Александр Казаченко: на одного подходящего кандидата приходится 10 или более неподходящих, это печалит

По вашему опыту, почему стоит изучать JS?

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

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

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

И на сервере JS тоже имеет свою нишу в виде Nodejs.

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

Но если посмотреть не с точки зрения прагматизма, а с точки зрения энтузиазма, то в этом смысле JS тоже очень привлекателен.

Сейчас существует множество языков, транспилирующихся в JS (TypeScript, CoffeeScript, Kotlin и так далее), много фреймворков и библиотек разного уровня абстрактности, что позволяет разрабатывать на JS так, как нравится именно вам.

Какие перспективы у самого языка программирования в сравнении с другими? Будет ли он востребован в будущем?

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

Соответственно, можно считать, что в ближайшие лет 10 JS не только не умрет, но и будет активно развиваться.

На какое направление при изучении JS обратить больше внимания — frontend или backend?

Изначально JS применялся сугубо для frontend’а, соответственно и развился он больше в эту сторону. Но это не имеет никакого значения, при выборе направления — frontend или backend. Более значимым в этом выборе будет то, чем интересно заниматься именно вам. Так как язык один и тот же, разница только в окружении.

Какие перспективы у JS-разработчика в работе? Почему новичку стоит обратить внимание на этот язык программирования?

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

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

За последние 3 года я прособеседовал не менее 200 человек, и на одного подходящего кандидата приходится 10 или более неподходящих, это печалит.

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

Стоит ли браться за JavaScript: итоги

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

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

Примечание: мнение экспертов может не совпадать с мнением администрации и сотрудников Хекслета.

Тенденции языка JavaScript в 2020 году

«В 2020 году профессиональный рост очень важен для каждого разработчика. Нужно ли в таком случае заняться изучением JavaScript (JS)? Этот язык программирования используется для создания интерактивных и функциональных веб-приложений, которые не просто наполнены однообразными страницами. Примерно 94,5% всех сайтов сети Интернет используют его. JavaScript также применяется для сценариев на стороне клиента, которые незаметно для пользователя интегрируются в HTML, и для кода на стороне сервера с помощью кросс-платформенного механизма выполнения Node.js» — пишут Hyperiondev.

Мастер Йода рекомендует:  Инспектирование кода лучшая практика

Популярность JavaScript в 2020 году

Индекс TIOBE определяет популярность различных языков программирования. При подсчете данного показателя учитываются следующие критерии: общее количество квалифицированных разработчиков по отдельно взятому языку, обучающих курсов, предлагаемых по данному направлению, и заказчиков. Полученная информация сопоставляется с наиболее популярными запросами в Google, Bing, Yahoo!, Wikipedia, Amazon, YouTube и других крупных ресурсах, содержащими название языка. В апреле 2020 года, как и в апреле 2020 года, JavaScript был признан восьмым языком в рейтинге популярности TIOBE.

Такое положение вещей подтверждает PYPL (индекс популярности языков программирования), который отслеживает, насколько часто в поисковой системе Google ищут обучающие курсы по определенным направлениям. Согласно данным, полученным в марте 2020 года, JavaScript поднялся на 3 позицию в этом рейтинге. Индекс PYPL помогает определиться, какой язык программирования начать изучать или использовать в новом проекте. Вот пять наиболее популярных языков по этому критерию:

Нужны ли еще какие-нибудь доводы, чтобы понять важность изучения JavaScript? Исследование о состоянии различных направлений программирования, в рамках которого анализируется деятельность более 21 700 разработчиков из 169 стран, установило, что JavaScript является наиболее популярным языком программирования. Его применяют в своей работе более 9,7 миллионов программистов. Это на 2,4 миллиона больше, чем язык, занявший второе место в рейтинге.

Почему JavaScript настолько популярный язык программирования?

Согласно изданию Mashbale, выбор JavaScript никогда не будет ошибочным по следующим причинам:

  • JavaScript можно сравнить с английским языком, который также является общепризнанным. Он используется на абсолютно любых платформах, включая браузеры, мобильные и автономные приложения, а также применяется в устройствах направления IoT;
  • Это лучший язык для новичков. Языки сценариев легче изучать, чем компилируемые языки, например C++;
  • Многие лучшие мировые сайты и приложения, включая Paypal, Netflix, LinkedIn и Uber, работаю на JavaScript, вернее на Node.js (особая среда JavaScript, выполняющая код);
  • Существует большой спрос на изучение JS даже среди опытных разработчиков! Популярный ресурс StackOverflow провел собственное исследование, в котором приняло участие 101 592 разработчика. Было выявлено, что квалифицированные программисты действительно заинтересованы в изучении JavaScript.В окончательном рейтинге язык занял 2 месте. Из общего количества респондентов 19% хочет изучать этот язык.


На следующем графике показано 5 наиболее востребованных языков, согласно исследованию ресурса StackOverflow.

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

Зарплата JavaScript разработчиков в 2020 году

Согласно данным ресурса Glassdoor, по состоянию на март 2020 года средняя зарплата JavaScript разработчика составляла $72 500 в год. Диапазон зарплат располагается в пределах $51 000 — $120 000 в год. Зарплаты Python разработчиков выше. Их среднее годовое значение в США составляет $92 000. Что касается Java, то здесь средняя годовая зарплата разработчиков, согласно ресурсу Salary.com, на март 2020 года составляла $89 603. Их диапазон от $74 844 до $101 025.

Спрос на JavaScript разработчиков в 2020 году

Одним из способов подсчета спроса на разработчиков является анализ объявлений о приеме на работу. Сообщество Coding Dojo изучило 7 наиболее популярных вакансий на сайте Indeed.com. JavaScript в этом аспекте находится на третьем месте. Стоит отметить, что количество вакансий с 2020 года сократилось на 2000.

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

Причины успеха JavaScript

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

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

История JavaScript

Когда в 1990-х годах Интернет испытывал небывалый подъем, технологические компании боролись за создание на рынке лучшего веб-браузера. Это вызвало первую «войну браузеров» между Microsoft (Internet Explorer) и NetScape (NetScape Navigator), которые боролись за доминирование на рынке веб-браузеров.

Первая версия Netscape Navigator

Для упрощения программирования для Netscape нужен был легкий язык сценариев. Это, в конечном счете, сделало бы веб-разработку более доступной, в отличие от других языков, требовавших более глубокого изучения. В 1995 году работнику Netscape Брендану Эйху было предоставлено десять дней, чтобы помочь компании создать легкий язык сценариев. В результате он создал язык, который позже был переименован в JavaScript.

Мораль этой истории в том, что JavaScript никогда не задумывался становиться стандартным языком для Интернета!

Однако после того как Netscape была приобретена AOL, которая передала код своего браузера в Mozilla Foundation, популярность JavaScript выросла. И JavaScript теперь является важной веб-технологией, поддерживаемой самыми популярными веб-браузерами. Знакомство с языком имеет решающее значение для всех, кто хочет стать веб-разработчиком, поэтому он является наиболее часто используемым языком программирования. А если вы хотите стать веб-разработчиком как можно скорее, то рад предложить вам мой видеокурс «React JS, Redux, ES2015 с Нуля до Гуру»

Популярность JavaScript

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

  • JavaScript можно использовать как на стороне браузера, так и на стороне сервера.
  • Частые обновления языка.
  • JavaScript работает с объектной моделью документа (DOM), для взаимодействия с пользователем.
  • JavaScript добавляет на сайт интерактивность, такую ​​как переходы с прокруткой и перемещение объектов. Современные браузеры конкурируют в области быстроты обработки JavaScript. Chrome, самый используемый интернет-браузер в 2020 году, настолько успешен отчасти из-за его способности быстро обрабатывать JavaScript.

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

На этом все, спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    10 вещей, которые надо знать, чтобы стать мастером JavaScript

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

    1. Поток команд

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

    • if else — если вы этого не знаете, как вообще раньше писали код?
    • switch —то же, что и if else, только в чуть усложненном виде. Применяйте его, когда у вас несколько различных вариантов.
    • for — циклы созданы, чтобы вам не приходилось повторяться. Полезен будет не только простой for , `for of`и for in тоже весьма пригодятся. Большим достоинством циклов for является блокировка, поэтому в них можно использовать async await.
    • Предварительные условия — Применение ternary и логических операторов значительно облегчит вашу жизнь. Особенно если вы производите промежуточные действия и не хотите сохранять значения, чтобы использовать их дальше.

    2. Устранение ошибок

    Это заняло у меня немало времени. Не важно, работаете вы с front-end или back-end, первый год работы вы всегда будете пользоваться console.log или console.error для “устранения” ошибок. Для того, чтобы писать качественные приложения, вам нужно избавиться от этой привычки, и вместо использования ленивых логов устранять ошибки правильно. Разберитесь, как написать свой собственный конструктор Error, как правильно находить ошибки, а также как показывать пользователю, в чем проблема.

    3. Модели данных

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

    4. Асинхронность

    Это очень важный аспект JavaScript. Вызываете ли вы данные из back-end или асинхронно выполняете запросы в сам back-end, в любом случае вы столкнетесь с асинхронностью и связанными с ней проблемами. Если вы не знаете, что такое асинхронность, вы столкнетесь со странной ошибкой, которую будете пытаться решить пару часов. Если вы знаете, что это, но не знаете, что с этим делать, вы попадете в ад обратных вызовов. Лучше в ваших приложениях использовать промисы и/или async await.

    5. Управление DOM

    Это интересная тема. Чаще всего, описывая обычную работу программиста, про это забывают. Может быть, вы изучили jQuery, и вам и не нужно было учиться навыкам управления DOM. Может, вы просто работаете с front-end фреймворком, где управление DOM используется редко. Однако я считаю, что это очень важный аспект для понимания JavaScript, как минимум во front-end. Понимание того, как работает DOM и как получать доступ к элементам, поможет вам лучше понять, как работают сайты. К тому же, обязательно наступит момент, когда вам придется работать с DOM, даже если вы используете современные front-end фреймворки, и вы точно не хотите вводить jQuery в ваш package.json , чтобы просто получить доступ к элементу.

    6. Node.js / Express

    Даже front-end разработчики должны знать азы node.js. Хорошо, если вы также будете знать, как запустить простой сервер Express, добавить новые маршруты или изменить существующие. JavaScript хорошо подходит для написания скриптов, которые помогут в автоматизации выполнения задач. Таким образом, зная, как читать файлы и работать с путями к файлу и буферами, вы получите набор инструментов для создания чего угодно.

    7. Функциональный подход

    Спорам между любителями функционального и объектно-ориентированного программирования нет конца. С помощью обоих подходов вы можете достичь одних и тех же целей. А JavaScript всё упрощает, так как объединяет оба этих подхода. Библиотеки вроде lodash предоставляют вам отличный набор средств для создания приложений при помощи функционального подхода. Сейчас вам даже не придется использовать какие-то внешние библиотеки. Многие наиболее важные функции были внедрены в официальных версиях JavaScript. Вам обязательно нужно научиться использовать map `reduce` filter `forEach` и `find`.

    8. Объектно-ориентированный подход

    Вам также стоит познакомиться и с объектно-ориентированным JavaScript, если вы хотите полностью освоить его. Долгое время в работе я пренебрегал этой частью, и всегда находил обходные пути. Но иногда действительно стоит применять объекты/классы и экземпляры, чтобы использовать определенные функции. Классы широко используются в React, MobX и пользовательских конструкторах.

    9. Front-end фреймворк

    React.js, Angular и Vue.js составляют “большое трио”. Если сейчас поискать вакансии, практически в каждой из них будет требоваться знания чего-то из этого. Несмотря на то, что они быстро изменяются, важно понимать основную суть этих библиотек и фреймворков, чтобы понимать, как работают приложения. К тому же, с их помощью легче писать приложения. Если вы ещё не выбрали, что изучать, я советую React.js. Последние пару лет я работаю с этой библиотекой, и ни разу не пожалел об этом.

    10. Объединение / транспиляция

    К сожалению, это большая часть разработки приложений. С одной стороны, мне не стоит говорить “к сожалению”, потому что здорово иметь возможность писать код, используя все новые функции. С другой стороны, я так говорю, потому что всегда нужно помнить о том, что существуют старые браузеры, которые эти функции не поддерживают. Поэтому нам приходится транспилировать наш код, чтобы он обрабатывался старыми браузерами. Если вы работает с node.js, то прибегаете к транспиляции реже. Для транспиляции обычно используют babel.js, изучите его. Для объединения кода и связи всех частей между собой существует пара способов. Раньше наиболее распространенным был Webpack. Но некоторое время назад откуда ни возьмись появился parcel, на данный момент мне он нравится больше. Пусть он и не идеален, но он эффективнее и проще в настройке, чем Webpack.

    Бонус: Регулярные выражения

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

    Тестирование

    Тестирование — это действительно очень важная часть разработки приложений, в том числе и в JavaScript. При написание кода, прежде чем запустить функцию, вы (в идеале) должны провести тестирование, пусть даже и ручное. Лучше будет применять автоматическое тестирование. Существуют разные типы тестов: модульное, сквозное, нагрузочное тестирование, проверки безопасности и front-end (например, подключен компонент или нет). Также есть множество различных тестовых сред: enzyme, jasmine, mocha, chai, и т.д. Сейчас мне больше всего нравится ava.js, советую изучить её, если вы до этого не работали с автоматическим тестированием.

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

    Задачник по Javascript?

    Alex_87, ничего конкретного не посоветую. Я изучал своим путём. Путём проб и ошибок плюс много неполной, скучной документации в формате книг «Js для чайников», потому что интернет тогда был убогий.

    Мой путь тебе не понравится.

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

    10 самых интересных статей по JavaScript за май + бонус

    These crawls are part of an effort to archive pages as they are created and archive the pages that they refer to. That way, as the pages that are referenced are changed or taken from the web, a link to the version that was live when the page was written will be preserved.

    Then the Internet Archive hopes that references to these archived pages will be put in place of a link that would be otherwise be broken, or a companion link to allow people to see what was originally intended by a page’s authors.

    The goal is to fix all broken links on the web. Crawls of supported «No More 404» sites.

    This is a collection of web page captures from links added to, or changed on, Wikipedia pages. The idea is to bring a reliability to Wikipedia outlinks so that if the pages referenced by Wikipedia articles are changed, or go away, a reader can permanently find what was originally referred to.

    This is part of the Internet Archive’s attempt to rid the web of broken links.

    30 сайтов-примеров отличного использования JavaScript Материал редакции

    Ресурс Creative Bloq опубликовал материал, в котором его авторы поделились с читателями лучшими, на их взгляд, примерами использования JavaScript для создания сайтов. ЦП выбрал 30 самых интересных ресурсов.

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

    1. Портфолио Майка Куса

    Портфолио веб-дизайнера Майка Куса выполнено в «чистой и сдержанной манере», пишут редакторы Creative Bloq. В нём большие изображения сочетаются с простыми элементами пользовательского интерфейса.

    «Я думаю о своих работах, как о бренде. Нет никакой необходимости добавлять в мой сайт лишние элементы дизайна», — говорит Кус.

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

    Мастер Йода рекомендует:  12 вещей, которые нужно учесть при оценке библиотеки JavaScript

    2. Hello Monday

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

    Старый сайт агентства Hello Monday

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

    Обновлённый сайт Hello Monday

    «Мы пытались отойти от шаблонного представления о том, как должен выглядеть сайт креативного агентства», — рассказывает Кэти Хертел, руководитель проекта по редизайну веб-страницы Hello Monday. Авторы материала находят сайт очень привлекательным и отзывчивым, чему способствует организация проектов на главной странице: она автоматически дополняется новыми работами агентства при прокрутке вниз.

    3. Multeor

    Multeor — это многопользовательская онлайн-игра, написанная на JavaScript с использованием элемента canvas HTML5. Она разработана Арьеном де Врайзом и Филидором Вайзе, а спроектирована Артуром ван Хугом. Основная задача пользователя в игре — контролировать падение метеоритов, получая очки за оставленные им разрушения.

    Игра использует Node.js-сервер для управления связью между настольными и мобильными устройствами с помощью WebSockets.

    Вайзе акцентирует внимание на том, что при разработке Multeor не использовались уже существующие игровые библиотеки:

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


    4. Crime Timeline

    Crime Timelime — агрегатор, собирающий данные о преступности в Великобритании с помощью публичных API. Он позволяет пользователям узнать, как обстоят дела в их регионе.

    «Мы организовали сайт таким образом, чтобы он показывал карту региона и места совершения преступлений — за месяц, выбранный пользователем на панели снизу», — говорит разработчик проекта Алекс Миллер.

    Ресурс использует API Google Maps, для создания панели с месяцами применялись jQuery и jQRangeSlider. Когда пользователь взаимодействует с картой — например, щелкает мышкой в определенное место на ней, сайт обновляет изображение с помощью JavaScript. «Пузырьки», показывающие количество преступлений, были созданы с помощью CSS и анимированы с помощью jQuery.

    5. Here is Today

    На сайте Here is Today язык JavaScript использовался для создания анимации. Создатель ресурса, дизайнер Люк Твимэн, так объясняет свою идею: «Я хотел создать что-то, что дало бы каждому человеку ощущение масштаба времени. Here is Today помогает понять, насколько обширна история вселенной».

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

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

    6. Tweetmap

    Tweetmap изображает на страны на карте пропорционально количеству отправленных из них твитов. Разработчик сервиса Роб Хоукс перечисляет несколько технологий, использованных при его создании: TopoJSON, D3.js, Node.js, PhantomJS, и специальные алгоритмы построения смежных картограмм в режиме реального времени.

    Мы выбрали Node.js, потому что у нас уже был опыт его использования, и потому что это простая, быстрая и гибкая платформа. Для анимации карты (в формате TopoJSON) мы используем D3 — фантастическую библиотеку для визуализации данных. В частности, мы широко применяем модуль geo, который позволяет делать сложные географические расчеты и преобразования.

    Чтобы избежать проблем с представлением карт в браузере клиента, система генерирует карты на сервере с помощью D3, запускает и рендерит их с помощью движка PhantomJS, и только потом передаёт пользователю — это позволяет не создавать «дыр» при показе карт.

    7. The Trip

    The Trip — интерактивный фильм, созданный с помощью JavaScript и HTML5 (без использования Flash). Отто Наскарелла, создатель проекта, считает, что задача разработки подобного сервиса оказалась очень сложной:

    Большинство трудностей, с которыми мы столкнулись, были связаны с тем, что HTML5 на момент написания сайта не имел средств для кросс-браузерной разработки. Тогда мы решили, что будем рекомендовать клиентам использовать Chrome.

    Код сайта на JavaScript использует jQuery практически для всех задач. Разработчики также применяли TextBlur и TextDrop — для размытия и анимации текста.

    8. Si Digital

    Эта страница, написанная на JavaScript — новое портфолио и блог дизайнерского и маркетингового агентства Si Digital. Ведущий разработчик проекта Алекс Крук так объясняет анимацию на главной странице: «Жидкость, движущаяся по трубам, ведёт пользователей по нашему портфолио — она активирует анимацию изображений на каждом из этапов исследования сайта клиентом».

    Для достижения подобного эффекта Крук применил метод jQuery.animate(). К тому же, добавляет он, нужно было правильно выбрать скорость заполнения жидкостью труб — ведь все читают с разной скоростью.

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

    9. Сайт Жана Хальфстейна

    Жан Хальфстейн — веб-дизайнер. В его портфолио авторов статьи больше всего привлекла главная страница — и анимация на ней. «Я действительно неплохо провёл время, пока возился с различными эффектами. Я очень люблю использовать новые технологии, так что решил сделать основную страницу своего сайта своеобразной песочницей — там я развлекаюсь с Three.js и элементом canvas HTML5», — рассказывает Хальфстейн.

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

    10. Портфолио Ника Джонса

    По словам Джонса, когда он разрабатывал сайт, у него было больше опыта в работе с Flash, чем с JavaScript, но ему захотелось попробовать что-нибудь новое — чтобы понять, на что он способен. «Я сразу понял, что синтаксис JavaScript почти такой же, как синтаксис ActionScript — поэтому очень скоро полностью освоился», — описывает процесс написания кода Джонс.

    Джонс вспоминает, что Flash не давал ему доступа к работе с движениями мыши — это был новый опыт, который ему очень понравился. Разработчик хотел добиться такой отзывчивости сайта, которой он не мог достичь, используя переходы между классами в CSS. Джонс доволен достигнутым результатом:

    Если вы собираетесь перейти с ActionScript на JavaScript, не медлите ни секунды. Делая свой сайт, я хотел понять, способен ли JavaScript на то, на что способен Flash. И я очень впечатлён.

    11. MapsTD

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

    Создатель проекта Дункан Барклай объясняет, как это работает: «Мы использовали API Google Maps, MooTools и JavaScript. Самая сложная часть — поиск маршрута, которым будут следовать враги пользователя. Как только игрок выбрал начальную точку, сервис осуществляет поиск долготы и широты, и вычисляет возможные пути c помощью Google».

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

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

    12. Glimpse Catalogs

    Ресурс Glimpse разработан совместно командой Windows IE и проектом TheFind, и соединяет в себе систему поиска TheFind и приложение тех же разработчиков для онлайн-шопинга на Facebook. В рамках Glimpse программисты выпустили собственный фреймворк, основанный на Turn.js.

    Целью команды с самого начала было сделать из Glimpse веб-приложение, а не обычный сайт. Разработчики использовали парадигму «модель-представление-поведение», которая разделяет на три отдельных компонента модель данных, пользовательский интерфейс и взаимодействие с клиентом. Сервис применяет шаблоны рендеринга моделей на стороне клиента Thrift или JSON — в зависимости от вычислительной мощности клиента.

    Библиотека Turn.js также использовалась при разработке каталогов. С помощью CSS и JavaScript моделям, представленным на сайте, придаётся объём — за счет наложения теней на изображение.

    13. Red Bull Music Academy Radio

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

    Кроме того, при реализации сервиса применена библиотека Backbone.js — с помощью неё подгружаются плитки для создания эффекта бесконечной страницы.

    14. Nouvelle Vague

    Nouvelle Vague — сайт от французского дизайнерского агентства Ultranoir. Сервис позволяет «отслеживать» твиты по заданному хештегу. Он реализован с помощью JavaScript, WebGL и HTML5. HTML5, правда, отвечает только за тизер при открытии ресурса.

    Один из разработчиков агентства рассказал, что на создание сайта ушло четыре месяца, а трудились над ним три человека. «Нам было очень интересно попробовать поработать с WebGL», — объясняет он.

    Основная цель проекта заключалась в том, чтобы при помощи 3D-изображений воссоздать атмосферу из видеозаставки. Команда погрузилась в новые технологии HTML5, CSS3 и JavaScript, и считает, что эти языки могут стать стандартами для работы с 3D в будущем — из-за качественного рендеринга, богатых возможностей взаимодействия и реагирования.

    15. The Convergence

    The Convergence — браузерная игра, своей ретро-графикой напоминающая Super Mario Bros. Она демонстрирует потрясающие возможности JavaScript и HTML5 и доказывает, что HTML5 справляется со своими задачами ничуть не хуже, чем Flash.

    Разработчики обещают в будущем добавить в игру аудиосопровождение и новые уровни, а также поддержку Mozilla Gamepad API.

    16. Kindle Cloud Reader

    Это веб-приложение превращает слова «купите один раз, читайте на всех устройствах» в реальность. Оно использует технологии HTML5, JavaScript API, библиотеки jQuery и jQuery UI и несколько плагинов jQuery, в том числе jScrollPane для прокрутки страниц и jQuery Templates. Кроме того, команда разработчиков воспользовалась WebSQL для поддержки офлайн-режима.

    17. Les Enfants Terrible

    Сайт, запущенный студией WeFail, считают авторы заметки, выглядит страшновато, но всё равно очень круто. Ресурс выполнен в довольно резком стиле. JavaScript используется для анимации при взаимодействии пользователя и системы. Чтобы прокручивание осуществлялось только для отдельных элементов интерфейса, командой был применён плагин jQuery ScrollTo. Для появления видео не во всплывающих окнах, а прямо на сайте использовалась библиотека Shadowbox.js.

    Кроме того, в коде Les Enfants применяется плагин jQuery Cycle — он отвечает за отображение картинок и примеров работ агентства.

    «Мы запустили Les Enfants, чтобы понять, какие возможности по производительности имеются у JavaScript. Оказалось, что в сочетании с СSS Transform можно добиться отличных результатов», — говорит разработчик Мартин Хью.

    Не так давно, отмечает Хью, подобные вещи можно было создавать только при помощи Flash, но теперь у него есть жизнеспособная альтернатива — JavaScript.

    18. Pinterest

    Pinterest — яркий пример использования JavaScript для создания эффекта бесконечной страницы. Для создания сайта понадобились инструменты jQuery, jQuery UI и плагин PageLess.

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

    19. Love Bomb Builder

    Love Bobm Builder помогает пользователям выразить свою любовь или благодарность кому-либо. Это аккуратный и простой сайт, который позволяет создать и отправить послание-бомбу.

    Ресурс иcпользует инструмент Modernizr для своевременного обновления кода на JavaScript и HTML5.

    20. Michelberger Booze

    Когда пользователь попадает на сайт, первым делом он видит так называемый «прелоадер» — может показаться, что он выполнен при помощи Flash, но это не так. За наполнение стакана пивом по мере загрузки отвечает HTML5 и JavaScript.

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

    Нажимая на маски животных, клиент отправляется к другим сценам — все анимационные эффекты в которых исполнены при помощи jQuery.animate().

    21. Trello

    Trello — приложение для совместного или индивидуального планирования, в котором пользователи могут создавать списки выполненных и невыполненных задач и делиться прогрессом в режиме реального времени. Сайт разработан с использованием Node.js, MongoDB и Backbone.js.

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

    Общение между пользователями реализовано с помощью Web Sockets — ле Черминан отмечает, что это достаточно новая технология, поэтому при её настройке возникали некоторые сложности.

    22. BrowserQuest

    Это игра в ретро-стиле, созданная студией Little Workshop, призвана продемонстрировать возможности HTML5, JavaScript и, в особенности, Web Sockets. Он может одновременно поддерживать взаимодействие между тысячами пользователей.

    «Создание многопользовательской игры — отличный способ продемонстрировать, как такие технологии могут работать вместе. BrowserQuest опирается на серверы Node.js, каждый из которых может запустить несколько экземпляров игрового мира», — рассказывает разработчик студии Гийом Лекольне.

    23. JS1k

    JS1k — ежегодный конкурс, задача участников которого создать страницу на JavaScript на заданную тему (чаще всего — анимированные изображения). Её вес не должен превышать 1 КБ.

    Тема этого года — «Here be dragons».

    Работа-победитель конкурса в 2012 году. Автор — Филипп Бучанан, тема — «Любовь»

    Работа победителя 2012 года изначально весила 8 КБ — но за день Филипп смог сократить её размер до требуемого 1 КБ, оптимизировав алгоритм генерации дерева:

    Моей тактикой был «честный обман» компилятора. Например, использование конструкции «a ? b : c» вместо «if (a) b else c» экономит 8 байтов.

    24. Timeline

    Сервис помогает пользователям создавать таймлайны, и он очень прост в использовании. В интерактивную шкалу можно включать твиты, видео, фотографии и аудиозаписи. Свой таймлайн можно описать с помощью JSON или Google Docs — как удобнее самому клиенту.

    25. Draw a Stickman

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

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

    26. Panera Bread

    Рекламный сайт сети пекарен Panera Bread был создан агентством Luxurios Animals. Технический директор студии Дэн Федермен говорит, что разработчики с самого начала решили реализовывать проект на CSS3 там, где это возможно, а для всего остального использовать JavaScript.

    Анимация с помощью CSS3 обеспечивает плавность переходов на всех типах устройств. Кроме того, команда воспользовалась библиотекой Hammer.js для обработки прикосновений, Backbone.js для создания моделей данных, плагинами jQuery Transit и Isotope и HTML.

    27. Peanut Gallery

    Peanut Gallery — проект, реализованный Google Creative Lab. Сайт позволяет пользователям добавлять озвучку в «немые» короткометражки с при помощи микрофона. Ресурс использует Google Speech API и JavaScript API — они помогают интегрировать распознавание речи в веб-приложения.

    Валден Кламп, один из разработчиков проекта, выделяет на его взгляд интересную особенность Google Speech API — динамического распознавание речи. Например, если англоязычный пользователь начинает произносить «European Union», то сначала распознаётся слово «your» или «year» и лишь под конец оно преобразовывается в «European». Ещё одна полезная возможность — распознавание знаков препинания. Словосочетания «вопросительный знак», «восклицательный знак» и другие автоматически превращаются в соответствующие им пунктуационные знаки.

    28. The Interactive Ear

    «Интерактивное ухо» создано агентством Epiphany Solutions для своего клиента Amphilon, который специализируется на слуховых аппаратах и других решениях для слабослышащих людей. Ресурс ориентирован на детей возраста младшей и средней школы. Сайт состоит из трёх «витрин», демонстрирующих, как устроено человеческое ухо.

    Создатель проекта Брайан Джеймс отмечает, что благодаря использованию JavaScript, HTML5 и CSS команда смогла достичь максимальной производительности даже в устаревших и неподдерживаемых браузерах. Анимации при исследовании уха с помощью лупы — это GIF-изображения.

    29. Violin

    Violin — инструмент для визуализации кода на JavaScript. Он показывает, как части приложения взаимодействуют друг с другом в режиме реального времени. Сам сайт выполнен на JavaScript с использованием библиотеки D3.js для построения графиков.

    30. Сайт Филиппы Грегори

    Сайт британской писательницы Филиппы Грегори, автора романа «Ещё одна из рода Болейн», выполнен по её заказу агентством Better. Основной задачей разработчиков являлась оптимизация площадки для всех видов устройств. Ресурс построен на базе FuelPHP CMS. JavaScript отвечает за пользовательский интерфейс, интерактивность и плавность переходов на сайте.

    Добавить комментарий