Веб-страница
24K subscribers
1.76K photos
535 videos
1 file
3.96K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
MongoDB 4.2 и шифрование

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

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

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

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

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

И, конечно, есть инструменты, которые помогают с этим. Например, такой вот сайт, на котором можно отформатировать HTML, JSON, JavaScript и много другого кода: https://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
Шпаргалка с кратким обзором новых функций JavaScript в ES2015, ES2016, ES2017, ES2018 и более поздних версиях: https://devhints.io/es6

#javascript #ecmascript
This media is not supported in your browser
VIEW IN TELEGRAM
Смотрите, какая симпатичная форма для выполнения пошаговых действий: 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
This media is not supported in your browser
VIEW IN TELEGRAM
Видеоурок в двух частях, в котором автор рассказывает, как визуализировать звук из 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.

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