Привет всем! Я уверен, что большинство знают такой способ. Но мне хочется показать.

Зайдем например на всем известный vk.com

Я туда ввел левые данные, для примера .

Дальше нам потребуется открыть консоль разработчика.

Вот инструкция как открыть в google chrome эту консоль

Появится примерно такое окно.

Нам нужно выбрать этот инструмент в консоли разработчика

Дальше нам нужно мышкой навести на форму ввода пароля, и кликнуть левой кнопкой мыши, после чего мы увидими html разметку страницы. Выбираем в правом окне наш тег input и меняем его атрибут type="password" на type="text"

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

Не знаю, на сколько это полезно. Всем спасибо !

Приветствую товарищ. Сегодня я поведую тебе о написание кода на твоëм мобильнике.

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

1.Acode - хорошее приложение для тех, кто любит писать fronted, он включает в себя HTML, CSS, js и т.д.

2.Code Editor - здесь можно уже писать как на Python, так и на js. А вообще в приложение имеется более 30 языков, на которых вы бы могли написать код.

3.QuickEdit - да, это текстовый редактор, но на нем тоже можно писать код, менять тему и много чего ещё.

Вообще можно писать код где угодно, даже на парте в институте или на бумажке в туалете, но самое главное - это то, чтобы вам нравилось то, что вы делаете. ;)

Всем доброго дня, рад что вы обратили на этот пост своё внимание!

Свой рассказ я начну с небольшой предыстории:

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

Решил так сказать проверить свой скилл в понимании CSS и HTML!

Ну и вот что из этого вышло -

ОРИГИНАЛ -

РЕЗУЛЬТАТ -

Я знаю, что это ДАЛЕКО не идеал! Поэтому мне было бы полезно послушать вашу критику со стороны. И к слову всё это хостится на GitHub Pages, может кому-то будет полезно!

Вот ссылка на сам сайтик : alekszavg.github.io

Вот ссылка на репозиторий этого сайта : github.com/AleksZavg/alekszavg.github.io

Что вы можете мне посоветовать?

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

Выглядит он примерно так:

Давайте заверстаем нечто подобное =)

HTML

<div class="warning warning--active">
 <div class="warning__text">На этом веб-сайте используются cookie.</div>
 <button class="warning__apply" type="button">OK</button>
 <a class="warning__read" href="https://ru.wikipedia.org/wiki/Cookie">Читать полностью</a>
</div>

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

Основной CSS

.warning {
 position: fixed;
 bottom: 0;
 left: 0;
 display: none;
 width: 100%;
}

.warning--active {
 display: flex;
}

Позиционируем плашку в нижний левый угол и растягиваем ее по ширине.

JavaScript

В нашем скрипте нам необходимо:

— Убедиться, что блок есть — иначе остановить работу;

— Найти блок и кнопку подтверждения;

— Навесить на кнопку «Слушатель»;

— При клике на кнопку удалить класс warning--active с блока, тем самым скрыв его;

— Сохранить куки, которые будут говорить нам о том, что пользователь нажал на кнопку.

let container;
let apply;

const init = () => {
 if (!who()) {
  // останавливаем работу скрипта
  return;
 }

 findElements();
 subscribe();
};

Who

Если блока на странице нет — функция вернет false:

const who = () => document.querySelector(".warning");

findElements()

Находим сам блок и кнопку внутри:

const findElements = () => {
 container = document.querySelector(".warning");
 apply = container.querySelector(".warning__apply");
};

subscribe()

Добавляем кнопке обработчик события «клик»:

const subscribe = () => {
 apply.addEventListener("click", onClick);
};

onClick()

const onClick = (event) => {
 // Отменяем поведение по умолчанию
 event.preventDefault();
 // Прячем блок
 hideContainer();
 // Устанавливаем куки
 setCookie();
};

hideContainer()

const hideContainer = () => {
 container.classList.remove("warning--active");
};

В разделе основной css можно увидеть, что у класса warning задано свойство display: none;, а у warning--active — display: flex;

Удалив warning--active, мы скрываем блок.

setCookie()

const setCookie = () => {
 document.cookie = "warning=true; max-age=2592000; path=/";
};

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

2592000 — количество секунд в месяце

После установки куки предполагается, что блок больше не будет появляться на странице.

Этого можно достичь двумя способами

Через бэк

Просим бэкенд или самостоятельно (если вы и есть бекенд) не выводить блок если заданные вами куки есть у пользователя.

Автор статьи предпочитает способ через бэк =)

Через фронт

Перепишем функцию who(), которая вместо проверки на наличие блока будет искать куки:

const who = () => {
 // если куки есть - вернет true
 return getCookie('warning');
};

Реализацию функции getCookie можно посмотреть на learn.javascript.ru

Из HTML убираем класс warning--active

<div class="warning warning--active">

По умолчанию блок будет скрыт. Покажем его если скрипт не нашел куки:

const showContainer = () => {
 container.classList.add("warning--active");
};

const init = () => {
 if (!who()) {
  return;
 }

 findElements();
 showContainer();
 subscribe();
};

Все остальное без изменений.

Полный скрипт:

let container;
let apply;
const who = () => document.querySelector(".warning");

const findElements = () => {
 container = document.querySelector(".warning");
 apply = container.querySelector(".warning__apply");
};

