• Какие задачи нужно уметь выполнять на JS начинающему?

    copist
    @copist
    Empower people to give
    Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?


    Кроме синтаксических конструкций, математических и логических выражений, нужно знать:
    • Область видимости переменных
    • Замыкания
    • Объектно-ориентированное программирование, в частности наследование через прототипы
    • Шаблон проектирования "модуль"
    • Операции над DOM
    • Понимание принципов событийно-ориентированного программирования
    Важно - нужно знать, откуда копипастить.
    Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало.

    Важно - инструменты программиста JavaScript
    У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
    Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.

    Хотелось бы узнать что это за задачи(упомянутые вами 80%)


    Реальные задачи джунов:
    1. Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает.
      Важно - читать и понимать чужой код намного важнее, чем писать свой. И на работе тебе это приддётся делать чаще, чем ты думаешь. Чтобы подключить к своему проекту чужую JS либу, нужно понимать что она делает, как она конфигурируется, как управлять её поведением. Скажу точно, что написать свой скрипт, который строит графики, намного сложнее, чем понять, как настраивается highcharts.

    2. Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно
      1. Усложнение: удалять можно только буквы в словах, а знаки пунктуации и цифры удалять нельзя
      2. Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)
      3. Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность
      Важно - этим обычно все и занимаются - ищут баги. Только в реальной жизни они и без этого скрипта появляются. И не по одному, а прям пачками.

    3. На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из своего скрипта для построения графиков.
      1. Усложнение: на одном графике должны быть два курса, по разным шкалам. Наприме, курс доллара к евро и курс юаня к рублю
      2. Усложнение: первоначально график вывести в детализации по месяцам, но чтобы можно было "приблизить" (drilldown) детализацию до дней
      3. Усложнение: первоначально график вывести текущем месяце, но чтобы можно было загрузить данные для предыдущего месяца без перезагрузки страницы (AJAX)

    4. При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки.
      1. Усложнение: в всплывающем окне сделать навигацию по картинкам, вперёд/назад и к нужной картинке
      2. Усложнение: в всплывающем окне вместо картинки показать видео-ролик с Youtube
      3. Усложнение: в всплывающем окне показать текст HTML

    5. По клику на кнопку "Click me" показать всплывающую форму.
      1. Усложнение: реализовать проверку данных на корректность перед отправкой формы (непустое значение, минимальное количество символов, максимальное количество символов, минимальное числовое значение, максимальное числовое значение)
      2. Усложнение: если в значении текстового поля встретилась гиперссылка, то считать её за 22 символа при любой длине этой ссылки (как в твитере)
      3. Усложнение: реализовать отправку формы на сервер через AJAX, без перезагрузки страницы
      4. Усложнение: саму форму в виде HTML загрузить с сервера через AJAX, в момент клика по кнопке "Click me", правила проверок данных должны как-нибудь "извлечься" из самой загруженной формы, например из аттрибутов полей ввода

    6. К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты.
      1. Усложнение: сделать форму календаря мультиязычной. Хотя бы через настройки на том же JavaScript
      2. Усложнение: сделать так, чтобы с помощью календаря можно было выбрать диапазон дат, чтобы она была привязана к двум полям формы "дата начала" и "дата окончания", и чтобы значение в поле "дата начала" обязательно была меньше чем в поле "дата окончания"
      3. Усложнение: сделать так, чтобы с помощью в календаре можно было видно визуально этот диапазон
      4. Усложнение: диапазон может быть открытым, но не пустым, то есть пользователь должен задать хотя бы дату начала или дату окончания.

    7. Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме.
      1. Усложнение: сделать селектор "тип устройства", чтобы менять размер фрейма (например, "iPhone 5c 1136x640") и "чекбокс" для смены ориентации страницы "горизонтальная" или "вертикальная" (соответственно 1136x640 или 640x1136)
      2. Усложнение: в селекторе тем предусмотреть поиск тем по подстроке, и аналогично поиск устройств по части названия (авто-дополнение, auto-complete)
      3. Усложнение: тема страницы должна меняться без перезагрузки фрейма



    Задачи повышенной сложности, исходя из личного интереса
    1. Реализовать форму для многошагового мастера: форма должна состоять из нескольких страниц (шагов), пользователь может переключать страницы через какие-нибудь элементы управления "вперёд/назад" или "перейти на страницу".
      1. Усложнение: реализовать функциональную связь значений, когда некоторые данные зависят друг от друга (ввёл число в поле "количество" и в поле "сумма" значение пересчиталось)
      2. Усложение: доступность некоторых полей ввода должна зависеть от данных (например, если указал "есть личный самолёт", то значит можно ввести "марка самолёта")
      3. Усложение: видимость некоторых страниц должна зависеть от данных из предыдущих страниц (например, если указал "есть личный самолёт", значит появилась страница "ТТХ самолёта"; иначе страница должна скрыться)

    2. Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
    3. Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat"
      1. Усложнение: два игрока на разных компьютерах, ходы передаются по websocket
      2. Усложнение: ограничение на ожидания окончания хода 15 секунд, по окончании ожидания автоматически делается случайный ход

    4. Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включен, строка зачёркивается.
      1. Усложнение: пользователь может переименовывать, удалять, добавлять строки
      2. Усложнение: список хранить в localStorage браузера, чтобы при перезагрузке страницы он восстанавливался
      3. Усложнение: пользователь может иметь несколько независимых списков todo

    5. Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул.
      1. Усложнение: добавить переключатель режимов "точка"/"линия", в режиме "линия" рисуются линии между двумя последовательно кликнутыми точками
      2. Усложнение: можно менять толщину, цвет линий, размер точек
      3. Усложнение: последовательность кликов можно воспроизвести ещё раз с самого начала, равномерно или с реальной задержкой между кликами, с обычной скоростью или ускоренно
      4. Усложнение: можно выгрузить получившийся рисунок в формате PNG или SVG, причём SVG c анимацией воспроизведения



    Можно использовать любую существующую библиотеку.
    Например,
    для построения графиков www.highcharts.com
    для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
    для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox и https://jqueryui.com/dialog/
    для валидации форм rickharrison.github.io/validate.js
    для календаря https://jqueryui.com/datepicker/
    для автодополнения https://jqueryui.com/autocomplete/
    для передачи данных между несколькими пользователями socket.io или обычный AJAX
    Ответ написан
    16 комментариев
  • Почему люди уходят с фриланса в офис?

    Фрилансер должен найти заказ, провести переговоры, согласовать все аспекты задачи, изучить клиента на предмет адеватности, взять на себя риски и еще куча всего и только потом может начинать кодить. А офисный работник начинает кодить сразу, а для решения остальных задач есть другие отделы.
    Ответ написан
    Комментировать
  • Есть ли аналоги vk.me для вотсап и вибер?

    riot26
    @riot26
    <:З )~~
    Возможно, получится сделать с помощью URL scheme
    <a href="viber://add?number=%2B79165555555">Viber</a>
    <a href="whatsapp://send?abid=%2B79165555555&text=Hello">WhatsApp</a>
    Ответ написан
    4 комментария
  • Что изменилось за последнее время в российском IT?

    goodprogrammer
    @goodprogrammer
    к. ф.-м. н.
    За последние несколько лет сильно испортился хабр.
    Ответ написан
    1 комментарий
  • Чистый JavaScript, он жив?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Знаком с jQuery/AngularJS/JS

    но больше всего привлекает и нравится работа именно на JS

    Эм, все правильно понял? Вы пишите на jQuery/AngularJS/JS, но больше всего любите писать именно на js? Что-то тут не так!

    Терь по делу! Все, что будет дальше - это сугубо мое мнение!
    Вообще очень странный тренд, чистого js. А из вашего списка jQuery/AngularJS - это не чистый js? Возможно меня сейчас все зафейлят, но все же.

    В чем отличие jQuery от js? Вы можете его назвать? Я никакого не вижу. jQuery - это же всего лишь js обертка, которая позволяет использовать одни и те же функции в более удобном виде. Но написан то он на js, а значит это чистый js!!

    Например: напишем простейшую функцию скрытия элемента
    var hide = function(elem){
    	document.getElementById(elem).style.display = 'none';
    };
    
    hide('text');

    на jQuery
    $('#text').hide();

    Эти 2 функции делаю одно и тоже. Просто скрывают указанный элемент. И весь jQuery написан из таких функций, которыми приходится пользоваться постоянно!

    Получается если я напишу мини мини фреймворк на js для своего проекта, что бы не писать постоянно повторяющийся код и буду использовать его методы как при использовании jQuery, то я перестану использовать "чистый" js? Где в вашем понимании грань?
    Ответ написан
    5 комментариев
  • Почему в нынешнее время работодатели предъявляют высокие требования за маленькую ЗП?

    angrySCV
    @angrySCV
    machine learning, programming, startuping
    ну что я вижу, заявлен хайлоад проект (тоесть с посещаемостью ну хотябы несколько миллионов пользователей в месяц), если проект такой популярный следует ожидать что и доходность у него в районе нескольких миллионов в месяц.
    в такой проект требуется фул стек разработчик, который ещё и айти инфраструктуру разрулить сможет, возможно такая потребность потому что прийдётся работать за пятерых)
    что предлагают такому разработчику? - зарплату в 500-900 долларов.
    средняя зарплата неквалифицированных рабочих на фабриках Китая в районе 650 долларов в месяц.
    Да у меня тут таджик гастарбайтер плитку ложит, зарабатывает по 5-9 тысяч рублей в день.
    Я бы сходил на это собеседование, чтоб просто плюнуть этому работодателю в лицо, за такое унизительное предложение.
    Ответ написан
    1 комментарий
  • Как заставить отображаться шрифт Fira Sans в Chrome на Windows 7?

    @parfilov Автор вопроса
    Нашел на stackoverflow приблизительное решение:
    <link href='https://code.cdn.mozilla.net/fonts/fira.css' rel='stylesheet' type='text/css' />

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

    Примерно такой адаптивный вариант могу предложить
    Ответ написан
    Комментировать
  • Фриланс или офис для веб-дизайнера?

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

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

    А насчет переезда у всех отношение тоже разное.
    Я бы всерьез начал подумывать о переезде, если бы мне предложили заработок на новом месте как минимум в 100раз больше чем на текущем. Вот честное слово, если бы предложили в 95раз больше - послал бы не задумываясь.
    Ответ написан
    5 комментариев
  • Стоит ли делать Landing Page на WP?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Дизайн сайта является авторской собственностью ©

    Рукалицо) Думаете то что вы освоили пару фильтров в фотошопе уже делает ваш дизайн таким желанным для воров?)

    А так, лендинги можно вообще без CMS делать. Обычно инфа на них не меняется никогда или очень редко.
    Ответ написан
    2 комментария
  • Как верстать блоки сложной формы на чистом css?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Пример
    Используем псевдоэлементы и трансформацию.
    Простые углы реализуем за счёт рамки. Однако, если потребуется тень, придётся и там применить трансформацию.
    Для сложных углов вводим вложенный элемент и используем внутреннюю тень.
    И, конечно же, всегда есть вариант с использованием SVG в качестве фона (или напрямую).
    Ответ написан
    6 комментариев
  • Какой будет результат выполнения данного кода?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Чтобы было более наглядно:
    var a = 12; 
    function b() { 
        var a; // новая переменная a внутри функции
    
        if (!a) { // выполнится всегда, так как a == undefined
            a = 9; 
        } 
    
        alert( a ); 
    } 
    b();

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

    var a = 12; 
    function b() { 
        if (!a) { 
            a = 9; 
        } 
    
        alert( a ); 
    } 
    b();
    Ответ написан
    2 комментария
  • Как лучше реализовать такую круговую навигацию?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Это элементарно делается на d3js.org (да это SVG, но через JS API)
    Вот туториал: zeroviscosity.com/d3-js-step-by-step/step-2-a-basi...
    Ответ написан
    1 комментарий
  • Как стать верстальщиком в краткие сроки?

    serjikz
    @serjikz
    web-developer
    sorax канал. Где-то давно был пост с каналами для фронтендеров, уже забыл и искать влом. Через гошу найди "ютуб каналы для front-end". В короткие сроки вряд ли реально. Все тонкости только с практикой, а какие-то с глубокой практикой.
    На счет бутстрапа - я забыл, когда им пользовался (обычно пишу чистый css даже без препроцессоров, но иногда с ними явно удобней)
    На счет сборок - тоже редко, так как они больше для больших проектов (сорь за каламбур)
    На счет адаптивной вёрстки - это тоже только практика. Сначала надо научиться верстать статичные шаблоны, а потом делать адаптив. На самом деле в media нет ничего сложного и страшного, просто мы будто бы выкидываем предыдущий файл стилей для прошлого экрана и заменяем его новым файлом стилей. Грубо говоря так, но там надо основательно всего учитывать, особенно наследование и перезапись правил.
    Ну и на счет боевого проекта - готовь фотошоп, который нужно тоже так нормально знать, потому что плох тот верстальщик, который его не знает ровно как и плох тот дизайнер, который не представляет вёрстки. Идеальный вариант - уметь верстать и уметь рисовать дизайны сайтов ну и обрабатывать фотки, потому что это всё очень понадобится (всё больше встречаю криворуких дизайнеров, а о криворуких верстальщиках лучше вообще молчать).

    Главное - при написании кода думайте о тех, кто будет его поддерживать, но если вы занимались бекендом - наверняка это и так знаете.
    Ответ написан
    Комментировать
  • Стоит ли бросать работу и начать карьеру Front-end разработчика?

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

    vinceg.github.io/Bootstrap-Admin-Theme

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

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

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

    мой совет идти в таком направлении:
    html + css + js(нативный)
    адаптивный css
    препроцессор less или sass
    js framework можно jquery, bootstrap
    ajax, json, поверхностно xml
    gulp, grunt etc..
    а потом ныряйте в глубокую воду, шаблонизаторы типа mustache чтоб облегчить работу с большой датой.
    и только потом node, angular и им подобные.

    самое главное практика практика и еще раз практика.
    Ответ написан
    5 комментариев
  • Стоит ли бросать работу и начать карьеру Front-end разработчика?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    На моей первой работе была ситуация похожая на вашу. На работе конвейер и новых знаний вообще не было даже в планах. Чтобы исправить эту ситуацию, я начал параллельно с работой заниматься фрилансом. Сначала понемногу, потом все больше и больше. Как только доходы с фриланса превысили зарплату, я уволился и ушел на фриланс целиком.

    Рассматривать работу джуниором в вашем случае я бы не стал, не потому что вам 29, а потому что вы до этого уже по сути им и были. Быстро, с помощью фриланса подтягивайте знания и в какой-то момент уже идите нормальным верстальщиком, или даже фронт енд разработчиком.
    Ответ написан
    3 комментария
  • Какие преимущества фриланс имеет над работой в офисе?

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

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

    В общем лень мне в офис ходить, я спать с утра люблю.
    Ответ написан
    5 комментариев