Прочный фундамент для API: Docker + Node.js + Nginx + Postgres

При создании новых проектов, заложить надежный фундамент труднее всего. Поэтому мы изучим универсальную сборку для бэкенда на Node.js c Postgres в Docker. И, конечно, обязательно отдадим статику через Nginx.

👉 @sWebDev

Профессия «Фронтенд-разработчик» на Хекслете включает в себя гораздо больше, чем кажется на первый взгляд.

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

Вы будете участвовать в разработке открытых проектов Хекслета на GitHub, напишите 4 полноценных приложения для бизнеса и попрактикуетесь в решении реальных кейсов от компаний-партнеров.

Цель любого обучения – это трудоустройство. Мы пройдем путь до первой работы в IT вместе с вами. 

Начните прямо сейчас. Вводные курсы профессии доступны бесплатно сразу после регистрации.

Skeleton.js

Библиотека для создания веб-приложений. Обладает собственной CSS сеткой и кроссбраузерностью.

👉 @sWebDev

Mobile VR Sonic

По ссылке мини-игра, выполненная на Three.js.

👉 @sWebDev

Select на React

По ссылке пошаговое руководство по созданию select с применением React.

👉 @sWebDev

Как преобразовать значения в Angular приложении?

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

👉 @sWebDev

Аудиотека на GSAP.js

Проект аудиотеки, выполненный на GSAP.js. Данный функционал можно использовать, например, для создания собственного музыкального сервиса или раздела с музыкой в вашем веб-приложении.

👉 @sWebDev

Использование private переменных в шаблоне

Создание Angular приложения просто невозможно без ошибок. Не всегда очевидно, в каком месте или в какой части кода она таится, а поиск может отнять немало времени. Например, использование private переменных в шаблоне является плохой практикой, т.к. все свойства компонента или сервиса, которые объявлены с модификатором private, должны использоваться исключительно в пределах своего класса. Обращение к ним в шаблоне или другом сервисе приведет к генерации исключения, но только в момент сборки приложения.

Воспроизведём ошибку:

  selector: 'private-error',
  template: ` <div>{{ message }}</div> `,
})
export class PrivateErrorComponent {
  private message: string = 'Variable should be public'
  constructor() {}
}

Выполним сборку:
ng build --prod

В консоли увидим следующее:
Property 'message' is private and only accessible within class 'PrivateErrorComponent'.

👉 @sWebDev

React, я люблю тебя, но ты сводишь меня с ума

Перевод резонансной статьи, посвященной React. Материал написан в шуточной форме, однако, это не уменьшает ее пользы при рассмотрении особенностей и подводных камней данной библиотеки.

👉 @sWebDev

Back2School

Проект забавной анимации школьника, выполненной на Anime.js.

👉 @sWebDev

Anime.js

Anime.js - это библиотека для создания анимаций, работает с CSS, SVG, атрибутами DOM и объектами JavaScript.

👉 @sWebDev

Гибкая ORM для Node.js – Sequelize

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

👉 @sWebDev

Algolia Places

Algolia Places – библиотека JavaScript для автоматического заполнения форм. Специализируется на адресах, может добавить карту в поиск и отобразить местоположение. Точная и сверхбыстрая библиотека повысит удобство работы пользователей с вашим сайтом.

👉 @sWebDev

Art Gallery

Проект анимированной галереи, выполненный на CSS и Three.js.

👉 @sWebDev

Tremor

Tremor - Библиотека React для быстрого создания дашборд-панелей на вашем сайте.

👉 @sWebDev

Можно ли использовать в Angular private переменные в шаблоне?

Представим, что в своем Angular шаблоне вы использовали private переменную.
Например, в таком формате:

  selector: 'private-error',
  template: ` <div>{{ message }}</div> `,
})
export class PrivateErrorComponent {
  private message: string = 'Variable should be public'
  constructor() {}
}

Повлечет ли это какие-то проблемы в приложении? Не уверены? Можно подсмотреть в наш пост за 24.10.

👉 @sWebDev

AOS – Animate On Scroll

Отличный вариант библиотеки для одностраничного сайта. Animate on Scroll добавит приятную анимацию при прокручивании страницы. Библиотека поможет создать привлекательный дизайн со множеством элементов: эффекты затухания, размещение статических привязок и многое другое.

👉 @sWebDev

Возвращаем значение с состоянием в React

Хук useState возвращает значение с состоянием и функцию для его обновления.

const [state, setState] = useState(initialState)

Во время первоначального рендеринга возвращаемое состояние (state) совпадает со значением, переданным в качестве первого аргумента (initialState). Функция setState используется для обновления состояния. Она принимает новое значение состояния и ставит в очередь повторный рендер компонента.

setState(newState)

Во время последующих повторных рендеров первое значение, возвращаемое useState, всегда будет самым последним состоянием после применения обновлений.

👉 @sWebDev