• Что умеет выдающийся Frontend разработчик?

    Как человек, делающий и фронт и бэк говорю - бэк проще. На беке ты не паришься вообще с "особенностями" браузеров - у тебя их нет. У тебя вообще практически нет особенностей. У тебя нет необходимости держать в голове пяток яп и разметку(JS, TS, HTML+CSS, CoffeScript, LESS, SCSS) - у тебя есть твой PHP(PYTHON, JAVA) - только один яп. Отдельно идут инструменты сборки - gulp, grunt, webpack - ничего этого нет да и ненужно. Есть композер, который тянет зависимости и все. Тебе ненужно писать километровые конфиги, что бы собрать твое приложение. Линукс тоже знать совсем необязательно - все отлично можно делать и на винде. Ну или развернуть вагрант(докер). Код можно писать где угодно - а вертеться все будет на линуксе. А вот насчет тестирования бэк уделывает фронт на раз-два. Если ты полностью прогнал тестирование (phpunit, codeception) то ты на 99.999% уверен что все пойдет как надо. А вот со фронтом все не так. Ты физически не можешь протестировать ВСЕ браузеры.
    Но есть одно большое но. это конечно мое ИМХО, но всеже - фронт делать интереснее))
    P.S. Забыл упомянуть фреймворки и либы, которые мастхев знать на фронте - React, Vue, Angular и(только камнями не кидайте) jQuery.
    P.P.S Контрольный в голову. Сделали мы клиенту сайт на vue. Сдали, клиент доволен. А потом приходит и говорит - ребята, а на ie8 не работает. А мне очень надо, у меня крупный клиент(бюджетная организация), а у них у всех xp с ie8... (для справки - vue на ie8 не заведется).
    Ответ написан
    7 комментариев
  • Как отследить изменение свойства объекта?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Вешаю на него сеттер...

    Не-а, не на него. Созданное ранее свойство вы перетёрли вызовом defineProperty, кроме того, вы не определяете геттер - отсюда и undefined.

    Можно добавить геттер, само же значение сделать локальной переменной конструктора:

    function test(m) {
      let money = m;
    
      Object.defineProperty(this, 'money', {
        get() {
          return money;
        },
        set(val) {
          alert(`Значение свойства money меняется с ${money} на ${val}`);
          money = val;
        },
      });
    }

    Или можно воспользоваться Proxy:

    function test(m) {
      this.money = m;
    
      return new Proxy(this, {
        set(target, prop, val) {
          alert(`Значение свойства ${prop} меняется с ${target[prop]} на ${val}`);
          target[prop] = val;
          return true;
        },
      });
    }
    Ответ написан
    4 комментария
  • Существует ли "карта программиста"? Что и за чем учить?

    iCoderXXI
    @iCoderXXI
    React.JS/FrontEnd engineer
    Нет одинаково эффективного пути для всех и каждого.

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

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

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

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

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

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

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

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

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

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

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

    Ах да, обложись справочниками по любому инструменту и научись быстро вникать и подхватывать необходимый минимум. Обычно достаточно на 20% владеть инструментом, чтобы решать 80% задач.

    В любом случае я за критерий истины держу платежеспособный спрос.
    Ответ написан
    3 комментария
  • Где можно попрактиковаться в php?

    e_svirsky
    @e_svirsky
    Web Developer
    Лучшая практика по php ИМХО - написать свой фреймворк с нуля, разбираясь во всех нюансах и минимально копипастить с интернета.
    Недавно писал таск для своего ученика. Можете по нему попробовать по нему по шагам создать свой фреймворк.
    Тут лежит сам таск:
    https://bitbucket.org/e_svirsky/webshop/src/1e8de2...
    Тут же можно посмотреть реализацию:
    https://bitbucket.org/e_svirsky/webshop/src/1e8de2...
    По мере проверок некоторые моменты менялись, я их уже не заносил в файл таска. В любом случае это хороший старт и отличная практика. Если возникнут вопросы - задавайте.
    Ответ написан
    6 комментариев
  • Какие задачи нужно уметь выполнять на 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 комментариев
  • Что интересного есть в вашем стандартном шаблоне?

    @bogomazov_vadim
    Не знаю насколько интересно, но может кому пригодится. Частями найдено на просторах интернета, использую в своем template + normalize.
    Заменяем длинный текст placeholder многоточием:
    input[placeholder]          {text-overflow:ellipsis;}
    input::-moz-placeholder     {text-overflow:ellipsis;} 
    input:-moz-placeholder      {text-overflow:ellipsis;} 
    input:-ms-input-placeholder {text-overflow:ellipsis;}

    Скрываем placeholder при фокусе:
    :focus::-webkit-input-placeholder {color: transparent}
    :focus::-moz-placeholder          {color: transparent}
    :focus:-moz-placeholder           {color: transparent}
    :focus:-ms-input-placeholder      {color: transparent}

    Курсор для label + отмена раздражающего выделения при клике:
    label {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    Только вертикальный ресайз для textarea (horizontal часто ломает диз):
    textarea {
    	resize: vertical;
    }

    Убираем дефолтный курсив у address:
    address {
    	font-style: normal;
    }

    Убираем подсветку полей:
    input:focus,
    textarea:focus {
    		outline: none;
    }

    Адаптивные img:
    img {
    	height: auto;
    	max-width: 100%;
    	width: auto\9;
    }

    Адаптивные видео:
    .video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .video iframe,  
    .video object,  
    .video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    Перенос слов:
    .break-word {
            word-wrap: break-word;
    }

    Обнуляем списки глобально, т.к. часто используется для навигации и проч., в области контента можно задать другие стили.
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }

    Нумерованный список с подпунктами:
    ol {
    	counter-reset: list1;
    
    	li:before {
    		counter-increment: list1;
    		content: counter(list1) '. ';
    	}
    
    	ol {
    		counter-reset: list2;
    
    		li:before {
    			counter-increment: list2;
    			content: counter(list1) '.' counter(list2) '. ';
    		}
    
    		ol {
    			counter-reset: list3;
    
    			li:before {
    				counter-increment: list3;
    				content: counter(list1) '.' counter(list2) '.' counter(list3) '. ';
    			}
    		}
    	}
    }


    update дополнительно стили для печати

    P.S. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.
    Ответ написан
    5 комментариев
  • Можете накидать большую порцию задачек для практики Python-новичка?

    Я когда также искал наткнулся на один сайт там человек выложил тестовое задание которое он получил на вакансию Junior Python Developer.

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

    Собственно вот само задание:

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

    Задание
    Написать тестовое web-приложение по управлению электронной библиотекой:

    1. Редактирование (доступно авторизованному пользователю при наличии аутентификации):

    Управление списком книг: добавить / удалить / редактировать книгу.
    Управление списком авторов: добавить / удалить / редактировать автора.
    Запись о книге содержит следующие данные: ID, Название.
    Запись об авторе содержит следующие данные: ID, Имя.
    Свзязь между книгами и авторами — многие ко многим.
    2. Поиск книг по названию либо автору (доступно анонимному пользователю при наличии аутентификации).

    3. Аутентификации и авторизация (по желанию кандидата).

    Технологии, которые должны быть задействованы:

    Flask
    SQLAlchemy (Declarative)
    SQLite (встроенный в приложение)
    Jinja2 Templates
    WTForms
    jQuery (желательно, но возможно использование альтернативных решений)
    Список может быть расширен по усмотрению кандидата, но с обязательным использованием технологий, перечисленных выше.

    Дополнительные требования
    Список дополнительных требований следующий:

    1. Код проекта должен быть доступен на сервисе github.org или bitbucket.org.

    2. Проект должен содержать SQL-скрипты для развертывания базы данных и наполнения ее тестовыми данными.

    3. Пользовательские данные должны валидироваться перед сохранением в БД.

    Дополнительные знания
    Дополнительные знания, необходимые при защите проекта:

    HTTP
    WSGI
    SQL, Transactions, Transaction Isolation Levels
    SQLAlchemy
    Уязвимости веб-сайтов
    User Experience
    Ответ написан
    Комментировать