Paano Gumawa ng Magagandang Mga Animated na Animated na Web Sa Mo.JS

Kung tinitingnan mo simulan ang iyong sariling website , magagandang hitsura ng mga animasyon ay maaaring gawin itong lumiwanag. Mayroong maraming mga paraan upang makamit ito, mula sa simple paggawa ng isang animated na GIF mula sa isang piraso ng mayroon nang pelikula, hanggang sa pag-aaral na gumawa ng iyong sarili mula sa simula gamit ang software tulad Blender o Maya .

Mayroon ding mga silid-aklatan na magagamit upang lumikha ng mga animasyon na program. Kasaysayan, ginamit ng mga web coder ang jQuery upang lumikha ng mga simpleng animasyon, ngunit habang umuunlad ang web at HTML5 naging bagong pamantayan, lumitaw ang mga sariwang pagpipilian. Ang mga library ng CSS para sa animasyon ay naging napakalakas sa ilalim ng bagong balangkas, kasama ang mga library ng JavaScript na partikular na idinisenyo para sa vector animasyon sa browser.

---

---

Ngayon ay titingnan namin ang mo.js, isa sa mga mas bagong bata sa block para sa paglikha ng magagandang koleksyon ng imahe mula sa code. Saklaw namin ang ilang pangunahing mga pag-andar, bago lumikha ng isang reaktibong serye ng animasyon ng gumagamit na lumilikha ng magagandang mga pattern.

Ipasok ang Mo.js

Ang Mo.js ay isang silid-aklatan para sa paglikha ng mga paggalaw ng graphics para sa web nang madali. Ito ay dinisenyo upang gawing simple ang paglikha ng mga magagandang bagay para sa mga hindi masyadong marunong sa code, habang pinapayagan ang mga beteranong programmer na tuklasin ang isang masining na panig na hindi nila alam na mayroon sila. Tulad ng ipinahihiwatig ng pangalan nito, batay ito sa tanyag na wika ng pagprograma ng JavaScript, kahit na ipinatupad ito sa isang paraan na madaling mapulot ng sinuman ang mga pangunahing kaalaman.

Bago tayo magpatuloy, tingnan muna natin kung ano ang lilikha natin ngayon:

Gagamitin namin CodePen para sa proyekto ngayon, dahil pinapayagan kaming magtrabaho sa lahat sa parehong window ng browser. Kung gugustuhin mo, maaari kang magtrabaho sa isang editor na iyong pinili sa halip Kung nais mong laktawan ang sunud-sunod na tutorial, ang buong code ay magagamit dito.

Mag-set up ng isang bagong Panulat, at babatiin ka sa screen na ito:

---

---

Bago kami magsimula, kakailanganin mong gumawa ng ilang mga pagbabago. Mag-click sa Mga setting icon sa kanang tuktok, at mag-navigate sa JavaScript tab

Gagamitin namin Babel bilang aming pre-processor ng code, kaya piliin ito mula sa drop down na menu. Ginagawa ng Babel na medyo madaling maunawaan ang JavaScript, kasama ang pagbibigay ECMAScript 6 suporta para sa mas matandang mga browser. Kung hindi mo alam kung ano ang ibig sabihin nito, huwag kang magalala , papagaan lang dito ang buhay natin.

---

---

Kailangan din naming i-import ang mo.js library sa proyekto. Gawin ito sa pamamagitan ng paghahanap para sa mo.js nasa Magdagdag ng Panlabas na Mga Script / Pens text prompt, at pagpili nito.

Gamit ang dalawang bagay na ito sa lugar, mag-click I-save at Isara . Handa na kaming magsimula!

Pangunahing Mga Hugis Sa Mo.js

Bago kami magsimula sa graphics, gumawa tayo ng isang bagay tungkol sa nakakabulag na puting background sa view pane. Baguhin ang background na pag-aari ng kulay sa pamamagitan ng pagsulat ng code na ito sa CSS tinapay

body{
background: rgba(11,11,11,1);
}

Ang paglikha ng isang hugis ay isang simpleng proseso, at ang konsepto sa likod nito ay nagtutulak sa buong silid-aklatan. Mag-set up tayo ng isang default na hugis ng bilog. Ipasok ang code na ito sa JS tinapay:

const redCirc = new mojs.Shape({
isShowStart:true
});

Dito, lumikha kami ng a Const halaga sa pangalan redCirc at itinalaga ito sa a bagong mojs. Hugis . Kung ganap kang bago sa pag-coding, bigyang pansin ang order ng bracket dito, at huwag kalimutan ang semicolon sa dulo!