const hideContainer = () => {
 container.classList.remove("warning--active");
};

const setCookie = () => {
 document.cookie = "warning=true; max-age=2592000; path=/";
};

const onClick = (event) => {
 event.preventDefault();
 hideContainer();
 setCookie();
};

const subscribe = () => {
 apply.addEventListener("click", onClick);
};

const init = () => {
 if (!who()) {
  return;
 }

 findElements();
 subscribe();
};

init();

Или на codepen

Полный скрипт можно сократить до 8 строк

if (document.querySelector(".warning")) {
 const container = document.querySelector(".warning");
 const apply = container.querySelector(".warning__apply");
 apply.addEventListener("click", () => {
  container.classList.remove("warning--active");
  document.cookie = "warning=true; max-age=2592000; path=/";
 });
};

Всем привет. Мне 28 лет.  Сам я из Беларуси. Уже как 3 года я переехал в другой город и работаю на гос. предприятии специалистом. До недавнего времени в целом все устраивало, по в один момент понял, что тем, чем я сейчас занимаюсь не то, чем я хотел бы заниматься всю жизнь. Ко всему этому можно добавить и то, что уже как год мы встречаемся с моей девушкой, у которой в родном городе (откуда я переехал) есть и высокооплачиваемая работа , которая ей нравится и собственная квартира. Поэтому тянуть ее к себе не вариант. А жить по законам покатушек из одного города в другой каждые выездные уже изрядно поднадоедает, тем более в следующем году планирую свадьбу, ну и какая семейная жизнь получится из этого всего. В итоге планирую переезд обратно. Но я к чему. Я снимаю квартиру и трачу деньги на приезды домой каждые выходной, из этого всего от зп выходит немалая сумма. Получается чистыми я получаю столько, сколько у нас средняя зп по городу из которого я уехал. Но так как численность населения небольшая, и кроме продавцов, мерчей, кассиров, грузчиков и пр. в нашем городе в основном больше никто не востребован, то искать работу у себя тоже не вариант. По своей профессии (ветеринарный врач) кроме как гос предприятие никаких предложений нет, да и как я сказал уже, не особо хочется продолжать этим заниматься. Так вот, в голову пришла идея заняться тем, что более менее меня привлекает. Всегда были интересна работа связана с ПК, фото, видео. В итоге начал по осваивать видеомонтаж. Моих девайсов (два ноутбука) для базовых возможностей, конечно, хватает, но затем я задумался, чтобы продолжать далее нужно приобретать хороший ПК и начал задумываться о том, чем можно ещё заниматься, чтобы было актуальным и нравилось. Начал изучать верстку (html+css). Интересно, менее затратно,  и актуально.  И вот буквально вчера я задумался... а как связать свою жизнь с видеомонтажем или версткой , когда у нас в городе с этим беда полная. В голову сразу пришёл фриланс, но в интернете столько всего написано по поводу фриланса видеомонтажа и той же самой html-верстки, что я не могу понять. Реально ли на этом зарабатывать? Я понимаю, что все зависит дополнительно от многих фактов: опыт, знание языка,  какая биржа и пр., но кто что говорит. Один монтажёр говорит, что заказов нет, а монтировать свадьбы и прочие житейские события какого-либо удовольствия не приносит . Верстальщики говорят, чтобы получать хотя бы 35-40 тыс рос. рублей, нужно год поучиться и только потом идти принимать заказы и соответственно развиваться дальше, но я понимаю, что с моим складом ума (никогда не любил всякие вычисления, а в программировании без них никуда) я высоко не прыгну. А заниматься тупо версткой все время , я считаю, что это надеюсь в первую очередь, а ещё это особо не прибыльно, если ты конечно не работаешь в какой-нибудь крупной айти компании. Вот хочу услышать мнения, кто этим занимался или занимается и кто как начинал. Может конкретный план какой-нибудь. Будет интересно почитать.

Для тех, кто не в курсе, Visual Studio Code – это бесплатный и кроссплатформенный текстовый редактор, созданный компанией Microsoft. Он достаточно быстро стал «народным любимцем», ввиду его высокой производительности и обильного функционала.

1. Live Server

По умолчанию, Visual Studio Code не предусматривает возможности открывать файл в любом выбранном браузере. Данное расширение не только добавляет функцию Открыть в браузере по умолчанию, но также позволяет открывать файлы в любом имеющемся у вас браузере.

2. Quokka

Quokka – это утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода. Она выдает вам результаты выполнения функций и посчитанные значения переменных. Расширение легко настроить, и оно запускается из того же ящика, что и JSX или Typescript проекты.

3.Color Info

Небольшой плагин, который даёт вам возможность получать краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как этот цвет выглядит, а также получить всю информацию о трансляции данного цвета в разные форматы (hex, rgb, hsl и cmyk).

4. CSS Peek

С этим плагином вы можете отслеживать определения CSS классов и id таблиц стилей. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией Перейти к определению или Подсмотреть определение.

5. HTML Boilerplate

Это расширение упрощает работу с HTML файлами, избавляя вас от необходимости прописывать теги head и body вручную. Просто наберите в пустом файле html, нажмите на Tab, и VS Code сам сгенерирует шаблон вашего документа.

P.s Если тебе IT тематика, и ты хочешь больше контента на тему IT то можешь подписаться на Telegram канал: t.me/AlphaCodeJS