#vanillaJS

[eossa]

Featured Posts without jQuery?

So, you might know this amazing tutorial right here by @fukuo about making a featured posts section with the Tumblr API and jQuery.

Given that we're all kind of try to move away from jQuery, I thought, would it be possible using vanilla JS only? I tried converting it by myself first but — after reading a StackOverflow thread on how to convert jQuery's "getScript()" to vanilla JS — I realized that I lack the knowledge to do that (and not need ages for the conversion). Instead, I decided to use different online converters and check if the JS looks valid and doesn't contain traces of jQuery still; I ended up using this converter here. The result can be seen here (just the script).

However, when I use this script, there is no result at all and the featured posts are not being displayed. The code analysis on CodePen tells me that "Uncaught TypeError: document.querySelector.getScript is not a function", which brings me back to the aforementioned StackOverflow thread that made me feel like the huh? cat.

I did try @eggdesign's featured tags code as an alternative but either I'm incapable of running even that one or it is simply not compatible with @mournstera's base code, which I'm using.

If anyone has ideas on how to fix the converted code to make it work, I'm glad to hear your suggestions, it can only get better and I thank you in advance for offering your time and skill to help.

TL;DR: I'm once again losing the fight against the boss (JS + jQuery) and I'm handing the controller (bad code) to a cousin (incredible people on this site) to beat him.

[ajitsinghagami]

[bf-rally]

the headache is here

gonna try to code again today

[webixui]

🚨 "VanillaJS is DEAD"? Think again! 🚨

Did you know Facebook, Google, Netflix, and Amazon still use Vanilla JavaScript in their codebases? �‍💻 The myth that "plain JS is outdated" just got debunked! 🎯

📖 Inside the article you’ll discover: 👉 What VanillaJS really means (spoiler: it’s not a library — it’s pure JavaScript! 🍦). 👉 Why giants like YouTube, LinkedIn, and Wikipedia rely on it. 👉 The pasta-making analogy you’ll never forget (🍝 vs. “spaghetti code” warnings!). 👉 The key difference between JavaScript and VanillaJS (hint: they’re the same thing 😉).

Spoiler: It’s not about which is better — it’s about when to use each for maximum efficiency! ⚡

🔗 Dive into the full breakdown: https://blog.webix.com/vanillajs-vs-framework-when-using-js-libraries/

💬 Hot take: Are you team #VanillaJS or team #Framework? Debate below! 👇

#JavaScript #WebDev #Coding #TechTrends #FrontEnd #DeveloperCommunity

[kirabug-tumbles]

I love this so much: jan.miksovsky.com/posts/202…

#amnesia #elderCare #vanillaJS

[phpcodedls]

دانلود اسکریپت تولید کننده فلش کارت در VanillaJS با کد منبع

دانلود اسکریپت تولید کننده فلش کارت در VanillaJS با کد منبع

برای دانلود به لینک زیر بروید

برای دانلود اینجا کلیک فرمایید ( دانلود اسکریپت تولید کننده فلش کارت در VanillaJS با کد منبع )

لینک کوتاه : https://magicfile.ir/?p=3674

[cssmonster]

Explore 38 JavaScript Background Effects

Welcome to CSS Monster, where creativity meets functionality! Immerse yourself in our extensive compilation of handpicked, free vanilla JavaScript background effect code examples. Discover a diverse range of options, including dynamic changes in background color or image, captivating animations, implementations with canvas, and much more. Our February 2020 update brings you 24 new items, showcasing the latest trends and innovations in JavaScript background effects. Whether you're a seasoned developer seeking inspiration or a designer looking for ready-to-use code snippets, this collection caters to your needs. Explore the versatility of these background effects, each offering a unique way to enhance the visual appeal of your website. From subtle transitions to dynamic animations, our curated examples provide a wide spectrum of possibilities for creating engaging user experiences. Dive into our collection and elevate your web design with these JavaScript background effects. Stay tuned for more updates as we continue to expand our offerings and bring you the latest in web development trends. Happy coding! Author jen July 30, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS GRAYSCALE AMBIENT BACKGROUND Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Bruno Vieira December 1, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS BVAMBIENT - VANILLAJS BACKGROUND PARTICLES Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Cameron Knight November 8, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS (SCSS) / JS CHANGE BACKGROUND COLOUR WITH GSAP SCROLLTRIGGER Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js

Author F.ala O.viara July 26, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS UNICODE PATTERNS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Toshiya Marukubo August 14, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS JAVASCRIPT CANVAS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js

Author Toshiya Marukubo July 11, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS JAVASCRIPT CANVAS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Mary Lou June 10, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS MOTION HOVER EFFECT FOR A BACKGROUND IMAGE GRID Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js

Author Toshiya Marukubo May 18, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS JAVASCRIPT CANVAS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Tadas Karpavičius May 2, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS (SCSS) / JS MOTION Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Pavitra Golchha May 2, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS 1337 MATRIX Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Red April 20, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS GRID WORMS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js

Author Manan Tank March 26, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML (Pug) / CSS (Stylus) / JS HELLO MATRIX Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author ycw March 24, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML (Pug) / CSS (Less) / JS HELLO LIGHT Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Johan Karlsson March 19, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS (Babel) RANDOM CHEVRON PATTERN Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Kevin Levron February 26, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS (Babel) RANDOM, COS AND SIN Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Johan Karlsson February 25, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS (Babel) COLORFUL CIRCLES Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Johan Karlsson February 25, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS (Babel) COLORFUL SQUARES Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js

Author Johan Karlsson February 21, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS (Babel) ORANGE SQUARES Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Paul Neave February 19, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS WOBBLE Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Strahinja Babić February 19, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS BACKGROUND SHAPE CHANGE Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Ben Matthews February 7, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS TRUCHET LATTICE Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Fabio Ottaviani January 4, 2020 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS (SCSS) / JS (Babel) FLOW FIELD N.2 Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Simon Goellner December 8, 2019 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS (SCSS) / JS OBLIGATORY FALLING SNOW Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Alfons Nilsson November 22, 2019 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS METABALLS - WEBGL Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Chris Smith October 17, 2019 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS (SCSS) / JS FILL BACKGROUNDS WITH ANIMATION Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Scott Weaver September 21, 2019 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS TRIPLE "A" WALLPAPERS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Michal March 15, 2019 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS FIREFLIES Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Michael Burridge February 19, 2019 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS / JS BACKGROUND TEXTURE ACROSS SEVERAL DIVS Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: easeljs.js, tweenmax.js Author Hakim El Hattab February 5, 2019 Just Get The Demo Link How To Download - Article How To Download - Video Author HTML / CSS (SCSS) / JS (Babel) Read the full article

[vash3r]

the wungler is complete! I slightly underestimated the amount of vanillajs necessary to manipulate the DOM but it's still relatively small (~40sloc and 8 css rules).

now there's just one issue left... i implemented it as a New Xkit (v7.9.2) extension (because that's what i have), and I don't know if the API carries over to Xkit Rewritten.

(also i dont know how to directly share it other than by directly copypasting the json)

test wungle 󠁹󠁯󠁵󠀠󠁪󠁵󠁳󠁴󠀠󠁧󠁯󠁴󠀠󠁷󠁵󠁮󠁧󠁬󠁥󠁤󠀡󠀠󠁲󠁥󠁢󠁬󠁯󠁧󠀠󠁴󠁯󠀠󠁴󠁯󠁴󠁡󠁬󠁬󠁹󠀠󠁷󠁵󠁮󠁧󠁬󠁥󠀠󠁡󠁬󠁬󠀠󠁹󠁯󠁵󠁲󠀠󠁦󠁲󠁩󠁥󠁮󠁤󠁳󠀠󠀺󠀩post

this one has wungle content encoded in unicode Tag characters (between the words 'wungle' and 'post'), which are part of the main post content (and can be copy-pasted) but don't display glyphs. they can be inserted in the html editor with escape codes, but the plan is for the extension to encode/decode wungle text from the clipboard or something ala qaz.wtf. it only supports ascii though and right now i'm not up to implementing some kind of base64 for this

[goodwishmatyila]

JavaScript MasterClass - Fundamentals: w/ Africa Knowledge Accelerator

[jrperiod]

Day - 51 100dayofcode Basic JavaScript: Iterate with JavaScript For Loops

You can run the same code multiple times by using a loop.

The most common type of JavaScript loop is called a "for loop" because it runs "for" a specific number of times.

For loops are declared with three optional expressions separated by semicolons:

for ([initialization]; [condition]; [final-expression])

The initializationstatement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.

The conditionstatement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to true. When conditionis falseat the start of the iteration, the loop will stop executing. This means if conditionstarts as false, your loop will never execute.

The final-expressionis executed at the end of each loop iteration, prior to the next conditioncheck and is usually used to increment or decrement your loop counter.

In the following example we initialize with i = 0and iterate while our condition i < 5is true. We'll increment iby 1in each loop iteration with i++as our final-expression.

var ourArray = []; for (var i = 0; i < 5; i++) {  ourArray.push(i); }

ourArraywill now contain [0,1,2,3,4].

Use a forloop to work to push the values 1 through 5 onto myArray.

Run the TestsReset All Code

Get a hint

Ask for help

[eossa]

Medea

Page 51 by @eossa

A responsive page that you can use to display your favorite media or as a portfolio page, with combination filtering and dark mode.

Previews: vanillaJS version | noJS version

When you download the code (here, here, or here), you will receive both the vanillaJS and the noJS version. For concerns regarding customization or credits, please refer to the page guide.

[owlsasylum]

#PacificLibraryClub #bookrecommendations #booklover #books #bookstagram #booknerd #book #booksbooksbooks #javascript #frontend #frontenddev #frontenddeveloper #vanillajs #vanillajavascript https://www.instagram.com/p/CHjFcJpAD2U/?igshid=1euqva3o2uxb5

[c0de-read-blog]

Made a realtime pocketwatch in Inkscape today and animated it using pure vanilla JavaScript. I wish I would have spent some more time making sure the Roman numerals were in the correct places so that the watch would be more accurate, but it’s okay. I’m happy with how it turned out, overall. :)

If you wanna watch it tick, you can check it out here! 

It only works on Chrome right now. NOT MOBILE FRIENDLY. Sorry guys.

[tarekraafat]

autoComplete.js Library v6.0 - Just Released!

autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed, high versatility and seamless integration with wide range of projects & systems, made for users and developers in mind.