Telegram Web Link
Forwarded from SMLTECH
С международным днем бэкапа! ⚙️

31 марта ежегодно отмечается международный день резервного копирования. Мы желаем вам никогда не сталкиваться с потерей данных и надежных легко восстанавливаемых бэкапов! 🤝

В честь праздника мы предлагаем вам проверить свои резервные копии и сделать свежую на всякий случай. А ещё вместе вспомнить известные случаи потери данных, которые повлияли на наш мир.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Стать фронтендером в Яндексе за выходные

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

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

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

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

Реклама. ООО "Яндекс". ИНН 7736207543
Полезный справочник для фронтенд-разработчика

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

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

#фронтенд #обучение
Лайк, если узнал свою прошлую галерку
This media is not supported in your browser
VIEW IN TELEGRAM
Скрытые возможности элемента input

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

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

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

#html #лучшиепрактики
This media is not supported in your browser
VIEW IN TELEGRAM
Этот снежный шар сделан с помощью 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 на наличие устаревших элементов и обновит их.

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

#инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
Как устроен рендеринг в браузере

Что происходит между вводом 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
Media is too big
VIEW IN TELEGRAM
Собеседование фронтендера с 30-летним опытом

Максим Demi Murych знает спецификацию JS лучше самих создателей языка, занимается реверс-инжиниргом и оптимизацией JS-кода уже более 30 лет. Но даже он не смог дать ответы на некоторые вопросы собеса. Почему?

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

#видео #javascript
Сегодня отмечаем День Рунета!

7 апреля 1994 года был зарегистрирован национальный домен .ru, что ознаменовало рождение уникального пространства для всех пользователей русскоязычного интернета.

Сегодня домен .ru занимает 7-е место в мире по количеству зарегистрированных сайтов. Самые популярные домены — универсальный .com (156,3 млн сайтов), китайский .cn (19,7 млн) и немецкий .de (17,7 млн).

Желаем вам создать такой сайт, который войдет в историю Рунета и поможет домену .ru попасть в топ-3!

А с какого сайта началось ваше знакомство с Рунетом? Поделитесь в комментариях!
React vs Jmix: что выбрать для бизнес-приложений?

Разработка UI для бизнес-приложений — задача не из лёгких. React предлагает гибкость и широкую экосистему, но требует интеграции сторонних библиотек для полной функциональности. С другой стороны, Jmix предоставляет комплексное решение с готовыми инструментами для быстрой разработки, включая поддержку Kotlin и дизайн-тайм ролей. Однако выбор между ними зависит от специфики проекта и предпочтений команды. Подробнее о сравнении этих фреймворков читайте в статье.

#react #jmix
Проверяем безопасность собственного сайта с помощью web-check

Чтобы быть уверенными в том, что ваш сайт не взломают, нужно действовать на опережение. web-check — это OSINT-инструмент, который пользуются хакеры и можете воспользоваться вы сами. Он поможет вам проанизировать архитектуру проекта и выявить слабые места: IP-адреса, цепочку SSL, записи DNS, файлы cookie, заголовки страниц, информацию о домене, правила сканирования поисковых систем, карту сайта, местоположение сервера, реестр редиректов, открытые порты, расширения безопасности DNS, производительность сайта, трекеры, связанные имена хостов и даже углеродный след.

Кстати, абсолютно бесплатно.

#инструменты #osint #безопасность
2025/04/09 03:38:38
Back to Top
HTML Embed Code: