#particlesjs

[rphpacheco]

Mais um vídeo no canal :D Desta vez, vamos ver como funciona a biblioteca particlesJs!

#particles #particlesjs #javascript #js #css #css3 #html #html5 #web design #webdev

[onclickonload]

[blondfreeman]

Breaking Down My Portfolio

Ni-release ko kagabi iyong portfolio ko. Sa post na 'to, gusto ko lang ikuwento iyong mga details ng paggawa ko ng portfolio na inabot ng tatlong buwan.

Design

Sa part ng design, ang goal ko ay mag-project ng playful vibes pero may seriousness. Sa pagkakakilala ko kasi sa sarili ko, mahilig ako mag-try ng bago. Sinubukan kong maghanap ng inspirations sa Dribbble, Behance, saka Pinterest, pero wala doon iyong mga type ko na designs na kaayon ng gusto kong mangyari. So ang ginawa ko, gumawa ako ng sarili kong design.

Sa buong project, ito iyong kino-consider ko na pinakamahalagang part. Kailangan kong bumuo ng brand para sa sarili ko, na kapag nakita ng mga employer, alam agad nila kung ano akong type ng employee. Being a fresh grad, wala talaga akong masyadong maipapakitang projects or anything, kaya kinailangan kong bawiin sa portfolio design iyong mga bagay na gano'n.

So para ma-convey ko iyong playful vibes, gumamit ako ng warm colors na fuschia pink or iyong close to purple na color gradients. Ang maganda rito, kasama n'ya iyong emotional connotation ng warmness at energy ng red, pero may touch of feminine vibes dahil pink. Saka bright colors ang ginamit ko, may sense of boldness din siya.

Para naman sa professional settings, pure black ang ginamit kong kulay. Pinag-isipan kong mabuti kung gagawin ko ba talaga 'to kasi masakit sa mata iyong pure black. But after testing sa iba't ibang device (sa pisonet, sa computer shop na may magandang display, sa tablet, sa phone na local, sa phone na orig) nakita ko naman na dahil hindi text-heavy iyong portfolio ko at nagre-rely ako sa images, hindi naman siya gano'n kalaking bagay. Sa katunayan, na-enhance ng black background iyong mga kulay saka iyong mga images.

In line with that professional playful vibes, ang ginamit kong font faces ay Montserrat para sa mga headings, at Barlow naman sa body copy. Makikita sa Montserrat iyong rounded na shapes ng letters, kaya iyong curviness n'ya, may playful na attitude. Meanwhile, kung mapapansin, iyong Barlow ay may square na shapes ay may vibes ng professionalism. And ang maganda rito, mukha siyang typical na font like Arial or Verdana sa normal font sizes na 16px or 12pt, pero mararamdaman mo na iba iyong font.

Para ma-boost din iyong playful na side ng personality ko, nag-rely ako sa maraming rotated na elements. Karamihan sa mga headings, ni-rotate ko nang -5 degrees. Hindi madalas gawin 'to sa Web, so sa tingin ko medyo kakaiba siya in a positive way kapag tiningnan ng recruiter.

Accessibility and Semantics

Alam n'yo namang isa sa mga malalaking pet peeves ko ay iyong accessibility ng site sa kabuuan, saka iyong semantics. Kaya pinagbuhusan ko talaga ng lakas mag-isip kung dapat ba talaga akong gumamit ng <div> instead na <section> or <article>. Pero hindi lang ako basta gumamit ng mga semantic HTML na tags. Nag-review ako ng lahat ng mga semantic tags, naghanap ng mga sagot sa StackOverflow, at nag-browse sa Reddit at Twitter kung aling tags ang puwede kong gamitin. Kaya kapag ni-inspect n'yo iyong HTML code ng site, semantically correct ito sa abot ng aking makakaya.

