Логово верстальщика – Telegram
Логово верстальщика
8.04K subscribers
996 photos
48 videos
4 files
1.71K links
Канал для верстальщиков с инфой о HTML и CSS, а так же JavaScript на уровне верстальщиков.

Канал на бирже - https://telega.in/c/webdevlair

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
👩‍💻 8 неэффективных практик JavaScript, которых лучше избегать

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Автоматическая караоке-система на основе React и Vercel

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
➡️ Пара шаблонов кастомизированных элементов Handlebars для Apache Superset

Apache Superset — популярный инструмент для визуализации данных с открытым кодом. Но при его использовании можно столкнуться с ограничениями. В статье обсуждается, как с помощью шаблонов Handlebars и Jinja решать эти проблемы, включая интеграцию web-верстки в дашборды и обход ограничений системы.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Сложение строк, представляющих большие числа

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

Пример:
sumStrings('123', '456'); // => '579'
sumStrings('999999999999999999', '1'); // => '1000000000000000000'


Решение задачи🔽

function sumStrings(a, b) {
let carry = 0, result = '';
a = a.padStart(Math.max(a.length, b.length), '0');
b = b.padStart(Math.max(a.length, b.length), '0');

for (let i = a.length - 1; i >= 0; i--) {
let sum = parseInt(a[i]) + parseInt(b[i]) + carry;
carry = Math.floor(sum / 10);
result = (sum % 10) + result;
}

if (carry) result = carry + result;
return result.replace(/^0+/, '');
}
Please open Telegram to view this post
VIEW IN TELEGRAM
🔎 Подборка вакансий для джунов

Frontend-разработчик / верстальщик (стажер, junior)
🟢Bootstrap SASS БЭМ React/Vue REST-бекенд
🟢от 40 000 до 80 000 ₽ | Без опыта

Верстальщик / Junior Frontend-разработчик
🟢HTML CSS JavaScript БЭМ CMS
🟢от 40 000 до 70 000 ₽ | Без опыта

Верстальщик HTML (Junior Frontend)
🟢HTML5 CSS3 SASS REST ES6 Webpack gulp JS jQuery
🟢до 45 000 ₽ | 1–3 года

HTML верстальщик / Junior Frontend разработчик
🟢HTML5 CSS3 JS PHP
🟢от 45 000 ₽ | 1–3 года

Разработчик веб-приложений / фронтенд / верстальщик HTML (Junior)
🟢HTML5 CSS3
🟢от 40 000 ₽ | Без опыта
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Very cool animated text

Интересная анимация спирального текста. Сделана на CSS и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Что такое замыкания (closures) в JavaScript?

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

function makeCounter() {
let count = 0;
return function() {
return ++count;
};
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2


🗣️ Замыкания полезны для создания функций с внутренним состоянием, например, счётчиков или настройки приватных данных.


🖥 Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔎 Подборка вакансий для мидлов

HTML-верстальщик
🟢JavaScript, HTML, CSS, Photoshop
🟢от 250 до 250 $ | Без опыта

Frontend разработчик - верстальщик (HTML CSS)
🟢HTML5, CSS, JS, React.js / Vue.js, БЭМ
🟢от 60 000 до 100 000 ₽ | 1–3 года

Frontend-разработчик / верстальщик (Тула)
🟢HTML5 (PUG), CSS3 (SCSS/LESS), ES6, Vue.js, Nuxt.js, Git, Docker, Gitlab CI/CD, Webpack, Vite
🟢от 70 000 до 100 000 ₽ | 1–3 года

Web программист Битрикс, Bitrix24
🟢PHP, MySQL, API 1C-Bitrix, HTML, CSS, Javascipt + jQuery
🟢от 130 000 ₽ | 1–3 года

HTML-верстальщик / Junior Frontend-разработчик
🟢JavaScript, HTML5, Flex, CSS3, Git
🟢от 45 000 ₽ | Без опыта
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 React и FormData

Узнайте о новейшем и одновременно старейшем стандарте React для доступа к данным формы, а также о том, как использовать его с TypeScript.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Функция задержки выполнения

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

Пример кода:

log('Hello');  // Вызовется сразу
log('World'); // Игнорируется, т.к. прошло меньше 1000ms


Решение задачи🔽

function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastCall >= delay) {
lastCall = now;
return func(...args);
}
};
}

// Примеры использования
const log = throttle(console.log, 1000);

log('Hello'); // Вызовется сразу
log('World'); // Игнорируется, т.к. прошло меньше 1000ms
setTimeout(() => log('Again'), 1500); // Вызовется через 1.5 секунды
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Neuro Noise (GLSL Shader)