Sa ngayon wala kaming naipasa na mga parameter maliban sa isShowStart: totoo , nangangahulugang lilitaw ito sa screen bago pa namin ito italaga sa anumang galaw. Makikita mo na naglagay ito ng isang kulay-rosas na bilog sa gitna ng screen:

Ang bilog na ito ay ang default Hugis para sa mo.js. Madali naming mababago ang hugis na ito sa pamamagitan ng pagdaragdag ng isang linya sa aming code:

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

Upang magdagdag ng higit pang mga pag-aari sa isang bagay, gumagamit kami ng isang kuwit upang paghiwalayin ito. Dito, nagdagdag kami ng a Hugis pag-aari, at tinukoy ito bilang a 'tuwid' . I-save ang iyong pen, at makikita mo ang mga default na pagbabago ng hugis sa isang parisukat sa halip.

Ang prosesong ito ng pagpasa ng mga halaga sa Hugis object ay kung paano namin ipasadya ang mga ito. Sa ngayon mayroon kaming isang parisukat na hindi talaga gumagawa ng marami. Subukan nating buhayin ang isang bagay.

Mga Pangunahing Kaalaman sa Paggalaw

Upang makakuha ng isang bagay na mukhang medyo kahanga-hanga mag-set up tayo ng isang bilog, na may isang pulang stroke sa paligid nito at walang punan sa loob.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

Tulad ng nakikita mo, nagtalaga rin kami ng a lapad halaga sa stroke, at a radius para sa bilog. Ang mga bagay ay nagsisimula nang magmukhang medyo kakaiba. Kung ang iyong hugis ay hindi nag-a-update, tiyaking hindi mo napalampas ang anumang mga kuwit o solong mga panipi sa paligid 'net' o 'wala' , at tiyaking nag-click ka magtipid sa tuktok ng pahina.

Magdagdag tayo ng isang animasyon dito. Sa halimbawa sa itaas, lilitaw ang pulang bilog na ito kung saan nag-click ang gumagamit, bago kumupas. Ang isang paraan na magagawa natin ito ay sa pamamagitan ng pagbabago ng radius at opacity sa paglipas ng panahon. Baguhin natin ang code:

radius: {15:30},
opacity: {1:0},
duration:1000

Sa pamamagitan ng pagbabago ng radius pag-aari, at pagdaragdag kalubhaan at tagal mga pag-aari, binigyan namin ang mga tagubilin sa hugis upang isagawa sa paglipas ng panahon. Ito ay Delta mga bagay, humahawak ng pagsisimula at pagtatapos ng impormasyon para sa mga katangiang ito.

Mapapansin mong wala pang nangyayari. Ito ay dahil hindi namin naidagdag ang .laro () pagpapaandar upang sabihin ito upang maisakatuparan ang aming mga tagubilin. Idagdag ito sa pagitan ng mga end bracket at semicolon, at dapat mong makita na mabuhay ang iyong bilog.

Ngayon ay nakakakuha kami ng isang lugar, ngunit upang gawin itong talagang espesyal, tingnan natin ang ilang higit pang malalim na mga posibilidad.

Pag-order at Easing Sa Mo.js

Sa ngayon, sa sandaling lumitaw ang bilog ay nagsisimulang maglaho. Ito ay gagana nang perpektong pagmultahin, ngunit magiging maganda kung magkaroon ng kaunting kontrol.

Magagawa natin ito sa .tapos () pagpapaandar Sa halip na baguhin ang ating radius o opacity, gawin nating panatilihin ang ating hugis kung saan ito nagsisimula, bago baguhin pagkatapos ng isang itinakdang dami ng oras.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

Ngayon, lilitaw ang aming hugis kasama ang mga halagang itinalaga namin ito, maghintay para sa 1000 ms, bago isagawa ang anumang inilagay namin sa .tapos () pagpapaandar Magdagdag tayo ng ilang mga tagubilin sa pagitan ng mga braket:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

Ipinakikilala ng code na ito ang isa pang mahalagang bahagi ng animasyon. Kung saan inatasan namin ang sukatan upang baguhin mula sa 1 hanggang 2, nagtalaga din kami ng sine wave batay sa pagbawas sa kasalanan.in . Ang Mo.js ay may iba't ibang mga curve ng easing na naka-built in, na may kakayahan para sa mga advanced na gumagamit na magdagdag ng kanilang sarili. Sa kasong ito, ang sukat sa paglipas ng panahon ay nangyayari ayon sa isang curve ng sine wave paitaas.

Para sa isang visual na pagbagsak ng iba't ibang mga curve, suriin easings.net . Pagsamahin ito sa strokeWidth binabago sa 0 sa itinakdang tagal namin, at mayroon kang higit na pabago-bagong epekto ng paglaho.

Ang mga hugis ang batayan para sa lahat ng bagay sa Mo.js, ngunit sila lamang ang simula ng kuwento. Tignan natin Pagsabog .

Pagsabog sa Potensyal sa Mo.js

SA Pagputok sa Mo.js ay isang koleksyon ng mga hugis na nagmumula sa isang gitnang punto. Gagawin namin itong batayan ng aming natapos na animasyon. Maaari kang tumawag sa isang default na sumabog sa parehong paraan ng paggawa ng isang hugis. Gumawa tayo ng ilang mga spark:

const sparks = new mojs.Burst({
}).play();

Maaari mong makita, sa pamamagitan lamang ng pagdaragdag ng isang walang laman Pagputok object at sinasabi ito upang i-play, nakukuha namin ang default na epekto ng pagsabog. Maaari naming maapektuhan ang laki at pag-ikot ng pagsabog sa pamamagitan ng pag-animate nito radius at anggulo ari-arian:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

Na, nagdagdag kami ng isang pasadyang radius at paikutin sa aming pagsabog:

Upang mas magmukha silang mga spark, baguhin natin ang mga hugis na ginagamit ng pagsabog, at kung gaano karaming mga hugis ang nabuo. Ginagawa mo ito sa pamamagitan ng pagtugon sa mga pag-aari ng mga anak ng pagsabog.

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

Mapapansin mo na ang mga pag-aari ng bata ay kapareho ng mga katangian ng hugis na nagtrabaho na kami. Sa oras na ito pumili kami ng isang krus bilang ang hugis. Ang lahat ng 50 ng mga hugis na ito ay nagtataglay ngayon ng parehong mga pag-aari. Nagsisimula nang magmukhang maganda! Ito ang unang bagay na makikita ng gumagamit kapag na-click nila ang mouse.

Mayroon na kahit na maaari naming makita na ang pulang stroke ng aming paunang redCirc ang hugis ay nananatili sa paligid ng masyadong mahaba. Subukang baguhin ang tagal nito upang magkasama ang parehong mga animasyon. Dapat magtapos ito sa pagtingin ng tulad nito:

Malayo na tayong natapos sa aming animasyon, ngunit maglaan muna tayo ng sandali upang gawin itong reaktibo ng gumagamit.

Ang pangunahing kaganapan

Gumagamit kami ng isang handler ng kaganapan upang ma-trigger ang aming mga animasyon sa posisyon na na-click ng gumagamit. Sa pagtatapos ng iyong bloke ng code, idagdag ito:

document.addEventListener( 'click', function(e) {
});

Ang piraso ng code na ito ay nakikinig sa mga pag-click sa mouse, at isinasagawa ang anumang mga tagubilin sa mga braket para sa amin. Maaari naming idagdag ang aming redCirc at sparks mga bagay sa tagapakinig na ito.

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

Ang dalawang pagpapaandar na tinatawag namin dito ay .tune () at .laro () . Ang pag-andar ng replay ay katulad ng pag-andar ng pag-play, kahit na tinukoy nito na ang animasyon ay dapat magsimula muli mula sa simula sa tuwing nai-click ito.

Ang ibagay ipinapasa ng pagpapaandar ang mga halaga sa aming object upang mabago mo ang mga bagay kapag na-trigger ito. Sa kasong ito dumadaan kami sa mga coordinate ng pahina kung saan na-click ang mouse, at itatalaga ang posisyon ng x at y ng aming animation nang naaayon. I-save ang iyong code, at subukang mag-click sa screen. Mapapansin mo ang isang pares ng mga problema.

Una, ang aming paunang animation ay nagpapakita pa rin sa gitna ng screen, kahit na ang gumagamit ay hindi nag-click sa anumang bagay. Pangalawa, ang animation ay hindi na-trigger sa mouse point, ngunit binabaan pababa at pakanan. Madali nating maaayos ang pareho sa mga bagay na ito.

Ang aming hugis at pagsabog ay may .laro () sa dulo ng kani-kanilang mga bloke ng code. Hindi na namin ito kailangan pa bilang .laro () ay tinawag sa handler ng kaganapan. Maaari mong alisin ang .play () mula sa parehong mga bloke ng code. Sa parehong dahilan, maaari mong alisin isShowStart: totoo masyadong, dahil hindi na natin kailangan ito upang ipakita sa simula.

Upang ayusin ang problema sa pagpoposisyon kakailanganin naming magtakda ng mga halaga ng posisyon para sa aming mga object. Tulad ng maaalala mo mula sa aming kauna-unahang hugis, inilalagay ng mo.js ang mga ito sa gitna ng pahina bilang default. Kapag ang mga halagang ito ay pinagsama sa posisyon ng mouse, lumilikha ito ng offset. Upang mapupuksa ang offset na ito, idagdag lamang ang mga linyang ito sa pareho redCirc at sparks mga bagay:

left: 0,
top: 0,

Ngayon ang tanging halaga lamang sa posisyon na kinukuha ng aming mga bagay ay ang mga halaga ng posisyon ng mouse na ipinasa ng tagapakinig ng kaganapan. Ngayon ang mga bagay ay dapat na gumana nang mas mahusay.

Ang prosesong ito ng pagdaragdag ng mga bagay sa handler ng kaganapan ay kung paano namin mai-trigger ang lahat ng aming mga animasyon, sa gayon tandaan na idagdag ang bawat bagong object dito mula ngayon! Ngayon na mayroon kaming mga pangunahing kaalaman na gumagana kung paano namin gusto ang mga ito, magdagdag tayo ng ilang mas malaki at mas maliwanag na pagsabog.

Pagkuha ng Psychedelic

Magsimula tayo sa ilang umiikot na mga triangles. Ang ideya dito ay upang lumikha ng isang hypnotic stroboscopic effect, at ang pagse-set up nito ay talagang madali. Magdagdag ng isa pang pagsabog sa mga parameter na ito:

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

Ang lahat ng narito ay dapat na pamilyar sa ngayon, bagaman mayroong isang bagong mga puntos. Mapapansin mo na sa halip na tukuyin ang hugis bilang isang tatsulok, tinawag natin itong a polygon bago italaga ang bilang ng mga puntos mayroon itong bilang 3.

Nagbigay din kami punan gumana ng isang hanay ng mga kulay upang gumana, bawat ikalimang tatsulok ay babalik sa pula at magpapatuloy ang pattern. Ang mataas na halaga ng anggulo Ang setting ay ginagawang mabilis ang pag-ikot ng burst upang makabuo ng stroboscopic effect nito.

Kung hindi gumagana ang code para sa iyo, tiyaking naidagdag mo ang mga bagay na triangles sa klase ng tagapakinig ng kaganapan tulad ng ginawa namin sa mga nakaraang object.

Medyo psychedelic! Magdagdag tayo ng isa pang pagsabog upang sundin ito.

Pagsasayaw ng mga Pentagon

Maaari naming gamitin ang isang bagay na halos magkapareho sa amin tatsulok bagay na gawin ang pagsabog na sumusunod dito. Ang bahagyang nabagong code na ito ay gumagawa ng maliwanag na kulay na magkakapatong na mga hexagon:

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

Ang pangunahing pagbabago dito ay naidagdag namin ang a antala ng 500ms, upang ang pagsabog ay hindi magsisimula hanggang matapos ang mga triangles. Sa pamamagitan ng pagbabago ng ilang mga halaga, ang ideya dito ay upang gawin ang pumutok na umiikot sa kabaligtaran direksyon sa mga triangles. Sa pamamagitan ng masasayang aksidente, sa oras na lumitaw ang mga pentagon, ang stroboscopic effect ng mga triangles ay ginagawang mukhang umiikot silang magkasama.

Isang Little Randomness

Magdagdag tayo ng isang epekto na gumagamit ng mga random na halaga. Lumikha ng isang pagsabog sa mga katangiang ito:

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

Ang pagsabog na ito ay lilikha ng mga linya na nagsisimulang pula at kumukupas sa transparency, lumiliit sa paglipas ng panahon. Ano ang kawili-wili sa sangkap na ito ay ginagamit ang mga random na halaga upang matukoy ang ilan sa mga pag-aari nito.

Ang degreeShift binibigyan ang bata ng bagay ng isang anggulo ng pagsisimula. Sa pamamagitan ng pag-randomize nito, nagbibigay ito ng ganap na magkakaibang pagsabog sa bawat pag-click. Ginagamit din ang mga random na halaga para sa radius at antala pagpapaandar upang idagdag sa magulong epekto.

Narito ang epekto sa pamamagitan ng kanyang sarili:

Dahil gumagamit kami ng mga random na halaga dito, kailangan naming magdagdag ng dagdag na pamamaraan sa aming handler ng kaganapan para sa object:

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

Ang bumuo () kinakalkula ng pagpapaandar ang mga sariwang random na halaga sa tuwing tatawagin ang kaganapan. Kung wala ito, pipiliin ng hugis ng mga random na halaga sa unang pagkakataon na ito ay tinawag, at magpatuloy sa paggamit ng mga halagang iyon para sa bawat kasunod na tawag. Ganap na masisira nito ang epekto, kaya tiyaking idagdag mo ito!

Maaari mong gamitin ang mga random na halaga para sa halos bawat elemento ng mga object ng mo.js, at ang mga ito ay isang simpleng paraan upang makagawa ng mga natatanging animasyon.

hindi ma-click ang anuman sa taskbar windows 10

Ang pagiging random ay hindi lamang ang paraan upang magdagdag ng mga pabagu-bagong paggalaw sa mga animasyon. Tingnan natin ang tulala pagpapaandar

Nakakagulat na Mga Linya

Upang ipakita kung paano ang tulala gumagana ang pagpapaandar, gagawa kami ng isang bagay na medyo tulad ng isang Catherine Wheel. Lumikha ng isang bagong pagsabog sa mga parameter na ito:

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

Lahat ng narito ay pamilyar sa ngayon, ang isang pagsabog ay lumilikha ng 50 mga bata na pula o orange na mga linya. Ang pagkakaiba dito ay ipinapasa natin ang antala pag-aari a gumagala (10) pagpapaandar Nagdaragdag ito ng 10ms ng pagkaantala sa pagitan ng paglabas ng bawat bata, binibigyan ito ng umiikot na epekto na hinahanap namin.

Ang pag-andar ng stagger ay hindi gumagamit ng anumang mga random na halaga, kaya hindi mo kakailanganin ang isang bumuo gumana sa handler ng kaganapan sa oras na ito. Tingnan natin ang lahat ng mayroon tayo sa pagkilos:

Madali kaming humihinto dito, ngunit magdagdag lamang tayo ng isa pang pagsabog upang maikot ang proyektong ito.

Mga Smart Squares

Para sa huling pagsabog na ito, gumawa tayo ng isang bagay gamit ang mga parihaba. Idagdag ang bagay na ito sa iyong code at tagapakinig ng kaganapan:

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

Ang bagay na ito ay hindi nagdaragdag ng anumang bago sa kung ano ang nagtrabaho na natin ngayon, isinama lamang ito upang maipakita kung paano madaling malikha ang kumplikadong mga pattern ng geometriko sa pamamagitan ng code.

Hindi ito ang inilaan na kinalabasan ng bagay na ito noong nilikha ito sa mga yugto ng pagsubok ng pagsusulat ng tutorial na ito. Sa sandaling tumakbo ang code, naging malinaw na napunta ako sa isang bagay na mas maganda kaysa sa sadya kong nagawa!

Sa idinagdag na pangwakas na bagay, tapos na kami. Tingnan natin ang buong bagay sa pagkilos.

Mo.js: Isang Mabisang Tool para sa Mga Animation sa Web

Ang simpleng pagpapakilala sa mo.js na ito ay sumasaklaw sa mga pangunahing tool na kinakailangan upang lumikha ng magagandang mga animasyon. Ang paraan ng paggamit ng mga tool na iyon ay maaaring lumikha ng halos anumang bagay, at para sa maraming mga gawain sa aklatan sa web ay isang simpleng kahalili sa paggamit Photoshop , Pagkatapos ng Mga Epekto, o iba pang mamahaling software.

Kapaki-pakinabang ang library na ito para sa mga nagtatrabaho sa parehong programa at pag-unlad sa web, madaling magamit ang paghawak ng kaganapan na ginamit sa proyekto para sa paglikha ng mga reaktibo na pindutan at teksto sa mga website o sa mga app. Magsaya kasama nito: walang mga pagkakamali, masaya lang na mga aksidente!

Magbahagi Magbahagi Mag-tweet Email Ito ba ay Worth Upgrading sa Windows 11?

Ang Windows ay muling idisenyo. Ngunit sapat na ba iyon upang kumbinsihin kang lumipat mula sa Windows 10 patungong Windows 11?

Basahin Susunod Mga Kaugnay na Paksa

• Programming
• JavaScript

Tungkol sa May-akda Ian Buckley(216 Mga Artikulo Nai-publish)

Si Ian Buckley ay isang freelance journalist, musikero, tagaganap at tagagawa ng video na naninirahan sa Berlin, Germany. Kapag hindi siya nagsusulat o nasa entablado, nakikipag-usap siya sa mga elektronikong DIY o code sa pag-asang maging isang baliw na siyentista.

Higit pa Mula kay Ian Buckley

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe