• Как правильно сверстать такую форму поиска(на рис.) с выбором категорий?

    Kater-auf-Dach
    @Kater-auf-Dach
    Никого не трогаю, починяю примус, верстаю...
    Как ответили выше, правильно чекбоксами. Запрос в Google "стилизация чекбоксов" выведет кучу материала. Если кратко суть, то:
    1. скрываете сам чекбокс
    2. стилизуете label, привязанный через for и id
    3. для отображения самих галочек можно использовать иконочный шрифт или фоновое изображение на основе спрайтов.
    Пример на Codepen
    Ответ написан
    Комментировать
  • Взломан skype. Как это случилось?

    sayber
    @sayber
    Да, я программирую на PHP и еще асинхронно!
    Как то в 2003г. я жил с девушкой. Мы оба были геймерами. Ну я естественно тогда начинал свой путь программирования.
    Был у меня сайтик на обычном хостинге. По тем временам, код был сильно защищен. В один из прекрасных дней я увидел в логах необычное поведение. Прошерстил код, нашел спамбота.
    Конечно все почистил и т.д.

    Но мне стало интересно как и вам, кто и как меня взломал. Своими скромными силами я не смог определить.
    В итоге создал в корне сайта файлик forHacker.txt
    В нем задал вопрос - собственно как вы меня хакнули?
    на следующий день в аську стучится человек, я спрашиваю
    - Мол чего вам надобно? - в ответ
    - Товарищ Иван, вы же сами просили меня вам рассказать как я вас хакнул
    - Спасибо что откликнулись, просветите плз
    - Ваша девушка Света была не аккуратна, скачала мой файлик. В связи с чем я смог получить доступ к ее компу. Далее по локальной сети обнаружил доступ к вашему. Подсадил кейлогер и просто подождал ввода пароля.
    ....
    Всего вам хорошего и удачи. Ваш сайт оставляю в покое =)

    Это примерный наш разговор.
    Так что способов получения ваших данных велик )
    Ответ написан
    Комментировать
  • Можно ли соваться на Одеск с таким уровнем работы(фронтэнд)?

    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 комментария