Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Красочная расслабляющая игра в жанре маджонг - Накорми Попугая! Собирайте плитки с фруктами, набирайте очки, побеждайте!

Накорми Попугая

Аркады, Маджонг, Казуальные

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Web + Программирование

С этим тегом используют

IT Web-программирование Сайт Веб-разработка Дизайн Javascript Программист IT юмор Разработка Python Картинка с текстом Юмор Все
256 постов сначала свежее
19
Web.Study
Web.Study
2 года назад
Web-технологии

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами⁠⁠

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


Мы узнаем, как устроена рекурсия, а также разберем алгоритм сортировки массива под названием Quick Sort или, как еще его называют, быстрая сортировка Хоара. Как вы уже догадались, этот алгоритм рекурсивный.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Читайте нас в телеграме, там мы каждый день выкладываем полезные материалы из вселенной Front-end



Перейдем к статье


Рекурсия


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


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


У нас есть простая функция обратного отсчёта:

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Данная функция принимает аргументом число n и выводит на экран числовую последовательность от n до 1 включительно, а в конце, после завершения работы цикла, выводит на экран слово «Финиш».


Давайте вызовем эту функцию, передав в нее число 3. В консоли мы получим следующий результат: «3 2 1 Финиш».

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Теперь перепишем эту функцию на рекурсивный манер:

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Разберемся, как эта функция работает. Первым делом, чтобы не получить бесконечный цикл вызовов функции и как результат ошибку «stack overflow», которая говорит нам о превышении лимита вызовов для функции в стеке, нужно определить так называемый базовый случай.


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


Так как наш цикл работал до тех пор, пока i > 0, то здесь условие для прерывания цикла должно быть следующим:

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

То есть, как только n будет меньше или равно нулю, мы перестаем рекурсивно вызывать функцию и выходим из нее. Перед выполнением оператора return необходимо будет вызвать наш console.log('Финиш'), потому что именно это действие и будет последним в работе функции.


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

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Дальше мы выводим в консоль текущее значение числа n. И, следующим шагом, снова вызываем нашу функцию countDownRecursive() и передаем в нее n - 1.


Как вы помните, в примере с циклом for, на каждой итерации цикла мы уменьшали число i на единицу (i--), поэтому здесь, по аналогии, передаем n - 1.


Запустим функцию и получим в консоли следующий результат:

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Результат, как вы видите, аналогичен результату работы простой функции countDown.


Давайте теперь чуть подробнее разберём, как работает рекурсивная функция.



Как работает рекурсивная функция

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Итак, сначала мы вызываем функцию countDownRecursive со значением 3.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Базовый случай не отрабатывает, потому что n > 0. Мы выводим число 3 в консоль и дальше снова вызываем функцию, передав в нее n - 1, то есть 3 - 1 или просто число 2.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Повторяем эту процедуру, пока не дойдем до нуля:

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

И вот здесь уже срабатывает базовый случай. Так как 0 === 0, выводим в консоль слово «Финиш» и дальше срабатывает оператор return.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

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


Здесь вы можете подумать, что это всё очень сложно, и почему бы не использовать такой понятный и простой цикл for?


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


Давайте разберем один из таких примеров.



Числа Фибоначчи


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


Автором данной числовой последовательности был Леонардо Пизанский (более известный под прозвищем Фибоначчи) из итальянского города Пизы — один из крупнейших математиков средневековой Европы.


Вот так ряд Фибоначчи выглядит на практике:

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

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


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


Допустим, мы ищем 10-ый элемент в последовательности. Значением этого элемента будет 55. Для 12-го элемента значением будет 144 и так далее.


Вот так будет выглядеть эта функция, написанная с применением рекурсии:

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

В результате работы функции в консоли мы получим число 8. Можете это проверить: если вы посмотрите на ряд Фибоначчи выше, то увидите, что значением 6-го элемента в ряду будет число 8.


Давайте разберём, как работает данная функция.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Объявляем стрелочную функцию fibonachi, которая принимает аргументом число искомого элемента в ряду — n.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Далее определяем базовый случай, т.е. условие, при котором выходим из рекурсии.


Так как мы будем последовательно уменьшать число n (об этом ниже), то нет смысла делать это бесконечно.


Как только n оказывается меньше 2, то это значит, что мы достигли начала ряда Фибоначчи, а значит дальше нам двигаться не нужно и можно возвращать n обратно вызывающему коду.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Если же базовый случай не отработал, то снова вызываем функцию, передав в ее аргументы n - 1 и n - 2 соответственно, и складываем результат этих функций между собой по следующей формуле: F(n) = F(n - 1) + F(n - 2). Эта формула позволяет нам найти число из ряда Фибоначчи. Так как каждое число равно сумме двух предыдущих чисел в цепочке, то именно эту формулу мы реализовали в нашей функции.


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



