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

JavaScript: обратный вызов

Читать

Функции SetTimeout, setImmediate и process.nextTick очень похожи, запуская обратный вызов по завершнии текущего цикла событий (Event Loop).

SetTimeout выполняется с задержкой, длительность которой устанавливается в миллисекундах. На практике задержка может продлиться дольше, так как функция выполняется в начале следующего цикла событий, после завершения всей очереди текущего цикла событий. Если таймер установлен на 0, вызов функции происходит "немедленно" - она занимает первое место в очереди событий Event Queue) следующего цикла событий.

setImmediate очень похожа на SetTimeout и используется для прерывания длительных операций и запуска функции обратного вызова сразу после того, как браузер завершит текущий цикл событий. Обычно, выполнение этой функции происходит после SetTimeout.

Метод process.nextTick взааимодействует с циклом событий по своему сценарию, запуская функцию обратного вызова сразу после завершения текущего цикла. Можно представить, что process.nextTick встраивается между текущим и следующим циклами, хотя на самом деле он получает максимальный приоритет, отодвигая события в самом начале следующего цикла событий. process.nextTick всегда выполняется до SetTimeout и setImmediate.

function run() {
  setTimeout(() => console.log(" I am setTimeout"), 0);
  setImmediate(() => console.log("I am setImmediate"));
  process.nextTick(() => console.log("I am nextTick"));
  console.log("I am current event loop");
}

run()

Консоль:

I am current event loop
I am nextTick
I am setTimeout
I am setImmediate

#tutorial #interview #js

CSS: масштабирование элемента

Читать

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

Для быстрого масштабирования элемента отлично подходит CSS-свойство zoom.

В том случае, ели значение свойства zoom будет меньше 1, элемент уменьшится.

Например, чтобы уменьшить элемент в 2 раза, нужно выбрать значение 0.5:

div {
  zoom: 0.5;
}

Для того, чтобы элемент увеличился, значение zoom должно быть больше 1.

Например, чтобы увеличить элемент в 2 раза, нужно выбрать значение 2.0:

div {
  zoom: 2;
}

#frontend #css

JavaScript: замыкание

Читать

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

function showBiodata(){
  var employee = {
    name:"Rayn Dahl", 
    age:45,
    role: "Senior Programmer"
  };

  return function(){
    console.table(employee);
  }
}

var initClosure = showBiodata(); // Returns a function

initClosure(); 

В вышеприведенном коде функция showBiodata() присваивается переменной:

var initClosure = showBiodata();

После чего возвращаемая функция выполняется при вызове initClosure():

initClosure();

Результат:

1. name: 'Rayn Dahl'
2. age: 45
3. role: 'Senior Programmer'

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

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

#interview #frontend #js

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

Читать

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

Простой пример идемпотентности из жизни: если нажать на кнопку лифта один раз или сто, лифт уже вызван и каждое последующие нажатие не изменит результат.

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

JavaScript: временная мертвая зона

Читать

Временная мертвая зона (temporal dead zone, TDZ) возникает при обращении к переменной до её инициализации при использовании ключевых слов let и const.

Например:

name = "Rayn Dahl"; // получаем ошибку ReferenceError
let name;

или

function showHi(){
  message = "Hi, there!"; // получаем ошибку ReferenceError
  let message;
}

showHi();

В коде, приведенном выше, происходит обращение к переменным до их объявления, что приводит к ошибке ReferenceError.

#interview #frontend #js

CSS: полезные однострочники

Читать

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

Для чего нужны однострочные решения?

Однострочники на CSS помогут:

1. Ограничить ширину содержимого в области просмотра.
2. Увеличить основной текст.
3. Увеличить расстояние между строками.
4. Ограничить ширину изображений.
5. Ограничить ширину текста.
6. Сбалансированно оформить заголовки.
7. Привести цвета элементов управления форм в соответствие со стилями страницы.
8. Повысить читабельность таблиц.
9. Оптимизировать интервалы в ячейках и заголовках таблиц.
10. Убрать избыточную анимацию.

А теперь подробно и с примерами...

#frontend #css

JavaScript: rest и spread

Читать

В JavaScript rest и spread операторы имеют одинаковый синтаксис - ..., но при этом выполняют разные функции. Так чем же они отличаются?

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

Так rest позволяет функции принимать неопределенное количество аргументов в виде массива:

function sum(...args){
  let total = 0
  args.forEach(item=>total+=item)
  return total
}

console.log(total(1,2)); //3
console.log(total(1,2,3)); //6
console.log(total(1,2,3,4)); //10

С помощью rest, выполнив деструктуризацию, все однотипные элементы можно представить в одном массиве:

let order = ['John Doe', 1001, 4, 7, 12, 33];
let [name, id, ...items_id] = order;
console.log(name); // Pepperoni
console.log(id); // 2222
console.log(items_id); // [ 4, 7, 12, 33 ]

spread оператор или, другими словами, оператор расширения извлекает каждый элемент итерируемого объекта и погружает его в другой итерируемый объект.

К итерируемым объектам можно отнести все сущности, которые можно перебрать с помощью цикла. Обычно, в JavaScript это массивы и строки.

spread, например, позволяет перебрать элементы массива:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

или объединить два массива:

let numberStore = [1, 2];
let newNumber = [3, 4];
numberStore = [...numberStore, ...newNumber];
console.log(numberStore) // 1,2,3,4]

#interview #frontend #js

CSS: фиксируем количество строк

Читать

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

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Number of Lines */
}

#frontend #css

PHP: квиз

Читать

Как сделать квиз - страницу на которой будет представлен вопрос с несколькими типами данных для вариантов ответа (изображение, текст, файл, видео, ссылка) и результат?

Для этого необходимо выполнить всего несколько шагов с помощью HTML, jQuery, JSON, PHP и MySQL...

#backend #php