Məzmun

1. Evklid teoremi
2. Sweep Alqoritması (Evklid)
3. Voronoi Diaqramı
4. Delaunay çoxbucaqlısı
5. Angle-Optimal çoxbucaqlısı
6. Düzgün çoxbucaqlılar
7. Randomized Incremental Construction
8. Orthogonal range searching
9. 1D Range Searching
10. KD Trees
11. Queries in KD-Trees
12. Range Trees

Cəbr-dən başladığımız öyrənməli olduğumuz fənnlərin siyahısına daxil olan Həndəsəyə baxacıq.

Proqramlaşdırma sahəsinə hazırlaşan az yaşlılar üçün məktəb vaxtında lazım olan yol xəritəsi, bilməli olduqlarınız, iş imkanları və s. mövzular Programming başlığı altında toplanacaqdır.

1. Evklid teoremi

2. Sweep Alqoritması (Evklid)

3. Voronoi Diaqramı

4.Delaunay çoxbucaqlısı

5.Angle-Optimal çoxbucaqlısı

6. Düzgün çoxbucaqlılar

7.Randomized Incremental Construction

8.Orthogonal range searching

9. 1D Range Searching

10.KD Trees

11.Queries in KD-Trees

12. Range Trees

Nail Məmmədov — BUTA.İO (founder)

Əlaqə üçün : 070 282 82 01

Elektron ünvan : nailmammadov@yahoo.com

Programming | Həndəsə (Geometry) was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Məzmun

1. Natural ədədlər
2. Çoxluqlar
3. Məntiqi ardıcıllıqlar
4. Rekursiv funksiyalar
5. Sistem tənliklər
6. Əlaqə məntiqi
7. Şəkil ədəd məntiqi
8. Peano aksiomları
9. Ədədi silsilə, həndəsi silsilə
10. Funksiya. Koordinatlar. Vektor (toplanması,çıxılması və s.)

Proqramlaşdırma sahəsinə hazırlaşan az yaşlılar üçün məktəb vaxtında lazım olan yol xəritəsi, bilməli olduqlarınız, iş imkanları və s. mövzular Programming başlığı altında toplanacaqdır.

İlk öncə ardıcıl olaraq Cəbr-dən öyrənəcəklərimizin siyahısına baxaq:

1. Natural ədədlər

2.Çoxluqlar

3. Məntiqi ardıcıllıqlar.

Nümunə-1

Bütün insanlar fanidir.

Sokrat bir insandır.

Nəticə olaraq, Sokratda fanidir.

Nümunə-2

4.Rekursiv Funksiyalar (Fibonacci ədədləri)

5. Sistem tənlikləri

6. Əlaqə məntiqi

Nümunə : və, və ya, əgər və s. məntiqinin qurulması

7. Şəkil ədəd məntiqi. Fiqurların arcıdıllığı

8. Peano aksiomları

9. Ədədi silsilə, Həndəsi silsilə, Ədəd ardıcıllığı

10. Funksiya. Koordinatlar. Vektor (toplanması,çıxılması və s.)

Nail Məmmədov — BUTA.İO (founder)

Əlaqə üçün : 070 282 82 01

Elektron ünvan : nailmammadov@yahoo.com

Programming | Cəbr (Algebra) was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Məzmun

1. Kriptoqrafiya
2. Simmetrik
3. Asimmetrik
4. Diffie-Hellman açar mübadiləsi nədir?
5. Lakin əvvəlcədən alıcınızla bir kod təşkil edə bilmirsinizsə nə olur?
6. Açarı əvvəlcədən bölüşmək fürsətiniz olmadıqda, başqası ilə necə təhlükəsiz məlumat mübadiləsi edə bilərsiniz?
7. Diffie-Hellman açar mübadiləsi necə işləyir?

Kriptoqrafiya

Kriptoqrafiya şifrələmə üsullarından istifadə edərək, oxunan mətnləri şifrələnmiş formaya çevirmək və şəbəkədə əlaqə qurarkən məlumatları qorumaqdır. Açarlar datanı şifrələmək və deşifrə etmək üçün istifadə olunur. Şifrələmə üsullarını iki növə bölə bilərik:

1. Simmetrik

2. Asimmetrik

Simmetrik kriptoqrafiya

Bu kriptoqrafiya növündə, datanı şifrələmək və deşifrə etmək üçün eyni açardan istifadə olunur. Məlumatı göndərən datanı şifrələmək üçün paylaşılan açardan (shared key) istifadə edir. Həmçinin məlumatı alan da datanı deşifrə etmək üçün paylaşılan eyni açardan istifadə edir.

Asimmetrik kriptoqrafiya

Bu növdə isə, bütün proses zamanı iki açardan, şəxsi açar və ümumi açardan (public key) istifadə olunur. Ümumi açar datanı şifrələmək, şəxsi açar isə datanı deşifrə, yəni şifrəni açmaq üçün istifadə olunur.

Diffie-Hellman açar mübadiləsi nədir?

Diffie-Hellman açar mübadiləsi, etibarsız bir kanal üzərindəki açarların təhlükəsiz şəkildə inkişaf etdirilməsi və dəyişdirilməsinin ilk geniş yayılmış üsulu idi. Diffie-Hellman açar mübadiləsi kriptoqrafiya dünyasında mühüm bir mərhələdir və bu gün də tez-tez istifadə edilir. Bir nümunə verək; gəlin çox gizli bir casus olduğunuzu və qərargahınıza bəzi vacib məlumatlar göndərməyiniz lazım olduğunu fərz edək. Düşmənlərinizin məlumatları almasına necə mane olardınız?