Быстрая сортировка Хоара


А теперь рассмотрим более сложный алгоритм. Он называется быстрая сортировка (Quick Sort) или сортировка Хоара.


Данный алгоритм был разработан английским информатиком Тони Хоаром во время работы в МГУ в 1960 году.


И вот здесь как раз будет применяться рекурсия.


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


Итак, в чем суть. Имеется неотсортированный массив чисел arr.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

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


Быстрая сортировка относится к алгоритмам из серии «разделяй и властвуй».


Небольшое отступление. Алгоритмы типа «разделяй и властвуй» (англ. divide and conquer) — это парадигма разработки алгоритмов, заключающаяся в рекурсивном разбиении решаемой задачи на две или более подзадачи того же типа, но меньшего размера, и комбинировании их решений для получения ответа к исходной задаче. Разбиения выполняются до тех пор, пока все подзадачи не окажутся элементарными.


Наш алгоритм будет сводиться к следующим шагам:


1. Выбираем элемент из массива и считаем его опорным (в англоязычной литературе его называют pivot).


2. Сортируем элементы в массиве таким образом, чтобы элементы меньше опорного размещались в подмассиве перед ним, а большие или равные — в подмассиве после.


3. Рекурсивно применяем первые два шага к двум подмассивам слева и справа от опорного элемента. Т.е. дробим наш массив на подмассивы и сортируем их относительно опорного элемента, пока в этих подмассивах не останется по одному элементу или меньше. Рекурсия не применяется к массиву, в котором только один элемент или отсутствуют элементы. Это как раз и будет базовым условием, при котором мы прервем рекурсию.


Вот здесь вы можете увидеть визуализацию работы быстрой сортировки (а также многих других алгоритмов).


А вот так выглядит реализация сортировки Хоара на JavaScript:

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Подробный разбор алгоритма сортировки Хоара


Давайте подробно разберём, как работает данная сортировка.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Создаем функцию quickSort() и передаем аргументом неотсортированный массив.


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

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

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

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Теперь определим индекс в массиве так называемого опорного элемента. Для этого создадим переменную pivotIndex, передадим в функцию Math.floor длину массива, поделим результат на 2 и получившееся число присвоим переменной pivotIndex. Функция Math.floor, как вы знаете, округляет результат в меньшую сторону:

Math.floor(5.5); // 5

Затем определим сам опорный элемент. Для этого кладем в переменную pivot значение массива по индексу pivotIndex. В массиве arr значением pivotIndex будет 5 (длина массива — 11. 11 делим на 2 и округляем в меньшую сторону, получаем 5). Значением pivot будет -12.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Дальше нужно объявить два пустых подмассива less и greater. В массив less будем сохранять все элементы, которые меньше опорного, а в greater все элементы, которые больше опорного.


Дальше в цикле for мы пробегаем по всем элементам массива и сравниваем каждый элемент с опорным.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

Затем у нас идут три условия. В первом условии мы сравниваем индекс текущей итерации цикла с индексом опорного элемента в массиве.


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


Далее во втором условии мы сравниваем элемент массива с опорным элементом. Если опорный элемент больше, то добавляем наш текущий элемент массива в массив less.


В противном же случае, добавляем текущий элемент массива в массив greater (третье условие).


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


И дальше мы возвращаем массив, в который разворачиваем результат рекурсивного выполнения функции, принимающей в качестве аргумента массив less. Дальше вставляем наш опорный элемент pivot, а после снова разворачиваем результат выполнения функции для массива greater.

Не так страшен черт, как его малюют. Объясняем рекурсию в Javascript простыми словами Программирование, IT, Полезное, Алгоритм, Рекурсия, Javascript, Web-программирование, Web, Веб-разработка, Длиннопост

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


Выведем в консоль результат работы функции и убедимся в этом.


Быстрая сортировка в среднем и лучшем случае выполняется за Θ(n * log(n)) и Ω(n * log(n)) соответственно.


В худшем случае время выполнения алгоритма занимает О(n^2).


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



Спасибо тем, кто дочитал, пишите ваше мнение, вопросы и предложения в комментариях. Не забудьте поставить плюсик этому посту, если он вам понравился :3

Показать полностью 25
[моё] Программирование IT Полезное Алгоритм Рекурсия Javascript Web-программирование Web Веб-разработка Длиннопост
6
GekkoGod
GekkoGod
2 года назад

Востребованность WEB-дизайнера⁠⁠

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


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


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


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


В итоге решила, что если я хочу войти в IT и что если мне все равно нужно учиться, то пойду в ту сферу, которая мне ближе. Я выбрала web-дизайн и java script. Наверное, кто-то скажет, что web-d это не IT, но, если честно, для меня создание сайта строится через код, а не только картинку, как на Figma. То есть, для меня web-дизайнер - это человек, который разрабатывает UI/UX, макет, саму красоту, скрипты для красоты, коды и скрипты (HTML5, CSS, JS) и даже анимацию. Мне хочется именно делать что-то масштабное, а не просто клепать красивые лого в Figma (не говорю о том, что это легко).


И в моей голове задается вопрос: востребован ли сейчас web-дизайн? Как новичку данной профессии просто/трудно найти первую работу?


Тестировщик, конечно, очень востребован, но это не то, с чего я хочу начать полноценное обучение, раз без него меня никуда не возьмут (можете писать, что халявщица, но, как я уже сказала, я разбирала теорию и собиралась идти на стажировку ради практики, а не сразу на джуна)

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

Да и плюс, я бы хотела поторопиться в адекватном смысле этого слова, т.к. хочется кушать и хочется работать, что-то делать, а не учиться по полгода-год. Насколько я знаю, обучение web-d занимает меньше времени, чем то же программирование.


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

А то репетиторство, хоть и прикольно, но нестабильно и непрактично)

Спасибо!


картинка для привлечения внимания <3

Востребованность WEB-дизайнера Web, Дизайн, IT, Программирование, Ui, Ux
Показать полностью 1
Web Дизайн IT Программирование Ui Ux
20
16
Web.Study
Web.Study
2 года назад
Web-технологии

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log()⁠⁠

Что такое отладка


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

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Варварская отладка


Самый примитивный вариант отладки — добавить в код на JavaScript метод console.log (), поместив в скобки нужные данные для отладки. Console.log () — это просто способ вывести в консоль какой-нибудь текст.


Например, внутри функции можно сказать: console.log (‘Вызвана такая-то функция’) — и в нужный момент мы увидим, что функция вызвалась (или нет).


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


К счастью, помимо console.log () человечество изобрело много удобных инструментов отладки.



Что нужно для отладки

Для несложных проектов на JavaScript проще всего использовать встроенный отладчик в браузере Google Chrome. Единственное ограничение — он работает только с файлами скриптов, а не со встроенным в страницу кодом. Это значит, что если код скрипта находится внутри HTML-файла внутри тега <script>, то отладка не сработает.


Чтобы открыть панель отладки в Chrome, нажимаем ⌘+⌥+I и переходим на вкладку Sources (Источники):

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Открываем скрипт


Допустим, мы хотим посмотреть, как работает какой-либо скрипт.


Всё, что у нас есть, — это код. Чтобы мы смогли его отладить, его нужно положить в отдельный файл скрипта, присоединить к HTML-документу и запустить в браузере.


Открываем любой текстовый редактор, например Sublime Text, вставляем код скрипта и сохраняем файл как temp.js. Имя может быть любым, а после точки всегда должно стоять js — так браузер поймёт, что перед нами скрипт.


После этого в новом файле вставляем шаблон пустой HTML-страницы и подключаем наш скрипт — добавляем в раздел <body> такую строку:

<script type="text/javascript" src="temp.js"></script>
Получиться должно что-то вроде такого:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

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

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

На странице ничего нет, но нам нужна не страница, а скрипт, поэтому находим слева наш файл temp.js и нажимаем на него — откроется код скрипта. Теперь можно начинать отладку:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Добавляем точки остановки


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


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


Брейкпоинт нужен для того, чтобы выполнить скрипт по шагам, начиная с первой команды. Чтобы его установить, нажимаем на номер строки с первой командой — в нашем случае это строка 2:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Обновим страницу и увидим, что скрипт начал работу и остановился. Но он остановился не на второй строке, а на шестой — всё потому, что это первая строка в скрипте, где происходит какое-то действие. Дело в том, что просто объявление новых переменных не влияет на работу скрипта, поэтому он ищет первую команду с действием. В нашем случае — это цикл for:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Пошаговая отладка


Чтобы посмотреть на работу скрипта по шагам, надо нажимать F9 или стрелку вправо с точкой на панели отладки:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Каждый раз, как мы будем нажимать F9 или эту кнопку, скрипт будет переходить к следующей команде, выполнять её и снова становиться на паузу:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Добавляем переменные для отслеживания


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


Чтобы добавить переменную и видеть её значение во время выполнения, в панели отладки в разделе Watch нажимаем плюсик, вводим имя переменной, выбираем её из списка и нажимаем энтер:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Теперь видно, что на этом шаге значение переменной a равно нулю:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Точно так же добавим остальные переменные: i, b, c. Так мы увидим, что первые два цикла только начались, а внутренний прошёл уже три итерации:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Так, нажимая постоянно F9, мы прогоним весь скрипт до конца и посмотрим, при каких значениях какие условия выполняются и как находится решение:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Но у такого подхода есть минус — если вложенных циклов много или скрипт очень большой, то на пошаговое выполнение уйдёт много времени. Чтобы не перебирать всё вручную, ставят дополнительные брейкпойнты в нужных местах.



