<!DOCTYPE html>
<html lang="uz">
<head>
<meta charset="UTF-8">
<title>Mening Birinchi Sahifam</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 40px;
}
h1 {
color: #2c3e50;
}
p {
font-size: 18px;
}
img {
width: 300px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Salom, Dunyo!</h1>
<p>Bu mening birinchi HTML sahifam. Men HTML kod yozishni o‘rganmoqdaman.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Tashkent_collage.png/640px-Tashkent_collage.png" alt="Toshkent manzarasi">
</body>
</html>
my first work
👾2👍1👨💻1🗿1
#фишка дня
Иногда возникает задача поставить перевод строки после строчного (inline) элемента. Без
На помощь приходят псевдоэлементы.
Значение свойства
Ну и чтобы он сработал, нам стоит прямо указать браузеру на необходимость сохранения переводов строк.
Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием
#css #tricks #unicode #after #newline
Иногда возникает задача поставить перевод строки после строчного (inline) элемента. Без
<br/>, без преобразования элемента в блочный.На помощь приходят псевдоэлементы.
Значение свойства
content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.Ну и чтобы он сработал, нам стоит прямо указать браузеру на необходимость сохранения переводов строк.
Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием
<br/>, но мы уже решили, что он лишний.#css #tricks #unicode #after #newline
👨💻2👍1🗿1👾1
Forwarded from Будни разработчика
#фишка дня
Иногда встаёт задача не просто проиллюстрировать статью, но обрезать (кропнуть) исходное изображение. И желательно так, чтобы результат был адаптивен и адекватно реагировал на масштабирование.
Джейк Арчибальд предлагает решение на SVG и foreignObject: https://jsbin.com/yiwipay/edit?html,css,output
Вообще, весьма красиво. Да, можно генерировать кропы на сервере, но это, как минимум, лишние телодвижения. А тут – одна картинка, чистый и понятный код.
#svg #img #foreignObject #crop
Иногда встаёт задача не просто проиллюстрировать статью, но обрезать (кропнуть) исходное изображение. И желательно так, чтобы результат был адаптивен и адекватно реагировал на масштабирование.
Джейк Арчибальд предлагает решение на SVG и foreignObject: https://jsbin.com/yiwipay/edit?html,css,output
Вообще, весьма красиво. Да, можно генерировать кропы на сервере, но это, как минимум, лишние телодвижения. А тут – одна картинка, чистый и понятный код.
#svg #img #foreignObject #crop
👨💻2👍1🗿1👾1
This media is not supported in your browser
VIEW IN TELEGRAM
Space 404
Космически неверный адрес. Реализовано с помощью SCSS и JS.
⤷ Забрать код
@HtmlGram1 | #scss #JavaScript
Космически неверный адрес. Реализовано с помощью SCSS и JS.
⤷ Забрать код
@HtmlGram1 | #scss #JavaScript
👨💻2👍1🗿1👾1
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
И вы великолепны.
P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.
#css #бородач
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
И вы великолепны.
P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.
#css #бородач
👨💻2👍1🗿1👾1
This media is not supported in your browser
VIEW IN TELEGRAM
Electric strings
Электрический шар со струнами, который преследует движение курсора. Реализовано с помощью JavaScript.
⤷ Забрать код
@htmlshitt | #JavaScript
Электрический шар со струнами, который преследует движение курсора. Реализовано с помощью JavaScript.
⤷ Забрать код
@htmlshitt | #JavaScript
👨💻2👍1🗿1👾1
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с
Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через
2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно:
3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.
Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.
И да, поддерживается везде.
#css #has #appearance #бородач
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с
input:checked+i. Это освобождает мозг и руки для более приятных вещей.Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через
appearance: none.2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно:
::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
transform: translateY(100%);
}
Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.
Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.
И да, поддерживается везде.
#css #has #appearance #бородач
👨💻3👍1🗿1
@container scroll-state(stuck: top) {
.pip {
width: 200px;
transform: translate(-50%, 0%)
translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
}
}👨💻2👍1🗿1👾1
😈 Data Dojo | Питер | 26 августа
Это мероприятие Яндекса для сообщества ML-специалистов с обсуждением трендов, разбором реальных задач из соревнований и прикладными кейсами.
Зачем участвовать:
— послушать выступления экспертов: Николай Савушкин, руководитель команды рекомендательных технологий в Поиске, расскажет про генеративные нейросети в рекомендательных системах Яндекса, а Алексей Колесов,
руководитель команды NLP, поделится, какие вызовы стоят перед командой R&D в Яндексе
— разобрать задачи вместе с сообществом
— узнать, как попасть на стажировку и начать карьеру ML’щика в Яндексе
— завести новые знакомства и зажечь на afterparty
Заполняй форму до 20 августа.
Хочешь стать спикером? Поделись разбором ML-задачи через форму до 13 августа. Программный комитет пригласит одного спикера выступить на встрече.
🪷 Самураи действуют поодиночке, но учатся вместе. Присоединяйся.
Это мероприятие Яндекса для сообщества ML-специалистов с обсуждением трендов, разбором реальных задач из соревнований и прикладными кейсами.
Зачем участвовать:
— послушать выступления экспертов: Николай Савушкин, руководитель команды рекомендательных технологий в Поиске, расскажет про генеративные нейросети в рекомендательных системах Яндекса, а Алексей Колесов,
руководитель команды NLP, поделится, какие вызовы стоят перед командой R&D в Яндексе
— разобрать задачи вместе с сообществом
— узнать, как попасть на стажировку и начать карьеру ML’щика в Яндексе
— завести новые знакомства и зажечь на afterparty
Заполняй форму до 20 августа.
Хочешь стать спикером? Поделись разбором ML-задачи через форму до 13 августа. Программный комитет пригласит одного спикера выступить на встрече.
🪷 Самураи действуют поодиночке, но учатся вместе. Присоединяйся.
👨💻2👍1👎1🗿1👾1
#фишка дня
Как убедиться, что ваш
Очень просто! Два варианта:
1. Используем
2. Второй вариант — ESLint и правило
Впрочем, мы у себя вообще переходим на pattern matching, о чём как-нибудь в следующий раз.
#ts #switch
Как убедиться, что ваш
switch покрывает все кейсы, а default остаётся только на случай косяков в рантайме?Очень просто! Два варианта:
1. Используем
never, от Кори Хауса:
interface Dog {
kind: "dog";
favoriteToy: string;
}
interface Parrot {
kind: "parrot";
knowsWords: number;
}
type Pet = Dog | Parrot;
function logPetTalent(pet: Pet) {
switch (pet. kind) {
case "dog":
return console. log (Dog loves ${pet. favoriteToy}. ');
case "parrot":
return console. log (Parrot knows ${pet.knowsWords} words. *);
default:
const exhaustiveCheck: never = pet;
}
}
2. Второй вариант — ESLint и правило
switch-exhaustiveness-check. И уже дальше решаем, разрешать default, или нет. Конфигураия это позволяет.Впрочем, мы у себя вообще переходим на pattern matching, о чём как-нибудь в следующий раз.
#ts #switch
👨💻2👍1👎1🗿1👾1