Ən ümumi həll məlumatları şifrələmək olacaq. Deyək ki, siz pis bir casusunuz və qərargahınızla birlikdə mesajlarınızı kodlaşdırmaq üçün zəif şifrələmə metodundan istifadə etməyə qərar verdiniz. Bu kodda hər “a” “b”, hər “b” “c”, hər “c” “d” və sonda “z” “a” olur. Bu şifrələmə metodu altında, “Let’s get dinner”, “Mfu’t hfu ejoofs” olur. Şükürlər olsun ki, düşmənləriniz də sizin kimi bacarıqsızdırlar və mesajın məzmununa girmələrini əngəlləyən belə sadə bir kodu qıra bilmirlər.

Lakin əvvəlcədən alıcınızla bir kod təşkil edə bilmirsinizsə nə olur?

Fərz edək ki, əvvəllər heç görmədiyiniz müttəfiq millətin bir casusu ilə əlaqə qurmaq istəyirsiniz. Onlarla danışacağınız etibarlı kanalınız yoxdur. Mesajınızı şifrələməsəniz, onu görən hər hansı bir düşmən məzmunu oxuya biləcək. Müttəfiqə kodu söyləmədən şifrələsəniz, düşmən onu oxuya bilməyəcək, eyni zamanda müttəfiq də oxuya bilməyəcək.

Bu məsələ 1970-ci illərə qədər kriptoqrafiyanın ən böyük müəmmalarından biri idi:

Açarı əvvəlcədən bölüşmək fürsətiniz olmadıqda, başqası ilə necə təhlükəsiz məlumat mübadiləsi edə bilərsiniz?

Diffie-Hellman açar mübadiləsi bu problemi həll etmək üçün ilk istifadə olunan mexanizm idi. Alqoritm əvvəllər heç tanış olmayanlara, hətta düşmənlərin izlədiyi güvənsiz kanalda da təhlükəsiz bir şəkildə bir açar yaratmağa və məlumatların mübadiləsinə imkan verir.

Diffie-Hellman açar mübadiləsi necə işləyir?

Diffie-Hellman açar mübadiləsi mürəkkəbdir və çətin ola bilər. Bu alqoritim çoxumuzun orta məktəbədən qorxduğu riyaziyyatdan istifadə edir. Bu prosesi başa düşməyi bir az asanlaşdırmaq üçün, bir bənzətmə ilə izah etməyə başlayacağıq. Diffie-Hellman sxemi üçün ən yaxşı bənzətmə iki nəfərin boya qarışdırdığını düşünməkdir. Tutaq ki, onların adları Alice və Bobdur.

Hər ikisi başlamaq üçün təsadüfi bir rəng barədə razılığa gəlirlər. Fərz edək ki, birbirlərinə mesaj göndərirlər və ümumi rəng kimi sarını seçirlər, aşağıdakı diaqramda olduğu kimi.

Faydalı mənbələr

• Diffie-Hellman anahtar değişimi - Vikipedi
• Implementation of Diffie-Hellman Algorithm - GeeksforGeeks

BUTA.İO komandasının yazarı : Məmmədyar Cavadlı

CyberSecurity | Diffie-Hellman was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Məzmun

1. Javascript
2. Javascriptin üstünlükləri nədir?
3. Javascript kitabxanaları
4. Javascript frameworkləri
5. Faydalı mənbələr

Javascript dünyada ən məşhur proqramlaşdırma dillərindən biridir. 1995-ci ildə yaradılmışdır və bu günə kimi, uzun inkişaf yolu keçmişdir. Javascriptin əsas məqsədi, saytı daha interaktiv etməkdir. Javascript ilə saytımızda bu funksiyaları edə bilərik:

Animasiyalar, kliklənəbilən buttonlar,popup menular və s.

Javascriptin üstünlükləri nədir?

- Digər proqramlaşdırma dillərinə nisbətən öyrənməsi daha rahatdır.

- Xətaları tapmaq və həll etmək daha asandır.

- Web səhifələri daha interaktiv edər və izləyicilərin sayta marağını artırar.Və s.

JS kodları ilə çalışmağa necə başlaya bilərik?

HTML kodları yazılan səhifədə, script teqlərini əlavə edib başlaya bilərik.

<script type=”text/javascript”>

Your Javascript Codes

</script>

Javascriptin kitabxanaları və framework-ləri vardır. Bunların məqsədi javascripti daha da, təkmilləşdirmək və interaktiv saytlar yaratmaqdır.

Javascript-in kitabxanaları:

-React

-jQuery və s

Javascriptin framework-ləri:

-Angular

-Veu.js

-Mocha

-Aurelia və s.

Google-da axtarış etməklə JS-nın digər kitabxanalarını və frameworklərini tapa bilərsiniz.

Javascriptin digər növü ECMAscript adlanır. Qısaca ES-də deyilir. Fərqli VEB brauzerlərdə Veb səhifələrin qarşılıqlı fəaliyyətini təmin etmək üçün nəzərdə tutulmuş bir Javascript standartıdır.

Faydalı mənbələr

Googlede axtarış etməklə JS ilə daha yaxşı tanış ola bilərsiniz. Javascripti öyrənmək üçün mənbələr:

• W3Schools.com
• Learn JavaScript

BUTA.İO komandasının yazarı : Toğrul Mirzayev

Javascript | Giriş was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

AMASS — Automated Attack Surface Mapping (Avtomatlaşdırılmış hücum yeri/ərazisi/obyekti xəritələndirməsi)

