👉

@frontend_mind

Как ускорить скорость загрузки сайта? Гайд по оптимизации

Скорость загрузки страниц — один из ключевых факторов, влияющих на успех сайта в интернете. Она влияет на пользовательский опыт, конверсию и SEO. Google учло это уже в 2010 году, сделав скорость загрузки фактором ранжирования. В 2018 году метрики были расширены, а в 2020 — дополнены новыми обновлениями.

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

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

👉

@frontend_mind

Как перепрошить мозг после выгорания: BDNF, стресс и мышление

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

👉

@frontend_mind

Тут явно проблема в зависимостях

👉

@frontend_mind

Multithreaded JavaScript

Готовы ли вы к разработке многопоточных приложений на JavaScript? Прочитав данную книгу, JavaScript-разработчик среднего уровня узнает о сильных и слабых сторонах API веб-исполнителей в браузерах и рабочих потоков в Node.js.
Авторы рассказывают о двух подходах к построению многопоточных приложений: на основе передачи сообщений и на основе разделяемой памяти. Описываются API для обоих случаев, объясняется, когда использовать тот или другой, а когда - их сочетание. Вы также увидите, как реализуются высокоуровневые паттерны на базе этих подходов.

👉

@frontend_mind

Fix string case

В этом задании вам будет дана строка, в которой могут быть смешанные прописные и строчные буквы, и ваша задача - преобразовать эту строку в строчную или прописную, основываясь на следующем:

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

Например:
solve("coDe") = "code". Строчных символов больше, чем прописных. Измените только букву "D" на строчную.

solve("CODe") = "CODE". Прописные символы > строчные. Измените только букву "e" на прописную.

solve("coDE") = "code". Верхний == нижний регистр. Измените все символы на строчные.

@frontend_mind

Отслеживаемые свойства, что такое, как использовать?

В контексте разработки приложений, отслеживаемые свойства (observable properties) относятся к свойствам объектов, изменения которых можно отслеживать. Это полезно для автоматического обновления пользовательского интерфейса или выполнения других действий при изменении данных. В JavaScript для реализации отслеживаемых свойств часто используются библиотеки, такие как MobX, или встроенные механизмы, такие как Proxy.

Использование Proxy для отслеживания свойств
Встроенный объект Proxy в JavaScript позволяет перехватывать и настраивать операции, выполняемые с объектом, такие как чтение и запись свойств.
const handler = {
get(target, property) {
console.log(`Getting value of ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
return true;
}
};
const person = {
name: 'Alice',
age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob

Использование MobX для отслеживания свойств
Это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.

Пример использования MobX
import { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
count: 0,
increment() {
this.count++;
}
});
autorun(() => {
console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (

Count: {appState.count}
appState.increment()}>Increment

));
ReactDOM.render(, document.getElementById('root'));

Плюсы отслеживаемых свойств
- Автоматическое обновление UI
Изменения данных автоматически отражаются в пользовательском интерфейсе.
- Централизованное управление состоянием
Легче управлять состоянием и следить за его изменениями.
- Повышенная производительность
При правильной настройке обновляются только те части интерфейса, которые зависят от измененных данных.

Примеры реального использования
Простой счетчик с использованием Proxy
const handler = {
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
document.getElementById(property).innerText = value;
return true;
}
};
const state = {
count: 0
};
const proxyState = new Proxy(state, handler);

document.getElementById('increment').addEventListener('click', () => {
proxyState.count++;
});


0
Increment



👉

@frontend_mind

‍👩‍💻 Всем программистам посвящается!

Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования:

Выбирай своё направление:

👩‍💻 Frontend — t.me/frontend_ready (https://t.me/+ygEQFVEU9hJiOTgy)
📱 JavaScript — t.me/javascript_ready (https://t.me/+Dmv7pxYZnMIzZWFi)
👩‍💻 Backend — t.me/backend_ready (https://t.me/+PhgeRmseamQ5Yzcy)
📱 GitHub & Git — t.me/github_ready (https://t.me/+-gtMubQe6REwMjE6)
👩‍💻 Python — t.me/python_ready (https://t.me/+aZH40vCQ0QxjMDVi)
🤔 InfoSec & Хакинг — t.me/hacking_ready (https://t.me/+jWxyRTHVm3Q1YTEy)
🖥 SQL & Базы Данных — t.me/sql_ready (https://t.me/+eAqp-hyEgOo4MGZi)
🤖 Нейросети — t.me/neuro_ready (https://t.me/+pdIyvOEbVYA5ZjMy)
👩‍💻 C/C++ — https://t.me/cpp_ready (https://t.me/+UbYz8taAyPg4MWMy)
👩‍💻 C# & Unity — t.me/csharp_ready (https://t.me/+bIzoC5C92uIzZDYy)
👩‍💻 Linux — t.me/linux_ready (https://t.me/+6FH0hwT5ztdkYzIy)
📖 IT Книги — t.me/books_ready (https://t.me/+F0C9IB5aLE83OTZi)
👩‍💻 Java — t.me/java_ready (https://t.me/+L_5MNNe5jrY4NzQy)
👩‍💻 Весь IT — t.me/it_ready (https://t.me/+W1VStWLPJgxjZmEy)
👩‍💻 Bash & Shell — t.me/bash_ready (https://t.me/+pz4oDShNLUZkMDMy)
🖼️ DevOps — t.me/devops_ready (https://t.me/+nCnoufPkZkwwOTg6)
🖥 Design — t.me/design_ready (https://t.me/+zGdCo1nRU5FlOGIy)

📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

@frontend_mind

👉

@frontend_mind

Как работает position: sticky и почему он часто не прилипает

position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край.

Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из и не упрётесь в кейс с вложенными скролл-контейнерами.

👉

@frontend_mind

Плюсы ИТ

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

Честно и без рекламы обучающих курсов.

👉

@frontend_mind

Я: устраиваюсь на работу с опытным коллективом

Тем временем их тимлид 2010-го года рождения:

👉

@frontend_mind