Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

Posts Tagged ‘JavaScript

Кілька рядків коду що підвищують продуктивність в рази

with 4 comments

«Не потоком шумних і галасливих фраз, а тихою, невтомною працею любіть Україну!»

Це клікбейтний заголовок, але тут ми дійсно за пару хвилин напишемо розширення до браузера, щось на зразок resquetime тільки просте як одноклітинні. Назвемо його наприклад higher power, бо воно працюватиме як підстраховка для нашої власної сили волі.

Створюємо директорію проекту

bunyk@bunyk-thinkpad:~/projects$ mkdir higher_power
bunyk@bunyk-thinkpad:~/projects$ cd higher_power/

А в ній файл manifest.json з наступним вмістом:

{
"manifest_version": 2,
"name": "Higher power",
"version": "1.0",

"description": "Helps you to avoid temptations",

"icons": {
},

"content_scripts": [
{
"matches": ["*://*.facebook.com/*"],
"js": ["power.js"],
"run_at": "document_start"
}
]
}

Версії і назва – обов’язкові поля, опис та icons – ні, але корисні, бо відображатиметься в списку додатків, а content_scripts описує який код завантажуавти при відкриванні певної адреси.

“run_at” каже запускати код ще до того як сторінка завантажиться, без цієї опції браузер пару секунд рендерить стрічку фейсбука, а тоді вже наш аддон починає щось робити.

Створимо цей код, в згаданому в маніфесті файлі power.js, нариклад так:

window.location.href="https://bunyk.wordpress.com/";

Замість bunyk.wordpress.com можна вписати https://www.udacity.com/, https://www.edx.org/, https://github.com/ чи щось таке.

Тепер відкриваємо в Firefox сторінку “about:debugging” (для інших браузерів самі з’ясуйте що і напишіть в коментарі будь ласка), натискаємо кнопку “Load Temporary Add-on…”, вибираємо будь-який файл з директорії нашого проекту, і насолоджуємось результатом.

Посилання

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

Written by bunyk

30 Березня, 2019 at 00:38

Як швидко розпочати писати SPA на AngularJS (1)

leave a comment »

Тому що чим швидше ми зробимо щось що зможемо помацати поклацати – тим менше сили волі буде треба для підтримки мотивації. (Так, я знаю що писати таку публікацію два роки – то задовго, але краще пізно ніж ніколи. Сподіваюсь що хоча б тому хто буде підтримувати проекти на Angular 1 (а я не впевнений що їх багато мігрує на новіші версії) це знадобиться).

Варто мати встановленим NodeJS. Він має менеджер пакетів npm. І з його допомогою ми скачаємо всі необхідні бібліотеки. Ми ж перестали шукати софт на сайтах ще коли почали користуватись менеджерами пакетів в Linux, те ж саме ми робимо коли нам треба бібліотека для python, то чим розробка для браузерів гірша?

Тут я був написав кілька абзаців про те як за допомогою npm поставити bower (інший менеджер пакетів), але це трохи збочення, бо npm нас може й сам задовольнити. Тому поки що обійдемось. Let the hacking begin.

Створюємо порожню директорію для нашого проекту, і в ній виконуємо:

npm init

Прочитати решту цього запису »

Written by bunyk

1 Червня, 2017 at 14:01

Опубліковано в Кодерство, Павутина

Tagged with ,

Конспект Vue.js

with 6 comments

Не варто припиняти вчити щось нове, правда? І писати – надійніший метод запам’ятати ніж просто читати, тому спробую повернути блог до життя.

CDN

Найпростіший спосіб яким ви можете почати використовувати Vue – це завантажити його на свою сторінку з CDN: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js

Hello world!

Якщо у нас є такий HTML шаблон:

<div id="app">
  {{title}}
</div>

То мінімальний JavaScript який дозволяє його заповнити виглядає так:

var data = { // Модель - це просто будь-який об'єкт
    title: "Hello world!"
};
new Vue({
  el: "#app", // вибрати елемент за id
  data: data  // приєднати модель
});

Тепер, якщо в консолі браузера написати:

data.title = 'It works!'

То текст на сторінці зміниться автоматично. (І не треба ніякої мороки з дайджест-циклом через angular.element(e).scope().$apply() (Ангуляр-страждання, забийте)).

От так в’ю оновлюється коли змінюється модель. Як користувач може змінити модель?
Прочитати решту цього запису »

Written by bunyk

26 Квітня, 2017 at 22:37

Опубліковано в Кодерство, Павутина

Tagged with

Зміни моделі, події і чистота функцій в Elm

with one comment

Ця публікація містить ретельно закоментовану альтернативу TodoMVC на Elm. Правда щоб зрозуміти все одно спершу варто прочитати приклади Elm на вікіпедії і основи архітектури Elm програм (вона подібна до Redux якщо ви знаєте що це слово означає (бо я не знаю)).

Written by bunyk

2 Листопада, 2016 at 01:34

Опубліковано в Кодерство, Павутина

Tagged with ,

Javascript, replace *&^%$#@!

with one comment

Ви знаєте як замінити в тексті одну послідовність символів іншою? Наприклад всі прогалики – на символ підкреслювання. Метод replace()? Вгадали:

> 'this is a test'.replace(' ', '_')
'this_is a test'

Ой, а чого воно лише одну заміну зробило? Бо таке воно ліниве падло. Хочете глобальної заміни – передайте шаблон регулярного виразу який співставляється глобально:

> 'this is a test'.replace(/ /g, '_')
'this_is_a_test'

Працює! А тепер уявімо що нам треба замінити наприклад не прогалик а трубу:

> 'a|b|c|d'.replace(/|/g, '_')
'_a_|_b_|_c_|_d_'

Ну так, треба не забувати що деякі символи в регулярних виразах мають спеціальне значення і їх треба екранувати:

> 'a|b|c|d'.replace(/\|/g, '_')
'a_b_c_d'

А якщо раптом ви не хочете нічого знати про ці регулярні вирази (або ваш користувач не хоче), то є таки спосіб глобальної заміни підрядка. Знаєте який? StackOverflow підкаже:

> 'a|b|c|d'.split('|').join('_')
'a_b_c_d'

І я не знаю що на це сказати. Піду краще посплю.

Written by bunyk

24 Липня, 2016 at 23:27

Опубліковано в Кодерство

Tagged with

Проста схема перетворення інтерактивної процедурної програми з goto в функціональну рекурсивну

with 3 comments

Власне вся передмова помістилась в заголовок. Хоча може для цього “паттерну” є коротша назва.

Існує клас інтерактивних програм які очікують вводу користувача, потім залежно від того вводу щось роблять, потім знову очікують вводу і так далі. Наприклад якась така програма “вгадай число”:
Прочитати решту цього запису »

Written by bunyk

10 Квітня, 2016 at 13:29

Опубліковано в Кодерство

Tagged with , , ,

Знову повертаючись до університету

with 6 comments

В мене таке відчуття ніби я в універі. Місце де я сплю – вузьке і біля стіни. Біля ліжка – захаращений стіл. Мій сусід поїхав кудись на вихідні, а я сиджу, залипаю в комп’ютер і скоро зустрічатиму світанок. 🙂

Сиджу, ковбашу код який мав би допомагати мені виправляти помилки форматування статтей вікіпедії:
Прочитати решту цього запису »

Written by bunyk

13 Березня, 2016 at 04:55