askd

Общее

1. Представься: краткая информация о себе – имя, место работы, чем занимаешься, можно фото для тех, кто будет смотреть слайды отдельно
2. План доклада: несколько пунктов (лучше не более 5) о чём будет доклад. Это могут быть главы доклада (кстати, составление плана может помочь грамотнее структурировать доклад ещё при создании)
3. Зачем: кратко рассказать, чем то, о чем рассказываешь в докладе, может быть полезно остальным – и разработчикам, и руководителям, и клиентам (можно акцентироваться на аудитории конкретной конфы – например если там есть дизайнеры, бэкенды, то упомянуть, что они могут узнать из доклада)
4. Итоги: в конце доклада ещё раз пройтись по плану и подвести итог по каждому пункту – что узнали, чему научились
5. Контакты: как слушатель и тот кто смотрит слайды может связаться и задать вопрос

Оформление

askd

Keybase proof

I hereby claim:

• I am askd on github.
• I am askd (https://keybase.io/askd) on keybase.
• I have a public key whose fingerprint is 8259 4F9C 5428 0734 2486 F1EE 496A 198E A09C 8551

To claim this, I am signing this object:

askd

Итак, вы стали счастливым обладателем yubikey. С чего начать?

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

Если ваш основной браузер Safari, то... :sad_trombone: Придётся что-то менять в жизни. Попробуйте Chrome, он хороший. (Я не проверяла, работает ли ключ в Firefox, у вас есть возможность поделиться опытом)

Итак, предварительная подготовка окончена, приступим к самому интересному.

askd

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

Можно залить область под картинкой подходящим цветом. Но это не всегда возможно.

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

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

Вы запрашиваете http://site.com/images/image.jpg?width=300&height=300 и получаете картинку image.jpg, уменьшенную до 300х300.

askd

function testPreserve3DSupport() {
  const element = document.createElement('p');
  document.body.insertBefore(element, null);
  const propName = 'transform-style';
  element.style[propName] = 'preserve-3d';
  const propValue = window.getComputedStyle(element, null).getPropertyValue(propName);
  document.body.removeChild(element);
  return (propValue === 'preserve-3d');
}

askd

function calcScrollbarWidth() {
  const outerDiv = document.createElement('div');
  const innerDiv = document.createElement('div');
  outerDiv.style.overflow = 'scroll';
  document.body.insertBefore(outerDiv, null);
  outerDiv.insertBefore(innerDiv, null);
  window.scrollbarWidth = outerDiv.offsetWidth - innerDiv.offsetWidth;
  outerDiv.removeChild(innerDiv);
  document.body.removeChild(outerDiv);
}