Рубрики
Разработка

Golang – теоретические вопросы для собеседования

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

Строки

  • Что такое строка?
  • Как определить длину строки?
  • Кодировка, юникод
  • Преобразование строки в число

Массивы

  • Что такое массив?
  • Длина массива – len

Срезы

  • Что такое срезы?
  • Три компонента среза
  • Добавление в срез, функция append

Map

  • Что такое map?
  • Как получить элемент, адрес отображения?
  • Порядок итерации

Структуры

  • Что такое структуры?
  • Сравнение структур

Ошибки

  • Преимущества реализации ошибок
  • Реализация обнаружения ошибок
  • Panic и Recover

Интерфейсы

  • Зачем нужны интерфейсы, особенности в Golang
  • Зачем нужны пустые интерфейсы
  • Что такое декларация типов?

Go подпрограммы

  • Буфферизированные и небуфферизированные каналы
  • Закрытые каналы
  • Что такое горутина
  • Как завершить много горутин
  • Wait group
  • Когда используют контекст
  • Состояние гонки
  • Сколько весит горутина
Рубрики
Разработка

Как быстро ограничить количество выводимых постов в WordPress?

Чтобы ограничить количество выводимых постов в WordPress в пределах одного цикла нужно сделать следующее:

 $the_query = new WP_Query( array(
'posts_per_page' => 2
));

Все, больше ничего другого делать не надо.

Другие статьи о разработке: тут.

Рубрики
Разработка

Как я взламывал машинку на радиоуправлении

Сделать этот проект меня вдохновил Андрю, который делал похожий проект.

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

Было жалко ломать пульт

Перед тем как разобрать, я решил протестировать, работает ли машинка. Она ездила отлично и даже первое время стало обидно ее ломать, вдруг не заработает?

Я заметил, что когда жмешь вправо или влево, то происходит щелчок, то есть там скорее всего должны быть обычные кнопки. Так и случилось. Когда я развинтил, там была плата с четырьмя кнопками.

Я перерезал красный провод

Кнопка вперед (FOR), назад (BACK), лево (LEFT) и право (RIGHT).

Сама плата питалась двумя батарейками по 1.5V, то есть в сумме 3V. Столько же сколько выдает Adruino Uno. Я перерезал провода и подключил их к Arduino через breadbord.

Машинка ездила!

Впервые узнал как выглядит припой

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

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

Достаем знания программирования

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

Есть два языка на котором можно писать: адаптированный C++ и NodeJS. Так как у меня в планах было управлять машинкой через телефон, я выбрал NodeJS в привязке с socket io.

Сам код доступен по ссылке на GitHub.

Рубрики
Разработка

Модальное окно на JS быстро

Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без Bootstrap? Попробуем разобраться.

Куда вставить в DOM?

Обычно, я помещаю его перед закрывающим тэгом body.

[html]
<div class="modal" id="modal"></div>
</body>
</html>
[/html]

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

Центрирование

Вот один из моих любимых трюков, когда вы можете отцентровать и вертикально и горизонтально, без знания высоты и ширины.

[css]

.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

[/css]

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

Position – fixed?

Обратите внимание мы использовали position: fixed; чтобы пользователи могли иметь возможность скроллить вниз, в то время как открытое модальное окно оставалась всегда посередине. Я считаю, в целом, что значение fixed уже можно смело использовать, даже на мобильных устройствах. Однако, если вам нужно учесть старые телефоны, попробуйте заменить значением absolute.

Разберемся с шириной

На больших экранах, типичное открытое модальное окно не только отцентровано, но и ограниченно по ширине.

[css]

.modal {
width: 600px;
}

[/css]

Однако, есть такие экраны, которые меньше 600px в ширину. Чтобы исправить ситуацию добавим максимальную ширину.

[css]

.modal {
width: 600px;
max-width: 100%;
}

[/css]

Высота

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

[css]

.modal {
height: 400px;
max-height: 100%;
}

[/css]

Overflow

После того как мы разобрались с высотой, пришло время заняться свойством overflow. Распространенно использовать overflow значение, прямо в .modal, однако, есть две проблемы с этим:

  • Мы можем захотеть использовать элементы, которые не должны скролиться
  • Overflow обрежет тень, которую мы будем использовать.

Я бы предложил использовать внутренний контейнер:

[html]

<div class="modal" id="modal">
<!– не скролиться –>
<div class="modal-guts">
<!— скролиться –>
</div>
</div>
[/html]

Учитывая, что у нас будет контент который нужно скролить, нам нужно задать высоту. Есть несколько вариантов. Вот один из них:

 

[css]

.modal-guts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* отступы */
padding: 20px 50px 20px 20px;
/* разрешим скролить */
overflow: auto;
}

[/css]

Кнопки

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

[html]

<div class="modal" id="modal">
<!– не скролиться –>
<button class="class-button" id="close-button">Закрыть</button>
<div class="modal-guts">
<!— скролиться –>
</div>
</div>

[/html]

Разберемся с затемнением

Обычное модальное окно делают с полностью затемняющимся фоном. Это полезно по нескольким причинам:

  • оно может затемнить остальной экран
  • может предотвратить клики/взаимодействие с контентом вокруг модального окна
  • может использоваться, как гигантская кнопка закрытия

Типичный пример использования:

[html]

<div class="modal" id="modal">
<!– Модалка –>
</div>

<div class="modal-overlay" id="modal-overlay"></div>

[/html]

[css]

.modal {
/* все что мы уже выше описали */
z-index: 1010;
}

.modal-overlay {
z-index: 1000;
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
}

[/css]

Закрывать классом, а не открывать классом

Я заметил распространенное явление, когда по умолчанию .modal класс скрыт, как например display: none; Потом, чтобы открыть, добавляют класс .modal.open {display: block;}

Однако, это может быть и плохо, потому что ваша модальное окно может быть display: flex; и display: block; его перепишет.

[css]

.modal {
.display: flex;
}

.modal.closed {
display: none;
}

[/css]

Добавим JavaScript

[js]

var modal = document.querySelector("#modal"),
modalOverlay = document.querySelector("#modal-overlay"),
closeButton = document.querySelector("#close-button"),
openButton = document.querySelector("#open-button");

closeButton.addEventListner("click", function(){
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});

openButton.addEventListner("click", function(){
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});

[/js]

ДЕМО СКАЧАТЬ

Оригинал статьи на CSS Tricks (англ)

 

 

Рубрики
Разработка

О чем был PiterCSS?

В эту пятницу в Санкт-Петербурге состоялось мероприятие PiterCSS. Самые известные фронт-эндщики (и не только) собрались, чтоб послушать спикеров со всего мира. Выступали представители Венгрии, Канады и Китая. Впрочем было кое-что.

Но что там делать помимо слушанья?

Интересные стенды предоставляли фирмы партнеры. Отечественная фирма с мировым именем JetBrains дарила подарки всем, кто предложит нововведение для их софта. Супер крутой обучающий сервис HTML Academy предлагал сверстать макет на время, но без просмотра результата в браузере.

Образование для самых юных

Отдельное внимание, хотелось бы уделить очень интересной школе образование детей до 15 лет Digital Banana. Эти ребята предоставили стенд с играми, которые были написаны детьми 11 – 12 лет. В данный момент идет набор в летние группы, так что спешите.