İstər hücum edin, istər müdafiyə olunun, hədəfi tam anladığınız zaman uğur qazanmaq şansınız daha yüksəkdir.

Məzmun

1. Nəyə görə amass ?

2. Quraşdırma prosesi

3. Məlumatları bir yerə toplamaq (intelligence)

4. Enumeration (Burada istifadəçi adları, maşın (machine) adları, şəbəkə resursları kimi məlumatları bir araya gətirmək nəzərdə tutulmuşdur)

5. Vizualizasiya (görüntüləmə)

6. Yeni domenlər CİDR ilə

7. Yeni domenlər ASN ilə

8. Subdomenlərin tapılması

9. Yekun

Diqqət!!! Bu məqalədə istifadə olunan mənbələr hal hazırda aktual deyil. Əsas məqsəd bir çox şirkət tərəfindən müdafiyə məqsədi üçün istifadə olunan bu tool ilə sizi tanış etməkdir.

Amass Hədəflərin hücum obyektində çox yönümlü məlumatlar toplamaq üçün dizayn edilmiş kibertəhlükəsizlik alətidir (tool).

1. Nəyə görə Amass? — Hazır bir çox məqsədə xidmət edən onlarla tool var. Əlbəttə bu toolların içində işimizə yarayanlarını seçmək vaxt alır. Bəziləri bizim axtardığımız məlumatları göstərdiyi halda bir çox toollar eyni məlumatları ya əksik ya da yarımçıq olaraq çıxardır. Hətta bəzən yanlış məlumatlar göstərən toollar görə bilərsiniz. Buna, əsasən “Sosial Mühəndislik” toolları aiddir. Aşağıda bir neçə əsas seçimləri haqqında qısa məlumat verəcəm:

· DNS — Basic (asan) enumeration, Brute force (upon request), Reverse domain sweeping, Subdomain name alterations/permutations (Subdomen adları dəyişikliklər/permutasiyalar)

· Scraping (Qazmaq) — Ask, Baidu, Bing, CommonCrawl, DNSDumpster, DNSTable, Exalead, FindSubdomains, Google, HackerOne, IPv4Info, ViewDNS, Yahoo, Netcraft, PTRArchive

· Certificates (sertifikatlar) — Active pulls, Censys, CertDB, CertSpotter, Crtsh Entrust

· API: AlienVault, BinaryEdge, BufferOver, CIRCL, DNSDB, HackerTarget, Mnemonic, NetworksDB, PassiveTotal, RADb, Robtex, SecurityTrails, ShadowServer, Shodan, Sublist3rAPI, TeamCymru, ThreatCrowd, Twitter, Umbrella, URLScan, VirusTotal

· Web Archives: ArchiveIt, ArchiveToday, Arquivo, LoCArchive, OpenUKArchive, UKGovArchive, Wayback

Hər bir tool kifayət qədər böyüdükdən sonra özünün developer komandası yaranır. Bu da həmin toolların uzun müddət aktual qalmasına səbəb olur.

Quraşdırma prosesi:

Go

go get -u http://github.com/OWASP/Amass/…

amass enum –list

Docker

docker build -t amass https://github.com/OWASP/Amass.git

docker run -v ~/amass:/amass/

amass enum –list

Homebrew/macOS

brew tap caffix/amass

brew install amass

amass enum –list

Snap

sudo snap install amass

amass enum –list

Intelligience

Əgər adekvat tədbirlər görmürsənsə gələcəkdə gözlənilməz “surprizlərlə” qarşılaşa bilərsən.

Əgər test mühitiniz hazırdırsa (server test side) subcommandalardan başlaya bilərsiniz. İntel subcommandası altında bəyəndiyim opsiyanı sizə göstərirəm:

· İntel: -addr (IP range), -asn (by ASN) , -org (bu herflerin kecdiyi organizsiyaları tapmaq), -whois (reverse whois), -cidr (göstərilən aralıqda olan demonləri sıralayır)

“uber” hərflərinin keçdiyi organizasiyalara baxaq.

amass intel -org uber

18692, NEUBERGER — Neuberger Berman

19796, SHUBERT — Shubert Organization

42836, SCHUBERGPHILIS

45230, UBERGROUP-AS-NZ UberGroup Limited

52336, Autoridad Nacional para la Innovaci�n Gubernamental

54320, FLYP — Uberflip

56036, UBERGROUP-NIX-NZ UberGroup Limited

57098, IMEDIA-AS Pierre de Coubertin 3–5 office building

63086, UBER-PROD — Uber Technologies

63943, UBER-AS-AP UBER SINGAPORE TECHNOLOGY PTE. LTD

63948, UBER-AS-AP UBER SINGAPORE TECHNOLOGY PTE. LTD

132313, UB3RHOST-AS-AP Uber Technologies Limited

134135, UBER-AS-AP Uber Technologies

134981, UBERINC-AS-CN Uber Inc

135072, SUITCL-AS-AP Shanghai Uber Information Technology Co.

135190, UBERCORE-AS Ubercore Data Labs Private Limited

136114, IDNIC-UBER-AS-ID PT. Uber Indonesia Technology

267015, ESADINET — EMPRESA DE SERVICOS ADM. DE ITUBERA LTD

-cidr subcommandası vasitəsilə qeyd olunan aralıqda host olan domenlərə baxmaq

amass intel -ip -src -cidr 104.154.0.0/15

Enumeration

Ən sadə nümunə. Verilən domenə görə subdomenlərin müəyyənləşdirilməsi:

