Компания 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

Шпаргалка с кратким обзором новых функций JavaScript в ES2015, ES2016, ES2017, ES2018 и более поздних версиях: https://devhints.io/es6

#javascript #ecmascript

Смотрите, какая симпатичная форма для выполнения пошаговых действий: https://codepen.io/kaueburiti/pen/YNZGZO

#фронтенд #дизайн

Рекомендуем несколько видеоуроков, в которых вы узнаете, как HTTP стал основой интернета, как он работает и как его правильно использовать: https://tprg.ru/http-protocol

#сети #http

GraphQL теперь в Postman

Postman — масштабное приложение, которое помогает проектировать и тестировать API, и до сих пор оно работало только с концепцией RESTful.

А теперь ребята добавили поддержку стандарта GraphQL — говорят, это была вторая по популярности просьба у них на гитхабе. Предыдущее обновление уже принесло поддержку schemas, так что теперь можно создавать и хранить GraphQL-схемы прямо в Postman.

Как начать работать в приложении с этим языком запросов, понятно расписали в блоге.

Наше руководство по самому GraphQL, кому надо.

#api #тестирование #инструменты

Оказывается, у гугла (ну, Google Developers) есть сайт web.dev с лучшими практиками по «строительству современного веба», как они сами это называют.

Там есть их любимый инструмент по анализу скорости загрузки сайта, бложек с советами и, что для нас тут наверное самое крутое, платформа-обучалка: несколько коллекций step-by-step материалов по этому самому «строительству веба». Можно пойти делать приложения на React, а можно просто про SEO читнуть.

В общем, https://web.dev/

Как настроить полифилл globalThis в универсальном JavaScript

https://tproger.ru/translations/universal-javascript-and-globalthis-feature/

Новая функция globalThis облегчает написание универсального JavaScript, которому нужен доступ к глобальному значению this. Это похоже на обычный полифилл, но всё же немного отличается, и понять, что это на самом деле, довольно сложно.

В статье описаны трудности реализации правильного полифилла globalThis.

#javascript

Видеоурок в двух частях, в котором автор рассказывает, как визуализировать звук из mp3-файла с помощью анимации html-элемента в реальном времени.

Оба видео в плейлисте на YouTube — https://tprg.ru/AWMj

#javascript

​​Mozilla тестирует генератор паролей в сборке Firefox Nightly. Он должен появиться в Firefox 69, релиз которой намечен на сентябрь. В Chrome аналогичная функция появилась осенью 2018 года.

Чтобы активировать генератор в Firefox Nightly, надо включить две настройки в разделе about:config — signon.generation.available и signon.generation.enabled. После этого в настройках безопасности появится чекбокс «Предлагать и генерировать сильные пароли».

Если поставить там галочку, браузер станет предлагать на сайтах создать пароль автоматически при клике на поле.

В трекере Bugzilla можно отследить прогресс по фиче в тредах #1548387 и #1548391.

#безопасность

Пришли посоветовать статью про красивую ленивую загрузку картинок на сайте.

По дефолту после парсинга дерева DOM изображения загружаются сразу на всей странице (даже за пределами экрана). Это занимает время и трафик, сайт грузится дольше. Но зачем, если картинки ещё не видны, а юзер может вообще до них не долистать?

Для решения проблемы придумали ленивую загрузку: JavaScript подгружает картинки прямо перед их попаданием в видимую часть экрана.

Это круто, но не идеально: размеры картинки неизвестны заранее, и когда она подгружается, контент снизу «скачет». Тратятся ресурсы браузера на пересчёт вёрстки, да и просто выглядит некрасиво.

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

Решений проблемы есть много, но самое красивое описано в статье: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/

#фронтенд #вёрстка

Лето — время не богатое на ивенты, но кое-что всё-таки есть.

2 июля в в петербургском офисе Одноклассников пройдет ok.tесh: frontend meetup.

Там ребята из ОК.ru, Яндекса и Mail.Ru Cloud Solutions будут рассказывать про тестирование на основе свойств, эволюцию подходов работы с текстами, библиотеку рендеринга EndorphinJS. Также обсудят переход фронтенда поисковых сервисов Яндекса на React.

Мероприятие бесплатное, нужно просто зарегистрироваться: https://oktech.timepad.ru/event/970538/

#ивенты

Архитектура веб-сервера nginx — модульная и событийно-ориентированная. При правильной настройке она выигрывает у потокового Apache в производительности.

Этот модульный генератор конфигов для nginx поможет сгенерировать лучший конфиг для вашего конкретного кейса: https://nginxconfig.io/

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

#бэкенд #nginx

Fontanello — это расширение для браузера, которое позволяет посмотреть стиль текста, просто щёлкнув по нему правой кнопкой мыши: https://fontanello.oktavilla.se/

С его помощью больше не нужно долго искать название шрифта, размер, цвет. Есть версии для Chrome и Firefox.

#фронтенд #инструменты

Как стать full stack разработчиком

https://tproger.ru/translations/full-stack-developer-roadmap/

По пунктам разбираем необходимые веб-разработчику навыки:
— вёрстка и дизайн;
— языки и фреймворки;
— базы данных и DevOps;
— вспомогательные инструменты.

#фронтенд #бэкенд

MySQLTuner — тулза для тестирования MySQL сервера. Даёт советы, как повысить его производительность и стабильность: https://github.com/major/MySQLTuner-perl

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

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