Sa part naman ng accessibility, pinagbuhusan ko ng time na mag-research nang maigi kung paano magiging accessible sa pinakamaraming devices hangga't posible ang site ko. Ni-research ko iyong tungkol sa source orders ng mga element, focus styles, keyboard navigations, screen readers, at iba pa. Although hindi ko pa siya nate-test as of yet, may around 85% confidence ako na accessible ang portfolio ko.

Development and Coding

Since fresh graduate nga ako, wala akong masyadong projects na puwedeng ipakita. Sa isang job interview na pinuntahan ko, in-inspect ng interviewer iyong code ng portfolio ko dati na luma 'tapos binreak down n'ya for me lahat ng puwede ko pang i-improve sa code. So this time around sinunod ko iyon, dahil itong portfolio ay isa sa mga project na puwede kong ipakita sa kanila.

So ito ang goal: gamitin ang pinakabagong technologies na available sa HTML at CSS, pero siguraduhing gagana ito sa lahat ng browsers, even sa pinakaluma. Pero wala na akong pakialam sa lahat ng versions ng Internet Explorer, that's for sure.

Ang ginawa ko is mag-rely sa error handling ng CSS, or iyong tinatawag na cascade. For example, para sa layout, una kong ginawa iyong sa mobile version. As much as possible, hindi ako gumamit dito ng CSS Grid or flexbox. Then para sa desktop layout, doon ko binonggahan ang paggamit ng mga bagong features ng CSS. Now, ang logic nito ay ganito: kung ang user ay gumagamit ng lumang browser na walang CSS Grid, gagana pa rin ang site sa browser nila, pero mobile version ang makikita nila. Sinamantala ko iyong fallbacks na ginagawa ng CSS para sa akin automatically.

Isa naman sa naging problem ko is iyong malaking Rubio sa unang part ng page. Ang ginawa ko kasi, kapag naka-mobile, nakatagilid iyon, bale ginamitan ko iyon ng writing-mode: vertical-lr;. Tapos nilagyan ko ng rotate(180deg) para umikot siya paharap sa left side. Ang hindi ko nakita ay iyong mga browsers na walang writing-mode. Dahil wala sila no'n, hindi iyon gagana. Pero magro-rotate pa rin iyong text nang 180 degrees kasi 97% ng browsers ang may transform property. Kaya ang nangyari, pa-horizontal iyong text, pero nakabaligtad vertically, sa mga browsers na luma, including iyong browser ng cellphone kong clone. Pero ang naging solusyon ko ay hinayaan ko na lang siyang gano'n. No'ng tiningnan ko kasi, hindi naman siya panget; sa katunayan, medyo inline pa rin siya doon sa playfulness na gusto kong ma-achieve so hinayaan ko na lang. Tutal, 3% lang naman ng browsers ang magkakaroon ng gano'n.

No'ng kino-code ko na iyong site, napansin ko na medyo may kulang. Kaya ang ginawa ko ay kinuha ko ang tulong ng ParticlesJS para lagyan ng sizzle ang ilang parts ng portfolio ko.

Conclusion

Inabot din ako ng tatlong buwan para matapos 'to. Well, mostly, kasi wala kaming kuryente for two months na kaya hindi ko siya matapos-tapos, unless tatiyagain mo sa pisonet. Pero other than that, naging enjoyable pero matrabaho kasi sa dami ng readings na ginawa ko saka research. Pero at least, once na nasa industry na ako, almost ready na ako for deployment! Thanks for reading!

[holytheoristtastemaker]

Ah, particle effects. Wondrous things, really. And I can think of no better particle effects library for the web (that isn't something related to game development or 3D rendering) than Particles.JS. VincentGarreau / particles.js A lightweight JavaScript library for creating particles particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on CodePen: http://vincentgarreau.com/particles.js/ CodePen demo: http://codepen.io/VincentGarreau/pen/pnlso Usage Load particles.js and configure the particles: index.html app.js /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ particlesJS.load('particles-js', 'assets/particles.json', function() { console.log('callback - particles.js config loaded') }); particles.json { "particles": { "number": { "value": 80 "density": { "enable": true "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", " … View on GitHub Now, how does one go about implementing this awesome library into one's Nuxt project? Sure, there are at least a few Vue libraries that work with Particles, but I was able to hack together a complete component without using any other libraries. Here's the Code In its entirety, this is my implementation, inspired by https://www.npmjs.com/package/vue-particles-generator and https://github.com/creotip/vue-particles. /* eslint-disable */ export default { props: { color: { type: String, default: '#dedede' }, particleOpacity: { type: Number, default: 1.0 }, particlesNumber: { type: Number, default: 80 }, shapeType: { type: String, default: 'circle' }, particleSize: { type: Number, default: 4 }, linesColor: { type: String, default: '#dedede' }, linesWidth: { type: Number, default: 1 }, lineLinked: { type: Boolean, default: true }, lineOpacity: { type: Number, default: 0.4 }, linesDistance: { type: Number, default: 150 }, moveSpeed: { type: Number, default: 3 }, movementDirection: { type: String, default: 'bottom-left' }, hoverEffect: { type: Boolean, default: false }, hoverMode: { type: String, default: 'grab' }, clickEffect: { type: Boolean, default: false }, clickMode: { type: String, default: 'push' } }, data () { return { id: 'particles-instance-' + Math.floor(Math.random() * 5000) } }, mounted () { require('particles.js') this.$nextTick(() => { this.initParticleJS( this.color, this.particleOpacity, this.particlesNumber, this.shapeType, this.particleSize, this.linesColor, this.linesWidth, this.lineLinked, this.lineOpacity, this.linesDistance, this.moveSpeed, this.movementDirection, this.hoverEffect, this.hoverMode, this.clickEffect, this.clickMode ) }) }, methods: { initParticleJS ( color, particleOpacity, particlesNumber, shapeType, particleSize, linesColor, linesWidth, lineLinked, lineOpacity, linesDistance, moveSpeed, movementDirection, hoverEffect, hoverMode, clickEffect, clickMode ) { particlesJS(this.id, { "particles": { "number": { "value": particlesNumber, "density": { "enable": true, "value_area": 800 } }, "color": { "value": color }, "shape": { // circle, edge, triangle, polygon, star, image "type": shapeType, "stroke": { "width": 0, "color": "#192231" }, "polygon": { "nb_sides": 5 } }, "opacity": { "value": particleOpacity, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": particleSize, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": lineLinked, "distance": linesDistance, "color": linesColor, "opacity": lineOpacity, "width": linesWidth }, "move": { "enable": true, "speed": moveSpeed, "direction": movementDirection, "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": hoverEffect, "mode": hoverMode }, "onclick": { "enable": clickEffect, "mode": clickMode }, "onresize": { "enable": true, "density_auto": true, "density_area": 400 } }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }) } } } Well, that was a doozy! Anyway, to use it, do something like this: import Particles from '~/components/Particles.vue' export default { components: { Particles } } div[id^="particles-instance-"] { height: 100vh !important; width: 100vw !important; position: fixed !important; top: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: rgba($color: #05114e, $alpha: 0.4); z-index: 2 !important; } The above code gives you a fullscreen particles background. Mixed with something like this (with a background of ~assets/img/background.png): .hero-background { height: 100vh !important; width: 100vw !important; position: fixed !important; top: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-size: cover !important; background-repeat: no-repeat !important; background-blend-mode: overlay !important; background-attachment: fixed !important; background-position: fixed !important; background: rgba($color: #05114e, $alpha: 0.4); background-image: url("~assets/img/background.png") !important; z-index: 1 !important; } you'd get a nice overlay. There are a ton of options, really; it's all CSS past this point. https://vincentgarreau.com/particles.js/ is your friend when it comes to checking out what changing props does. Hope this was helpful; enjoy! Stay safe and keep on coding!

http://damianfallon.blogspot.com/2020/04/nuxt-meet-particles.html

#SEO #Local SEO training