Отладка брейкпойнтами


Допустим, нам важно понять, в какой момент скрипт находит и выдаёт решение. Глядя в код, мы понимаем, что как только скрипт дошёл до команды console.log () — он нашёл очередное решение. Это значит, что мы можем поставить брейкпоинт только на эту строчку и не прогонять вручную весь скрипт: он сам остановится, когда дойдёт до неё, а мы сможем посмотреть значения переменных в этот момент.


Для этого:

1. Нажимаем снова на строку 2 и убираем предыдущую точку остановки.

2. Ставим брейкпоинт на строку 20 — там, где происходит вывод решения в консоль.

3. Нажимаем F8.

После этого скрипт продолжит работу сам и снова остановится, как только дойдёт до этой строки. Обратите внимание на значения переменных — они меняются к каждой остановке, а значит, скрипт работает как обычно, но останавливается в нужном нам месте:

Как поймать баг в коде: отладка в браузере. Вместо тысячи console.log() Программирование, IT, Инструкция, Баг, Frontend, Web, Длиннопост

Таких точек остановки можно поставить сколько угодно и в любой момент — на каждой из них отладчик остановится и покажет текущее состояние скрипта.



Зачем это всё


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


В следующей статье мы покажем на примере с реальным кодом, как отладка помогает находить и исправлять такие ошибки. Подпишитесь, на наш телеграм, чтобы не пропустить это – https://t.me/havaevau_webstudy

Показать полностью 13
[моё] Программирование IT Инструкция Баг Frontend Web Длиннопост
9
107
Web.Study
Web.Study
2 года назад
Web-технологии

58 байтов удовольствия. Выглядит красиво почти где угодно⁠⁠

Как сделать сайт красивым на всех дисплеях?


Я перерыл половину Хабра в поисках САМОГО простого способа в минимум кода и кто ищет, тот всегда найдет. Под эту задачу подойдут следующие 58 байт:

58 байтов удовольствия. Выглядит красиво почти где угодно Программирование, IT, Полезное, CSS, Frontend, Web-программирование, Web, Веб-разработка, Веб-дизайн, Длиннопост

Давайте их разберём.


max-width: 38rem


Похоже, в большинстве браузеров по умолчанию используется размер шрифтов 16px, то есть 38rem — это 608px. Поддержка дисплеев разрешением минимум 600px кажется разумным

выбором.



padding: 2rem

Если ширина дисплея становится меньше 38rem, тогда благодаря этому отступу всё остаётся достаточно красивым до ширины примерно в 256px. Хотя это может казаться необязательным, на самом деле мы одним выстрелом убиваем двух зайцев: отступ также создаёт необходимое пространство сверху и снизу.



margin: auto


Это всё, что нужно для центрирования страницы, потому что main — это блочный элемент под семантическим html5.



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


Дополнение 1: после обсуждений я изменил значение padding на 1.5rem, чтобы улучшить компромисс между мобильными и десктопными дисплеями.

Дополнение 2: мне напомнили о ch unit, и он мне понравился! После этого я поменял значение на 70ch/2ch, что выглядит примерно так же, но на 2 байта меньше; только padding стал чуть меньше (это хорошо для мобильных).



100 байтов CSS, которые выглядят красиво где угодно (расширенная версия)


Это простой CSS, который будет хорошо выглядеть на большинстве дисплеев:

58 байтов удовольствия. Выглядит красиво почти где угодно Программирование, IT, Полезное, CSS, Frontend, Web-программирование, Web, Веб-разработка, Веб-дизайн, Длиннопост

Давайте его разберём.


max-width: 70ch


«удобный для чтения диапазон» обычно составляет в ширину 60-80 символов, и в CSS можно выразить это напрямую при помощи единицы измерения ch.



padding: 3em 1em


Если ширина дисплея оказывается меньше указанного выше max-width, то этот padding предотвращает растягивание текста на мобильных от края до края. Чтобы оставить пробелы сверху и снизу, мы используем 3em.



margin: auto


Это всё, что необходимо для центрирования страницы; применяется к html, потому что у сайта Дэна нет семантического тега </p>, который, скорее всего, существует на большинстве сайтов. То, что верхний тег центрирует себя относительно ничего, не совсем логично, но так делает большинство браузеров.



line-height: 1.75


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



font-size: 1.5em


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



Можно использовать :root вместо <html>, чтобы гарантировать наличие какого-нибудь селектора, но эта тонкость слишком сложна для меня и добавляет ещё один символ.



Ещё 100 необязательных байтов