amass enum -ip -d example.com

• demo opsiyasının istifadəsi:

Enum opsiyası haqqında:

· enum -d subdomenlər üçün, -brute əlavə subdomenlər, və -src

nəticələri görmək üçün hansı texnikaların istifadə olunduğunu görə bilərsiniz.

Vizualizasiya

Nəticələri müxtəlif kitabxanalardan istifadə edərək görə bilərsiniz. Bu kitabxanalardan ən maraqlısı D3 — dür.

amass viz -d3 domains.txt -o 443 /your/dir/

CİDR vasitəsilə yeni domenlərə baxmaq

amass intel -ip -cidr 100.100.0.0/15

ASN vasitəsilə yeni domenlərə baxmaq

amass intel -asn 111111

Subdomenlərin tapılması

Artıq əlinizdə bir neçə domen olduqdan sonra subdomenləri axtarmağa başlaya bilərsiniz:

amass enum -d -ip -src example.com

Yekun

amass həm hücum edən tərəfin həm də müdafiə olunan tərəfin özünü inkişaf etdirməsi üçün ideal toollardan biridir. Əlbəttə bu tip toollar tapmaq mümkündür, lakin bir çox toollar çox qısa müddətdən sonra müxtəlif səbəblərə görə (support, privacy-policy və s.) fəaliyyətini dayandırır. Ehtiyacımız olan məlumatları tək yerdən əldə edib idarə etmək daha effektivdir.

BUTA.İO komandasının yazarı : Qabil Əliyev

CyberSecurity | AMAS was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

CSS-də border parametri bir teqin ətraf sərhədlərinə vizual görüntü vermək üçün istifadə edilir. Border parametrinin köməyi ilə teqin sərhədlərini rəngli, əyimli, qırıq-qırıq, qalın və ya nazik xəttlə təsvir edə bilərik. Border veb səhifəyə hər hansısa bir sütunun digər sütunlardan fərqlənməsi üçün də istifadə edilə bilər.

CSS-də hər bir parametr müxtəlif dəyərlər aldığı kimi “border” parametri də müxtəlif cür dəyərlər alır. Bu dəyərlər iki növdə border parametrinə verilə bilər.

- Ardıcıl

- Ayrı-ayrılıqda

<div> teqinə verilmiş “borderClass” klası vasitəsi ilə teqə border parametrini verək.

ayrı-ayrılıqda verilən dəyərlərə nümunə olaraq:

border-width — teqin sərhədinin qalınlığını bildirir.

border-style — teqin sərhədinin stilini bildirir.

border-color — teqin sərhədinin rəngini bildirir.

Ard-arda verilən dəyərlərə misal olaraq, nümunə.

Göründüyü kimi üç sətirdə yazılan kodu bir sətirdə asanlıqla yazmaq mümkündür. Bu səbəbdən dəyərlərin parametrlərə ard-arda verilməsi kodun sadəliyi baxımından daha yaxşıdır.

Yuxarıdakı hər iki nümunənin nəticəsi eyni olacaq. Nəticə:

Aşağıda border-in stillərinə nümunələr verilib.

Yuxarıdakı nümunədə “border: 3px solid red;” ilə teqin sərhədinə stil vermişdik. Burada biz solid yerinə dashed yəni “border: 3px dashed red;” stilini yazmış olsaydıq onda nəticə aşağıdakı kimi olardı.

Teqin kənar sərhədlərindən birini silmək üçün “none” dəyərindən istifadə edə bilərik. Məsələn sağ tərəfdən sərhədi silək. Nümunə:

Kodun vizual nəticəsi:

Eynilə bu üsulla rəngini, stilini və ölçüsünü də dəyişə bilərik.

· border-right-color: blue; — sağ tərəfin rəngini maviyə dəyişir,

· border-left-style: dotted; — sol tərəfin stilini dəyişir,

· border-bottom-width; — alt tərəfin ölçüsünü dəyişir.

Border-radius parametri ilə sərhədlərin künclərini müxtəlif ölçüdə yuvarlaqlaşdıra bilərik. Burada ölçünü həm px ilə, həm də faiz ilə vermək olar.

Məsələn aşağıdakı nümunəyə baxaq:

Burada teqin kənar sərhədlərini 20px ölçüsündə yuvarlaqlaşdırdıq. Vizual nəticə aşağıdakı kimi olacaq:

Əgər biz tam bir dairə almaq istəsək onda teqin ölçülərinin 4 tərəfini eyni ölçüyə salırıq, məsələn 200px. Border-radius isə 50% verdikdə tam bir dairə almış olarıq.

Yuxarıdakı kodun vizual nəticəsi aşağıdakı kimi olacaq.

Əgər biz kvadartın yalnız iki tərəfini, məsələn sağ yuxarı və sol aşağı künclərini yuvarlaqlaşdırmaq istəsək o zaman kodumuzu bu cür yazmalı olardıq.

Birinci ölçü yəni 0 yuxarı və aşağını, ikinci yəni 50% sol və sağı bildirir.

Kodun vizual nəticəsi:

Biz bu yolla teqin hər küncünü müxtəlif ölçüdə yuvarlaqlaşdıra bilərik.

Ölçülər sıra ilə yuxarı, sağ, aşağı, sol formasında verilir.

Kodun vizual nəticəsi:

Faydalı mənbələr

• CSS Borders
• border

BUTA.İO komandasının yazarı : Alim Babazadə

CSS | Border was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Məzmun

