de Madhav Bahl

Cum să blocați site-urile web neproductive și să vă sporiți productivitatea utilizând JavaScript

Cum sa blocati site urile web neproductive si sa va cresteti
E timpul să te fac să fii 🙂

V-ați săturat să vă pierdeți timpul pe diverse site-uri neproductive? De ce nu creați un script care vă va ajuta să limitați timpul petrecut pe aceste site-uri web?

Sună familiar …?

Încă o zi, parcurgându-mă Rețele sociale hrănire și vizionarea memelor. Am constatat că trecuseră 4 ore de când stăteam în aceeași poziție și „Nu făceam nimic”. L-am urât! A trebuit să fac ceva în legătură cu asta. Mi-a venit în minte, de ce să nu fac un script care să mă ajute să limitez timpul petrecut pe aceste site-uri web?

Cum sa blocati site urile web neproductive si sa va cresteti
Opriți derularea feedului și faceți ceva xD (sursă: https://www.writerswrite.com/writingmemes/)

Ce zici de realizarea unui script care ar bloca toate aceste site-uri web? Scriptul vă permite să le utilizați numai la anumite ore specifice ale zilei. Sună legitim! S-o facem. 🙂

Da, știu că există multe metode ușoare de blocare a oricărui site web. Doar descărcați un plugin Chrome sau, mai degrabă, orice software care ar face acest lucru pentru noi. Ei bine, da, destul de ușor! Dar haide, suntem dezvoltatori, nu facem aceste lucruri! Când avem nevoie de ceva, dezvoltăm scripturi pentru acesta, mai degrabă decât să folosim un truc aleatoriu pentru a face treaba … nu ?!

Dacă doriți să descărcați scriptul direct, puteți face acest lucru de la aici.

Să începem!

Spre deosebire de celelalte articole din tutorialul meu, nu veți avea nevoie de nicio structură de directoare sau de un mediu de dezvoltare configurat pentru acest proiect. Tot ce aveți nevoie este NodeJS instalat pe sistemul dvs. și un editor de text bun. Puteți crea acest script folosind orice limbă la alegere, care acceptă gestionarea fișierelor. Am ales JavaScript pentru că îmi place!

1611496570 95 Cum sa blocati site urile web neproductive si sa va cresteti
❤️ JavaScript! (sursă: https://brendaneich.com/2015/06/from-asm-js-to-webassembly/)

Ideea de fundal

Ideea din spatele acestui blocant pe care o vom face este foarte simplă. Există un fișier numit hosts. Putem adăuga adresa URL a oricărui site web și adresa URL a unui site web către care dorim să redirecționăm fostul site web. Ceva de genul:

127.0.0.1    www.facebook.com

Acum, ori de câte ori încercăm să deschidem Facebook, acesta va fi redirecționat automat la 127.0.0.1 (localhost). Acest lucru va bloca indirect site-ul web.

Fișierul hosts despre care vorbesc este prezent C:WindowsSystem32driversetchosts dacă utilizați Windows. Dacă sunteți utilizator Mac sau Linux, locația fișierului respectiv este: /etc/hosts.

Să modificăm fișierul …

Înainte de a începe codul, să încercăm să modificăm fișierul și să vedem dacă funcționează. Rețineți că numai utilizatorul cu drepturi de administrator poate modifica acest fișier. Dacă sunteți pe Windows, puteți să faceți clic dreapta pe acel fișier și să îl deschideți ca administrator. Dacă utilizați Linux, puteți utiliza comanda sudo. Folosesc nano pentru a deschide fișierul, puteți folosi orice alt editor la alegere.

sudo nano /etc/hosts

După ce tastați această comandă, vă va cere să introduceți parola. Puteți să îl introduceți și să vă deschideți fișierul. Să încercăm 🙂

Cum sa blocati site urile web neproductive si sa va cresteti

Bine, așa că am adăugat site-ul nostru „să fie blocat” în fișierul gazdelor, acum să verificăm dacă a funcționat sau nu. Pentru a o verifica, accesați orice browser web și accesați site-ul web respectiv.

1611496570 483 Cum sa blocati site urile web neproductive si sa va cresteti
Yippee! A funcționat: 3

Acum, că am verificat dacă conceptul nostru este corect, să codăm blocatorul.

1. Configurarea variabilelor

După cum am spus mai devreme, nu este nevoie de o structurare imensă a directorului sau de configurarea unui mediu de dezvoltare. Tot ce trebuie să faceți este să creați un fișier JavaScript (de exemplu, blocker.js) și începeți codarea.

În primul rând, trebuie să importăm fs (sistem de fișiere) Modul nod prin care vom efectua modificări la fișierul gazdelor noastre. Puteți citi documentația completă a fs aici.

const fs = require('fs');

Acum, va trebui să inițializăm 3 variabile:

  1. filePath – Pentru a stoca calea fișierului hosts
  2. redirectPath – Pentru calea de redirecționare (aici, localhost)
  3. site-uri web – Array de site-uri web pentru a fi blocate

De asemenea, vom crea o variabilă numită delay. Această variabilă va stoca valoarea duratei de timp (în milisecunde) după care scriptul nostru se va repeta. Practic, ideea este să mențineți scriptul să ruleze tot timpul pentru a verifica dacă este momentul să blocați / deblocați site-urile web. Pentru a-l menține în funcțiune vom folosi setInterval() metodă în JavaScript. Putem folosi și while (true) {} pentru a face o buclă infinită.

Chiar acum păstrăm timpul după care funcția se repetă constantă (să zicem, 10 secunde). Dar acest script poate fi mai inteligent setând valoarea întârzierii egală cu diferența de timp dintre ora curentă și ora la care starea scriptului (blocare / deblocare) trebuie modificată. A face acest lucru este mult mai ușor decât ceea ce simți – așa că vreau ca tu (cititorul) să o faci singur și să-mi arunci un Poștă, Mi-ar plăcea să aud de la tine?

const filePath = "/etc/hosts";const redirectPath = "127.0.0.1";let websites = [ "www.someRandomWebsite.com","anotherWebsite.com" ];let delay = 10000;

Notă* Dacă sunteți un utilizator Windows, stocați-l în variabila filePath: C: Windows System32 drivers etc hosts

2. Funcția de blocare

Vom face acum o funcție de blocare. Îl numim din metoda setInterval pentru al menține în funcțiune după fiecare interval de timp dat.

let blocker = () => {    ....    ....};

Acum vom completa codul din funcția noastră de blocare.

Blocator interior: Obținerea orei curente

Mai întâi de toate, trebuie să obținem ora curentă și apoi să verificăm dacă este momentul să blocăm site-ul sau să-l deblocăm.

let date = new date();let hours = date.getHours();if(hours >= 14 && hours < 18) {    console.log('Time to block websites');    ....    ....} else {    console.log('Time to unblock websites');    ....    ....}

Blocker interior: Inside If – Condiția If este adevărată

Acum trebuie să citim fișierul hosts și să convertim datele preluate în șir ( readFile() funcția va returna datele tampon care trebuie convertite în șir).

După ce am citit fișierul, trebuie să verificăm dacă fiecare site web și calea de redirecționare sunt prezente sau nu în fișierul hosts. Dacă este prezent, îl putem ignora. În caz contrar, trebuie să adăugăm redirectPath websiteURL la el, care va arăta cam așa:

127.0.0.1    www.someRandomWebsite

Pentru a implementa acest lucru, vom folosi o buclă for. Bucla va itera prin fiecare adresă URL din matricea de site-uri web și va verifica dacă există în fișier. Pentru a face acest lucru, vom folosi indexOf() metoda corzilor. Dacă valoarea este mai mare decât zero, adică site-ul web dat este prezent în fișierul hosts, putem pur și simplu să ignorăm. În caz contrar, dacă valoarea nu este mai mare de zero, trebuie să adăugăm redirectPath și adresa URL a site-ului (separate prin spațiu) la fișier.

fs.readFile(filePath, (err, data) => {    fileContents = data.toString();    for(let i=0;i<websites.length;i++) {        let addWebsite = "n" + redirectPath + " " + websites[i];        if (fileContents.indexOf(addWebsite) < 0) {            console.log('Website not present in hosts file');            fs.appendFile(filePath, addWebsite, (err) => {                if (err)  return console.log(err);                console.log('File Updated Successfully');            });        } else {            console.log('Website is present');        }    }});

Blocker interior: Inside Else – Dacă condiția este falsă

Dacă condiția este falsă, trebuie să verificăm dacă site-urile web din listă se află în fișierul hosts. Dacă sunt prezenți, trebuie să le ștergem.

Pentru ștergere, vom folosi un truc simplu. Vom citi fișierul rând cu rând. Creăm un șir gol și verificăm dacă linia curentă conține oricare dintre site-urile web prezente în listă. Dacă da, pur și simplu îl ignorăm. În caz contrar, vom adăuga acea linie la șirul pe care l-am inițializat. După verificarea ultimei linii, vom înlocui pur și simplu conținutul curent al fișierului cu acest șir complet de conținut.

Codul pentru a face acest lucru este foarte ușor. Mai întâi inițializați un șir gol (completeContent). Apoi citiți fișierul rând cu rând. Urmați pașii dați în codul de mai jos. Apoi înlocuiți conținutul fișierului cu variabila completeContent.

// Initialize the empty stringlet completeContent="";
// Read the file line by linefs.readFileSync(filePath)    .toString()    .split()    .forEach((line) => {        ....        ....        ....        // Do the below given procedure to update completeContent });
// Replace the file contents by `completeContent` variablefs.writeFile(filePath, completeContent, (err) => {    if (err) {        return console.log('Error!', err);    }});

Acum că avem acces la fiecare linie, putem verifica dacă această linie conține vreun site web utilizând un steag și o buclă for. Setăm semnalizatorul la 1 (sau adevărat) și apoi rulăm o buclă pentru a itera prin lista de site-uri web. Dacă linia conține site-ul web actual (îl vom verifica folosind string.indexOf(substring) metoda), resetați steagul la 0 și rupeți bucla curentă. În afara buclei verificăm, dacă steagul este 1 (sau adevărat) adăugăm linia curentă în completeContent variabil.

Vă rugăm să rețineți acea dacă steagul este 1, verificăm, de asemenea, dacă linia curentă este ultima linie sau nu. Dacă nu este ultima linie, adăugăm linia curentă în completeContent șir împreună cu a "n" astfel încât următoarea linie să fie adăugată în completeContent dintr-o linie nouă (sau cu o întrerupere de linie). Urmați următorul cod în interiorul forEach () din blocul de cod de mai sus.

let flag = 1;for (let i=0; i<websites.length; i++) {    if (line.indexOf(websites[i]) >= 0) { // line contains website        flag = 0;        break;    }}
if(flag == 1) {    if (line === '')           completeContent += line;    else         completeContent += line + "n";}

3. Rularea codului pentru funcția de blocare

Iată codul pentru funcția de blocare doar în cazul în care ați fost confundat cu codul distribuit în secțiunea 2:

Acum, pentru rularea continuă a acestei funcții, putem alege while (true) {} ca o buclă infinită. În interiorul acestuia putem oferi o anumită întârziere, astfel încât să nu ocupe procesorul continuu.

Sau, o opțiune mai bună este să utilizați setInterval() funcţie. Aceasta continuă să repete funcția de blocare după un anumit interval de timp. Dar, setInterval() va rula pentru prima dată după întârzierea specificată. Prin urmare, va trebui să apelăm funcția de blocare o dată înainte de funcția setInterval.

blocker();setInterval(blocker, delay);

4. Toate gata! Să verificăm scriptul nostru

E timpul să rulăm scriptul nostru. Pentru a rula scriptul, deschideți directorul de lucru actual într-un terminal și tastați următoarea comandă:

sudo node blocker.js

Dacă sunteți utilizator Windows, puteți deschide promptul de comandă ca administrator, accesați directorul proiectului și apoi executați comanda:

node blocker.js

Vă rugăm să rețineți că doar în scopul verificării, blochez facebook.com. Iată testul:

1611496571 607 Cum sa blocati site urile web neproductive si sa va cresteti
Yuss! Am reușit ❤

5. Pasul final …

Pentru Mac și Linux

Puteți programa acest script să ruleze ori de câte ori cineva pornește sistemul folosind crontab. Cron este un programator de joburi bazat pe timp în sistemele de operare de tip Unix. Puteți citi mai multe despre cron aici.

Deci vom adăuga comanda noastră prin care rulăm scriptul (sudo node blocker.js) în tabelul cron. A face acest lucru este foarte simplu: deschideți terminalul folosind ctrl+alt+t, apoi deschideți crontab folosind sudo crontab -e. Această comandă va deschide tabelul cron.

Notă acea noi am folosit sudo crontab, nu crontab. Aceasta ne va permite să modificăm tabelul cron.

După ce îl aveți deschis, adăugați această linie la sfârșit (înlocuiți path-to-script cu calea directorului de proiect):

@reboot node /path-to-script/blocker.js

Asta e! Acest lucru va rula scriptul de fiecare dată când repornirea sistemului.

Pentru Windows

Scriptul poate fi programat să ruleze de fiecare dată când sistemul pornește și în Windows. Aici este un articol foarte bun care spune cum să faceți acest lucru.

Unde să merg de aici?

Ești un entuziast open source? Doriți să contribuiți la acest proiect?
Încep un nou proiect Open Source numit “Controleaza-te” care va fi o aplicație desktop realizată folosind Electron. Caracteristicile vor include:

  • luând date de la utilizatori despre orele în care doresc să blocheze ce site-uri web
  • urmărirea timpului pe care un utilizator îl petrece urmărind site-urile de socializare
  • un cronometru Pomodoro
  • și o aplicație de listă de lucruri cu rapoarte zilnice de progres ale productivității

Verificați repertoriuși adăugați un comentariu „interesat” cu privire la problema la care doriți să lucrați.

Acum, permiteți-mi să vă dau codul complet cu comentarii adecvate care vă vor ajuta să înțelegeți codul:

Cod complet (blocker.js)

Asta e

Ați găsit articolul de ajutor?

Abonați-vă la TheLeanProgrammer să fiu primul care primește notificări de la mine pentru actualizări viitoare.

1611496571 228 Cum sa blocati site urile web neproductive si sa va cresteti

Simțiți-vă liber să mă contactați oricând dacă doriți să discutați ceva: D

Aș fi mai mult decât fericit dacă ne trimiteți feedback sau sugestii sau dacă puneți întrebări. Mai mult, îmi place să-mi fac noi prieteni – așa că trimite-mi un e-mail.

Mulțumesc mult pentru citire până la sfârșit. Puteți să mă contactați dacă aveți nevoie de asistență:
E-mail: madhavbahl10[at]gmail[dot]com
Web: http://madhavbahl.tech/
Github: https://github.com/MadhavBahlMD
LinkedIn: https://www.linkedin.com/in/madhavbahl /