58 байтов удовольствия. Выглядит красиво почти где угодно Программирование, IT, Полезное, CSS, Frontend, Web-программирование, Web, Веб-разработка, Веб-дизайн, Длиннопост

Пользуйтесь


И кстати, мы здесь рассказываем не только про CSS и банально, там нас будет удобнее читать :3

Показать полностью 3
[моё] Программирование IT Полезное CSS Frontend Web-программирование Web Веб-разработка Веб-дизайн Длиннопост
32
20
MaxSholts
2 года назад
Информационная безопасность IT

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2)⁠⁠

Началась 3-я неделя наших приключений, организованных разработчиком игр и ютубером NoobGameDev, и мы продвинулись уже очень далеко - на доске детектива почти не осталось места. А это значит, что всего будет 3 статьи по данному мероприятию: "Часть 1", "Часть 2 (эта)", и "Часть 3 - финал". Рекомендую прочитать первую часть, чтобы быть в курсе, потому что я буду довольно часто на неё ссылаться. Так же оставлю ссылку на оригинальную новость от автора. Теперь к делу.

В данный момент доска детектива выглядит следующим образом (зелёным выделены изменения с прошлой статьи)

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

В предыдущей части я говорил, что мы нашли подозрительные теги в аудиозаписи оставленной автором во Вконтакте. Мы поняли намёк на собаку Морти (из "Рик и Морти") по кличке Снафлс (Snuffles). Но после этого некоторые обратили внимание на тег "Other" со значением "Deep Sound".

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Это была подсказка - существует программа "Deep Sound" для сокрытия информации в аудио файлах. И после недолгого перебора пароль был подобран. Им оказалась кличка пса - "Snuffles". Внутри был .txt документ со ссылкой.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Страница по найденной ссылке перевела нас на архив Google Диска. Он оказался без пароля и в нём находилось 25 изображений с именами по типу "00001 11111 00000 10111 11000.png".

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

На первый взгляд всё понятно - нужно собрать из этого QR код. Проблема лишь в том, что для 25 данных кусков существует 25! = 15 511 210 043 330 985 984 000 000 комбинаций. Мягко говоря, многовато! Но из этого числа подавляющее большинство кодов будут не валидными. Это заставило нас немного изучить структуру QR кодов.

Так же мы сразу догадались, что имена изображений это тоже QR. Потому что имя состоит из пяти блоков по пять цифр (нулей, либо единиц), то есть 0 - белый цвет, 1 - чёрный (слева направо и сверху вниз).

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

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

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Это расположение изображений, в котором точно можно быть уверенным (иначе QR не прочитается). Оставалось 8 изображений, что составляет 8! = 40 320 вариантов комбинаций. Это уже значительно меньше. Ясно, что нужно делать - писать "перебиратор" и считывать полученные результаты. Но для подобного квеста у нас по прежнему маловато людей, поэтому все наши попытки впопыхах написать нечто подобное не увенчались успехом. Однако, один из участников заметил, что все QR коды в квесте очень похожи. И спустя ночь, на утро, он выдал рабочий QR код. Оказалось, что он просто наложил получившуюся мозаику на какой-то из QR кодов, встречавшихся ранее в квесте, и таким образом подобрал рабочий вариант! Организатор квеста, ни много ни мало, был в возмущённом восторге) К тому же мы сразу собирали QR из имён файлов, а не из картинок, миновав тем самым один из проходных этапов.

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

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

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


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

Новая ветвь


Основным нашим прорывом стала новая ветвь квеста. Ей оказалась спектрограмма аудиодорожки видео из YouTube.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

В ней была спрятана строка: 66303638313537322e787370682e7275. Использовав первый же сайт с набором декодеров удалось расшифровать HEX строку, результат - ссылка на новый сайт.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

В этот раз по ссылке нас ждала игра "Змейка". А в коде страницы был комментарий "Only the best of the best are awarded the truth" (Только лучшие из лучших удостаиваются правды). Мы поняли, что нужно будет поиграть.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Спустя несколько "забегов" мы определили, что игра выдаёт некий код каждому, кто займёт первое место в ТОП участников (но о коде позже), а так же если удавалось собрать больше 50 яблок, то из точки столкновения змейки расходился QR код. Но, так как он размером с игровое поле, то врезаться нужно было строго в середине поля (по вертикали). А это не так просто, как кажется.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Собрав немного скриншотов, нам удалось слепить из них очередной QR код, который привёл нас к загадочной двери, с забавным замком.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

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

К этому моменту (об этом я рассказывал в первой части) у нас уже была книга о Гарри Поттере и был книжный шифр, который мы расшифровали, и ждали его применения. У нас получилась фраза "Смотри внимательнее, потому что дорога возникает под шагами того, кто идёт". Именно это каждый из нас кричал в микрофон, чтобы его фраза распозналась, и чтобы услышать заветный ответ.

