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

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

Archive for the ‘Кодерство’ Category

Упс, я зламав сайт ЦРУ

with 5 comments

Точніше вони самі здається дев конфіг на прод залили. Але таке зі мною трапляється рідше ніж я переглядаю фільми про Джейсона Борна, тому зробив скріншот на пам’ять:
Прочитати решту цього запису »

Advertisements

Written by bunyk

Серпень 3, 2016 at 23:54

Оприлюднено в Нещоденник, Павутина

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 3 comments

Ну а шо, в мене тепер купа досвіду в викладанні, а попит є. То чому б ні? Першим 10-тьом учасникам – участь безкоштовна. 😉 А далі буде видно скільки я осилю. Може раз на тиждень, поки не прийде пора відпусток літом?

Прем’єра в четвер, 17-го березня, онлайн, в Google Hangouts. Приєднатись можна за посиланням: https://plus.google.com/events/cd18to4v9bob2p94ume6fb7qih8

Курс розглядатиме всі аспекти, починаючи від верстання статичних сторінок (що я погано вмію 🙂 ), і контролю версій, до NoSQL баз даних (бо SQL я погано вмію 🙂 ), і того що таке REST API. Ну, коротше кажучи, будемо розбиратись разом. Але почнемо з простого – що таке Git, Github, HTML і як помістити останній на Github pages.
Прочитати решту цього запису »

Written by bunyk

Березень 16, 2016 at 01:45

Оприлюднено в Кодерство, Нещоденник

Tagged with ,

Як написати свій букмарклет?

with 22 comments

Букмарклет (bookmark) – це слово створене поєднанням слів bookmark (закладка) і applet (application (застосунок) + зменшувальний суфікс -let). Таким чином правильним перекладом bookmarklet було б “закластуночок” (чи “застокладочка”), але ви цього краще не кажіть Юрку Зеленому. Але я відхиляюсь. Отож, букмарклет, це маленька програма що міститься в закладці.

Як її туди помістили? Ну, виявляється браузери крім протоколів http, ftp, ітп, розуміють такий протокол як javascript. І коли отримують посилання з цим протоколом, при кліку по ньому не змінюють сторінку, а виконують його href як код JavaScript. Щоб побачити приклад простого букмарклету, створіть документ bookmarklet.htm, і помістіть в нього такий код:

<html>
<head><meta charset="utf-8" /></head>
<body>
<a href="javascript:
    alert('Привіт!')
">Мій букмарклет</a>
</body>
</html>

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

Written by bunyk

Березень 10, 2016 at 14:31

Логуючий фільтр для Angular expression

with one comment

Вирази в Angular (те що в фігурних дужках і ngBind) – не зовсім те що Javascript. Так каже документація.

Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope object.

А тому ми не можемо там використати console.log. Але можемо написати наприклад такі фільтри:

    angular
        .module('starter')
        .filter('log', function() {
            // do not change value, but log it in console
            return function(input) {
                console.log(input);
                return input;
            };
        })
        .filter('justlog', function() {
            // do not render value but log it in console
            return function(input) {
                console.log(input);
                return '';
            };
        });

Хоча напевне існує якийсь правильніший, вже вбудований спосіб зневадження в Angular. 🙂

Written by bunyk

Лютий 25, 2016 at 15:52

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

Tagged with ,

Вступ в AngularJS (1)

with 3 comments

Я почав писати цей конспект від початку 2015-го, за цей час вийшов AngularJS 2, напевне варто переписати. Хоча другий Angular написаний на TypeScript, тому він напевне вже не JS. Або вивчити React і написати конспект для нього. Вибір безмежний. 🙂

Написано на основі шикарного курсу від Code School. Просто щоб не передивлятись кожного разу перед тим як знову засвербить щось написати для фронт-енду.

Angular.js дозволяє писати шаблони прямо в HTML, розширюючи його своїми директивами, а потім автоматично заповнюючи даними.

Директива – це маркер (атрибут тегу) чи тег HTML що каже Angular-у запустити якийсь JavaScript код.

Єдиний файл що потрібен для початку роботи – angular.js.

Модулі

Код в Angular.js поміщається в модулі. Модулі містять код і описують залежності.

Щоб створити модуль пишемо:

var app = angular.module('store', []);

Перший аргумент – назва модуля, другий – список залежностей (якщо без залежностей – то порожній).

Тоді в html пишемо:

<html ng-app="store">

І це запустить наш модуль коли документ завантажиться.

І хоча наш модуль нічого не робить, але його включення вже допомагає розглядати код html який ми пишемо як директиви Angular.

Після чого можна писати на сторінці вирази. Як от

<p>2 + 2 = {{2 + 2}}</p>

Контролери

Щоб передати дані з JS в HTML, потрібно використати контролер:

var gem = {
    name: 'Dodecahedron',
    price: 10,
};

app.controller('StoreController', function() {
    this.product = gem;
});

Важливо щоб контролери називались КемелКейсом і останнім словом завжди було Controller.

Далі, в html, пишемо

<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
</div>

store – аліас який ми описали і що використовується всередині виразів. Доступний лише всередині елементу для якого описаний контролер.

Директиви

ng-show – покаже елемент лише коли значення виразу істинне.

<div ng-controller="StoreController as store">
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>

ng-hide – навпаки, сховає елемент коли значення істинне.

ng-repeat – повторить елемент ітеруючи по якомусь списку.

ng-click – виконає код написаний всередині значення директиви при кліку по ньому.
ng-init – виконає код написаний всередині значення директиви при відображенні сторінки. Не користуйтесь ним, покладіть код який хочете покласти туди, всередину контролера.

<div ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<button ng-show="product.canPurchase">Add to Cart</button>
</div>
</div>

ng-src – директива що встановлює значення атрибуту src в тегу на зразок img. Тому що встановлення його значення через <img src="{{value}}">, призведе, перед тим як спрацює Angular, до спроби браузера завантажити файл “{{value}}“, і помилки 404. А цього ми не хочемо.

ng-class="{ 'class1': condition1, class2: condition2 }" – дозволяє додавати і забирати класи з елемента залежно від значення виразів умов.

Фільтри

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

<p>2 + 2 = {{вираз|фільтр:опції}}</p>

<!-- або так: -->
<li ng-repeat="product in store.products | limitTo:3 | orderBy:'-price'">

Форми

Директива ng-model прив’язує значення елемента форми до моделі (атрибута контролера). Вони оновлюються автоматично.

Щоб якийсь код виконувався коли форма відправляється, ми додаємо цей код в значення директиви ng-submit. І дописуємо директиву novalidate, щоб вимкнути стандартну валідацію HTML.

<form name="reviewForm"
      ng-controller="ReviewController as reviewCtrl"
      ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" 
      novalidate
>

Angular автоматично додає до полів класи – ng-pristine – до поля до якого ще не додавали код, ng-dirty – до зміненого поля, і ng-invalid – до поля що не проходить валідацію, та ng-valid – до того що проходить.

Поля валідуються по атрибуту type. Може бути наприклад email, url, number (додатково є атрибути min, max).

Далі в курсі (ось слайди) ще йдеться про те як

  • включати розмітку з інших файлів
  • писати власні директиви і власні html елементи
  • завантажувати дані через XHR

Щоправда, цього не треба щоб написати застосунок який я хочу написати. Але Про нього пізніше, бо github лежить, і вже трохи пізно. 🙂

Written by bunyk

Лютий 18, 2016 at 00:02

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

Tagged with