Как стать автором
Обновить
1
0

Пользователь

Отправить сообщение

Генератор компонентов Vue.js?

Время на прочтение3 мин
Количество просмотров7.9K

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

Часть этой рутины, однако, можно всегда оптимизировать.

В этой статье хочу познакомить вас с инструментом, который разработал, для минимизации рутины при создания компонентов Vue.js – VGENT.

VGENT (Vue Agent) – это CLI (Command Line Interface) приложение, которая генерирует компоненты для фреймворка Vue.js или Nuxt.js. Данный инструмент можно гибко настроить под нужды проекта, и генерировать компоненты командами в терминале.

Читать далее
Всего голосов 9: ↑9 и ↓0+9
Комментарии9

Руководство по Git. Часть №2: золотое правило и другие основы rebase

Время на прочтение6 мин
Количество просмотров29K
Посмотрим, что происходит, когда вы выполняете git rebase и почему нужно быть внимательным. 

Это вторая и третья части гайда по Git из блога Pierre de Wulf в переводе команды Mail.ru Cloud Solutions. Первую часть можно почитать тут.
Читать дальше →
Всего голосов 48: ↑48 и ↓0+48
Комментарии26

Front-end додзё: проекты для тренировки навыков разработчика (5 новых + 43 старых)

Время на прочтение15 мин
Количество просмотров45K

1. Клон Notion


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

image

www.notion.so

Чему вы научитесь, создавая клон Notion:

  • HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
  • Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
  • Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

Читать дальше →
Всего голосов 10: ↑8 и ↓2+13
Комментарии7

Занимательная практика для разработчика

Время на прочтение3 мин
Количество просмотров18K
Человек остается начинающим в течение 1000 дней. Он находит истину после 10000 дней практики.

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

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

(предыдущие списки заданий для тренировки: 1) 8 учебных проектов 2) Еще список проектов, на чем потренироваться)

Проект 1: Pacman


image

Создайте свою версию Pacman. Это отличный способ получить представление о том, как разрабатываются игры, понять основы. Используйте JavaScript-фреймворк, React или Vue.

Вы узнаете:

  • Как передвигаются элементы
  • Как определить какие клавиши нажимать
  • Как определить момент столкновения
  • Вы можете не останавливаться на достигнутом и добавить управление движением призраков

Пример этого проекта вы найдете в репозитории GitHub

«Мастер совершает больше ошибок, чем новичок — попыток»
Читать дальше →
Всего голосов 20: ↑18 и ↓2+16
Комментарии1

Quasar 1.0: новый полезный инструмент для Vue-разработчиков и не только для них

Время на прочтение6 мин
Количество просмотров25K
Автор материала, перевод которого мы публикуем сегодня, занимается работой над фреймворком Quasar. Это — полнофункциональный расширяемый опенсорсный инструмент для разработки современных приложений различного назначения. Он построен на базе популярного фронтенд-фреймворка Vue.js и использует возможности Node.js, Webpack и Babel. Совсем недавно, в начале июля сего года, вышел первый стабильный релиз Quasar.

Читать дальше →
Всего голосов 31: ↑30 и ↓1+29
Комментарии18

JavaScript: Создание простого MEVN-приложения

Время на прочтение19 мин
Количество просмотров32K

О чем статья


Цель этой статьи — показать, как можно создать базовое MEVN-приложение. Акроним MEVN
означает — MongoDB + Express.js + Vue.js + Node.js. В качестве примера будет написано
одностраничное приложение, которое содержит форму, состоящую из нескольких текстовых
полей. При заполнении формы и отправке данных, сервер будет записывать их в базу данных, а
клиент редиректить на страницу “Спасибо”.

В качестве операционной системы используется Ubuntu 18.10, установка всех компонентов будет
указана относительно нее.

Необходимые требования


  • Знания HTML, CSS;
  • Базовые знания JavaScript.

Что имеем на выходе


  • Полноценное Fullstack-приложение;
  • CRUD операции и REST API при помощи Express.js;
  • Подключение к MongoDB.
Читать дальше →
Всего голосов 11: ↑10 и ↓1+9
Комментарии7

Гибкие таблицы на CSS Grid

Время на прочтение8 мин
Количество просмотров70K

Просмотр списка лидов («холодных» контактов)

Поскольку мы уже запустились, я, наконец, могу рассказать о секретном проекте, над которым работал последние два года. Одна из интересных функций Teamwork CRM — просмотр списка (list view).

Это мощный компонент, который встречается в приложении семь раз. По сути, таблица на стероидах. Я мог бы много рассказать, но не хочу вас утомлять. Сосредоточусь на том, как мы реализовали подобную гибкость с помощью всего нескольких строк CSS (Grid). А именно, как мы выкладываем тяжёлые таблицы данных, как поддерживаем изменение размера столбцов и многое другое.

Во-первых, нужно объяснить контекст, начиная с цели и задачи дизайна этих таблиц. Если это не интересует, не стесняйтесь перейти сразу к технической реализации.
Читать дальше →
Всего голосов 19: ↑19 и ↓0+19
Комментарии4

Docker: как развернуть фуллстек-приложение и не поседеть

Время на прочтение13 мин
Количество просмотров158K
«Нам нужен DevOps!»
(самая популярная фраза в конце любого хакатона)

Сначала немного лирики.

Когда разработчик является отличным девопсом, умеющим развернуть своё детище на любой машине под любой OC, это плюс. Однако, если он вообще ничего не смыслит дальше своей IDE, это не минус — в конце концов, деньги ему платят за код, а не за умение его разворачивать. Узкий глубокий специалист на рынке ценится выше, чем средней квалификации «мастер на все руки». Для таких, как мы, «пользователей IDE», хорошие люди придумали Docker.

Принцип Docker следующий: «работает у меня — работает везде». Единственная программа, необходимая для деплоя копии Вашего приложения где угодно — это Docker. Если Вы запустили своё приложение в докере у себя на машине, оно гарантированно с тем же успехом запустится в любом другом докере. И ничего, кроме докера, устанавливать не нужно. У меня, к примеру, на виртуальном сервере даже Java не стоит.
Читать дальше →
Всего голосов 19: ↑13 и ↓6+7
Комментарии40

Скупой не платит дважды – настраиваем память на платформе AMD B450 и получаем бесплатную производительность

Время на прочтение11 мин
Количество просмотров141K
Нельзя отрицать, что компания AMD покоряет рынок процессоров семимильными шагами. Началось всё с появления новинок на базе архитектуры Zen, которые получили имя Ryzen. Да, старт был не таким гладким, как хотелось бы, но шороху производитель навёл немало. В чём секрет успеха второго поколения? Почему энтузиасты обратили особое внимание не на «топовый» чипсет? Правда ли, что в сети есть программы-калькуляторы для настроек памяти? И даже в играх производительность заметно вырастет после тонкой настройки? А что, бывает разная память и какая-то может даже не заработать?


Читать дальше →
Всего голосов 30: ↑27 и ↓3+24
Комментарии40

Cloudflare представила собственный VPN-сервис на базе приложения 1.1.1.1 для мобильных устройств

Время на прочтение5 мин
Количество просмотров73K
Вчера, полностью серьезно и без каких-либо шуток-прибауток, компания Cloudflare анонсировала свой новый продукт — VPN-сервис на базе DNS-приложения 1.1.1.1 для мобильных устройств с использованием собственной технологии шифрования Warp. Основной фишкой нового продукта Cloudflare является простота — целевой аудиторией нового сервиса являются условные «мамы» и «друзья», которые не способны самостоятельно купить и настроить классический VPN или не согласны устанавливать прожорливые в плане энергопотребления сторонние приложения от неизвестных команд.



Напомним, ровно год и один день назад — 1 апреля 2018 года — компания запустила свой публичный DNS 1.1.1.1, аудитория которого за прошедший период выросла на 700%. Сейчас 1.1.1.1 борется за внимание публики с уже ставшим классическим DNS от Google по адресу 8.8.8.8. Позже, 11 ноября 2018 года, CloudFlare запустили мобильное приложение 1.1.1.1 для iOS и Android и вот теперь, на его базе запускается и «VPN по кнопке».
Читать дальше →
Всего голосов 46: ↑43 и ↓3+40
Комментарии21

[в закладки] Bash для начинающих: 21 полезная команда

Время на прочтение9 мин
Количество просмотров154K
Материал, перевод которого мы публикуем сегодня, предназначен для тех, кто хочет освоить командную строку Linux. Умение эффективно пользоваться этим инструментом позволяет экономить немало времени. В частности, речь здесь пойдёт о командной оболочке Bash и о 21 полезной команде. Также мы поговорим о том, как пользоваться флагами команд и псевдонимами Bash, которые позволяют ускорить ввод длинных инструкций.



Также читайте в нашем блоге цикл публикаций про bash-скрипты
Читать дальше →
Всего голосов 58: ↑34 и ↓24+10
Комментарии25

Делаем современное веб-приложение с нуля

Время на прочтение31 мин
Количество просмотров152K
Итак, вы решили сделать новый проект. И проект этот — веб-приложение. Сколько времени уйдёт на создание базового прототипа? Насколько это сложно? Что должен уже со старта уметь современный веб-сайт?

В этой статье мы попробуем набросать boilerplate простейшего веб-приложения со следующей архитектурой:


Что мы покроем:

  • настройка dev-окружения в docker-compose.
  • создание бэкенда на Flask.
  • создание фронтенда на Express.
  • сборка JS с помощью Webpack.
  • React, Redux и server side rendering.
  • очереди задач с RQ.
Читать дальше →
Всего голосов 64: ↑56 и ↓8+48
Комментарии125

Веб скрапинг для веб разработчиков: краткое резюме

Время на прочтение7 мин
Количество просмотров17K
Знание только одного подхода к веб скрапингу решает проблему в краткосрочной перспективе, но все методы имеют свои сильные и слабые стороны. Осознание этого экономит время и помогает решать задачу эффективнее.

image

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

  • Какие есть варианты программного извлечения данных с веб-страницы?
  • Плюсы и минусы каждого подхода?
  • Как использовать облачные ресурсы для увеличения степени автоматизации?

Статья поможет получить ответы на эти вопросы.
Читать дальше →
Всего голосов 19: ↑13 и ↓6+7
Комментарии1

Расширения VSCode, которые облегчат разработку на JavaScript и Vue

Время на прочтение3 мин
Количество просмотров55K

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.


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

Читать дальше →
Всего голосов 22: ↑19 и ↓3+16
Комментарии13

Падает зрение после лазерной коррекции зрения — что делать? Или, доктор, сделай мне «enhancement»

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

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

Итак, enhancement – это докоррекция. Всегда ли она возможна?

Многое зависит от того, каким методом вы первично сделали коррекцию, например, это был ReLEX SMILE, LASIK или кератотомия (насечки). Выбор улучшающей технологии будет отличаться в зависимости от хирурга – его рук и профессионального интеллекта, от типа и модели лазера, от ваших индивидуальных особенностей организма и т. п. Короче, для пациента как игра в «покер» — с полностью или частично закрытыми картами, в которой элементами всех разновидностей являются комбинации. О методах коррекции написано ЗДЕСЬ.

Методов много – даю навигацию по выбору необходимого. Вооружайтесь.

Падает зрение после лазерной коррекции
Читать дальше →
Всего голосов 37: ↑36 и ↓1+35
Комментарии51

NestJS - тот самый, настоящий бэкенд на nodejs

Время на прочтение6 мин
Количество просмотров163K
image

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

Поэтому, NestJS- это не только фреимворк для бэкенда, но и возможность войти в мир передовых концепции, например таких как DDD, Event sourcing и микросервисной архитектуре. Все упаковано в простой и легкой форме, так что выбор за вами - решаете ли вы использовать всю платформу или просто использовать ее компоненты.
Читать дальше →
Всего голосов 23: ↑22 и ↓1+21
Комментарии25

Полное руководство по правильному использованию анимации в UX

Время на прочтение9 мин
Количество просмотров47K
Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Читать дальше →
Всего голосов 41: ↑41 и ↓0+41
Комментарии31

CSS Grid — швейцарский армейский нож для макетов сайтов и приложений

Время на прочтение9 мин
Количество просмотров52K
В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.

Вероятно, вы уже знакомы с блоковой моделью CSS для обычных элементов. Давайте начнем с аналогичного «общего обзора» для CSS Grid:


В основе структуры CSS Grid находится основной контейнер, представляющий собой обычный div, имеющий margin, border и padding. Для создания CSS grid контейнера добавим свойство display: grid. Элементы сетки — это потомки, размещенные внутри родительского контейнера. Они обычно определяются как список, описывающий header, sidebar, footer или другие аналогичные элементы макета сайта, зависящие от его дизайна.
Читать дальше →
Всего голосов 29: ↑29 и ↓0+29
Комментарии21

Как организовать ваши зависимости во Vue-приложении

Время на прочтение7 мин
Количество просмотров19K
Все, кто знаком с Vue, знают, что у Vue-приложения одна точка входа — файл main.js. Там, помимо создания экземпляра Vue, происходит импорт и своего рода Dependency Injection всех ваших глобальных зависимостей (директив, компонентов, плагинов). Чем больше проект, тем больше становится зависимостей, которые, к тому же, имеют каждая свою конфигурацию. В итоге получим один огромный файл со всеми конфигурациями.
В этой статье речь пойдет о том, как организовать глобальные зависимости, чтобы этого избежать.


Читать дальше →
Всего голосов 12: ↑11 и ↓1+10
Комментарии12

Авторизация для ленивых. Наши грабли

Время на прочтение57 мин
Количество просмотров29K


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

Поехали!
Всего голосов 40: ↑39 и ↓1+38
Комментарии15

Информация

В рейтинге
4 661-й
Откуда
Ярославль, Ярославская обл., Россия
Дата рождения
Зарегистрирован
Активность

Специализация

Fullstack Developer
Middle
JavaScript
Vue.js
SQL
Node.js
TypeScript