"Теперь дорога свободна". После этой фразы нас перенаправило на страницу с выбором пути. Однако, видимо, наш выбор особой роли не играл (может, это для статистики, а может, как-то повлияет в будущем - пока не ясно).

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Механизм (котик)


Данная страница представляет из себя металлическую "лямбу" всю в "нажиматорах" и индикаторах, и с "крутилятором" в правом нижнем углу).

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

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

DateTime.Now, по всей видимости, указывает на сегодняшнюю дату, а Сейф, как-то связан с сейфом. По остальным подсказкам на данный момент у нас идей особо нет.


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

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Исходное сообщение: VJUBALA L EPZB UQE VO NUDFK SZ FBB HWQM
Его расшифровка: DOROTHY R TIVG RHS BC OMKYE FL IRG CIXJ


В данном сообщении, как и во всех, что мы видели, первое слово является женским именем, но после него получается "тарабарщина". Но, как вы могли заметить, минимум один раз нам удалось перейти ко второму дисплею. Один из участников взял сегодняшний код (CROQLWU UGSCRRY PA EKJGMCTCBR WG S HLTEBXK TTLWP), декодировал по примеру выше (ELEANOR HKHEYZM AU XCVALLLUKG CO U ETKNEYB PDIEI) и прогнал результат через BruteForcer. В итоге получилась фраза (пословица): NOTHING IS IMPOSSIBLE TO A WILLING HEART (перевод: "Нет ничего невозможного для желающего сердца"). Это и стало ключом. Однако, завтра фраза сменится и у нас нет уверенности, что данный метод сработает и с ней, так что данный этап нами полностью ещё не покорён.

Сейф (бабки)


На данной странице находится сейф, который похож на сейф из сцены с котом. На нём имеется кодовый замок (5 групп по 7 цифр), лимбовый замок и замочная скважина, которая, при нажатии на неё, требует загрузки файла изображения.

На сейфе так же имеется Памятка, в которой написано "1. Ввести код. 2. Покрутить крутилку. 3. Вставить ключ. 4. Нажать на значок ключа, чтобы открыть". И по всей видимости, основная сложность сейфа в том, что необходимо вводить сразу три ключа. Так как нет никаких сообщений о том какой из ключей был не верным.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

В предыдущей части я писал о том, что мы нашли реплику игры Flappy Bird, и что счёт в ней шёл не корректно. В конце концов мы добили данную последовательность: "1-2-3-8-9-6-4-1-2-7-5-6-4-9-0-0-7-5-2-2-4-9-1-7-5-9-0-4-6-1-7-5-2-1-0-4-9-3-8" (далее начинался адекватный счёт: 40-41-42-... и т.д). И я бы об этом не упомянул сразу после сейфа, если бы ни одно "но": в сцене с котом, в телевизоре часто появлялся эпизод из фильма "Защитник", в котором речь шла о длинном скучном числе, где каким-то образом расставлены 7-ки и 5-ки, а так же 3-ки и 8-ки. К тому же говорилось, что данное число - шифр от сейфа.

И в найденной нами последовательности данные цифры тоже стоят по каким-то правилам:
"1-2-3-8-9-6-4-1-2-7-5-6-4-9-0-0-7-5-2-2-4-9-1-7-5-9-0-4-6-1-7-5-2-1-0-4-9-3-8". Но как я уже говорил, проверить эту теорию мы сможем только когда найдём остальные 2 ключа.

О менее приятном


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


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

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Штрих-код считался и у нас появилась новая загадка: число из 11 цифр. Мы принялись подставлять его в различные нерешённые задачи, пытаться декодировать и прочее. Но один из новоприбывших участников сразу же спросил, что-то типа "А вы звонили на штрих-код?".


Это число оказалось номером телефона: 8-863-333-94-71. Позвонив по нему, мы услышали автоответчик.


Запись автоответчика


Любители аниме сразу поняли, что это японский. Это же подтвердил и Google переводчик.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Исходя из перевода можно точно сказать, что речь об аниме "Shaman King" и, вероятнее всего, о конкретном духе - Амидамару. Но как или чем он нам сможет помочь пока не понятно.

Шрифты из Телеграм


В прошлой части нам кое-как удалось получить набор букв из картинки со шрифтами. Так же мы сумели проявить надпись OurSecret.

