Ошибки системных и прикладных программистов, попавших во фронтенд

Автор: admin от 8-04-2019, 18:30, посмотрело: 26

В одной моей социальной компании роль фронтенд-разработчиков сравнивают с бас-гитаристами в музыкальных группах: когда-то они мечтали стать сольными гитаристами с шестиструнной электроникой в руках, или, проводя параллель, настоящими «хакерами», гуру информационных технологий, но, споткнувшись об указатели, вынуждены были сделать шаг назад и остаться верстальщиками. Насколько такое представление верно, решайте сами, но лично мои знакомые фронтендеры действительно когда-то пытались учить чуть ли не ассемблер и до сих пор иногда жалеют, что не справились с сегментацией памяти. В этой статье мы рассмотрим противоположный случай — когда опытный системный или прикладной программист внезапно решил стать веб-мастером. Причины могут быть разные. Возможно, это студент, как я, который ещё не получил диплом, с которым можно устраиваться на работу по специальности, а заработать денег нужно уже сейчас. Или начальник приказал системному администратору сверстать сайт компании, потому что больше некому. Ну или, возможно, вас завлекла идея прекратить работать на дядю и стать самодостаточным фрилансером, а на фриланс биржах, как известно, самый ходовой товар — сайты. Так или иначе, выполняя задания из самоучителей по HTML, CSS и javascript, вы невольно частично руководствуетесь своим прошлым опытом разработки прикладного и системного ПО, тогда как самоучители рассчитаны на совершенных новичков в мире информационных технологий. В результате у этих новичков первые сайты получаются быстрее и кросбраузернее, чем у вас. А всё потому, что со своим уставом в чужой монастырь не ходят. О некоторых выявленных на собственном опыте ошибках, преследующих начинающих фронтендеров, имеющих увесистое портфолио с алгоритмами на C++, я и расскажу.



Ошибки системных и прикладных программистов, попавших во фронтенд

Категория: Веб-разработка

 

Chrome расширения для веб-разработки и работы с GitHub

Автор: admin от 1-04-2019, 17:00, посмотрело: 27

Chrome расширения для веб-разработки и работы с GitHub


Привет всем. Хочу поделиться с вами некоторыми из расширений для Хрома, которые я использую при разработке, анализе сайтов, в работе с GitHub и просто в повседневной жизни. Уверен, что для большинства читателей, список этих расширений не будет открытием, но те, кто узнает о них впервые и установит, несомненно будут наслаждаться работой с новыми инструментами.

Категория: Веб-разработка, Google

 

QlikView. Условное форматирование «Как в Эксель»

Автор: admin от 30-03-2019, 16:40, посмотрело: 28

Пришла задача от заказчика – сделать условное форматирование таблицы «как в эксель». QlikView вполне себе справляется со стандартными задачами раскраски по условию, но вот с выбором параметров динамически, да еще и как в эксель – возник вопрос «это как вообще..?».

Итог: было несколько вариантов реализации, несколько версий, потрачено немалое время на тестирование и отладку. Проводился рефакторинг уже готовой реализации. Представляю итоговый вариант, удовлетворяющий потребности заказчика, оттестированный и выверенный.



Функциональная задача(постановка)



Имеется таблица, в которой измерения и выражения выбираются динамически, формулы расчета самих значений просты: суммы, средние, относительные проценты, абсолютные значения и тому подобное.



Требуется дать возможность пользователю раскрасить таблицу в зависимости от выбранных параметров. Ключевые вводные — один столбец должен уметь раскрашиваться разными цветами, то есть мульти-раскраска, по разным параметрам. Второе ключевое – должна быть возможность раскрасить поле в зависимости от другого «взаимосвязанные параметры», например, мы раскрашиваем «сумму покупок» в зависимости от значения «средняя цена продуктов на рынке».

Далее приведу основную часть реализации. Я не буду останавливаться на таких момент, как скрыть/закрыть меню, создание списков, добавлять в код такие простые на мой взгляд вещи. Если появятся вопросы по деталям расскажу дополнительно.



