Знакомство с Koa

Koa.js — это современный и мощный фреймворк для создания веб-приложений на базе Node.js. Он поддерживается и развивается большим сообществом разработчиков и предлагает удобный и элегантный способ написания серверного кода, используя возможности новейших версий JavaScript и концепцию асинхронности.

В этой статье вы сможете ближе познакомиться с ним и посмотреть ключевые особенности.

#koajs #бэкенд

Что такое прототипные методы в JavaScript

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

В JavaScript каждое значение имеет прототип — объект, от которого оно «унаследует» свойства и методы. Это позволяет создавать структуры, которые могут делиться функциональностью. Прототипы помогают избежать дублирования кода и облегчить его поддержку.

Как работают прототипные методы?

Когда мы создаем объект, он может использовать методы, определенные в его прототипе. Например, у всех объектов, созданных на основе Array, есть общие методы, такие как .push() и .pop(). Эти методы определены в Array.prototype. Если вы не знаете, что такое prototype, подумайте о нем как о шаблоне для создания объектов.

Давайте рассмотрим простой пример. Мы создадим конструктор для объекта Person и добавим метод greet в его прототип:

function Person(name) {
    this.name = name;
}
// Добавляем метод greet в прототип Person
Person.prototype.greet = function() {
    console.log(`Привет, меня зовут ${this.name}!`);
};
// Создаем нового человека
const alice = new Person('Алиса');
const bob = new Person('Боб');
// Вызываем метод greet
alice.greet(); // Привет, меня зовут Алиса!
bob.greet();   // Привет, меня зовут Боб!

В этом примере метод greet не дублируется для каждого отдельного объекта, а хранится в прототипе. Это экономит память и делает код более организованным.

Использование прототипов полезно по нескольким причинам:

1. Экономия памяти. Методы хранятся в одном месте, а не копируются в каждый объект.
2. Упрощение кода. Легче добавлять, изменять и удалять методы.
3. Наследование. Можно создавать иерархии объектов, где один объект наследует свойства и методы другого.

Если у вас есть вопросы или хотите обсудить тему подробнее, пишите в комментариях!

#простымисловами

Стать фронтендером в Яндексе за выходные

26–27 апреля состоится Weekend Offer Frontend: всего за два дня можно пройти технические секции и попасть в Яндекс. Оставьте свою заявку на участие в мероприятии до 23 апреля.

Вы сможете выбрать одну из 10 команд. Это команды Поиска: Еком-сценарии, Архитектура, Международный Поиск, Красота, Финансы, Видеопоиск. И команды Вертикалей: Путешествия, Недвижимость, Аренда, Авто.ру.

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

Узнать подробности и зарегистрироваться можно здесь.

Реклама. ООО "Яндекс". ИНН 7736207543

Полезный справочник для фронтенд-разработчика

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

Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/

#фронтенд #обучение

Лайк, если узнал свою прошлую галерку

Скрытые возможности элемента input

Элемент input в HTML самый интересный. Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики

Этот снежный шар сделан с помощью Canvas. Логика прописана в JavaScript, а стили в CSS. Никаких сторонних библиотек, препроцессоров и прочего.

Можете убедиться сами, посмотрев код проекта на codepen: https://codepen.io/Calleb/pen/pvzgBpa

#codepen #canvas

Адаптивная вёрстка с учётом размера шрифта пользователя и брейкпоинты

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

И действительно, для создания адаптивного сайта нужно использовать все возможности HTML/CSS, иногда даже не очевидные. В этой статье как раз рассматриваются такие возможности и решения.

#фронтенд

Что делает код трудным для чтения? Визуальные паттерны сложности

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

Подробнее: https://habr.com/ru/articles/893820/

#советы

Как найти устаревший HTML-код

Если вы работаете над старым проектом, то можете столкнуться с устаревшими атрибутами и элементами HTML. Чтобы не искать их вручную, можно воспользоваться ObsoHTML. Этот Node и CLI-инструмент просканирует файлы HTML, PHP, JavaScript и TypeScript на наличие устаревших элементов и обновит их.

Инструкция по установке и более подробная информация по ссылке.

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

Как устроен рендеринг в браузере

Что происходит между вводом URL-адреса в браузере и моментом отображения веб-страницы? Такой вопрос могут задать на собеседовании, да и просто это полезно знать.

Давайте интерактивно изучим сложный процесс рендеринга в браузере с помощью этой статьи.

Или разработчик, не умеющий кодить🤔

6 креативных идей для CSS эффектов при наведении на ссылку

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

В этой статье собраны 6 креативных идей с подробной инструкцией по их реализации. Подробнее:

https://css-tricks.com/css-link-hover-effects/

#css

Стрелочные и обычные функции в JavaScript: в чём разница?

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

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

Обычные функции пишутся с использованием ключевого слова function, а стрелочные — с помощью более компактного синтаксиса =>.

//Обычная функция
function greet(name) {
  return "Привет, " + name;
}

//Стрелочная функция
const greet = (name) => "Привет, " + name;

This. Одно из главных различий — как функции работают с контекстом this.

— В обычной функции this зависит от того, как её вызвали.
— В стрелочной функции this берётся из внешнего окружения и не меняется.
Это важно, когда вы работаете с объектами или обработчиками событий.

Аргументы. Обычные функции имеют встроенный объект arguments для доступа ко всем переданным параметрам, а стрелочные — нет (но можно использовать ...args).

Конструкторы. Обычную функцию можно использовать с new для создания объектов, стрелочную — нельзя.

Генераторы. Обычные функции поддерживают синтаксис function* для генераторов, стрелочные — нет.

Чтобы понять разницу работы с this на практике, рассмотрим пример с объектом:

const person = {
  name: "Алекс",
  sayHello: function() {
    console.log("Привет, я " + this.name);
  },
  sayHelloArrow: () => {
    console.log("Привет, я " + this.name);
  }
};

person.sayHello();       // Привет, я Алекс
person.sayHelloArrow();  // Привет, я undefined

— В методе sayHello (обычная функция) this указывает на объект person, и мы получаем доступ к свойству name.

— В методе sayHelloArrow (стрелочная функция) this берётся из внешнего контекста (например, window), где name не определён, поэтому результат — undefined.
Этот пример показывает, почему выбор типа функции важен в зависимости от задачи.

Стрелочные функции отлично подходят для коротких коллбэков (например, в map или setTimeout) и случаев, когда не нужен собственный`this`.

Обычные функции нужно использовать в методах объектов, где важен динамический this, или когда нужны конструкторы и объект arguments.

Стрелочные и обычные функции в JavaScript — это инструменты с разными сильными сторонами. Понимание их различий поможет вам выбрать правильный подход для каждой ситуации.

#простымисловами #javascript