Спустя некоторое время нам удалось понять, что надо тщательно гуглить все незнакомые слова. В итоге была найдена очередная программа для стеганографии - OurSecret. Используя её и полученный ключ "BMWFACTHLS", нам удалось вытащить текстовый файл с новой ссылкой.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Эта ссылка привела нас к изображению с именем "barber.png", находящимся на Google Диске. Картинка хотела открываться не во всех редакторах, но спустя какое-то время один из участников поиздевался над картинкой и прислал результат. После этого мы поняли, что использовался приём, который называется Наполнением за границами изображения. И после некоторого времени подбора значений в HEX редакторе удалось получить полное изображение.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Скрытое сообщение было ссылкой, которая привела нас к странице с точками и полем для ввода.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Если ввести неверное значение, то поле ввода пропадает. Но это утка. Так как происходит редирект на страницу http://a0694523.xsph.ru/index.php и если убрать "index.php", то поле ввода появляется снова.
В данным момент мы не знаем, что от нас требуется. Самая правдоподобная версия в том, что перед нами участок карты звёздного неба или набор созвездий. Но пока что это всё, что у нас есть.

Опять Морзе


Буквально в момент написания статьи была обнаружена ещё одна ветка в стартовом видео на YouTube. Ей оказалась Морзянка. То, что все изначально приняли за засвет от светодиода какого-то устройства, оказалось посланием.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Это оказалась ссылка на новый сайт, где нас встретил персонаж Коржик из Улицы Сезам

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

На странице так же имеется неприметная форма для ввода. Сам Коржик говорит "OMMM NOM NOM NOM". При неверном вводе фраза немного меняется, но форма ввода остаётся активной. Помимо прочего, так как это похоже на намёк на cookie-файлы, то мы проверили и их. Мы нашли куку с именем "Monster" и значением: 0DF5B38B2D4B4BBEA13D626CA7C6D4A3366EB07F3C594C9179BE0D34F8832B36.

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

Странные имена


И ещё одна вещь, о которой хотелось бы рассказать - это имена файлов и комментарии, которые мы иногда находим. Сначала мы думали, что это рандомный набор букв, но все эти "имена" написаны заглавными буквами и имеют плюс/минус одинаковую длину. Мы не думаем, что это совпадение. На данный момент есть предположение, что это связано с картинкой в видео на YouTube. И помимо прочего, данные записи появились и на доске детектива.

Неплохой ARG квест для IT-шников, в котором ты не участвуешь… (часть 2) Arg, Ctf, Квест, Игры, Головоломка, Загадка, Шифр, Криптография, Стеганография, Информационная безопасность, IT, Логика, Ребус, Программирование, Шифрование, Web, Web-программирование, Гифка, Видео, Длиннопост

Так же эти картинки отображают и некоторые этапы квеста. Например: змея - змейка; лук - Тор; дух - Амидамару; ножницы - обрезанная картинка; печенье - Коржик; Шелдон - клингонский; птица - Flappy Bird; матрёшка - матрёшки; книга - Гарри Поттер...
И на всех этих этапах мы находили странные именования. Возможно, что в итоге это соберётся в некую ссылку или же станет для нас очередной загадкой.

Подытожим


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


Напишите как вам задания? Есть ли какие-то идеи, которые смогут нам помочь? И спасибо, что прочитали!)

Показать полностью 24 1
[моё] Arg Ctf Квест Игры Головоломка Загадка Шифр Криптография Стеганография Информационная безопасность IT Логика Ребус Программирование Шифрование Web Web-программирование Гифка Видео Длиннопост
4
5
alllhimic
alllhimic
2 года назад
Халява
Серия ЛайфХак

Как навсегда получить: Виджет Google Maps Pro?⁠⁠

Как навсегда получить: Виджет Google Maps Pro? Раздача, Бесплатно, Промокод, Халява, Виджет, Программирование, Wordpress, Сайт, Карты, Услуги, IT, Фриланс, Google, Google Maps, Скидки, Плагин, Программист, Web, Видео, YouTube, Длиннопост

└ Источник: FREEHUB (спонсор вашей халявы)

➖➖➖➖➖➖➖➖➖➖➖➖

▪️ ПОЛУЧИТЬ | 4 999₽

💁🏻‍♂️ Виджет Google Maps — это серьезный плагин для карт, который cэкономит ваше время и деньги, так как вы получаете его совершенно бесплатно, а главное навсегда, ведь каждому сайту WordPress нужна карта, и создание быстро загружаемой, великолепно выглядящей карты может быть более сложным и трудоемким, чем кажется, но виджет Google Maps позволяет вам за считанные минуты создать идеальную карту для вашего или любого другого сайта.
└ AppSumo часто радует нас интересной халявой и если вы недавно познакомились с моими публикациями, тогда посмотрите публикацию про WhatsApp Cloud API и Team Inbox (вдруг пригодится).
➖➖➖➖➖➖➖➖➖➖➖➖

🤷🏻‍♂️ ЧТО НУЖНО ДЕЛАТЬ:

1. Открываем » AppSumo.

└ Входим/Регистрируемся

