• Как влиться в тренд нынешней веб-разработки?

    @SuperOleg39ru
    Front-end разработчик
    Добрый день!

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

    flexbox, grid layout
    - это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
    Немного о новинках в css тут.
    Поддержка браузерами тут.

    gulp, webpack и пр.
    - это инструменты, которые созданы для облегчения рутинных задач.
    Для верстки очень удобно использовать gulp - вы описываете задачи, такие как создание локального сервера, мгновенная перезагрузка страницы при изменениях, минификация ваших файлов, и прочее.
    Посмотрите отличный скринкаст от Ильи Кантора!

    препроцессоры
    - представьте, что вам чего-либо не хватает в html и css.
    Например, вы хотите разбивать большие html файлы на множество мелких, или вам нужно вставить в html динамическое содержание - для этого созданы html шаблонизаторы. Вы используете в работе синтаксис конкретного шаблонизатора, затем тот же gulp автоматически собирает эти файлы в обычный html, который понимает браузер.
    Аналогичная ситуация с css, препроцессоры позволяют разбивать файлы на мелкие, и собирать в один, доступны переменные и функции, и многое другое.
    Популярный шаблонизатор Pug
    Один из css-препроцессоров Stylus

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

    Ну и конечно статьи и подкасты:
    https://habrahabr.ru/
    jsraccoon.ru

    https://soundcloud.com/web-standards
    https://radiojs.ru/

    Конкретные статьи и ресурсы для новичка:

    frontender.info/a-baseline-for-front-end-developers
    frontender.info/a-guide-to-flexbox
    css-live.ru/articles-css/pravilnye-kontrolnye-toch...
    https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
    https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
    https://habrahabr.ru/company/zfort/blog/321214/
    https://frontendmasters.gitbooks.io/front-end-hand...

    Дерзайте!
    Ответ написан
    6 комментариев
  • Какой это плагин? Или нативный?

    FFxSquall
    @FFxSquall
    Могу писать код, могу не писать
    В приведенном примере используется scrollmagic.io
    Ответ написан
    4 комментария
  • Вернуть значение из формы и вставить в div?

    @Nwton
    Слишком много ошибок, что бы все расписывать. Легче переписать:
    https://jsfiddle.net/6922z02d/
    Ответ написан
    2 комментария
  • Почему тормозит сайт?

    @Stepanya
    Поможет ответить
    Ответ написан
    Комментировать
  • Как работают WebSockets?

    Ivanq
    @Ivanq
    Знаю php, js, html, css
    Вкратце:
    ws_vs_http.pngWebSockets2.pngОтветы
    1. Не совсем, но, думаю, скоро будет понятно
    2. Соединение всегда открыто, если одна из сторон его не закроет или не прервется связь
    3. Клиент отправляет - сервер тут же получает. Сервер отправляет - клиент тут же получает.

    На примере чата
    1. Устанавливается соединение между сервером и клиентом 1 (handshake)
    2. Сервер -> клиент1: Вы присоединились к чату
    3. Сервер -> клиент1: Сейчас у нас 1 пользователь: клиент1
    4. Устанавливается соединение между сервером и клиентом 2 (handshake)
    5. Сервер -> клиент2: Вы присоединились к чату
    6. Сервер -> клиент2: Сейчас у нас 2 пользователя: клиент1 и клиент2
    7. Сервер -> клиент1: Присоединился клиент2
    8. Клиент1 -> сервер: Скажи клиент2 "Привет!"
    9. Сервер -> клиент2: Клиент1 сказал "Привет!"
    10. Клиент2 -> сервер: Скажи клиент1 "Здасте!"
    11. Сервер -> клиент1: Клиент2 сказал "Здасте!"

    То есть клиенты могут когда угодно посылать сообщение серверу, он сразу же его прочитает, но не другим клиентам (минус сокетов). Сервер может послать сообщение любому клиенту, они сразу же его прочитают.
    Ответ написан
    4 комментария
  • Как работают WebSockets?

    bingo347
    @bingo347
    Crazy on performance...
    WebSocket - постоянное соединение поверх http(s)
    При установлении соединения происходит рукопожатие с помощью специальных http заголовков, после любая сторона в любой момент времени (пока соединение не прервется) может писать в тело запроса сообщения. Каждое такое сообщение представляет из себя передаваемые данные + мета-данные

    1. Можно найти сходство с tcp, только вместо пакета у нас сообщение. Так как ws работают поверх http, который в свою очередь работает поверх tcp, то формально одно сообщение может быть разбито на несколько tcp пакетов, а в одном пакете может содержаться несколько сообщений, однако единицей данных для ws является именно сообщение
    2. ws - это постоянное соединение, которое будет висеть пока любая из сторон не закроет его либо пока не оборвется связь. Так как сокет формально может простаивать (когда нет обмена данными), то tcp соединение для него нужно открывать с опцией keep-alive, а так же желательно отправлять http заголовки для keep-alive в рукопожатии.
    3. Любая сторона может в любой момент времени может отправить любое количество сообщений. Получающая сторона получит данные, когда до нее дойдут все tcp пакеты самого раннего из сообщений (это гарантирует, что сообщения придут в том же порядке, в котором они были отправлены)
    Ответ написан
    6 комментариев
  • Как записать куки без перезагрузки страницы и без обращение к серверу?

    Ivanq
    @Ivanq
    Знаю php, js, html, css
    var count = Number(count) + Number(obj[key]);
    Здесь var стоит убрать. Замените на let однажды, все посыпется.

    И... Кажется, я что-то не понимаю, но нельзя после $.cookie('Product', result, ...); сделать catrItemsCount()? Или это как раз и не работает?
    Ответ написан
    1 комментарий
  • Как сделать такую анимацию?

    denis_bardak
    @denis_bardak
    Web Developer
    Ответ написан
    Комментировать
  • Как сверстать такой блок?

    vetero4eg
    @vetero4eg
    Frontend
    Или через transform, если поддержка динозавров не заботит, как-то так codepen.io/anon/pen/pRKaww
    Ответ написан
    3 комментария
  • Можно ли сделать toggle (переключатель) на кнопке по событию onclick без jquery?

    iiiBird
    @iiiBird
    Пока ты спишь - твой конкурент совершенствуется
    var element = document.getElementById('btn');
    
    element.addEventListener('click', function() {
        this.classList.toggle('active');
    });
    Ответ написан
    Комментировать
  • Предпросмотр поста с картинкой как реализовать?

    politon
    @politon
    HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
    Ответ написан
    Комментировать
  • Как сделать изогнутый слайдер?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    js + svg
    Вот простой пример: ruseller.com/lessons.php?rub=2&id=2783 так как не думаю что есть изогнутые.
    Ответ написан
    2 комментария
  • Как сделать изогнутый слайдер?

    whoisthere
    @whoisthere
    Не благодари. Жми «Нравится»
    Копайте в этом направлении.
    Path Animation
    Ответ написан
    Комментировать
  • Правильнее в качестве буллитов горизонтального списка вставить изображение в html-е или в css, используя background?

    Это не буллиты.

    Я думаю это контентные изображение, которое нужно вставлять ином img.

    Где то в базе данных создаются категории, к ним назначаются картинки. Затем эти категории выводятся.
    Если вы это в css зашьете, то девочка-контентщик уже не сможет новую категорию добавить.

    Уточните лучше у заказчика.

    Если вдруг не будет потребности их менять через админку - сделайте спрайт и выводите в псевдоэлементе ::before, в зависимости от класса-модификатора каждого пункта.
    Ответ написан
    Комментировать
  • Как правильно сохранить переменную для сайта?

    NN-webmaster
    @NN-webmaster
    Обожаю веб
    Эти данные, которые ввёл пользователь — они важны для вас? Если да, то, наверное, лучше отправлять их на сервер и сохранять в БД, используя механизм сессий. А если не важны для вас, но важны/удобны для пользователя, то посмотрите в сторону local storage. Ссылка 1 Ссылка 2
    Ответ написан
    1 комментарий
  • Как вывести умный фильтр в двух местах интернет-страницы?

    winer
    @winer
    занимаюсь разработкой сайтов на 1c-bitrix
    Как вариант использовать отложенные функции.
    Например в шаблоне компонента умного фильтра делаешь вывод обоих блоков, только обернув их в

    <? $this->SetViewTarget("filter1");?>
               //Код блока 1
    <? $this->EndViewTarget();?> 
    <? $this->SetViewTarget("filter2");?>
               //Код блока 2
    <? $this->EndViewTarget();?>


    А там где нужно, например в section.php комплексного компонента каталога, вывести эти блоки так:

    <? $APPLICATION->ShowViewContent('filter1');?>
    <!--какой то код и вертска-->
    <? $APPLICATION->ShowViewContent('filter2');?>
    Ответ написан
    Комментировать
  • C чего начать фриланс?

    taxigy
    @taxigy
    Если вы хотите быть фрилансером и при этом не быть занятым на фултайме в качестве наёмного работника, то либо у вас должен быть стартовый капитал, либо вам придётся быть фултайм-работником, иначе вы умрёте от голода. Когда вы работаете фултайм, у вас остаётся четыре-пять честных часов в сутки (после девятичасового рабочего дня, поездки на работу и обратно, завтрака, ужина и т.п.), которые вы можете либо посвятить своему развитию в каком угодно направлении. Фриланс — одно из таких направлений.

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

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

    Второе, вам необходимо проанализировать свои текущие умения и понять, что вы действительно способны дать бизнесу вашего будущего заказчика. Например, «начальные знания вёрстки» — это нулевая ценность для бизнеса. А способность претворить идеи заказчика в рабочий макет — уже положительная. На эту тему много статей в интернете. Не думаю, что у вас возникнет сложность с тем, чтобы их найти на том же Хабре.

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

    Следующий шаг — это, ура, наконец-то искать заказчика. Зарегистрируйтесь на Elance, oDesk, Freelancer.com, Outsource.com (возьмите у вашего друга-фрилансера реферальные ссылки, вам обоим будет от этого плюс). Это не самые лучшие биржи, но на них водятся интересные проекты. Вообще, биржу следует расценивать как стартовую площадку для накопления полезных контактов. Пока вы никому не нужны, и у вас нет друга-министра, который за откат заказал бы вам вёрстку, вам придётся практиковаться в том, чтобы захватить внимание человека, перед которым такими же прекрасными пропоузалами машут пакистанцы и индусы. О том, как пробиться сквозь стену дешёвых претендентов, не сбавив при этом в собственной ценности, и получить первый заказ, я могу рассказать подробно отдельно, может быть, лично. Это долгая история. Например, у меня это заняло пять месяцев очень упорного труда, и я до сих пор не уверен, что то время, которое я вложил, когда-то может окупиться.

    Развивайтесь как фрилансер. Это очевидно, но об этом легко забыть. Вы ежедневно развиваете свои способности общаться или не общаться с людьми, готовить еду и варить кофе, но это не имеет значения. По-настоящему имеет значение ваш профессионализм — и этим нужно заниматься. Ежедневно анализируйте свои действия, ошибки, возможности, сильные и слабые стороны. Отметайте активности, которые забирают ваше время зря. Не бойтесь отказаться от проекта, если он даже на $10 дешевле, чем тот минимум, на который вы рассчитываете (кстати, установите себе этот уровень в самый первый день).

    Познакомьтесь с другими фрилансерами. Зарегистрируйтесь на freelancing.stackexchange.com/, читайте, задавайте вопросы. Вы удивитесь, как много людей проходят через одни и те же грабли. Вы будете смеяться над тем, что, завалив проект, вы на следующий день увидите вопрос на тему «сложного клиента» или «неконтролируемого увеличения скоупа», которые пережили буквально вчера. Смеяться и плакать, а потом вставать и идти дальше. Когда (или если) вы были фултайм-работником, вас страховали коллеги и вся цепочка руководителей над вами, несмотря на то, что вы этого не понимали или, может быть, даже не чувствовали. Теперь вы один на один с очень агрессивной средой, и очередная неудача — это нормально, разница лишь в том, как вы её ощущаете.

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

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

    Успехов! Чем больше людей будут успешными фрилансерами, тем лучше для всех. У вас все шансы попячить ваших друзей, которые работают в крупной компании на средней позиции и участвуют в укреплении внутрикорпоративной безответственности.
    Ответ написан
    3 комментария