Веб-дизайн для начинающих. HTML, CSS, jаvascript и веб-графика
Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы JS и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.
👉
@frontend_mind
Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы JS и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.
👉
@frontend_mind
Two Sum
Создайте функцию, которая принимает массив чисел и целевое число. Найдите в массиве два числа, которые в сумме дадут целевое число.
Пример:
twoSum([1, 2, 3], 4) // returns [0, 2] or [2, 0]
👉
@frontend_mind
Создайте функцию, которая принимает массив чисел и целевое число. Найдите в массиве два числа, которые в сумме дадут целевое число.
Пример:
twoSum([1, 2, 3], 4) // returns [0, 2] or [2, 0]
👉
@frontend_mind
Какие методы можно использовать для центрирования элементов в CSS?
Anonymous Poll
32%
text-align
29%
margin
16%
transform
36%
flexbox
32%
grid
67%
Все вышеперечисленные методы
Доморощенный OSINT для соискателя. Краткая инструкция
О том, сколько чудесного и неожиданного можно узнать о потенциальном работодателе из открытых данных, и что делать, чтобы не проработать месяц-два бесплатно и не обмануться с другими ожиданиями. Спойлер: возможно все — от потенциального банкротства компании до дела о мошенничестве.
👉
@frontend_mind
О том, сколько чудесного и неожиданного можно узнать о потенциальном работодателе из открытых данных, и что делать, чтобы не проработать месяц-два бесплатно и не обмануться с другими ожиданиями. Спойлер: возможно все — от потенциального банкротства компании до дела о мошенничестве.
👉
@frontend_mind
Для чего используется React Context?
Anonymous Poll
5%
Для стилизации компонентов
94%
Для передачи данных через дерево компонентов без пропсов
1%
Для управления маршрутизацией в приложении
1%
Для выполнения асинхронных запросов
Pearls of Algorithm Engineering (2023)
В данной книге предлагается уникальный подход к выводу проектирования и анализа на уровень предсказуемой практической эффективности, обсуждаются основные и классические алгоритмические проблемы, возникающие при разработке приложений для работы с большими данными, и представляются элегантные решения все большей сложности и эффективности.
👉
@frontend_mind
В данной книге предлагается уникальный подход к выводу проектирования и анализа на уровень предсказуемой практической эффективности, обсуждаются основные и классические алгоритмические проблемы, возникающие при разработке приложений для работы с большими данными, и представляются элегантные решения все большей сложности и эффективности.
👉
@frontend_mind
Square Every Digit
Необходимо возвести в квадрат каждую цифру числа и объединить их.
Например, если пропустить 9119 через функцию, то получится 811181, так как 9^2 равно 81, а 1^2 равно 1.
Примечание: функция принимает целое число и возвращает целое число.
👉
@frontend_mind
Необходимо возвести в квадрат каждую цифру числа и объединить их.
Например, если пропустить 9119 через функцию, то получится 811181, так как 9^2 равно 81, а 1^2 равно 1.
Примечание: функция принимает целое число и возвращает целое число.
👉
@frontend_mind
Сколько есть способов что-то сделать асинхронно?
В JavaScript существует несколько способов выполнения асинхронных операций. Основные из них включают коллбеки (callbacks), промисы (promises) и async/await.
Коллбеки (Callbacks)
Коллбеки были первым способом выполнения асинхронных операций в JavaScript. Это функции, которые передаются другим функциям в качестве аргументов и вызываются после завершения асинхронной операции.
function fetchData(callback) {
setTimeout(() => {
const data = "some data";
callback(data);
}, 1000);
}
fetchData((result) => {
console.log(result);
});
Почему это нужно
Коллбеки позволяют выполнять код после завершения асинхронной задачи, например, загрузки данных с сервера.
Как используется
Передаем функцию в качестве аргумента и вызываем её, когда данные готовы. Почему так: Это простой способ передать управление после завершения асинхронной операции, но может привести к "аду коллбеков" (callback hell) при множественных вложенных вызовах.
Промисы (Promises)
Промисы были введены для упрощения работы с асинхронным кодом и для решения проблемы вложенности, характерной для коллбеков. Промис представляет собой объект, который может находиться в одном из трёх состояний: ожидание (pending), выполнено (fulfilled) или отклонено (rejected).
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "some data";
resolve(data);
}, 1000);
});
}
fetchData().then((result) => {
console.log(result);
}).catch((error) => {
console.error(error);
});
Почему это нужно
Промисы делают код более читаемым и управляемым, особенно при наличии цепочек асинхронных операций. Как используется: Создаем новый промис и возвращаем его из функции. Затем используем методы then и catch для обработки результата или ошибки. Промисы позволяют избежать вложенности и обеспечивают более линейный и понятный поток выполнения.
async/await
Это синтаксический сахар поверх промисов, который делает код ещё более читаемым и похожим на синхронный.
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
const data = "some data";
resolve(data);
}, 1000);
});
}
async function main() {
try {
const result = await fetchData();
console.log(result);
} catch (error) {
console.error(error);
}
}
main();
Почему это нужно:
async/await упрощает написание и чтение асинхронного кода, устраняя необходимость использования методов then и catch. Как используется: Объявляем функцию с ключевым словом async и используем await для ожидания завершения промиса. Async/await делает асинхронный код более похожим на синхронный, улучшая его читаемость и поддержку.
👉
@frontend_mind
В JavaScript существует несколько способов выполнения асинхронных операций. Основные из них включают коллбеки (callbacks), промисы (promises) и async/await.
Коллбеки (Callbacks)
Коллбеки были первым способом выполнения асинхронных операций в JavaScript. Это функции, которые передаются другим функциям в качестве аргументов и вызываются после завершения асинхронной операции.
function fetchData(callback) {
setTimeout(() => {
const data = "some data";
callback(data);
}, 1000);
}
fetchData((result) => {
console.log(result);
});
Почему это нужно
Коллбеки позволяют выполнять код после завершения асинхронной задачи, например, загрузки данных с сервера.
Как используется
Передаем функцию в качестве аргумента и вызываем её, когда данные готовы. Почему так: Это простой способ передать управление после завершения асинхронной операции, но может привести к "аду коллбеков" (callback hell) при множественных вложенных вызовах.
Промисы (Promises)
Промисы были введены для упрощения работы с асинхронным кодом и для решения проблемы вложенности, характерной для коллбеков. Промис представляет собой объект, который может находиться в одном из трёх состояний: ожидание (pending), выполнено (fulfilled) или отклонено (rejected).
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "some data";
resolve(data);
}, 1000);
});
}
fetchData().then((result) => {
console.log(result);
}).catch((error) => {
console.error(error);
});
Почему это нужно
Промисы делают код более читаемым и управляемым, особенно при наличии цепочек асинхронных операций. Как используется: Создаем новый промис и возвращаем его из функции. Затем используем методы then и catch для обработки результата или ошибки. Промисы позволяют избежать вложенности и обеспечивают более линейный и понятный поток выполнения.
async/await
Это синтаксический сахар поверх промисов, который делает код ещё более читаемым и похожим на синхронный.
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
const data = "some data";
resolve(data);
}, 1000);
});
}
async function main() {
try {
const result = await fetchData();
console.log(result);
} catch (error) {
console.error(error);
}
}
main();
Почему это нужно:
async/await упрощает написание и чтение асинхронного кода, устраняя необходимость использования методов then и catch. Как используется: Объявляем функцию с ключевым словом async и используем await для ожидания завершения промиса. Async/await делает асинхронный код более похожим на синхронный, улучшая его читаемость и поддержку.
👉
@frontend_mind
This media is not supported in your browser
VIEW IN TELEGRAM
Скелетон
Скелетон — это временная «заглушка». Он показывается вместо основного контента страницы на время загрузки данных. Пользователь видит не пустоту, а однотонные блоки, похожие на будущее содержимое: текст, кнопки или картинки. Часто их анимируют, что создаёт эффект загрузки. Это распространённый паттерн в веб-интерфейсах.
Скелетон выполняет ту же роль, что и спиннер, но воспринимается приятнее. Пользователь не только видит, что страница загружается, но и примерно понимает, какой контент появится после загрузки.
В рецепте разберём создание анимированного скелетона для карточки статьи.
👉
@frontend_mind
Скелетон — это временная «заглушка». Он показывается вместо основного контента страницы на время загрузки данных. Пользователь видит не пустоту, а однотонные блоки, похожие на будущее содержимое: текст, кнопки или картинки. Часто их анимируют, что создаёт эффект загрузки. Это распространённый паттерн в веб-интерфейсах.
Скелетон выполняет ту же роль, что и спиннер, но воспринимается приятнее. Пользователь не только видит, что страница загружается, но и примерно понимает, какой контент появится после загрузки.
В рецепте разберём создание анимированного скелетона для карточки статьи.
👉
@frontend_mind
Программирование как разработка теорий: почему senior-разработчики стали ценны как никогда?
В 1985 году учёный Питер Нур будто зрил в будущее, написав свою работу под названием «Programming as Theory Building», которая сегодня стала весьма актуальной. Мы всё чаще видим, как начинающие разработчики бездумно принимают сгенерированный ИИ код, который толком не понимают, а кодовые базы разрастаются лишёнными теоретических основ реализациями. В свете всего этого чётко вырисовывается основная идея Нура: «программа — это не её исходный код».
👉
@frontend_mind
В 1985 году учёный Питер Нур будто зрил в будущее, написав свою работу под названием «Programming as Theory Building», которая сегодня стала весьма актуальной. Мы всё чаще видим, как начинающие разработчики бездумно принимают сгенерированный ИИ код, который толком не понимают, а кодовые базы разрастаются лишёнными теоретических основ реализациями. В свете всего этого чётко вырисовывается основная идея Нура: «программа — это не её исходный код».
👉
@frontend_mind
❤3