2. Добавляем виджет в корзину.

Как навсегда получить: Виджет Google Maps Pro? Раздача, Бесплатно, Промокод, Халява, Виджет, Программирование, Wordpress, Сайт, Карты, Услуги, IT, Фриланс, Google, Google Maps, Скидки, Плагин, Программист, Web, Видео, YouTube, Длиннопост
Как навсегда получить: Виджет Google Maps Pro? Раздача, Бесплатно, Промокод, Халява, Виджет, Программирование, Wordpress, Сайт, Карты, Услуги, IT, Фриланс, Google, Google Maps, Скидки, Плагин, Программист, Web, Видео, YouTube, Длиннопост

└ Оформляем товар за 0₽

Как навсегда получить: Виджет Google Maps Pro? Раздача, Бесплатно, Промокод, Халява, Виджет, Программирование, Wordpress, Сайт, Карты, Услуги, IT, Фриланс, Google, Google Maps, Скидки, Плагин, Программист, Web, Видео, YouTube, Длиннопост

3. Вы получили промокод.
└ Активируйте до 13 декабря

Как навсегда получить: Виджет Google Maps Pro? Раздача, Бесплатно, Промокод, Халява, Виджет, Программирование, Wordpress, Сайт, Карты, Услуги, IT, Фриланс, Google, Google Maps, Скидки, Плагин, Программист, Web, Видео, YouTube, Длиннопост

4. Кликаем » Redeem Now.

└ Следуем инструкции

5. Готово, пожизненно пользуемся для трех сайтов.

└ Примеры Google Maps Pro
➖➖➖➖➖➖➖➖➖➖➖➖
✅ UPD:
Могу ошибаться, но данный плагин позволит вам заработать на апгрейде сайтов, то есть вы можете найти любой WordPress-сайт компании, которая не имеет виджета и предложить им его установить, после чего предоставляете им ключ для активации и зарабатываете самые быстрые деньги в вашей жизни.
➖➖➖➖➖➖➖➖➖➖➖➖
🔥Подписывайтесь на Telegram: 👉🏻 FREEHUB 👈🏻
└ Чтобы поблагодарить и поддержать нас

Показать полностью 4 1
[моё] Раздача Бесплатно Промокод Халява Виджет Программирование Wordpress Сайт Карты Услуги IT Фриланс Google Google Maps Скидки Плагин Программист Web Видео YouTube Длиннопост
4
22
TheTeaLover
TheTeaLover
2 года назад
Web-технологии
Серия Туториалы по бэкенд разработке

Введение в бэкенд для чайников⁠⁠

Хочу сделать серию уроков по серверной разработке для новичков. Вот первый ролик

[моё] Web IT PHP Nginx Туториал Программирование Linux Видео YouTube
11
Партнёрский материал Реклама
specials
specials

Только каждый третий пикабушник доходит до конца⁠⁠

А сможете ли вы уложить теплый пол, как супермонтажник?

Проверить

Ремонт Теплый пол Текст
nikitavas
2 года назад

Платформа для разработки ERP учетных систем (бесплатно)⁠⁠

Всем привет.

Делал в качестве хобби платформу для быстрой разработки учетных систем.

Кому надоело вести документацию в Excel или Access, а 1С еще дорого, но хочется для себя использовать полноценную базу данных.

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


Выбрал такое трехзвенное решение:

JS(JQuery) - Сервер приложений(Apache+PHP) - БД(MySQL или MariaDB)

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


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

Готовые объекты для форм, таблиц, прикладного кода, отчетов. CRUD, фильтрация, сортировка из коробки. Для манипуляций с данными сделана надстройка в стиле Excel (устанавливаете нужные фильтры и работаете с таблицами). SQL учить особо не надо, только представлять какие данные в каких таблицах.


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

Есть готовые примеры, которые можно смотреть как сделано и делать наподобие, лишнее можно выпилить. На полноценную документацию сил не хватило, честно говоря уже выдохся. Весь код открыт, даже кое-где есть комментарии. Файл с описанием внутри архива (PDF).

Кодинг через веб есть, но это блажь, можно отключить и кодить в вашей любимой IDE, файлы объектов (форм, таблиц, классов, отчетов в отдельных каталогах).

Все весит 10Mb, без codemirror около 5Mb.

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

Теоретически должно работать даже на Astra Linux, но я не пробовал.


Размещаю небольшие демонстрации на видео. Там же ссылка на скачивание (во втором видео demo2).

https://www.youtube.com/watch?v=ONOFC8kjtTU

https://www.youtube.com/watch?v=G34ZniBclsk

Показать полностью 2
[моё] Программирование Linux Разработка Erp Бесплатно PHP Javascript Web IT Видео YouTube Длиннопост Mysql
4
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии