Pixel Snap 2 — это платный инструмент на Mac, с помощью которого можно измерить всё, что есть на экране: https://getpixelsnap.com

Можно измерить расстояние между объектами, размер элементов, проверить выравнивание. Работает на весь экран и в любом приложении.

Можно воспользоваться 30-дневным триалом, чтоб попробовать.

#инструменты #дизайн

Ближайшие ивенты

В конце этой недели будет две конференции: в Москве — побольше, в Киеве — поменьше.

21-22 июня в Москве веб-разработчики всех мастей соберутся на юбилейную десятую конференцию — DevConf 2019. 5 секций докладов, воркшопы от специалистов — думаем, скучно не будет: https://tproger.ru/events/devconf-2019/

А 22 июня в Киеве пройдёт мини-конференция по теме «WEB, UX, UI». Топ-менеджеры и эксперты будут рассказывать, как определить качество сайта, понять желания пользователя и организовать рабочие процессы. Если не сможете приехать, то есть возможность подключиться к онлайн-трансляции: https://tproger.ru/events/underconference-web-ux-ui/

#ивенты

Шпаргалки по npm

В школе и универе за шпаргалки ругают, но мы-то знаем, что шпаргалки — это кайф.

Шпаргалки — это быстрый способ получить нужную информацию и сэкономить своё время. Из хорошо составленной шпаргалки намного проще извлекать новые знания.

Держите большую шпаргалку по npm, менеджеру пакетов Node.js: https://tprg.ru/pbxN

Если хотите себе распечатать её, то ловите небольшой лайфхак: в правом верхнем углу файла нажимаете кнопку Raw, а на открывшейся странице — ПКМ «Печать...». Работает, естественно, только через веб.

#бэкенд #nodejs

⁠⁠Что происходит в мире веб-разработки

Команда JetBrains опросила 7000 разработчиков и узнала, чем они сейчас живут. Мы сделали краткую выжимку из отчёта и рассказываем главное про веб-разработку:

— Go назвали самым перспективным языком программирования (на него хотело бы перейти больше всего разработчиков). Python — самым изучаемым и любимым. А JavaScript — наиболее широко используемым.

— Большинство опрошенных сказали, что их основной источник заработка — написание фронтенда и бэкенда (60% и 46% соответственно).

— Топ-3 JavaScript-фреймворка: React, Express, Vue.js.

— А 41% опрошенных уже разрабатывают веб-приложения на Kotlin.

Ещё несколько важных фактов на картинке, а остальное в отчёте: https://tprg.ru/yPzD

#тренды

Возможно, вам довольно быстро надоедают видео типа «Освоить CSS Flexbox за 30 минут!». Есть вариант повеселее.

Просто играйте в эту игру: http://flexboxfroggy.com/#ru

Суть игры — усадить лягушек на нужные кувшинки. Делать это, конечно же, нужно не руками, а css-свойствами. Игра затягивает, ведь так хочется помочь всем лягушкам в браузере. Всё бесплатно.

#фронтенд #css

Подробное введение в разработку веб-приложений при помощи фреймворка Flask на примере блога с использованием Python 3.

В посте — первый урок, полный видеокурс — на канале автора в YouTube: https://tprg.ru/SlxA

#бэкенд #python #видео

Git: подборка материалов

Здесь есть и какие-то классические книги типа «Pro Git», и статьи покороче. Много интерактивных курсов и видеокурсы. А в конце — много структурированных шпаргалок: https://tprg.ru/BgQZ

#инструменты #git

⁠MongoDB 4.2 и шифрование

В MongoDB 4.2 добавили поддержку шифрования данных на уровне полей (field-level encryption, FLE).

Теперь, чтобы прочитать данные в базе, нужно получить доступ либо к клиенту, либо к ключам шифрования. То есть если БД всё-таки окажется в публичном доступе, сторонний человек не сможет её прочитать.

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

Подробности — в блоге MongoDB: https://tprg.ru/IK9B

#бэкенд #mongodb

Чтобы писать хороший код, надо его аккуратно оформлять. При работе в командах это ещё более важно.

И, конечно, есть инструменты, которые помогают с этим. Например, такой вот сайт, на котором можно отформатировать HTML, JSON, JavaScript и много другого кода: http://www.htmlformatter.in

#инструменты

Веб-сокеты в Django

Небольшой видеокурс по работе с веб-сокетами в Django с использованием библиотеки Django Channels: https://tprg.ru/LQti

В конце получится веб-приложение, в котором пользователи смогут в live-режиме оставлять комментарии под статьёй.

#сокеты #django #видео

ООП на JavaScript

ООП обычно реализуется с помощью классов или прототипов. Большинство объектно-ориентированных языков (Java, C++, Python) используют наследование на основе классов.

JavaScript реализует ООП через прототипное наследование. В этой статье мы рассмотрим оба эти подхода в JavaScript, обсудим их преимущества и недостатки: https://tprg.ru/FAmU

Есть ещё и третий вариант — вообще без ООП. Его тоже рассмотрим.

#javascript #ооп

​​Смотрите, реактивная NoSQL база данных: https://github.com/pubkey/rxdb/blob/master/README.md

RxDB можно использовать для различных проектов на JavaScript: как веб-, так и гибридных и нативных приложений, например, на Electron.

Часто в веб-приложениях нужно отражать изменения состояния в режиме реального времени. Реактивность RxDB позволяет подписываться на все изменения состояния хранимых данных. Например, можно следить, как меняется выдача по заданному запросу или значения поля документа.

RxDB основана на PouchDB и поддерживает протокол репликации CouchDB, что позволяет удобно реплицировать данные между несколькими клиентами и серверами.

#бд #nosql #javascript #бэкенд

Как благодаря WebAssembly получилось ускорить приложение в 20 раз

https://tproger.ru/translations/wasm-site-speed-up/

WebAssembly — это формат инструкций, который можно исполнять в браузере так же, как и JavaScript.

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

#javascript #wasm

Ближайшие ивенты

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

26 июня пройдёт Panda Meetup, посвящённый фронтенду. Продвинутые специалисты и тимлиды поговорят об архитектуре современных веб-решений, безопасности в JS, фреймворках и лучших практиках: https://tproger.ru/events/panda-meetup-19-frontend/

А 29-30 июня состоится первый русско-японский хакатон Hanabi Hack. Ждут веб-разработчиков, дизайнеров, специалистов по машинному обучению и облачным вычислениям в командах до 4 человек. Хакатон с ночёвкой: https://tproger.ru/events/hanabi-hack/

#ивенты

Компания Stripe открыла исходный код проекта Sorbet, системы статической проверки типов для языка Ruby: https://sorbet.org/blog/2019/06/20/open-sourcing-sorbet

В состав проекта входит:
— ядро для статической проверки типов;
— инструментарий для создания новых проектов с использованием Sorbet;
— инструментарий для поэтапного перевода на применение Sorbet существующих проектов;
— runtime с предметно-ориентированным языком для написания аннотаций о типах;
— репозиторий с готовыми определениями типов для различных gems-пакетов на Ruby.

О возникающих проблемах можно писать в GitHub Issues. А можно там же и помогать их чинить: https://github.com/sorbet/sorbet

#ruby

Подборка материалов по паттернам

Классические книги, практические курсы, статьи, шпаргалки и задачки: https://tprg.ru/39e0

В комментариях делитесь другими хорошими ресурсами на эту тему.

#программирование #паттерны

Пару дней назад официальный сайт Node.js стал доступен на русском языке: https://nodejs.org/ru/

Перевод сделан одним из неравнодушных русскоязычных веб-разработчиков Александром Товмачом. Перевод ещё несовершенен и, конечно, нуждается в исправлениях и улучшениях.

Доработать существующий перевод и добавить поддержку русского языка, например, в документацию можно на GitHub с исходным кодом Node.js: https://github.com/nodejs/nodejs.org

#бэкенд #nodejs

Введение в CSS Shapes

CSS Shapes позволяет создавать интересные и уникальные фигуры, изображения и градиенты, вокруг которых может обтекать текст.

Рекомендуем статью, автор которой помогает понять, нужен ли такой дизайн вашему проекту, и если нужен, то как его сделать: https://tprg.ru/J5t1

#фронтенд #css

Freemium — это подборка инструментов и ресурсов для веб-разработчиков и веб-дизайнеров. Картинки, трекеры багов, приложения для заметок, источники вдохновения. Некоторые из них — полностью бесплатные, другие — только частично: https://freemium.cc/

А если знаете ещё какой-то инструмент, который можно попробовать бесплатно, но на сайте его нет, то предложите добавить.

#инструменты

Разбираемся с Async/Await в JavaScript на примерах

https://tproger.ru/translations/understanding-async-await-in-javascript/

Для выполнения нескольких асинхронных операций в JavaScript были придуманы промисы. Но у промисов есть проблема: они оставляют за собой кучу цепочек .then/.catch.

Избежать этих цепочек помогает конструкция async/await. И с её помощью возможно организовать работу с асинхронным кодом в синхронном стиле.

На примерах показываем, как это сделать.

#javascript