Интерактивный фон с эффектом при перемещении курсора. Сделан на CSS и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
🔎 Подборка вакансий для сеньоров

Верстальщик Webflow и Tilda
🟢HTML, CSS, JavaScript, Figma
🟢Уровень дохода не указан | 3–6 лет

Senior HTML-верстальщик
🟢HTML5, Figma, Photoshop, jQuery, JavaScript
🟢от 70 000 до 90 000 ₽ | 3–6 лет

Графический дизайнер-верстальщик
🟢Photoshop
🟢от 150 000 до 250 000 ₽ | 3–6 лет

Дизайнер-верстальщик (гибрид)
🟢inDesign, Illustrator, Photoshop
🟢от 90 000 ₽ | 3–6 лет

Senior Frontend Developer (Vue.JS)
🟢Vue3, TypeScript, Git
🟢от 90 000 ₽ | Более 6 лет
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Паттерн «Бэкенд для фронтенда»: преимущества, недостатки и лучшие практики для реализации

Если ты хочешь стать настоящим мастером API, тебе нужно знать о паттерне BFF. В этой статье рассказываем, как создавать управляемую архитектуру с использованием BFF, избегая избыточной сложности и головной боли при поддержке.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Как работает свойство z-index в CSS?

z-index управляет тем, как элементы накладываются друг на друга в трёхмерном пространстве веб-страницы. Элементы с большим значением z-index будут отображаться поверх тех, у которых значение меньше.

➡️ В этом примере элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1:

.element1 {
position: relative;
z-index: 1;
}

.element2 {
position: relative;
z-index: 2;
}


🗣 Важно помнить, что свойство z-index работает только с элементами, у которых установлено позиционирование (position: relative, absolute, fixed или sticky).


🖥 Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔎 Подборка вакансий для лидов

Tech Lead Fullstack Developer (React.js + Node.js)
🟢TypeScript (99% кода), JavaScript, React.js, RxJS, Node.js, PostgreSQL, AWS, Electron.
🟢от 5 000 до 6 000 $ | Более 6 лет

Web Tech Lead (Full stack, TsNode, Vue/React)
🟢Уровень дохода не указан | 3–6 лет

Tech Lead (mobile)
🟢Android, Flutter, JavaScript, CI/CD
🟢до 500 000 ₽ | 3–6 лет

Tech Lead (Full stack, TsNode, Vue/React)
🟢JavaScript, Node.js, React, VueJS, TypeScript, CI/CD
🟢Уровень дохода не указан | 3–6 лет

Tech Lead (PHP/Laravel + Vue.js)
🟢PHP, Laravel, PostgreSQL, VueJS, Kafka, CI/CD
🟢Уровень дохода не указан | 3–6 лет
Please open Telegram to view this post
VIEW IN TELEGRAM
Как быстро разобраться в Next.js 14: 5 советов опытного фронтендера

Делимся пятью советами, которые помогут быстро разобраться в тонкостях работы с изображениями, переменными окружения, кэшированием и управлением компонентами в Next.js.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
💡 Карьера — это не про «идеальную работу», а про опыт и умение адаптироваться

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

🎯 Что делать: пообщайся с коллегой из другой области, возьми на себя один проект вне своей зоны, попробуй новый инструмент или язык, устрой «ревизию» навыков — что сейчас реально работает на тебя, а что пора обновить? Простые шаги, но каждый — ключ к росту и новым возможностям.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔎 Подборка валютных вакансий

HTML-верстальщик / Front-end разработчик
🟢PHP, jQuery, JavaScript, HTML5, CSS3
🟢от 500 до 500 $ | Без опыта

Учитель FrontEnd/Scratch
🟢HTML, CSS, React, Базовый уровень, JavaScript, Figma, Tilda
🟢от 100 000 ₸ | Без опыта

Frontend-разработчик
🟢ReactJs, Redux Toolkit, Typenoscript, Styled-components, React Router, git, Storybook
🟢от 1 200 до 2 000 $ | 3–6 лет

Frontend Developer Vue.js / Senior
🟢JavaScript, VueJS, Laravel, HTML, CSS, Figma, Git, MySQL, API, Atlassian Jira, React
🟢до 3 500 $ | Более 6 лет

Frontend-разработчик (React)
🟢React, RTK и RTK Query, TypeScript, соблюдение принципов DRY, KISS и SOLID, MUI, Git
🟢от 250 000 до 350 000 ₸ | 1–3 года
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Масштабируемый CSS с архитектурой ITCSS

Статья рассказывает об архитектуре Inverted Triangle CSS, которая помогает масштабировать и поддерживать крупные CSS проекты. Обсуждаются причины выбора, пошаговая реализация и сравнение с другими подходами.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM