• Красивые анимации на js?

    qork
    @qork
    { background: #F00B42 }
    Ответ написан
    Комментировать
  • Где найти интерактивное изучение js?

    yurakostin
    @yurakostin
    Front-end developer
    Самый крутой интерактив это садиться и программировать.
    Всегда рекомендую, в качестве учебника для начала, прекрасный ресурс Ильи Кантора.
    https://learn.javascript.ru/
    Следуйте по урокам, выполняя все задачи, не переходите на следующий, пока не поймёте текущий. Если не получается решить задачу - посмотрите решение, но обязательно осознайте, почему работает так, а не иначе. Это может отнять время, но если js - технология, которая в будущем вам пригодится, то это время будет потрачено с пользой.

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

    Удачи.
    Ответ написан
    2 комментария
  • Как обустроена работа в веб-студии?

    akarin
    @akarin
    Сидят 3 хиспстера в свитерах и пьют кофе. Менеджер ищет на гитхабе что то похожее на свой будущий проект.
    Ответ написан
    Комментировать
  • Какие задачи нужно уметь выполнять на 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 комментариев
  • Какими бесплатными стоками вы пользуетесь для поиска иконок, фото и элементов интерфейса?

    dukenuk
    @dukenuk
    UI/UX designer, UI artist
    Большой выбор иконок, которые можно скачать бесплатно и вставить для примера в свой макет, а для релиза, когда идея ясна уже отрисовать свои.
    The Noun Project

    В моей копилке сайтов есть следующие ссылки:
    iconmonstr.com
    www.iconarchive.com - free icon stock search
    www.iconfinder.com - free icon stock search

    designmoo.com - stock web dribble ui free
    freepsdfiles.net
    365psd.com/
    365psd.ru/
    www.freebievectors.com
    www.flaticon.com - free icon
    www.freepik.com
    openclipart.org
    www.freedigitalphotos.net
    www.everystockphoto.com
    www.freephotosbank.com
    www.studio25.ro/EN
    www.photogen.com
    www.freejpg.com.ar
    www.turbophoto.com
    www.kavewall.com
    www.morguefile.com
    www.adigitaldreamer.com
    www.imagebase.net
    www.photorack.net
    qvectors.net
    www.vecteezy.com
    https://www.vectoropenstock.com/
    www.vectormadness.com
    www.vectorilla.com
    vector4free.com
    www.graphicsfuel.com
    www.greatvectors.com
    wowvectors.com
    www.vectorportal.com
    www.free-vectors.com
    www.allvectors.com
    www.logoinstant.com - logo
    shaboopie.com - logo
    imageafter.com - текстуры
    mayang.com/textures — с дневным лимитом
    free-textures.got3d.com — частично бесплатный
    newtek.com/freestuff — требуется регистрация

    Free Photo
    search.creativecommons.org — поисковик бесплатных фоток
    https://www.flickr.com/search/?q=paris&l=cc&ct
    https://500px.com/creativecommons
    photopin.com

    Little Visuals littlevisuals.co
    Unsplash unsplash.com
    Death to the Stock Photo join.deathtothestockphoto.com
    New Old Stock nos.twnsnd.co
    Superfamous (requires attribution) superfamous.com
    Picjumbo picjumbo.com
    The Pattern Library thepatternlibrary.com
    Gratisography www.gratisography.com
    Getrefe getrefe.tumblr.com
    IM Free (requires attribution) imcreator.com/free
    Jay Mantri jaymantri.com
    Public Domain Archive publicdomainarchive.com
    Magdeleine magdeleine.co
    Foodiesfeed foodiesfeed.com
    Picography picography.co
    Raumrot www.raumrot.com/10
    ISO Republic isorepublic.com
    www.gratisography.com
    stockphotos.io
    pickupimage.com — в основном, природа и города.
    www.rgbstock.com
    pixabay.com - free photo
    unsplash.com Unsplash
    www.picjumbo.com Picjumbo
    www.gratisography.com Gratisography
    www.superfamous.com Superfamous
    www.littlevisuals.co Little Visuals
    www.splitshire.com Split Shire
    www.pixabay.com Pixabay
    www.imcreator.com/free I’m Free
    www.nos.twnsnd.co New Old Stock
    wefunction.com/category/free-photos Function Free Photos
    pjrvs.com/a/photos Paul Jarvis Free Photos ]
    www.sxc.hu - hi-res free clipart photo
    www.photl.com - hi-res free clipart photo
    getty.edu - photo history
    www.firestock.ru
    www.photogen.com
    www.everystockphoto.com
    www.stockvault.net
    morguefile.com
    freerangestock.com
    www.dreamstime.com/free-photos
    picjumbo.com
    getrefe.tumblr.com
    pixabay.com
    join.deathtothestockphoto.com
    littlevisuals.co
    superfamous.com
    www.coolwebmasters.com/engine/go.php?url=aHR0c..
    compfight.com
    www.coolwebmasters.com/engine/go.php?url=aHR0c..
    www.imcreator.com/free
    nos.twnsnd.co
    photopin.com
    wefunction.com/category/free-photos
    pjrvs.com/a/photos
    allthefreestock.com — все бесплаьные стоки
    www.pexels.com
    ru.photl.com
    https://stocksnap.io/ — CC
    Ответ написан
    6 комментариев
  • Где найти ментора по фронтенду?

    ddale
    @ddale
    Front-end developer
    Идите на курсы learn.javascript.ru . Очень советую. След. группа в сентябре 2015.
    Ответ написан
    Комментировать
  • Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей?

    5angel
    @5angel
    Фронтенд-лид
    Давайте обратимся к данной публикации, чтобы понять примерные тренды, потому что наиболее выгодный вариант – это все же фронтендер.

    Вкратце, полноценный клиентский разработчик должен знать:
    – html5/css3 + bootstrap
    – один-два препроцессора (less/stylus)
    – чистый js и пару-тройку клиентских библиотек или фреймворков (knockout/backbone/angular/react)
    – немного node.js, чтобы уметь пользоваться пакетным менеджером (npm) и билд-менеджером (gulp/grunt)

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

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

    Другой вопрос – что со всем этим делать.

    Я обычно предлагаю попытаться начать свой маленький проект. Какой-нибудь простенький личный сайт, игру на js (тот же flappy bird или 1048 – много ума здесь не нужно). Посложнее – свою тему или библиотечку. Это будет хорошим практическим опытом, который не стыдно описать в резюме.

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

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

    А вот попытка спихнуть на верстальщика UI/UX – это уже экономия со стороны отдельных контор, которые по какой-то причине не хотят нанимать отдельного дизайнера/проектировщика в штат или по контракту. Тут, к сожалению, придется мириться и смотреть статьи по теме – тот же GoodUI.
    Ответ написан
    10 комментариев
  • Как работать с мелкими css-файлами?

    @vsuhachev
    Поглядите на sprockets, по всем признакам это то что вам нужно. Эта библиотека используется в RubyOnRails как раз для сборки css, js и умеет компилировать scss/sass, CoffeeScript

    Для сборки используются т.н. файлы-манифесты (свои для css и js) в которых вы указываете что должно быть упаковано в результирующий файлы (css и js соответственно).

    Например манифест для css, в нем используются команды
    require_self - включить в сборку сам манифест (то, что после комента-манифеста)
    require path/filename - включить конкретный файл, как правило это сторонние компоненты
    require_tree . - включить все файлы из каталога, в данном примере все что лежит в каталоге с манифестом

    /*
     *= require_self
    
     *= require bootstrap-datepicker
     *= require select2
     *= require select2-bootstrap
     *= require dropzone-basic
    
     *= require_tree .
     */


    Тут пример как это все запустить
    Ответ написан
    Комментировать
  • Как работать с мелкими css-файлами?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Есть best-way, использовать препроцессоры стилей (less/sass) + gulp
    Ответ написан
    2 комментария
  • Существуют ли доказательства того, что pixelPerfect верстка увеличивает продажи или юзабилити?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Иногда просто невозможно добиться одинакового вида в разных браузерах, да и не нужно. В конце концов, про graceful degradation тоже помнить нужно.

    ИМХО добиваться пиксельного соответствия в разных браузерах — потеря времени. Важно, чтобы вёрстка не ехала при различных разрешениях и разном контенте (маленький/большой), а функционал работал как часы.

    Обычный человек никогда не открывает страницу в другом браузере, чтобы сравнить вёрстку. Ему глубоко чихать, как сайт отображается в другом браузере.
    Ответ написан
    2 комментария
  • Есть ли в природе обширная книга по front end разработке?

    Как тема у врачей про таблетку от всех болезней так и у начинающих фронт-эндов. Обширной одной нет, но есть много хороших книг на разную тему.
    И так список понравившихся мне книг:
    www.ozon.ru/context/detail/id/24493075 - Большая книга CSS3 на данный момент одна из лучших книг по css. Тут Вы найдёте не только применение css и объяснения как и что работает , но и кучу полезных сервисов.
    www.ozon.ru/context/detail/id/18060929 - Данную книгу лучше читать тем кто уже знаком с js и конечно хорошо знает html 4 или/и xhtml - так пишет автор и после прочтения половины книги знания js Вам понадобятся точно. Книга довольно обширная не смотря на её 500стр. - конечно есть вода, но куда без неё. Хотя для одних вода, а для других интересные и нужные факты.
    www.ozon.ru/context/detail/id/19677670 - книга с носорогом) куда без неё... Одна из лучших книг, хоть и вода есть, но она стоит своих денег. Это огромный справочник под все случаи жизни. Так же отдельно от неё продаётся маленький справочник (который находится в конце этой огромной книги). Вот в нём как раз нет воды и всё самое важное. Стоит он около 300р - 400р.
    www.ozon.ru/context/detail/id/3159814/#comments_list - эта книга одна из лучших, хотя даже лучшая... В ней вся суть программирования. Тут не рассматривают один конкретный язык. Тут о каждом по чуть-чуть и взята суть каждого.
    www.ozon.ru/context/detail/id/28298064 - книга стоит своих денег, Я бы даже сказала она очень дешевая. В ней рассматриваются пути обхода css3. То есть как сделать что-то с css3 и без него. Также говорят о фильтрах и куча всяких полезностей.

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

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

    Пожалуй стоит отметить и те которые покупать не стоит...
    Было дело мне хотелось почитать книгу про seo. Ну думаю раз мне нравится семантика, то Я найду её плюсы в книге по seo. Моё провальное знакомство началось (и закончилось) с книги "Раскрутка: новейшее руководство твоего продвижения сайтов в Рунете", ссылку на этот ужас приводить не буду. На ozone у неё положительные отзывы видимо только от авторов. А на обложке книги полуголая баба. Когда брала книгу то думала у автора с юмором и изложением всё норм, ну и промелькнуло мнение что по обложке не судят. Оказалось судить стоило))) кроме рекламы seoPult (писатели и есть эта контора) ничего там нет. Все 300 страниц описано одно. Вложите деньги в написание контента (можно заказать у нас) и вложите к нам в раскрутку. ВСЁ...
    Вторую книгу Я бы не то чтобы не советовала, скорее можно просто найти куда лучше, да и устарела она уже. JavaScript и jQuery, написана приятно, объясняют хорошо, но 50% технологий устарели или слабы. Тем более лучше носорог, а по JQ поискть что-то более новое
    Если Вам нужны книги по азам или более продвинутые по js то пишите в комментах
    Ответ написан
    17 комментариев