Задать вопрос
  • Правильные ли ресурсы выбраны для изучения HTML/CSS, JS, PHP?

    VortomS
    @VortomS
    I want to find myself
    Итак, если вкратце:
    • Разобраться в принципе HTML/HTML5 и CSS/CSS3, вести справочник по тегам/свойствам. С различными нюансами будете разбираться по мере необходимости;
    • Разобраться с основами JS;
    • Желательно изучить серверный язык (в Вашем случае PHP);
    • Заниматься уже продвинутым JS, потом JQuery
    • Разобраться с AJAX
    • Препроцессоры CSS/Javascript (sass, less, coffeescript, typescript)
    • CSS/JS Фреймворки (Bootstrap, AngularJS, Backbone)
    • Сборщик проектов (Gulp, Grunt)


    И самое главное практика, практика, практика: 90% материала мы усваиваем именно когда делаем, и лишь 40% когда наблюдаем.
    Codeacademy - считаю тратой времени (ИМХО).
    Попробуйте интерактивные курсы лучше HTMLAcademy
    Ответ написан
    1 комментарий
  • Какие плагины Gulp вы используете для front-end?

    Serj-One
    @Serj-One
    i'm sexy and i know it
    Кусок моего галпфайла. Что-то снабдил комментами.
    var connect      = require('browser-sync'); // livereload
    var sass         = require('gulp-sass'); // Кому что, я использую SCSS
    var csscomb      = require('gulp-csscomb'); // Обязательно!
    var cssmin       = require('gulp-cssmin');
    var imageop      = require('gulp-image-optimization'); // Лучшая альтернатива gulp-imagemin
    var concat       = require('gulp-concat');
    var uglify       = require('gulp-uglify');
    var plumber      = require('gulp-plumber'); // Не позволяет плагину умереть молча
    var autoprefixer = require('gulp-autoprefixer');
    var ngrok        = require('ngrok'); // Пробрасываем локальному серверу путь наружу для для заказчика
    var spritesmith  = require('gulp.spritesmith'); // Спрайты
    var notify       = require('gulp-notify'); // Уведомления
    var merge        = require('merge-stream'); // Деление таска на разные потоки

    Конечно, есть много полезного и кроме этого. Но сам верстаю в WebStorm, в котором огромное количество плюшек реализованы куда удобней, чем в галп-плагинах.
    Ответ написан
    8 комментариев
  • Какие технологии использовать для быстрой верстки?

    HollowJ
    @HollowJ
    PHP разработчик
    Emmet - ускоряет формирование html.
    SASS, LESS, Stylus - CSS препроцессоры (также есть постпроцессоры).
    Gulp, Grunt, Webpack - помогают собирать проекты. По сути менеджеры задач по компиляции sass, less, coffee и т.д. и сборки этого всего в пару файлов.
    Для ускорения верстки также порекомендовал бы использовать CSS фреймворки типа Bootstrap, Foundation. Но не злоупотреблять стилями по-умолчанию =)
    Ответ написан
    Комментировать
  • Что нужно знать front-end разработчику и JavaScript разработчику для прохождения стажировки и устройства на должность junior- a?

    @an23
    Что касается JavaScript:
    - базовый JavaScript, понимание наследования на прототипах
    - умение работать с DOM используя нативный JavaScript и библиотеки вроде jQuery
    - логическое мышление, кроме синтаксиса языка нужно уметь решать стандартные и не очень стандартные задачи с использованием JavaScript
    - наличие хотя бы одного (пусть даже некоммерческого) проекта в котором вы можете похвастаться своим использованием JavaScript
    - плюсом часто бывает умение писать собственный плагины на jQuery

    Когда вы достаточно с этим познакомитесь я думаю вы сможете решить что именно вам учить дальше Angular или AJAX :)
    Ответ написан
    Комментировать
  • Как заливать CSS файлы на GitHub?

    @vladflip
    me
    регистрация на гитхаб -> скачивание клиента git
    -> изучение гит по их официальной книге
    -> profit
    Ответ написан
    1 комментарий
  • Можно ли соваться на Одеск с таким уровнем работы(фронтэнд)?

    mr_T
    @mr_T
    Web-разработчик
    Сам верстаю много, так что попробую дать советы, но это чисто мое мнение, поэтому постарайтесь реагировать на это соответствующе :)

    Сначала по вопросам непосредственно в этом посте:
    1) Заказчик может такое принять, а может и не принять - тут зависит от того, насколько он дотошен, вот и все . В любом случае нужно понимать, что редко бывает так, что заказчик что-то понимает в том, что вы делаете, поэтому его "хотелки" скорее всего будут относится к его субъективному восприятию внешнего вида сайта. Но так же нужно понимать еще и то, что внимание к мелочам дает хороший результат на это восприятие в том числе :)
    2) Лично я делаю так, чтобы в шаблоне просто можно было написать что-то вроде
    <? foreach ($slide in $slides): ?>

    <? endforeach; ?>
    и не париться о том, что произойдет дальше (в разумных пределах, конечно - чаще всего слайды должны быть определенных размеров, но об этом нужно говорить).

    Теперь по вашему коду:
    1) Попробуй использовать sass/less с автопрефиксами, компассами и пр. - очень будет удобно писать стили.
    2) Лично я крайне редко пользуюсь сторонними слайдерами, поскольку они часто используют кучу невнятных классов, дивов, врапперов, иннер-врапперов, аутер-врапперов, контейнеров и т.д., хотя чаще всего достаточно несколько строк в js, задача которых просто давать нужные классы нужным слайдам, и анимации в css - в итоге так даже быстрее, чем настраивать под себя какой-нибудь сторонний jquery слайдер. А если один раз сделать заготовку на будущее, то вообще все за пару минут можно сделать.
    3) Вместо спрайтов во многих случаях лучше использовать шрифтовые иконки (например, с icomoon.io). Например, для значков соц-сетей. Из приятных бонусов - шрифты можно красить в любой цвет и анимировать, а так же они векторные, что позволяет не париться по поводу дисплеев с высокой четкостью. Можно еще svg, но с ними немного сложнее, зато гибко.
    4) Обычно на подобных сайтах лепят фиксированное меню, которое сужается при прокрутке ниже (что, кстати, опять-таки решается css transition'ами и парой строк в js для задания класса типа small).
    5) #link-services feature лучше сделать не section, а article или figure - так будет правильнее семантически. А section'ами лучше сделать #link-services, #link-portfolio и т.п. Почитай на любом ресурсе о семантическом значении html5 тегов, там много интересного можешь найти :)
    6) Я бы как-то выделил элементы формы при фокусе, сделал их поконтрастнее, а то на некоторых экранах текст может сливаться с фоном инпута.
    7) p.section-description лучше сделать без класса вообще, а в css задать общий стиль для всех абзацев, изменяя его в конкретных случаях при необходимости.
    8) Раз уж сайт такой весь из себя анимированный, то что ж вы не сделали анимацию ссылок :) ? Хотя бы на работах в портфолио обязательно нужно это сделать, причем недостаточно просто картинок, нужны как минимум еще заголовки, которые могут, например, всплывать по наведению. Очень красиво получаются в таких моментах анимации transform: scale(...) вместе с opacity.
    9) header и footer не всегда по одному в одном документе, эти элементы могу вкладываться так же и в article или section. Как следствие лучше дать своим body > header и body > footer внятные классы или айдишники, иллюстрирующие их принадлежность ко всей странице, а не к отдельным блокам.
    10) .feature > aside я могу быть не прав, но мне кажется, что это семантически неверно. Aside должен показывать какую-то часть документа, которая помогает ориентироваться в контенте на сайте (например, фильтры, боковое меню). В твоем случае это просто иконка, так что тут лучше обойтись просто div'ом.
    11) По js: у вас какой-то странный блок сверху, где задаются глобальные переменные. Вы там используете jQuery, при этом не помещая код в $(document).ready. Весь код jQuery, связанный с селекторами (как минимум) всегда должен быть внутри ready. Да и какие-то странные конструкции там вроде var buttonAll = $('.works-button')[0], которые потом используются снова как $(buttonAll). Лучше в buttonAll записать строки с селекторами тогда уж, а не использовать jQuery 2 раза для одного и того же. Да и конструкции вроде $('.works-button')[0,1,2,3] довольно опасны. Тут лучше дать каждой кнопке какой-нибудь атрибут типа data-category (или вообще в href писать #category-name), и написать один обработчик для всех этих кнопок, который просто фильтрует работы по значению этого атрибута. Так будет проще в будущем что-то поменять, при этом совершенно не затрагивая код js.

    В общем, как-то так.
    Ответ написан
    4 комментария
  • Какой двигатель выбрать для Landing Page?

    68747470733a2f2f7261772e6769746875622e63
    Используй fullPage.js
    Вот пример реализации лендинга на этой js плагине example Apple

    Сам по себе плагин популярный, вот несколько примеров сделанных на этом движке:
    dasselundwagner.com
    onlinedepartment.nl
    rocketbank.ru
    Последний пример как раз лендинг.
    Ответ написан
    1 комментарий
  • Совет в изучении ООП JavaScript?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Как быстро врубиться в ООП в JS:

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

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

    Наследование - просто объявляете тип со своим прототипом. В силу некоторых особенностей от некоторых типов не так то легко отнаследоваться без кастылей (например от массива).

    Для упрощения работы в ES2015 новый синтаксис для объявления объектов своих типов.

    Принципы ООП такие же как и везде, единственное что для инкапсуляции стоит еще про модули почитать так как в JS (как и в некоторых других языках) нет модификаторов доступа.
    Ответ написан
    Комментировать
  • Как учить Node.js?

    @Nwton
    Для начала посмотри весь скринкаст: YouTube
    Далее советую выполнить три простых вещи:
    1) установить node js на vds
    2) развернуть http сервер
    3) прикрутить к нему socket io

    Тогда тебе станет понятно, что из себя представляет нода и в каком направлении двигаться. Все это можно сделать за два дня. Затем переходи на литературу и углубляйся.
    Ответ написан
    2 комментария
  • Где можно почитать подробное руководство по html5 css3 ?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Такого нет. Есть разрозненные книги, и сайты.

    Например, по CSS вопрос уже задавали CSS3. Где я могу найти наиболее полное руководство?
    По HTML есть масса книг, но увы, большинство — просто дрянь. Тут я просто пас (как по мне, так читал бы лучше спецификацию).

    Потом вас заинтересует JS, UX, паттерны, типографика, колористика и прочиее, и прочее, как тут Что почитать о дизайне для разработчика? (вам стоит начать с этого списка). И более узкопрофильный интерес как тут Где вы смотрите интересные штучки-дрючки на jquery/css3?
    Ответ написан
    Комментировать
  • Как научится верстать из PSD макетов в html+css?

    lexxpavlov
    @lexxpavlov
    Программист, преподаватель
    Посмотрите вот эти две статьи с хабра:
    Как сверстать веб-страницу. Часть 1
    Как сверстать веб-страницу. Часть 2 — Bootstrap
    И прочтите все комментарии к этим статьям (впрочем, как обычно на хабре:)
    Очень хорошие статьи, пошагово расскажут, что делать с макетом.
    UPD. Ещё одна статья от того же автора:
    Как сверстать тему для WordPress
    Ответ написан
    Комментировать
  • С чего начать изучение SCSS/SASS?

    Hando
    @Hando
    Верстак
    Лучше всего конечно официальная документация, если вы знаете английский. Если нет, придется собирать информацию по крупицам и самому ее систематизировать.
    Помимо Sass, еще необходимо изучить и Compass. Немного статей, по которым учился я: Первая, Вторая(на этом сайте много статей, поищите как следует), третья.
    Ответ написан
  • Что использовать LESS или SASS?

    nicothin
    @nicothin
    веб-разработчик с 2000 г.
    less, scss и stylus для 98% работ обладают полностью идентичной функциональностью и выбор меж ними или чисто эстетический или технологический (какие-то ограничения проекта).
    сам для себя выбрал Less — привычно, наглядно, красиво, удобно работать с emmet

    и не верьте статьям 12-х годов о том, что «scss намного мощнее».
    на данный момент (конец осени 2014) все перечисленные препроцессоры равны по возможностям на 98%.

    п.с.: реально каждый день из всех возможностей препроцессоров используются: переменные, примеси и вложения. ОЧЕНЬ странно под каждый проект заново писать генераторы модульной сетки и т.п. вещи, требующие условий и циклов.
    Ответ написан
    Комментировать
  • Какие бы вопросы вы задавали при приеме на работу Javascript-разработчика?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    Что такое Function.prototype.bind, Function.prototype.apply, Function.prototype.call и зачем они нужны?
    Что такое вообще prototype, для чего используется? ООП в JS.
    Паттерны проектирования — какие вообще есть, какие имеют смысл в JS, чем можно заменить всеми любимый синглтон?

    Все остальное можно довольно быстро объяснить или есть в либах:)
    Ответ написан
  • Что взять на вооружение для фронтенда?

    talgautb
    @talgautb
    front-end developer
    Ответ на почему прост: все эти штуки делают нашу жизнь лучше :)
    для 3-5 советую использовать :
    - препроцессор (тут по вкусу каждому свое, например stylus)
    - инструмент сборки (тут так же кому что, например grunt)
    - систему контроля версий (git)
    - анб (например, bem, mcss)
    - шаблонизатор (у каждого свое, зависит от cms на базе которой вы работаете, или которую сделали ваши прогеры)
    - графический редактор ( photoshop наше все :) + css hat, enigma64)
    - задавать конкретные вопросы на тостер ру ;)

    советую в каждой новой верстке из 1-2 использовать по 1-2 технологий из списка, потом втянетесь и не отпустит ))
    з.ы. ну это примерный список, дальше больше ;)
    Ответ написан
    2 комментария
  • Занимаюсь веб-разработкой и хочу делать небольшие приложения под мобильные платформы. С чего начать?

    AMar4enko
    @AMar4enko
    Я бы посоветовал вам качественно изучить хотя бы одну технологию от и до.
    PhoneGap это тупик. Лучше не стоит, правда.
    Вот вы сделаете приложение для iPhone, реализуете там свой тулбар на css + html. В аппстор сунете, а вам пропишут reject и скажут "Друг, у нас для тулбаров нативные элементы управления есть".
    Вы начнете искать, а можно ли как-то из под PhoneGap использовать нативные элементы управления. Найдете.
    Окажется, что там нужно будет в phonegap-проектике покопаться под XCode (вы же в курсе, что вам OS X нужна будет для сборки проекта для iPhone?)
    Потом вам понадобится простенькая база данных в приложении. Вы попробуете использовать in-browser SQL database storage. Окажется, что из-за особенностей хранения данных браузером из-под PhoneGap она у вас периодически будет пропадать. Вы пойдете искать бесшовную замену, найдете. Опять надо в XCode идти проект править, чтобы он собрался правильно.
    В итоге вы вместо разработки будете искать пути решения проблем, с разработкой никак не связанных.
    Так что мой вам совет: хотите малой кровью начать делать мобильные приложения - возьмите Android и делайте на здоровье. А нервы поберегите, пригодятся.
    Ответ написан
    1 комментарий