Задать вопрос
  • Как вы создаёте адаптивный дизайн и всегда ли это нужно?

    SuperMax899
    @SuperMax899
    лучшее "спасибо" - кнопка "решение вопроса"
    На абстрактный ответ мог бы ответить абстрактно, но отвечу с вариантами.
    В зависимости от задачи, я опишу не для сервисов или больших сайтов\ресурсов.
    Советую так же прочесть вот эту статью: frontender.info/building-a-better-responsive-website

    Обычно использую bootstrap, который дополняю своими стилями, к примеру, сразу удаляю\перекрываю .row с его -15px margin'ом по сторонам, добавляю класс padding-0 для убирания в некоторых блоках padding'a у col- (который стандартно по 15px).

    Стандартно учитываю разрешения - HD, ноутбучное 1366 и свое чуть меньше 1366 (у меня пуск справа:) ), 1024-960 - старые мониторы и нетбуки, смотрю в диапазоне 768px-960 для некоторых планшетов и телефонов, и меньше 768 для телефонов. Тут дизайн один, через media onlyscreen убираем с загрузки ненужные части.
    Если все сверстано правильно и добавлены везде классы, то сайт будет полностью адаптивным.
    Для тестов меньше 768px проверяю через iphone 5 и старенький android-телефон. (Через Toggle Device mode в Google Chrome получаешь очень сильно разительные результаты в сравнении с устройством - браузеры то другие, хотя большие косяки всплывают сразу.)
    Тут кстати еще (мобильная) кросс-браузерность очень тонкий вопрос. Стиль у каждого браузера свой, особенно у всяких элементов типа input, так что тоже требует проверки и состояний тоже (placeholder, цвет текста в поле).

    Нужно ли это? Безусловно - на любом сайте, в любой отрасли половина трафика с мобильных устройств, это уже стандарт качества, на мой взгляд:)
    Ответ написан
    2 комментария
  • Где можно наблюдать стримы по программированию?

    angrySCV
    @angrySCV
    machine learning, programming, startuping
    есть проект, на основе твича кажется, https://www.livecoding.tv/
    Ответ написан
    Комментировать
  • Какие существуют правила хорошего дизайна?

    @xlusv
    Я бы рекомендовал попробовать сверстать собственный макет самостоятельно, к примеру, на том же bootstrap. На своем опыте оцените, есть ли недостатки.

    Из правил:
    1. Дизайн не должен мешать пользователю. Чем меньше шума, тем лучше. В идеале - ничего лишнего на экране. И как можно меньше анимации.
    2. Функциональность превыше эффектов - сначала содержимое, только потом украшения
    3. Мыслить от абстрактного к конкретному, мыслить модульно - чистый холст делим на части (в пропорциях), потом добавляем компоненты в виде сплошных фигур, потом детализируем компоненты. Так мыслит и верстальщик, и программист. Хранить компоненты в отдельных файлах.
    4. Красивый дизайн - логичный дизайн. Все должно быть упорядоченно, иметь обоснованные размеры, отступы, цвета и эффекты
    5. Постоянство - одна цветовая схема, пропорции, типографика, элементы
    6. Стандарты и традиции. Поведение предсказуемо. Стрелка вниз на панели означает, что панель развернется вниз, а не вверх. Красный - опасное действие, зеленый - безопасное. Используйте стандартные иконки, вместо никому не знакомых.
    7. Смотрите на дизайн чужими глазами - наложите черно-белый фильтр или размытие и убедитесь, что содержимое не растворилось, акценты на месте. Продумайте, что случится с колонкой или меню, если текста будет слишком много или мало.
    8. Растровая графика для фотографий и многоцветных изображений. Все что может быть описано в векторе - делается в векторе.
    9. На каждое правило бывают исключения


    Книги и материлаы
    1. Design for Hackers: Reverse Engineering Beauty - технический взгляд на элементы дизайна
    2. Прочие книги по UX и web-design в списках бестселлеров amazon / ozon
    3. behance и dribbble - для анализа лучших практик
    4. Руководства по стилям: Google Material Design, Modern UI, Apple Human Interface Guidelines, ibm design. Тоже для анализа практик и правил для конкретной платформы.
    Ответ написан
    6 комментариев
  • Попросили проверить код, на что смотреть нужно?

    index0h
    @index0h
    PHP, Golang. https://github.com/index0h
    Смотря зачем)). Я когда делаю Code Review критерии следующие:

    * Безопасность:
    - Каждый аргумент метода простого типа должен проверяться на тип в случае его проксирования и на граничные значения в случае обработки. Чуть что не так - бросается исключение. Если метод с кучкой аргументов на 80% состоит из поверки из аргументов - это вполне норм))
    - Никаких trigger_error, только исключения.
    - Исключения ДОЛЖНЫ быть человеко-понятны, всякие "Something went wrong" можно отдавать пользователю, но в лог должно попасть исключение со стектрейсом и человеко-понятным описанием, что же там пошло не так.
    - Каждый аргумент (объект) метода должен быть с тайпхинтингом на этот его класс, или интерфейс.
    - За eval как правило шлю на **й.
    - @ допускается только в безвыходных ситуациях, например проверка json_last_error.
    - Перед работой с БД - обязательная проверка данных.
    - Никаких == и !=. Со swtich - единственное исключение, по ситуации.
    - Если метод возвращает не только bool, а еще что-то - жесткая проверка с ===, или !== обязательна.
    - Никаких условий с присваиваниями внутри. while($row = ...) - тоже идет лесом.
    - Магические геттеры/сеттеры разрешаются только в безвыходных ситуациях, в остальном - запрещены.
    - Конкатенации в sql - только в безвыходных ситуациях.
    - Параметры в sql - ТОЛЬКО через плейсхолдеры.
    - Никаких глобальных переменных.
    - Даты в виде строки разрешаются только в шаблонах и в БД, в пхп коде сразу преобразуется в \DateTimeImmutable (в безвыходных ситуациях разрешено \DateTime)
    - Конечно зависит от проекта, но как приавло должно быть всего две точки входа: index.php для web и console(или как-то по другому назваться) - для консоли.

    * Кодстайл PSR-2 + PSR-5 как минимум, + еще куча более жестких требований (для начала все то что в PSR помечено как SHOULD - становится MUST)
    - В PhpStorm ни одна строчка не должна подсвечиваться (исключением является typo ошибки, например словарик не знает какой-то из аббревиатур, принятых в вашем проекте). При этом разрешается использовать /** @noinspection *** */ для безвыходных ситуаций.
    - Если кто-то говорит, что пишет в другом редакторе и у него не подсвечивается, на эти отговорки кладется ВОТ ТАКЕЕЕНЫЙ мужской половой **й и отправляется на доработку)).

    * Организация кода:
    - Никаких глобальных функций.
    - Классы без неймспейса разрешаются только в исключительно безвыходных ситуациях.

    * Тестируемость (в смысле простота тестирования) кода должна быть высокая.
    - Покрытие кода обязательно для всех возможных кейсов использования каждого публичного метода с моками зависимостей.

    * Принципы MVC:
    - Никаких обработок пользовательского ввода в моделях, от слова совсем.
    - Никаких ***ть запросов в БД из шаблонов.
    - Никаких верстки/js/css/sql-ин в контроллерах.
    - В моделях НИКАКОЙ МАГИИ, только приватные свойства + геттеры с сеттерами.
    - В моделях разрешено использовать метод save(при наличии такого разумеется) только в исключительных ситуациях. Во всех остальных - либо insert, либо update.

    * Принципы SOLD:
    - Никаких божественных объектов умеющих во все.
    - Если метод для внутреннего пользования - private, никаких public.
    - Статические методы разрешаются только в случае безвыходности.

    * Принцип DRY разрешено нарушать в случаях:
    - Явного разделения обязанностей
    - В тестах (каждый тест должен быть независимым, на сколько это возможно)

    * Работа с БД:
    - Запрос в цикле должен быть РЕАЛЬНО обоснован.
    - За ORDER BY RAND() - шлю на***й.
    - Поиск не по ключам (конечно если таблица НЕ на 5 строк) запрещен.
    - Поиск без LIMIT (опять же если таблица НЕ на 5 строк) запрещен.
    - SELECT * - запрещен.
    - Денормализация БД должна быть обоснована.
    - MyISAM не используется (так уж)) )
    - Множественные операции обязательно в транзакции, с откатом если чо пошло не так.
    - БД не должна содержать бизнес логики, только данные в целостном виде.
    - Не должно быть нецелесообразного дерганья БД там, где без этого можно обойтись.

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

    * О людях:
    - "Я привык писать так и буду дальше" - не вопрос, ревью пройдешь только когда поменяешь свое мнение.
    - "Я пишу в vim-е и мне так удобно" - здорово, код консолью я тоже в нем пишу)) но есть требования к коду, если в них не сможешь - не пройдешь ревью.
    - "Я скопировал этот страшный метод и поменял 2 строчки" - это конечно замечательно, но по блейму автор всего этого метода ты, так что давай без говняшек, хорошо?
    - "Оно же работает!" - вот эта фраза переводится примерно так: "да, я понимаю, что пишу полную хрень, но не могу писать нормально потому, что руки из жо", я правильно тебя понял?))
    - "У меня все работает!" - рад за тебя, а как на счет продакшна?
    - "Там все просто" - не используй слово "просто", от слова "совсем". Вот тебе кусок кода (первого попавшегося с сложной бизнес логикой), где там ошибка (не важно есть она, или нет)? Ты смотришь его уже 2 минуты, в чем проблема, там же все "просто"))

    * Всякое:
    ActiveRecord (это я вам как в прошлом фанат Yii говорю) - полное говно, примите за исходную. По факту у вас бесконтрольно по проекту гуляют модельки с подключением к БД. Не раз натыкался на то, что в тех же шаблонах вызывают save, или update (за такое надо сжигать).
    То, что используется Laravel - это печально((. Что бы выполнить требования приведенные выше, приходится "воевать" с фреймворком.

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

    UPD

    Формализировал данные критерии по ссылочке: https://github.com/index0h/php-conventions
    Ответ написан
    55 комментариев
  • Какие есть "лучшие из лучших" библиотеки JS?

    LightAir
    @LightAir
    LA
    Мой небольшой список. Большинство из этого довольно часто использую.

    three.js - 3D графика
    sweetalert - Всплывающие предупреждения
    snapsvg - Анимация/манипуляция SVG
    pixijs - 2D движок с поддержкой WebGL
    Nape Physics Engine - 2D движок физики
    Clusterize.js - Плагин для отображения больших объёмов данных
    jsplumb - Визуализация связей
    toastr - Симпатичные уведомления
    elFinder - Файловый менеджер
    jQuery-Tabledit - Инлайн редактор таблиц
    Iconate.js - Трансформация/анимация иконок
    Paper.js - Фрейм для работы с векторной графикой
    Vue.js - Серьёзный конкурент Angular.js =)
    socket.io - Хорошая библиотека для работы с сокетами
    InstantClick - Предзагрузка страниц при наведении курсора на ссылку
    spin.js - Название говорит само за себя. Spin
    sigmajs - Построение/отображение графов
    validate - Валидатор форм
    select2 - Кастомный select с поиском, тегами и прочими полезностями
    Chart.js - Визуализация данных. Проще говоря графики на HTML 5
    Ответ написан
    Комментировать
  • Стоит ли создавать интернет-магазин для портфолио на чистом PHP?

    @Afatar
    Конечно делай. Если есть время и тебе лет 13-15, то это отличный способ набить шишки и прокачать свой скилл. Обычно так и становятся программистами. С начало пишешь говно, потом читаешь про MVC, переписываешь, получается MVC говно, потом узнаешь про фреймворки и пишешь говно на фрейворке. Потом идешь в крутую контору и из тебя год выбивают все говно и после этого становишься специалистом.
    Ответ написан
    1 комментарий
  • Как сделать такой эффект фона?

    zualex
    @zualex
    Senior Software Engineer
    Ответ написан
    Комментировать
  • Как нужно делать рассылку со своего сайта (сервера)?

    @xtreme
    Снимаю порчу по SSH :)
    1. Изучить рекомендации по рассылкам у крупных почтовых сервисов (Google, Yandex, Mail.ru). При подготовке писем для рассылки строго следовать их рекомендациям.
    2. Зарегистрироваться в postmaster.yandex.ru, postmaster.mail.ru, чтобы следить за ходом рассылки писем.
    3. Отлавливать недоставленные письма, убирать их из листов рассылки, дабы не мусорить.
    4. Сделать механизм отписки от рассылки (это один из критериев пункта 1), причем 100% работающий в один клик.
    5. Мониторить нажатие кнопки "Спам" в вышеуказанных почтовых сервисах, также сразу исключать их из будущих рассылок.

    1к подписчиков - это мелочь. Можешь пробовать отсылать сразу все письма на свой почтовый релей (для 1к хватит и одного релея), даже почти дефолтно настроенный MTA будет рассылать с нужными интервалами.

    Обязательное условие - соблюдать все почтовые правила и не пренебрегать цифровыми подписями - SPF, DKIM, DMARC, правильные записи в DNS (A, MX, PTR).
    Ответ написан
    10 комментариев
  • Какой php фреймворк наиболее прост в освоении?

    hbuser
    @hbuser
    Мои пять копеек. Laravel - молодой фреймворк, но современный и очень хорошо проработан. Поддерживает много разных современных плюшек изначально, из коробки (например, PSR-4, composer, как основное средство установки расширений и пр.), на которые некоторые фреймворки, которые существуют больше, чем Laravel только перебрались. Отличается тем, что в нем очень многое достаточно человекопонятно и логично. Создан быть простым. Многое может. Создано много расширений для него (по сути, это любое расширение, которое можно установить с помощью composer, а это 77 тыс. штук расширений, адаптированное для Laravel, что тоже не сложно, но можно и без этого. Не будет сильно удобно, но жить можно.), а если чего-то нет, то packagist предложит все, что душе угодно и установить это дело 2-х минут. Около него очень быстро продолжает расти сообщество единомышленников. Очень много информации по нему на stackoverflow и вообще в интернете. Есть IRC-чаты, в которых много понимающих людей и можно получить помощь в любое время дня и ночи. Есть ребята, которые посвящают себя урокам по нему и делают это очень качественно. Возьмем того же Jeffrey Way. Красавец в плане подачи информации и произношение отличное, американское, не британское. Слушать одно удовольствие. На западе про него знают и разработчики востребованы, у нас его знают плохо. Только относительно продвинутые и открытые новому разработчики. Я настоятельно рекомендую этот фреймворк. Он прост - раз. Он научит работе с различными современными сопутствующими технологиями. Например, из коробки доступен box для vagrant. А это уже немного другой уровень в сравнении с WAMP на Windows.
    Сейчас на базе Laravel уже и микрофреймворк доступен.
    Кстати, в IRC можно задать вопрос и самому автору.
    Еще момент. Автор не городил своих велосипедов. Это качественный продукт. Многое хорошо работающее и хорошо себя зарекомендовавшее там из Symphony, очень многое. Своеобразная квинтэссенция существующих наработок, технологий + свои наработки и своя логичная интерпретация работы с фреймворком.
    Ответ написан
    2 комментария
  • Почему php-файл выводит свой код в браузер?

    @inDeepCode
    Думаю, потому что он обращаеться через директорию /js/, где не отрабатывает php интерпретатор.
    Ответ написан
    Комментировать
  • Есть ли какой-нибудь веб-сервис для генерации уникальных изображений?

    @magazovski
    Для пользователей вы можете использовать gravatar. Там есть уникальные картинки по умолчанию + пользователь сам может один раз загрузить свой аватар. Много крупных проектов их используют, включая github
    Ответ написан
    Комментировать
  • Какой годный file uploader?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Вот хороший: www.dropzonejs.com
    А вообще, можно потыкать например тут: www.unheap.com/?s=upload
    Ответ написан
    Комментировать
  • Хочется хорошо и качественно разрабатывать, но как?

    iLeonidze
    @iLeonidze
    xbooster.ru
    Для начала посмотрите вот этот мотивирующий туториал для всех начинающих.

    А если серьезно Вам нужно 2 вещи:
    1. Хороший IDE-редактор. Для веба подойдёт Webstorm или PHPStorm, но у каждого свои предпочтения. Кому-то может хватить самого обычного Notepad++.
    2. Много практики. Нельзя кому-то объяснить что так делать хорошо, а так плохо. Сделайте 1, 2, 3 пробных проекта - разработайте каждый с нуля: придумайте идею, продумайте логику, напишите серверную часть приложения, потом клиентскую. И вот! Вы уже знакомы что такое Backend и Frontend Development. По мере разрастания проектов, вам станет тяжело обновлять их, тогда придётся внедрять версионность и вот Вы уже знакомы с системой контроля версий.

    По сути, всё познается практикой. Чем её больше, тем больше опыта, а соответственно и понимания правильности своих действий в разработке.
    Ответ написан
    1 комментарий
  • Хочется хорошо и качественно разрабатывать, но как?

    @spisarenko
    Перфекционист-прокрастинатор
    Здравствуйте!
    Я считаю, что Вам надо не учебники штудировать, а набираться опыта. Т.е. решать конкретные задачи с использованием конкретных инструментов, а необходимые для этого знания черпать в процессе.
    Только практические навыки и знания дадут Вам тот результат, которого Вы ожидаете.
    Ответ написан
    9 комментариев
  • Какой цветовой профиль используется для веба?

    mag2000
    @mag2000
    Erlang
    Breaking News: следующая ссылка убедит вас в том, что современные браузеры поддерживают профили.

    Is Your Browser Color Managed?
    У кого мустанг желтый – всё ок, браузер уважает ICC профили в картинках.

    Пикча в топе страницы с профилем Jeffrey's Funky RGB и если заменить профиль на sRGB, машина приобретет фиолетовую расцветку.

    На тему того, что картинка становится тусклее. Вы сохраняете изображение без профиля, а профиль по-умолчанию – sRGB. В Photoshop при "Сохранить для web" настройте чекбоксы таким образом:
    • [X] Встроенный профиль
    • [ ] Преобразовать в sRGB


    У меня всё получилось.
    Ответ написан
    Комментировать
  • Какой сервис кнопок "Поделиться" использовать для сайта?

    LifeAct
    @LifeAct
    Создаем и раскручиваем, не ставим на конвейер
    в последнее время юзаю sapegin.github.io/social-likes/ru все локально, следовательно быстро и выглядит симпатично
    Ответ написан
    3 комментария
  • Как преодолеть NAT (webrtc)?

    Если кратко, то существуют 4 вида NAT-а, которые нужно как-то преодолевать, 3 из них лекго преодолеваются при помощи STUN-серверов (они используются только в момент соединения пиров друг с другом - то-есть весь трафик через них не идет, есть куча бесплатных stun-серверов), четвертый - самый проблемный, под него подпадают примерно 15% всех peer-to-peer соеднинений в Интернете - это так называемый двойной NAT (когда оба пира скрыты за NAT-ом). Для преодоления этого четвертого вида NAT-а нужен TURN-сервер. Его особенность в том, что он работает как прокси - то-есть пропускает весь трафик через себя - отсюда вы должны понять, что бесплатных TURN-серверов вы не найдете. Те аккаунты, что вы привели сверху скорее всего уже давно отключены.

    Отличный список STUN-серверов можно взять здесь - https://github.com/DamonOehlman/freeice он там постоянно проверяется и обновляется.

    Проблемя с двойным NAT-ом решается одним из трех способов:
    1. где-то находите временно халявный аккаунт на TURN-сервер (но аккаунт внезапно могут отключить)
    2. покупаете платный аккаунт на уже существующем сервере и платите за трафик, например здесь - https://my.xirsys.com/signup/plans/standard/monthly
    3. Разворачиваете свой turn-сервер. Мы, например, так и сделали. Взяли убунту за $5 в месяц на digitalocean и поставили там за пол дня опенсурсный, бесплатный turn-server - turnserver.open-sys.org/downloads
    Ответ написан
    3 комментария
  • Как узнать куда, пошел пользователь back или forward в событии popstate?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    window.addEventListener('popstate', function (e) {
    	var id = e.state ? e.state.count : localStorage.id - 1,
    		dir = id - localStorage.id;
    
    	console.log('Переход ' + (dir > 0 ? 'вперёд' : 'назад') + ', шагов: ' + Math.abs(dir));
    	localStorage.id = id;
    }, false);
    
    document.addEventListener('click', function (e) {
    	var number = Math.round(Math.random() * 1000);
    
    	localStorage.id = (parseInt(localStorage.id) || 1) + 1;
    	history.pushState({
    		count: localStorage.id
    	}, 'title ' + number, '?page=' + number);
    }, false);
    Ответ написан
    Комментировать
  • Как задать несколько условий в if?

    ellrion
    @ellrion
    $row['type'] != 14 OR $row['type'] != 11
    Это условие всегда true, так как по нему $row['type'] должен быть 14 и 11 одновременно что бы не попасть под условие
    нужно сменить OR на AND (&& - лучше)
    а ещё лучше так:
    if(!in_array((int)$row['type'], [14, 11], true)) {
            echo 'error'; 
    } else {
            echo 'ok';
    }
    Ответ написан
    2 комментария