1. React Native (RN) nədir?
2. Native
3. Cross Platform
4. Component
5. Məhsuldarlıq
6. LiveRecompiling
7. Community
8. React native necə öyrənilməlidir
9. Learning React Native
10. Faydalı mənbələr

Bilməli olduğunuz hər şey!

React native nədir?

React native Facebook-un inkişafını daha yaxşı hala gətirmək üçün yaradılmış mobile framework-dur.

Swift və ya Java ilə hazırlanmış tətbiqlərin eynisini yaratmağa imkan verən texnologiyadır.

React native in ən böyük üstünlüyü eyni kodla həm İOS həm də, Android üçün (Cross platform)tədbiqlər yararmaq mümkündür.

Native- əslində iki platforma üçün kod paylaşsada nəticəsində yaranan tətbiq native hissiyyatını yaşadır . Yəni bir tətbiqə yönəlirsiniz amma nəticədə iki müxtəlif platfotmaya uyğun məhsul əldə edirsiniz.

Cross platform- ilk başda facebook bu texnologiyanı İOS üçün hazırlamışdır. Lakin yavaş yavaş artan marağı nəzərə alaraq işi bir addımda irəli aparıb Android üçündə dəstək verməyə başladılar. Platformalar arası eyni database-in istifadəsi zaman baxımından həyati önəm daşıyırdı. Və react native (RN) i xüsusi edəndə bu idi.

Component- elementlərin istifadəsi çox asan hala gətirildi. Təməlində HTML və Css -i birləşdirdiyi üçün çox kod yazmağınıza ehtiyac qalmır. Eyni qayda stillər üçündə kecərlidi. Bu elementlərin formalaşdırılmasını azalda bilər amma əmin olun debugging müddətini azaldacaq.

Məhsuldarlıq- Development müddəti sürətli və asan baş verir. İki fərqli platformada işləməyə məcbur qalmadan sadəcə react native ə fokuslanıb həm vaxta qənaət edib həm də mükəmməl nəticələr ortaya qoya bilərsiniz.

LiveRecompiling- kodunuzda hər hansı dəyişiklik etdikdəbu xüsusiyyət tədbiqinizi aftomatik yeniden yükləyib nəticəni görməyinizə şərait yaradır. Artiq hər kod dəyişikliyində sənədləriniz yenidən build etməyinizə ehtiyac yoxdur.

Community- Facebook kimi böyük bir texnologiya nəhəngi tərəfindən dəstəklənməyi yaxşı xəbərdir. Hansı ki, React native-i daha da güclü edən arxasındakı cəmiyyətdir

Aha yaxşı təsir bağışladı?

Əslində proses necə baş verir?

React.js lə cox bənzərdir ən böyük fərqi react native in core javascript üzərində işləyib nəticəni native componentlərə çevirməsidir.

Qısa təsvir: React ın Uİ i dəyişdirə bilməsi ücün istifadə etdiyi Virtual DOM xüsusiyyəti. RN də həmçinin prosses eynidi sadəcə DOM yerinə Objective-C (İOS) və ya Java (Android) render olunur . React native i sadəcə react ı native mobile componentlərə çevirən bir çevirici kimi düşünün. Nəzəriyyədə bir çevirici varsa react bunu hər platforma üçün edə bilər.

Bu ela xəbərdir ele deyil?

Amma biz onu necə öyrənməyə necə başlamalıyiq?

React native necə öyrənilməlidir

Hər şeydən əvvəl bir mobile tətbiqin necə düzgün şəkildə tərtib olunmalı olduğunu bilmək lazımdır. Tətbiqlərin konsepsiyası və componentlərə bələd olmalıyıq. Ardından rəsmi mənbələrə baxın və hər bir componentin nə işə yaradığını anlamağa çalışın.

React native-i ətraflı öyrənmək üçün

Learning React Native: Building Native Mobile Apps with JavaScript kimi kitablar oxuya bilərsiniz

Və əgər oxusanız RN-i onu istifadə edənlərdən daha yaxşı bilərsiniz.

əsas anlayışları öyrəndikdən sonra onlarla oynayın isdədiyiniz qədər oxuya bilərsiniz amma praktika olmadan bir faydası olmayacaq

UĞURLAR.

Faydalı mənbələr

• React Native · Learn once, write anywhere
• Use React Native

BUTA.İO komandasının yazarı : Rahib Rzayev

Mobile Development | React native was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Məzmun

1. Giriş
2. PostCss niyə məhşurdur?
3. PostCss CLİ yüklənməsi
4. Ən məhşur PostCss əlavələri (plugin-ləri)
5. Autoprefixer-lər
6. Css next əlavə etməsi
7. CSS Modulları
8. Csslint
9. Css nano
10. Digər faydalı əlavə etmələr
11. Sass-dan nə ilə fərqlənir?
12. Faydalı mənbələr

Giriş

PostCss-ı kəşf et.

PostCss modern Css yazmaq üçün mükəmməl köməkçi vasitədir. PostCss elə bir alətdir ki, developer Css kodlarını prosesden əvvəl və ya prosesdən sonra təsir etməyə imkan verən “plugins”-i vardır. PostCss-də çox böyük miqdarda əlavə etmələr vardır ki, bu sizə çoxlu funksionallıq təmin edir.

PostCss niyə məhşurdur?

PostCss bir neçə xüsusiyyət təmin edirki, Css kodlarını yazmaq qabilyyətini inkişaf etdirəcək və seçdiyiniz digər texnologiyalara yaxşı integrasya edəcəkdir.

PostCss CLI yüklənməsi

yarn paketindən istifadə etməklə:

yarn global add postcss-cli

və ya npm:

npminstall -g postcss-cli

Bunlardan biri istifadə edildikdə “postcss” əmri sənin komanda cədvəlində aktiv olacaq.

Misal üçün Css sənədindəki autoprefixer plugin “css/folder” sənədinin içindədir və “main.css file:”-da yaddaşda saxlanılır.

postcss --use autoprefixer -o main.css css/*.css

PostCss CLI üçün daha çox informasiya burdadir:

postcss/postcss-cli

Ən məhşur PostCss əlavələri (plugin-ləri)

PostCSS, CSS-dən istifadə zamanı sizin işinizi asanlaşdırmağa kömək edir. PostCSS ilə nələri etmək mümkünlüyünü anlamaq üçün ən məhşur əlavə köməkçi (pluginləri) vasitələri aşağıda verilmiştir:

Autoprefixer-lər

Autoprefixer, CSS’nizi seçir və bəzi parametrlərin prefixe ehtiyac olub olmadığını göstərir. Auto prefixerlə daha təmiz CSS kodları yaza bilərsiniz.

Nümunə:

a{

display: flex;

}

və avtomatik əlavə edilir:

a{

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

Css next əlavə etməsi

Bu əlavə etməsi CSS-in Babelidir. Müasir CSS xüsusiyyətlərindən istifadə etməyə imkan verir və onları köhnə brauzerlər üçün daha uyğun formatlı CSS-ə köçürməyə kömək edir:

1)Autoprefixer istifadə edərək prefikslər əlavə edir (buna görə bunu istifadə edirsinizsə, bir başa Autoprefixer istifadə etməyinizə ehtiyac yoxdur)

2)CSS Dəyişənlərindən istifadə etməyə imkan verir.

3)Sass-dakı kimi yuvalama istifadə etməyə imkan verir

CSS Modulları

PostCSS Modulları CSS Modullarından istifadə etməyə imkan verir. CSS Modulları CSS standartının bir hissəsi deyil, lakin geniş miqyaslı seçicilərə sahib olmaq üçün bir addımdır.

Csslint

Linting-lə düzgün sintaksisdə yazmağa və səhvlərdən xilas olmağa kömək edir.

Css nano

Cssnano CSS-ni minimuma endirir və istifadə edilən kod saxlanması ilə optimizasiyasını həyata keçirir.

Digər faydalı əlavə etmələr

Xoşuma gələnlərdən bəziləri bunlardır:

• Lost Grid əlavə etməsi PostCSS- də grid sistemidir.
• Postcss-sassy, Sass kodlarını yazmağa imkan verir.
• Postcss-nested, Sass içiçə qaydalarını istifadə etmək imkanı təmin edir
• Postcss-nested-parents, içiçə CSS-də hər hansı bir ata seçicisinə istinad edilməyə imkan verir.
• Postcss-simple-vars, Sass kimi dəyişənlərdən istifadə etməyə imkan verir.
• PreCSS, Sass’ın bir çox xüsusiyyətlərini təqdim edir və tam Sass dəyişdirilməsinə ən yaxın olan budur

Sass-dan nə ilə fərqlənir?

PostCSS-in Sass vəya Less kimi CSS ön prosessorlardan fərqi odur ki, yeni xüsusiyyətlərə ehtiyac hiss edikdə əlavə etmək imkanıdır. Sass və ya Less sabit parametrliridir. Yəni standart xüsusiyyəti vardır. Onlar üzərində işləyib genişləndirmək mümkün deyildir. Yuxarıda göstərdiyimiz kimi PostCss-də əlavə edilən əlavə etmələr nəticəsində xüsusiyyətini zənginləşdirmək mümkündür.

Faydalı mənbələr

• PostCSS
• PostCSS: Sass's New Play Date

BUTA.İO komandasının rəhbəri: Nail Məmmədov

CSS | PostCSS was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

Məzmun

1. Makrdown nədir?
2. Başlıqlar
3. Paraqraflar
4. Qalın yazı
5. Kursiv yazı
6. Siyahılar
7. Linklər
8. Şəkillər
9. Horizontal xətt
10. İstinad yazı
11. Cədvəllər
12. Nəticə
13. Faydalı mənbələr

Markdown Nədir?

Markdown faylları HTML kodlarının istifadəsi olmadan bu dildə gözoxşayan məzmunların tərtibi üçün developerlərin istifadə etdiyi ən səmərəli bir yoldur. Onlar əsasən documentasiya formasında GİT README fayllarının içində istifadə olunur, amma eyni zamanda “dev” kimi blog platformalarında da məşhurlaşmışdır. Markdown faylları “.md” fayl sonluğu ilə bitir və fayl yaratmaq üçün xüsusi sintaksisdən istifadə edir. CMS (Content Management System) — in əksəriyyəti Markdown istifadə edir və beləliklə, onun istifadəsi sadə mətn fayllarının yazılması və yaradılması qədər asandır.Markdown istifadə edərək HTML dilində yazdığımız bir çox kodlardan canımızı qurtarıb daha asan yolla içəriklər hazırlaya bilərik. Misal olaraq: Başlıqlar, siyahılar, cədvəllər, linklər və s.

Başlıqlar

Başlıq yaratmaq üçün, hər sözün və yaxud ifadənin başlanğıcına (#) işarəsi qoymaq və bir boşluq buraxıb yazımızı yazmaq lazımdır. (#) işarələrinin sayı hər dəfə artdıqca, başlıqların ölçüsü bir vahid kiçilir. (#) işarələrinin sayı 1 ilə 6 arasında dəyişir və maksimum 6 ədəddir (######). Məsələn 3-cü səviyyə başlıq yaratmaq istəyiriksə (<h3>), üç ədəd (#) işarəsindən istifadə olunmalıdır.

Paraqraflar

Paraqraf yaratmaq üçün Markdown tərəfdə hər hansı bir xüsusi qayda verilməmişdir. Sadəcə word və html-də yazdığımız adi yazılar kimi düşünə bilərsiniz.

Qalın (Bold) Yazı

Qalın yazı (<b>) yaratmaq üçün yazının əvvəlinə və sonuna iki ədəd ulduz (**) işarəsi qoymağınız kifayətdir və yaxud iki ulduz əvəzinə bunun alternativ versiyası olan hər iki tərəfdən iki ədəd altdan xətt (__) işarəsi istifadə oluna bilər.

Kursiv (İtalic) Yazı

Qalın yazı ilə eyni şəkildə Kursiv (İtalic) yazının da yaradılma strukturunda istifadə olunan işarələr ulduz (*) və alternativi üçün istifadə olunan altdan xətt (_) işarələridir. Sadəcə buradakı fərq ondan ibarətdir ki, qalın yazının yaradılması üçün hər tərəfdə 2 ədəd ulduz və 2 ədəd altdan xətt işarəsindən istifadə olunurdusa, kursiv (italic) yazıda bu işarələr hər tərəfdən bir ədəd olacaq. Yəni əvvələ 1 ulduz və sona bir ulduz. Eyni ilə altdan xətt işarəsinə də dediklərimiz aiddir.

Siyahılar (Lists)

Siyahıların yaradılma strukturunda müxtəlif yollar mövcuddur. HTML dilində də bildiyimiz kimi siyahılar 2 cür olur. Bunlar nömrələnmiş (<ol>) və nömrələnməmiş (<ul>) siyahılardır.

İlk öncə nömrələnmiş siyahıların yaradılma strukturana nəzər salaq. Nömrələnmiş siyahıları yaratmaq üçün, siyahı elementinin əvvəlində nömrəni qeyd etdikdən sonra (Məsələn: 2) nöqtə işarəsinə klikləmək və bir boşluq buraxmaq lazımdır. Bundan sonra siyahı elementi üçün təyin etdiyimiz yazını yazıb “Enter” düyməsinə klikləyirik. Artıq burada görəcəyik ki, növbəti siyahı elementinin nömrəsini ardıcıl olaraq Markdown bizim üçün yaradacaq. Bu ardıcıllıqla “Enter” düyməsinə klikləyərək hər dəfə növbəti siyahı elementinin nömrəsini əldə edəcəyik. Bəs əgər istifadəçi siyahı ilə əməliyyatını bitirmişsə və siyahıdan çıxmaq istərsə nə etməlidir? Bunun üçün son siyahı yazımızı yazdıqdan sonra “Enter” düyməsinə klikləyəcəyik və bizə yenidən növbəti siyahı nömrəsi veriləcək. Bu dəfə heç bir yazı yazmadan yenidən “Enter” düyməsinə klikləyirik və artıq biz siyahıdan çıxmış oluruq (İki dəfə “Enter” düyməsinə klikləyirik).

Nömrələnməmiş (<ul>) siyahılarda da eynilə nömrələnmiş siyahılardakı kimi məntiq irəli sürülür. Sadəcə burada bu dəfə nömrə və nöqtə işarəsi deyil, tire(-) işarəsini və boşluq (Space) düymələrini bir dəfə klikləməklə istədiyimiz nəticəni əldə edirik. Siyahı ilə əməliyyatı bitirdikdən sonra, siyahıdan çıxmaq üçün nömrələnmiş siyahılardakı kimi 2 dəfə ardıcıl olaraq “Enter düyməsinə” klikləyirik.

Linklər

Markdown ilə linkləri (<a>) yaratmaq çox sadədir. Bunun üçün iki işarə cütündən istifadə olunur. Bunlar [ ] — işarəsi və kiçik mötərizə () — işarələridir. [ ] — işarəsi daxilinə linkimizin istifadəçiyə görsənəcək yazı hissəsini, kiçik mötərizə daxilinə isə linkin yolunu daxil edəcəyik. Bundan sonra artıq linkimiz hazırdır.

nümunə.com

Şəkillər

Şəkillərin yaradılma sintaksisi də linklərin yaradılma sintaksisi ilə demək olar ki, eynidir.Yəni linklərdə istifadə olunan [ ] və ( ) işarələri burada da istifadə olunacaq. Sadəcə aradakı fərq ondan ibarətdir ki, bu dəfə [ ] — işarəsi əvvəlinə bir ədəd nida (!) işarəsi daxil edəcəyik. Burada isə [ ] — işarəsi daxilinə yazılan yazı, şəkil hər hansı problemdən dolayı ekranda görsənməzsə, istifadə olunan alt atributunun dəyəridir. ( ) — işarəsi daxilinə isə şəkilimizin “url” ünvanını daxil edəcəyik.

Horizontal Xətt

Horizontal xətt (<hr>) çəkmək üçün Markdown da bizim üçün bir neçə üsul mövcuddur. Bunun üçün üç və yaxud daha çox ulduz (***), üç tire ( — -) və yaxud üç altdan xətt (___) istifadə oluna bilər.

İstinad yazıları (Blockquotes)

Adından da göründüyü kimi istinad formasında yazıların yazılması üçün istifadə olunur. Yəni burda fərqli bir yazı yazmırıq, sadəcə olaraq yazılarımız sadə paraqraf tərzlərindən bir qədər daha görkəmli forma alır. İstinad yazılarını yazmaq üçün paraqraf yazılarımızın önündə bir ədəd böyükdür işarəsi (>) tanımlayırıq. Artıq bununla yazımız istinad yazı formasını alacaq. Əgər növbəti sətirdə də paraqrafın istinad yazı formasında davam etməsini istəyiriksə yenidən böyükdür işarəsini (>) tanımlamağımız lazımdır.

Cədvəllər

Markdownvasitəsilə yaradılacaq daha bir struktur cədvəl (table) strukturudur. HTML-də cədvəlləri yaratmaq üçün daha çox vaxt sərf edirdiksə, Markdown da bu daha sadədir. Bunun üçün sadəcə sütünları ayırmaq üçün düz slaş( | ) və üç ədəd tire ( — ) işarəsindən istifadə olunur. Tire işarələrini adətən cədvəlin başlıq kolonlarını tanımladıqdan sonra 2-ci sətirdə veririk ki, özündən yuxarıdakı sətirin başlıq sətiri olduğunu və digər sətirlərdən fərqlənməsini göstərək.

Nəticə

Ümid edirəm ki, Markdown haqqında sadə formatda ərsiyyəyə gətirdiyimiz məqalə siz oxucuların köməyinə çatacaq və sadə də olsa Markdown-un nə anlama gəldiyini başa düşəcəksiniz.

Faydalı mənbələr

• Markdown Guide
• Markdown: Syntax

BUTA.İO komandasının yazarı : Məmmədzadə Qədir

HTML | Markdown was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. HTML Qlobal atributlarının vəzifələri.
2. accesskey
3. class
4. Contenteditable
5. Contextmenu
6. data-*
7. dir
8. draggable
9. dropzone
10. hidden
11. id
12. lang
13. style
14. spellcheck
15. tabindex
16. title
17. translate
18. Faydalı mənbələr

HTML Qlobal atributularının vəzifələri

HTML qlobal atributları bütün HTML elementləri üçün ümumi olan atributlardır. Qlobal atributlar həm standart, həm də qeyri-standart element tərəfindən dəstəklənirlər.

Qlobal xüsusiyyətlər bütün elementlərlə istifadə edilə bilər, bəzən bəzi elementlər üzərində heç bir təsiri olmaya bilər.

Aşağıdakı təsvirlər ilə qlobal atributların tam siyahısını görə bilərsiniz:

accesskey — Elementi seçmək və ya aktivləşdirmək üçün istifadə edilə bilən qısayol düyməsini təyin edir.

class — Elementin aid olduğu bir və ya daha çox sinfi müəyyənləşdirir. CSS qaydaları və JavaScript funksiyaları üçün seçici kimi istifadə olunur.

Contenteditable — Elementin məzmunun tənzimlənə bilən olub olmadığını təyin edir. HTML5-də yenidir.

Contextmenu — Element üçün <menu>kontekstual menyu (sağ klik menyusu) kimi istifadə ediləcək elementi müəyyənləşdirir. HTML5-də yenidir. Əksər brauzerlərdə tətbiq olunmur.

data-* — JavaScript ilə əldə edilə bilən elementə məxsus xüsusi məlumatları saxlamaq üçün istifadə olunur.

dir — Mövcud elementin içindəki məzmunun istiqamətini təyin edir.

draggable — Bir elementin istifadəçi tərəfindən köçürülə biləcəyini (kliklə və sürüklə) təyin edir. HTML5-də yenidir.

dropzone — Kopyalanması, köçürülməsi və ya əlaqələndirilməsi kimi ¬¬ düşdükdə sürüklənmiş element üzərində hərəkətin aparılmasını müəyyənləşdirir.

hidden — Bir elementi görünüşdən gizlədir. HTML5-də yenidir.

id — Element üçün unikal bir id müəyyən edir. CSS və JavaScript ilə istifadə edilə bilər.

lang — Bir elementin məzmunu üçün əsas dili müəyyənləşdirir. Elementin məzmununun dilini müəyyənləşdirir.

style — İnline CSS-i cari elementə tətbiq etmək üçün istifadə olunur. Ümumiyyətlə tövsiyə edilmir. (Xarici stil cədvəlindən və ya ehtiyac olduqda <style>elementdən istifadə edin.)

spellcheck — Məzmunun orfoqrafiya səhvlərinə görə yoxlanılıb yoxlanılmamasını müəyyənləşdirir. Brauzerin element məzmununun yazılışını və qrammatikasını yoxlamalı olub olmadığını müəyyənləşdirir. HTML5-də yenidir.

tabindex — Bir elementin boşluq sırasını təyin edir. Səhifəyə daxil edildikdə elementlərin fokusa girmə qaydasını müəyyənləşdirir.

title — Başlıq, ad və ya element haqqında bəzi əlavə məlumatlar vermək üçün istifadə olunur.

translate — Səhifənin lokallaşdırıldığı zaman elementin məzmununun tərcümə edilməli olub olmadığını müəyyənləşdirir. Əksər brauzerlərdə tətbiq olunmur. (Tərcümə alətlərində və plaginlərdə tətbiq oluna bilər.)

Faydalı mənbələr

• HTML Global attributes
• Global attributes
• HTML5 Global Attributes

BUTA.İO komandasının yazarı : İlkin Cəfərli

HTML | Qlobal atributlar was originally published in Human Computer Interaction LAB on Medium, where people are continuing the conversation by highlighting and responding to this story.