WeIrD StRiNg CaSe
Напишите функцию, которая принимает строку и возвращает ту же самую строку со всеми четными символами в каждом слове, выделенными верхним регистром, и всеми нечетными символами в каждом слове, выделенными нижним регистром. Индексация, как уже объяснялось, основана на нулях, поэтому нулевой индекс четный, следовательно, этот символ должен быть в верхнем регистре, и вам нужно начать сначала для каждого слова.
Переданная строка будет состоять только из алфавитных символов и пробелов(' '). Пробелы будут присутствовать только при наличии нескольких слов. Слова будут разделены одним пробелом(' ').
Примеры:
"String" => "StRiNg"
"Weird string case" => "WeIrD StRiNg CaSe"
👉
@frontend_mind
Напишите функцию, которая принимает строку и возвращает ту же самую строку со всеми четными символами в каждом слове, выделенными верхним регистром, и всеми нечетными символами в каждом слове, выделенными нижним регистром. Индексация, как уже объяснялось, основана на нулях, поэтому нулевой индекс четный, следовательно, этот символ должен быть в верхнем регистре, и вам нужно начать сначала для каждого слова.
Переданная строка будет состоять только из алфавитных символов и пробелов(' '). Пробелы будут присутствовать только при наличии нескольких слов. Слова будут разделены одним пробелом(' ').
Примеры:
"String" => "StRiNg"
"Weird string case" => "WeIrD StRiNg CaSe"
👉
@frontend_mind
❤1
Как ускорить скорость загрузки сайта? Гайд по оптимизации
Скорость загрузки страниц — один из ключевых факторов, влияющих на успех сайта в интернете. Она влияет на пользовательский опыт, конверсию и SEO. Google учло это уже в 2010 году, сделав скорость загрузки фактором ранжирования. В 2018 году метрики были расширены, а в 2020 — дополнены новыми обновлениями.
На сегодняшний день проверка скорости загрузки сайта стала обязательной практикой для всех, кто стремится улучшить производительность своего ресурса. Существует множество инструментов для проверки скорости сайта, которые помогают определить текущие показатели и выявить факторы, влияющие на скорость сайта. Однако одного измерения недостаточно — важно понимать, как ускорить загрузку страницы и какие методы оптимизации наиболее эффективны.
В этой статье разберём, как оценить скорость загрузки страниц, какие показатели важны сегодня и что делать, чтобы ускорить сайт.
👉
@frontend_mind
Скорость загрузки страниц — один из ключевых факторов, влияющих на успех сайта в интернете. Она влияет на пользовательский опыт, конверсию и SEO. Google учло это уже в 2010 году, сделав скорость загрузки фактором ранжирования. В 2018 году метрики были расширены, а в 2020 — дополнены новыми обновлениями.
На сегодняшний день проверка скорости загрузки сайта стала обязательной практикой для всех, кто стремится улучшить производительность своего ресурса. Существует множество инструментов для проверки скорости сайта, которые помогают определить текущие показатели и выявить факторы, влияющие на скорость сайта. Однако одного измерения недостаточно — важно понимать, как ускорить загрузку страницы и какие методы оптимизации наиболее эффективны.
В этой статье разберём, как оценить скорость загрузки страниц, какие показатели важны сегодня и что делать, чтобы ускорить сайт.
👉
@frontend_mind
Как перепрошить мозг после выгорания: BDNF, стресс и мышление
Эмоциональное выгорание — это состояние хронического истощения, при котором человек чувствует себя выжатым как лимон на физическом, эмоциональном и ментальном уровнях. Выгорание не просто истощает, оно буквально меняет структуру и работу мозга, нарушая его способность адаптироваться, учиться и восстанавливаться. Это и есть сломанная нейропластичность. В этой статье разберем, что делать, если капкан уже захлопнулся? Что скрывается за эмоциональным выгоранием на ментальном и физическом уровнях, и как реанимировать себя к нормальной жизни.
👉
@frontend_mind
Эмоциональное выгорание — это состояние хронического истощения, при котором человек чувствует себя выжатым как лимон на физическом, эмоциональном и ментальном уровнях. Выгорание не просто истощает, оно буквально меняет структуру и работу мозга, нарушая его способность адаптироваться, учиться и восстанавливаться. Это и есть сломанная нейропластичность. В этой статье разберем, что делать, если капкан уже захлопнулся? Что скрывается за эмоциональным выгоранием на ментальном и физическом уровнях, и как реанимировать себя к нормальной жизни.
👉
@frontend_mind
Как родительский компонент может прослушать событие, отправленное через $emit во Vue?
Anonymous Poll
17%
С помощью метода this.$on
44%
С помощью директивы v-on или @
14%
С помощью v-bind
28%
С помощью this.$emit
Multithreaded JavaScript
Готовы ли вы к разработке многопоточных приложений на JavaScript? Прочитав данную книгу, JavaScript-разработчик среднего уровня узнает о сильных и слабых сторонах API веб-исполнителей в браузерах и рабочих потоков в Node.js.
Авторы рассказывают о двух подходах к построению многопоточных приложений: на основе передачи сообщений и на основе разделяемой памяти. Описываются API для обоих случаев, объясняется, когда использовать тот или другой, а когда - их сочетание. Вы также увидите, как реализуются высокоуровневые паттерны на базе этих подходов.
👉
@frontend_mind
Готовы ли вы к разработке многопоточных приложений на JavaScript? Прочитав данную книгу, JavaScript-разработчик среднего уровня узнает о сильных и слабых сторонах API веб-исполнителей в браузерах и рабочих потоков в Node.js.
Авторы рассказывают о двух подходах к построению многопоточных приложений: на основе передачи сообщений и на основе разделяемой памяти. Описываются API для обоих случаев, объясняется, когда использовать тот или другой, а когда - их сочетание. Вы также увидите, как реализуются высокоуровневые паттерны на базе этих подходов.
👉
@frontend_mind
❤2
Fix string case
В этом задании вам будет дана строка, в которой могут быть смешанные прописные и строчные буквы, и ваша задача - преобразовать эту строку в строчную или прописную, основываясь на следующем:
- Делайте как можно меньше изменений.
- Если строка содержит равное количество прописных и строчных букв, преобразуйте строку в строчную.
Например:
solve("coDe") = "code". Строчных символов больше, чем прописных. Измените только букву "D" на строчную.
solve("CODe") = "CODE". Прописные символы > строчные. Измените только букву "e" на прописную.
solve("coDE") = "code". Верхний == нижний регистр. Измените все символы на строчные.
@frontend_mind
В этом задании вам будет дана строка, в которой могут быть смешанные прописные и строчные буквы, и ваша задача - преобразовать эту строку в строчную или прописную, основываясь на следующем:
- Делайте как можно меньше изменений.
- Если строка содержит равное количество прописных и строчных букв, преобразуйте строку в строчную.
Например:
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
В контексте разработки приложений, отслеживаемые свойства (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
👍1
Как работает position: sticky и почему он часто не прилипает
position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край.
Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из и не упрётесь в кейс с вложенными скролл-контейнерами.
👉
@frontend_mind
position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край.
Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из и не упрётесь в кейс с вложенными скролл-контейнерами.
👉
@frontend_mind
Что произойдет, если в очереди есть и макрозадачи, и микрозадачи?
Anonymous Poll
20%
Макрозадачи выполнятся первыми
77%
Все микрозадачи выполнятся перед следующей макрозадачей
1%
Задачи будут выполняться в случайном порядке
1%
Микрозадачи будут проигнорированы
This media is not supported in your browser
VIEW IN TELEGRAM
Я: устраиваюсь на работу с опытным коллективом
Тем временем их тимлид 2010-го года рождения:
👉
@frontend_mind
Тем временем их тимлид 2010-го года рождения:
👉
@frontend_mind
💯4
Как оптимизировать сайт?
Оптимизация сайта включает в себя несколько стратегий и техник, направленных на улучшение производительности, скорости загрузки и пользовательского опыта.
Оптимизация изображений
Используйте инструменты для сжатия изображений (например, TinyPNG, ImageOptim) без значительной потери качества. Используйте современные форматы изображений, такие как WebP, которые обеспечивают лучшее сжатие по сравнению с JPEG и PNG. Загружайте изображения по мере их появления в области видимости пользователя (атрибут loading="lazy" в HTML).
Минификация и объединение файлов
Уменьшите размер CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS, CSSNano, HTMLMinifier. Сократите количество HTTP-запросов, объединив несколько CSS или JavaScript файлов в один.
Использование CDN (Content Delivery Network)
Храните копии вашего сайта на серверах по всему миру, чтобы уменьшить время загрузки для пользователей из разных регионов.
Кэширование
Настройте заголовки кэширования HTTP, чтобы браузеры могли хранить копии статических ресурсов (CSS, JavaScript, изображения). Используйте технологии, такие как Varnish или Nginx, для кэширования страниц на сервере.
Оптимизация CSS и JavaScript
Используйте атрибуты async и defer для асинхронной загрузки JavaScript, чтобы не блокировать рендеринг страницы. Встраивайте критические стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.
Улучшение производительности сервера
Включите сжатие gzip или Brotli на сервере для уменьшения размера передаваемых данных. Переход на HTTP/2, который поддерживает мультиплексирование запросов, позволяет загружать несколько ресурсов одновременно через одно соединение.
Использование современных технологий
Используйте Service Workers для создания прогрессивных веб-приложений (PWA), обеспечивающих офлайн-работу и улучшенное кэширование. Используйте техники предзагрузки (preload) и предзапросов (prefetch) для ресурсов, которые понадобятся в ближайшее время.
Мониторинг и анализ
Используйте Google Lighthouse, PageSpeed Insights и WebPageTest для анализа производительности и поиска узких мест. Применяйте сервисы, такие как Google Analytics, New Relic, для отслеживания реальной производительности и пользовательского опыта.
👉
@frontend_mind
Оптимизация сайта включает в себя несколько стратегий и техник, направленных на улучшение производительности, скорости загрузки и пользовательского опыта.
Оптимизация изображений
Используйте инструменты для сжатия изображений (например, TinyPNG, ImageOptim) без значительной потери качества. Используйте современные форматы изображений, такие как WebP, которые обеспечивают лучшее сжатие по сравнению с JPEG и PNG. Загружайте изображения по мере их появления в области видимости пользователя (атрибут loading="lazy" в HTML).
Минификация и объединение файлов
Уменьшите размер CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS, CSSNano, HTMLMinifier. Сократите количество HTTP-запросов, объединив несколько CSS или JavaScript файлов в один.
Использование CDN (Content Delivery Network)
Храните копии вашего сайта на серверах по всему миру, чтобы уменьшить время загрузки для пользователей из разных регионов.
Кэширование
Настройте заголовки кэширования HTTP, чтобы браузеры могли хранить копии статических ресурсов (CSS, JavaScript, изображения). Используйте технологии, такие как Varnish или Nginx, для кэширования страниц на сервере.
Оптимизация CSS и JavaScript
Используйте атрибуты async и defer для асинхронной загрузки JavaScript, чтобы не блокировать рендеринг страницы. Встраивайте критические стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.
Улучшение производительности сервера
Включите сжатие gzip или Brotli на сервере для уменьшения размера передаваемых данных. Переход на HTTP/2, который поддерживает мультиплексирование запросов, позволяет загружать несколько ресурсов одновременно через одно соединение.
Использование современных технологий
Используйте Service Workers для создания прогрессивных веб-приложений (PWA), обеспечивающих офлайн-работу и улучшенное кэширование. Используйте техники предзагрузки (preload) и предзапросов (prefetch) для ресурсов, которые понадобятся в ближайшее время.
Мониторинг и анализ
Используйте Google Lighthouse, PageSpeed Insights и WebPageTest для анализа производительности и поиска узких мест. Применяйте сервисы, такие как Google Analytics, New Relic, для отслеживания реальной производительности и пользовательского опыта.
👉
@frontend_mind
❤2😁1