Итоговый результат, путь к которому был тернист:



QlikView. Условное форматирование «Как в Эксель»

Категория: Веб-разработка

 

Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

Автор: admin от 22-02-2019, 11:45, посмотрело: 39

Узнайте, как использовать мощный примитив SVG-фильтра feTurbulence для создания собственных текстур и эффектов искажений.



Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:



Эффекты фильтрации SVG




  • Эффекты фильтрации SVG. Часть 1. SVG фильтры 101

  • Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology

  • Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

  • Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.

  • Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap

  • Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence
  • Категория: Веб-разработка

     

    Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap

    Автор: admin от 19-02-2019, 09:10, посмотрело: 29

    В очередной статье серии об SVG фильтрах Sara Soueidan покажет как сделать текст соответствующим текстуре поверхности с помощью примитива feDisplacementMap.



    Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap

    Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:



    Эффекты фильтрации SVG




  • Эффекты фильтрации SVG. Часть 1. SVG фильтры 101

  • Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology

  • Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

  • Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.

  • Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap
  • Категория: Веб-разработка

     

    Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer

    Автор: admin от 15-02-2019, 19:45, посмотрело: 34

    Эта четвертая статья серии об SVG-фильтрах, в которой Sara Soueidan покажет вам, как использовать feComponentTransfer для создания эффекта двухтонового фильтра.



    Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer

    Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:



    Эффекты фильтрации SVG




  • Эффекты фильтрации SVG. Часть 1. SVG фильтры 101

  • Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology

  • Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

  • Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.



  • Категория: Веб-разработка

     

    Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

    Автор: admin от 12-02-2019, 14:40, посмотрело: 42

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



    Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

    Категория: Веб-разработка

     

    Эффекты фильтров SVG: контурный текст при помощи feMorphology

    Автор: admin от 10-02-2019, 14:05, посмотрело: 44

    Во второй части серии об SVG-фильтрах Sara Soueidan знакомит нас с фильтром feMorphology и приводит несколько примеров его использования для создания интересных эффектов.



    Эффекты фильтров SVG: контурный текст при помощи feMorphology

    Категория: Веб-разработка

     

    10 советов по дизайну интерфейса

    Автор: admin от 23-07-2018, 18:45, посмотрело: 153

    Привет, Хабр! Представляю вашему вниманию перевод статьи "10 Tips to Designing Perfect Forms".



    10 советов по дизайну интерфейса


    Формы играют роль портала между пользователем и системой и часто являются основой страницы. Авторизация, регистрация, обновление статуса, ввод платежных данных или адреса доставки – управляются формами. Для онлайн-магазинов грамотно созданные формы играют значительную роль. По собственному опыту, хороший дизайн удваивает онлайн-продажи.



    Поскольку формы выполняют важные функции для интерфейса пользователя, существуют правила по их оформлению.

    Категория: Веб-разработка

     

    10 мелких ошибок в дизайне, которые мы допускаем до сих пор

    Автор: admin от 4-07-2018, 09:40, посмотрело: 143

    Поговорке «хороший дизайн — это дизайн, в котором все очевидно» сто лет в обед, и я уверен, что в каком-то виде она существовала и в прошлые века, применительно к хорошей еде, музыке, архитектуре, одежде, философии и вообще чему угодно.



    10 мелких ошибок в дизайне, которые мы допускаем до сих пор



    Мы забываем, что перемены в человеческом мышлении происходят крайне медленно, и те знания о поведении людей, которыми мы располагаем сейчас, не устареют еще лет пятьдесят или около того. Чтобы всем было проще, мы должны последовательно придерживаться нескольких принципов, которые будут напоминать нам, как делать продукты с хорошим дизайном. Неплохо бы напоминать себе об этих принципах хотя бы раз месяц, пока не начнем им жить и дышать.



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

    — Дж. Нильсен

    Категория: Веб-разработка

     
    Назад Вперед