CSS: высокая контрастность

Читать

Иногда просмотр содержимого веб-страницы в режиме высокой контрастности приводит к ошибке при выводе SVG-изображений.

Хорошим вариантом решения такой проблемы стало использование свойства CanvasText для настройки системного цвета и, как результат, корректного вывода картинок в формате SVG.

#frontend #css

Если кратко: большая языковая модель

Читать

Большая языква модель (Large Language Model, LLM) является очень большой моделью глубокого обучения (набором нейросетей), обучаемой на огромных объемах данных, и способной предсказывать следующий токен, опираясь на информацию о предсказанных ранее токенах.

#tutorial #nutshell #есликратко

CSS: простые эффекты перехода

Читать

CSS-переходы являются отличным способом реализации на сайте простой и изящной анимации, положительно влияющей на взаимодействие с пользователем и создающей ощущение интерактивности.

В статье приведены 12 таких эффектов.

Например, Fade In:

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.fade-in:hover {
    opacity: 1;
}

#frontend #css

Если кратко: алгоритм

Читать

Алгоритм - это четко определенная последовательность действий, выполнение которых приводит к заранее известному результату. В программировании алгоритм - это список необходимых пошаговых инструкций для наилучшего решения задачи...

#tutorial #nutshell #есликратко

#drBrainAI

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

1. сайт
2. генератор коротких видео
3. генератор анонсов
4. чат-бот

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

AI: повышаем продуктивность

Читать

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

#ai #drBrainAI

CSS: простой параллакс

Читать

Создавая визуально привлекательные сайты, разработчики довольно часто применяют едва уловимую анимацию для скроллинга страницы, вызывающую одобрение и захватывающую внимание пользователей. Такая анимация называется эффект параллакса, суть которой заключается в том, что элементы переднего плана и фон двигаются с разной скоростью, придавая динамичности веб-странице.

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

#frontend #css

JavaScript: статические методы для CRUD

Читать

CRUD (create, read, update, delete, в переводе: создать, прочитать, обновить, удалить) — четыре базовых функции, которые мы применяем к любой информации в любых приложениях. Рассмотрим варианты реализации CRUD с помощью статических методов при работе с базой данных в JavaScript...

#frontend #js

CSS: горизонтальный параллакс

Читать

Эффектом параллакса, называется особенность визуального восприятия объектов, находяющихся на разном рассстоянии от наблюдателя, выражающаяся в том, что объекты переднего плана и фон двигаются с разной скоростью. Реализация такого эффекта для элементов веб-страницы добавляет сайту динамичности и положительно влияет на взаимодействие с пользователем.

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

#frontend #css

Если кратко: конкурентность и параллелизм

Читать

Далеко не все программисты понимают, чем отличаются конкурентность и параллелизм. Разберем различия на простых бытовых примерах.

#tutorial #nutshell #есликратко

React: дорожная карта

Читать

Я изучаю React.js, и нахожусь только в начале этого увлекательного и захватывающего (а иногда даже пугающего) квеста. В этой статье я расскажу о шагах, которые помогли мне приступить к освоению этой библиотеки. Надюсь, такая информация будет полезной для тех, кто раздумывает - стоит ли погрузиться в изучение React.js

#tutorial #frontend #js

PHP: длина массива

Читать

Разработчик PHP нередко встречается на собеседвании с вопросом: "Какова максимальная длина массива в PHP?". И здесь следует понимать, что в PHP для массивов не существует жестко определенной "длины", так как она зависит от количества памяти, выделенной для PHP-процессов.

#interview #backend #php

Frontend: ресурсы

Читать

В данной статье представлено более 70 полезных ресурсов frontend-разработчика, включающая различные инструменты и библиотеки, которые помогают на всех этапах реализации проектов: от создания потрясающих пользовательских интерфейсов до тонкой настройки производительности.

#frontend #library #css #js #react #design

навигация по тегам:

1. #ai
2. #backend
3. #bash
4. #cli
5. #css
6. #design
7. #dev
8. #drBrainAI
9. #frontend
10. #go
11. #html
12. #interview
13. #js
14. #nutshell
15. #opinion
16. #php
17. #python
18. #tailwind
19. #tutorial
20. #есликратко

проголосовать за канал

CSS: центрируем элемент по вертикали

Читать

Проблема центрирования блоков на веб-страницах уже давно стала мемом, особенно для backend-разработчиков. За последние годы описано множество способов выравнивания элементов страницы по центру, как по горизонтали, так и по вертикали, в том числе с использованием возможностей модели flexbox.

#frontend #css

drbrain4web, 12 сент. 2024 г., 19:42:25:
...
<img scr="example.jpg" alt="example image" loading="lazy">
...#frontend #html


HTML: ленивая загрузка

Читать

Добавив HTML-атрибут loading="lazy" к изображению или фрейму, можно отложить загрузку контента, находящегося за пределами видимой области экрана, до тех пор пока пользователь не доскроллит страницу сайта до "ленивого" элемента. Такой подход позволяет значимо ускорить загрузку содержимного страницы, особенно в тех случаях, когда предлагаемая информация содержит множество картинок или фреймов.

<img srс="example.jpg" alt="example image" loading="lazy">

Это легкое решение зачастую значительно улучшает производительность веб-ресурса и повышает лоялность пользователей.

#frontend #html

6 советов начинающим разработчикам

Читать

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

Так что же нужно знать на старте, чтобы стать успешным программистом?

1. Изучайте язык: На данный момент трудно переоценить роль технического английского языка в понимании и эффективном написании программного кода.
2. Осваивайте основы: Уделяйте внимание HTML, CSS и JavaScript. Это базовые строительные блоки веб-разработки. Обращайтесь к проверенным ресурсам: MDN и freeCodeCamp.
3. Создавайте проекты: Разработка небольших собственных проектов значительно улучшит практические навыки программирования и пополнит портфолио.
4. Знайте Git: Git является лидером среди распределенных систем контроля версий (DVCS). Начинайте с базовых приниципов и команд. Изучайте официальную документацию Git.
5. Оставайтесь в тренде: Следите за тенденциями отрасли с помощью таких платформ, как DEV, Stack Overflow, Reddit r/webdev и Webdev.
6. Задавайте вопросы: Сообщество разработчиков всегда оказывает поддержку и делится знаниями. Если нужна помощь, используйте такие форумы, как Stack Overflow и DEV.

#frontend #opinion

Если кратко: отладка

Читать

Отладка (debugging) - это детектив для программистов, в котором ошибки являются уликами, указывающими на опечатки и логические неточности в программном коде...

#tutorial #nutshell #есликратко

JavaScript: локальное хранилище

Читать

Локальное хранилище (local storage) является очень важным объектом, предоставляющим разработчикам интерфейс, позволяющий хранить и извлекать данные, а также управлять ими непосредственно в браузере. В отличие от сессионного хранилища (session storage), локальное хранилище не подвергается деструкции после закрытия браузера, являясь идеальным инструментом хранения настроек приложений, пользовательских настроек и любых данных, требующих сохранения между сеансами. Тем не менее, возможности локального хранилища ограничиваются браузером, в котором оно было создано. Так, данные, сохраненные в Chrome, никогда не будут доступны в Firefox или Safari...

#frontend #js

PHP: оптимизация

Читать

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

В предложенном материале подобран обширный список правил, улучшающих работу высоконагруженных PHP-проектов. Каждое правило дополнено практическим примером.

#backend #php

Разрушающие убеждения

Читать

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

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

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

#dev #opinion

HTML: id и переменные

Читать

Представляю один интересный и малоизвестный факт: если у HTML-элемента есть атрибут id, его значение можно использовать, как имя глобальной переменной, в JavaScript.

HTML:

<button id="my_button">…</button>

JavaScript:

my_button.onclick = ...

Кроме того, если у потомка элемента с id есть атрибут name, к такому элементу тоже можно обратиться в JavaScript.

HTML:

<form id="my_form"> 
  <input name="my_input"> 
</form>

JavaScript:

my_form.my_input.onclick = ...

Возможно, это не лучший способ взаимодействия с элементами интерфейса, но он работает.

#frontend #html #js