Pull to refresh
0
Артём Konfuze @konfuzeread⁠-⁠only

User

Send message

Сделаем худший Vue.js в мире

Reading time5 min
Views16K
Некоторое время назад я опубликовал похожую статью про React, где с помощью пары строк кода мы создали крошечный клон React.js с нуля. Но React — далеко не единственный инструмент в современном фронтенд-мире, Vue.js стремительно набирает популярность. Давайте разберемся, как работает этот фреймворк, и создадим примитивный клон, похожий на Vue.js, в образовательных целях.

Реактивность


Как и React.js, Vue является реактивным, то есть все изменения в состоянии приложения автоматически отражаются в DOM. Но в отличие от React, Vue отслеживает зависимости во время рендеринга и обновляет только связанные части без каких-либо «сравнений».

Ключ к реактивности Vue.js — это метод Object.defineProperty. Он позволяет указывать настраиваемый метод getter / setter для поля объекта и перехватывать каждый доступ к нему:
Читать дальше →
Total votes 23: ↑22 and ↓1+30
Comments4

Боль разработчика: «Никогда не давайте пользователям бесплатный тариф»

Reading time7 min
Views88K


Если вы запускаете какой-то сервис в интернете, всегда есть соблазн предложить бесплатный тариф, чтобы завлечь публику.

Вы думаете, что людям понравится — и они захотят перейти на нормальный тариф с полными функциями. Это большая ошибка. Если человека полностью устраивает бесплатный тариф, то он на нём останется навсегда!

И будет требовать от вас надёжного сервиса, новых функций и предъявлять претензии. Чем меньше платит пользователь — тем больше шуму он поднимает в социальных сетях и тем больше поддержки требует. Отрицательные отзывы идут именно от бесплатных юзеров, а не от платных (это вполне логично, если подумать).
Читать дальше →
Total votes 77: ↑71 and ↓6+84
Comments266

«Docker уже умер» или все, что вы хотели узнать про Devops, но боялись спросить

Reading time21 min
Views63K

Недавно в наших соцсетях выступал Александр Чистяков, DevOps с 7-летним опытом и сооснователь Санкт-Петербургского сообщества DevOps-инженеров.

Саша один из топовых докладчиков в этой сфере, он выступал на главных сценах на Highload++, РИТ++, PiterPy, Стачка, всего сделав не менее 100 докладов. В прошлый понедельник он ответил на вопросы зрителей и рассказал про свой опыт.

Делимся записью эфира и расшифровкой.



Меня зовут Александр Чистяков, я много лет работаю DevOps-инженером. Я давно консультирую различные компании на тему внедрения DevOps-практик, использования современного DevOps-инструментария и организации инфраструктур таким образом, чтобы все мы могли спокойно спать по ночам, и люди продолжали получить деньги за свои товары и услуги.

В основном я консультировал иностранные компании.
Total votes 60: ↑45 and ↓15+54
Comments238

Не лайтхаусом единым: как проверить свой сайт со всех сторон

Reading time3 min
Views19K


Когда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду Lighthouse/Pagespeed Insights от Google, который давно стал де-факто стандартом для оценки производительности сайта. Кто-то стремится к заветным 100 баллам даже на прототипах и шаблонных приложениях в две кнопки, кто-то в шутку создает абсолютно недоступный сайт с идеальным рейтингом, но для всех фронтендеров лайтхаус предоставляет вменяемую, хоть и довольно поверхностную, аналитику производительности сайта и поиск бутылочных горлышек. Однако скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы. Мы рассмотрим инструменты для каждого из значимых направлений и составим список, по которому стоит прогонять свой сайт, чтобы в дальнейшем не отлавливать проблемы вручную.
Читать дальше →
Total votes 24: ↑22 and ↓2+31
Comments4

10 современных раскладок в одну строку CSS-кода

Reading time7 min
Views33K

В данной статье рассматривается несколько эффективных строк CSS-кода, которые выполняют серьезную работу и помогают создавать надёжную современную разметку.

Читать далее
Total votes 34: ↑33 and ↓1+39
Comments12

Мир на ладони или как мы с помощью чат-бота оптимизируем рабочие процессы сотрудников

Reading time9 min
Views7.6K

Когда численность сотрудников в НСПК стала измеряться сотнями, а количество корпоративных систем, в которых они работают десятками, то взаимодействие с ними стало не всегда удобным, временные затраты на доступ к ним с рабочей машины начали превышать непосредственное время самой работы в них. А что, если сотрудник находится не на своем рабочем месте, но, скажем, срочно необходимо оформить гостевой пропуск для партнера компании? И это лишь один кейс из множества.


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

Читать дальше →
Total votes 6: ↑4 and ↓2+5
Comments15

Service Workers. Инструкция по применению

Reading time9 min
Views133K


Количество выходов в интернет с мобильных устройств ежегодно растёт на 2-4% в год. Качество связи не успевает за такими темпами. Как итог, даже самое лучшее веб-приложение обеспечит ужасный опыт, если пользователь не сможет его загрузить.

Проблема в том, что до сих пор нет хорошего механизма управления кэшем ресурсов и результатов сетевых запросов. В своей статье я хочу рассказать как Service Worker (SW) может помочь в решении этой задачи. Объясню в формате рецептов — какие элементы и в какой пропорции смешать, чтобы получить нужный результат, исходя из задачи и требований.
Поехали!
Total votes 57: ↑57 and ↓0+57
Comments40

Эффективное тестирование верстки

Reading time15 min
Views27K
Тестировать полезно. Тесты позволяют в автоматическом режиме безопасно рефакторить код и гарантируют его работу. Тесты – это живая документация: если информация в Wiki или в Confluence может устареть, то тесты всегда актуальны. Также многие крутые практики связаны с тестированием. Например, самотестирующийся код или разработка через тестирование (TDD), когда тесты пишутся перед кодом, а некоторые практики DevOps и Extreme Programming применимы только в условиях хорошего покрытия проекта тестами.



Но написать простые тесты, которые будут помогать в написании кода и не срывать дедлайны, задача сложная. Она становится ещё сложнее, если учесть, что нам приходится тестировать вёрстку. Это не два JSON сравнить: здесь не работают простые подходы «вызову функцию, проверю результат» — тестирование UI сложнее. Как эффективно и правильно тестировать верстку и писать для неё тесты, чтобы они были полезны, а дедлайны не горели, расскажет Максим Соснов (crazymax11), ведущий разработчик в СКБ Контур.
Total votes 21: ↑21 and ↓0+21
Comments15

Дэн Абрамов о замыканиях в JavaScript

Reading time7 min
Views22K
Замыкания вызывают у программистов сложности из-за того, что это — «невидимая» конструкция.

Когда вы используете объект, переменную или функцию, вы делаете это намеренно. Вы думаете: «Тут мне понадобится переменная» — и добавляете её в свой код.



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

Если в двух словах, то замыкание — это когда функция обращается к переменным, объявленным за её пределами. Например, замыкание содержится в этом фрагменте кода:

let users = ['Alice', 'Dan', 'Jessica'];
let query = 'A';
let user = users.filter(user => user.startsWith(query));

Обратите внимание на то, что user => user.startsWith(query) — это функция. Она использует переменную query. А эта переменная объявлена за пределами функции. Это и есть замыкание.

Вы, если хотите, можете дальше не читать. Оставшаяся часть этого материала рассматривает замыкания в другом свете. Вместо того чтобы говорить о том, что такое замыкания, эта часть статьи посвятит вас в подробности методики обнаружения замыканий. Это похоже на то, как, в 1960-х, работали первые программисты.
Читать дальше →
Total votes 29: ↑21 and ↓8+25
Comments63

Делим Laravel на компоненты

Reading time5 min
Views11K

Привет, Хабр. Недавно получил в руки интересный проект, который, несмотря на свою простоту требовал не использовать какой-либо фреймворк. О пакетах речи не шло, поэтому было принято решение использовать привычные компоненты Laravel. Если есть необходимость в использовании очередей, Eloquent или контейнера — добро пожаловать под кат.

Читать дальше →
Total votes 26: ↑25 and ↓1+24
Comments14

Организация маршрутов в Laravel

Reading time3 min
Views18K
Здравствуй, Habr. Недавно я согласился на ревью сайта, заказанного на фрилансе. Я ожидал увидеть контроллеры, которые делают вообще все и занимают 200+ строк (и прочие проявления плохого кода), но все было вполне прилично. Валидация не лежала в контроллере, что встречается достаточно часто. Иногда, конечно, встречались некоторые несоответствия PSR-2, но все выглядело нормально, пока я не заглянул в файл с маршрутами. Он занимал несколько экранов и имел комментарии о группах маршрутов. Я связался с разработчиком и он сказал, что все немного «разрослось» и согласился поправить. В следующей версии я увидел, что он создал несколько классов со статическими методами, в которые переложил код и вызвал их, как это обычно делается, с авторизацией. Тут я вспомнил, что уже сталкивался с подобным и встречал такую аргументацию: «В документации ничего не говорится о вынесении маршрутов в разные файлы». Буквально через пару минут я нашел статью и отправил разработчику. Через пол часа я получил маршруты в нормальном виде и принял решение, что многим новичкам эта статья будет полезна. Так родился этот вольный перевод.

Если вы ни разу не правили файл RouteServiceProvider, добро пожаловать под кат.
Читать дальше →
Total votes 28: ↑27 and ↓1+26
Comments29

«Молчание – золото»: 13 вещей, которые не стоит говорить разработчикам и тестировщикам

Reading time8 min
Views94K


/ фото Sistema Bibliotecario Vimercatese CC

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

Работа в команде – ответственное занятие, поскольку в этом случае люди отвечают не только за себя, но и за окружающих, они общаются, помогают друг другу. Как бы это ни было банально, ключом к продуктивному общению между людьми всегда является вежливость и взаимоуважение. Однако все же есть определенный список фраз, которые – даже когда они звучат вежливо и корректно – не стоит употреблять в разговоре с разработчиками и тестировщиками, если вы их коллега, заказчик, «владелец» или руководитель проекта.
Читать дальше →
Total votes 68: ↑58 and ↓10+48
Comments44

Пошаговый план старта на Upwork

Reading time3 min
Views263K
image

Рано или поздно разработчик всерьез задумывается о фрилансе. В этот момент большинство идут на биржи. Выбор бирж огромен. В СНГ: fl.ru, weblancer и прочие. Но когда доходишь до дела начинаешь понимать в каком все упадке. Единственным местом где водятся более-менее нормальные заказы можно назвать fl.ru и еще одну-две биржы. Но на fl.ru нужен pro аккаунт, ведь оказывается чтобы взять заказ нужно заплатить бирже, и далеко не факт что тебе что-то светит. Поэтому было решено идти на Upwork.
Читать дальше →
Total votes 57: ↑51 and ↓6+45
Comments99

CSS и iOS Safari

Reading time3 min
Views135K
image Доброго времени суток, дорогие хабрахабровцы!

Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!
Читать дальше →
Total votes 24: ↑23 and ↓1+22
Comments32

JavaScript: элементы стиля

Reading time16 min
Views26K
В 1920-м году вышла книга Уильяма Странка-младшего «Элементы стиля». Рекомендации из неё, касающиеся английского языка, актуальны и сегодня. Те же принципы, применённые к коду, позволяют повысить качество программ.

image

Надо заметить, что речь не идёт о жёстких правилах. То, о чём мы сегодня поговорим — лишь рекомендации. Даже если вы решите следовать им, вполне могут найтись веские причины для того, чтобы от них отклониться, например, если это поможет сделать код понятнее. Однако, поступая так, будьте бдительны и помните о том, что люди подвержены когнитивным искажениям. Например — выбирая между обычными и стрелочными функциями в JavaScript, тот, кто не очень хорошо знаком с последними, предпочтёт обычные функции, в силу привычки считая их понятнее, проще, удобнее.
Читать дальше →
Total votes 35: ↑32 and ↓3+29
Comments32

Кнопочное мышление против целостного IT-продукта

Reading time10 min
Views52K

Эта статья — выражение моей личной боли. Кнопочные решения портят мне жизнь, я трачу время на споры и обоснования.



Когда мы общаемся с коллегами, заказчиками или пользователями, я использую фразу «кнопочное мышление». Что я имею ввиду под этим термином? Текущая статья — развернутый ответ на этот вопрос.



Синонимами кнопочного мышления я считаю «экранное мышление» или преждевременную концептуализацию. Я раскрою мышление кнопками на десятке примеров из практики. А здесь для начала история, которая наверняка случалась с каждым. Представьте к вам приходят и рассказывают о падении конверсии на сайте. А вы ему сразу: «Давайте кнопку покупки сделаем побольше и поярче!». Что произошло? В бизнесе возникла проблема. Вместо погружения в детали, вместо исследования причин, вы играете с размерами кнопки. Вот в таких случаях я говорю о кнопочном мышлении.



Для тех, кто любит смотреть, а не читать, есть видео и слайды.


Читать дальше →
Total votes 39: ↑31 and ↓8+23
Comments26

Горизонтальное масштабирование. Что, зачем, когда и как?

Reading time17 min
Views119K
Александр Макаров

Александр Макаров ( SamDark )


Здравствуйте! Я Александр Макаров, и вы можете меня знать по фреймворку «Yii» — я один из его разработчиков. У меня также есть full-time работа — и это уже не стартап — Stay.com, который занимается путешествиями.

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

Что такое масштабирование, вообще? Это возможность увеличить производительность проекта за минимальное время путем добавления ресурсов.

Обычно масштабирование подразумевает не переписывание кода, а либо добавление серверов, либо наращивание ресурсов существующего. По этому типу выделяют вертикальное и горизонтальное масштабирование.
Читать дальше →
Total votes 52: ↑47 and ↓5+42
Comments17

Что такое арбитраж трафика?

Reading time3 min
Views176K
Это первый урок базового курса по мобильному арбитражу, о котором мы писали на прошлой неделе. В нем мы расскажем о совсем базовых понятиях: что такое арбитраж трафика, в чем плюсы и минусы арбитража, и в чем отличие арбитража от партнерского маркетинга.


Текстовая расшифровка | Презентация

Следующий урок выйдет уже завтра. В нем пойдет речь об участниках рынка арбитража. Расписание выхода всех уроков доступно на сайте Mobio School. Задавать любые вопросы по арбитражу можно в комментариях или в нашей группе ВКонтакте.
Текстом
Total votes 50: ↑30 and ↓20+10
Comments5

Двенадцать полезных Chrome DevTools Tips

Reading time4 min
Views81K
В данной статье мы рассмотрим некоторые функции инструментов разработчика Chrome. Конкретно я использую Chrome Canary и вам советую. И не потому, что это отсылка на маленьких милых птиц, которые пожертвовали своими жизнями чтобы мы могли добывать свежий уголь.

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

(В статье ниже присутствуют анимированные гифги, которые начинают раздражать после первого цикла. Поэтому я советую открыть dev tools и удалить DOM ноды, которые отвечают за изображения.)

Итак, поехали:

Копируем переменную в буфер обмена


Об этой возможности я узнал из комментариев, и считаю ее достаточно полезной чтобы быть описанной в начале. Иногда бывает нужно скопировать содержимое переменной в буфер обмена. Например html код или json объект. Для этого можно использовать copy функцию.

copy (someVariable)

Теперь текстовое представление переменной скопировано в буфер обмена.
Читать дальше →
Total votes 71: ↑69 and ↓2+67
Comments17

Hermitage — решение ваших проблем с хранением и обработкой изображений

Reading time3 min
Views8.5K
Всем привет! Буду краток: в обмен на пять минут вашего времени отдел PHP-разработки компании Лайв Тайпинг расскажет вам о собственном микросервисе для хранения и обработки загружаемых изображений. Он называется Hermitage. Его задача — представлять изображение в разных версиях согласно заранее заданным параметрам. Hermitage будет полезен в ситуациях, когда необходим автономный и масштабируемый сервер для хранения изображений и манипуляций над ними.
hermitage
Читать дальше →
Total votes 14: ↑13 and ↓1+12
Comments18
1
23 ...

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity