# Vanilla JavaScript Vanilla JavaScript is JavaScript written without frameworks or intermediary languages. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Vanilla JavaScript support for Tailwind Plus DevFeed: [Vanilla JavaScript support for Tailwind Plus]() Original publisher: [Read original article]() Published: 2025-07-25T14:30:00Z Content type: release Language: en Sources: [Tailwind CSS Blog]() Topics: [Tailwind CSS](), [Vanilla JavaScript](), [ui](), [JavaScript](), [HTML](), [aria](), [dialog](), [cross-platform](), [Web platform]() Tags: [aria](), [component](), [cross-platform](), [dialog](), [framework](), [html](), [javascript](), [tailwind](), [ui]() ### AI overview Tailwind Plus now provides fully functional, accessible, and interactive UI blocks for projects that do not use React or Vue. Its new Elements library offers headless custom elements for building interactive interfaces with HTML, utility classes, or custom CSS. ### Source excerpt Every UI block in Tailwind Plus is now fully functional, accessible, and interactive, even if you don't use a framework like React or Vue. ## Self-host Maps with Protomaps and Supabase Storage DevFeed: [Self-host Maps with Protomaps and Supabase Storage]() Original publisher: [Read original article]() Author: Brandon Liu; Thor Schaeff Published: 2024-06-19T07:00:00Z Content type: tutorial Language: en Sources: [Supabase Blog]() Topics: [Supabase](), [Web](), [Vanilla JavaScript](), [TypeScript](), [WebGL](), [Authorization](), [Command-line interface]() Tags: [authorization](), [cli](), [open-source](), [tutorial](), [typescript](), [web](), [webgl]() ### AI overview This tutorial explains how to self-host Protomaps PMTiles on Supabase Storage, render the map with MapLibre GL in a browser, and restrict access using Supabase Edge Functions and authentication. ### Source excerpt Host Protomaps PMTiles on Supabase Storage and render them with MapLibre GL. ## How to Build a Secret Dark Mode Toggle for Your Blog DevFeed: [How to Build a Secret Dark Mode Toggle for Your Blog]() Original publisher: [Read original article]() Published: 2020-10-26T00:00:00Z Content type: tutorial Language: en Sources: [Radek Pazdera]() Topics: [Dark Mode](), [CSS](), [HTML](), [JavaScript](), [Vanilla JavaScript](), [Web Development]() Tags: [css](), [dark-mode](), [how-to](), [html](), [javascript]() ### AI overview A tutorial on building a secret dark mode toggle for a blog using vanilla HTML, CSS, and JavaScript. It covers theme custom properties, detecting the operating system's dark mode setting, creating a toggle, and hiding an Easter egg. ### Source excerpt A simple Easter egg in vanilla HTML, CSS and JavaScript ## Calculating Color: Dynamic Color Theming with Pure CSS DevFeed: [Calculating Color: Dynamic Color Theming with Pure CSS]() Original publisher: [Read original article]() Published: 2019-12-05T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [color](), [modern web development](), [Vanilla JavaScript]() Tags: [color](), [css](), [internet-explorer](), [javascript](), [properties](), [property](), [themes](), [variable]() ### AI overview This tutorial explains how to build dynamic color themes using pure CSS, custom properties, HSL values, and calc(). It demonstrates recreating common color transformations, including lightening, darkening, analogous, complementary, and triadic colors, without JavaScript or a CSS preprocessor for modern browsers. ### Source excerpt Did you know that you can build custom dynamic color themes without the use of JavaScript or a CSS preprocessor!? Read on! ## How to show Groovy and Kotlin DSL samples side-by-side DevFeed: [How to show Groovy and Kotlin DSL samples side-by-side]() Original publisher: [Read original article]() Author: Eric Wendelin Published: 2018-10-11T04:00:00Z Content type: tutorial Language: en Sources: [The Gradle Blog]() Topics: [Groovy](), [Kotlin](), [Documentation](), [GitHub](), [Markdown](), [CSS](), [HTML](), [JavaScript](), [interactive website](), [Vanilla JavaScript](), [LocalStorage](), [Web Development]() Tags: [css](), [documentation](), [github](), [gradle](), [groovy](), [guides](), [html](), [javascript](), [kotlin](), [markdown](), [ui]() ### AI overview A tutorial on displaying Groovy and Kotlin DSL examples side by side in GitHub READMEs and web-based documentation. It covers Markdown and HTML disclosure elements for GitHub, plus a CSS and vanilla JavaScript language-selector UI for websites that remembers the user's preferred language. ### Source excerpt Gradle build script samples now have Kotlin DSL snippets alongside the Groovy snippets in Gradle 5.0 docs and many Gradle guides. We want you to be able to show both DSLs in your READMEs and web-based documentation, so this post shows ways you can display examples in multiple languages on GitHub and on your websites. Groovy and Kotlin DSL samples on GitHub It's hard to find OSS projects that don't have a README.md or README.adoc. Though there aren't many ways to make these README pages interactive, we can use the
and HTML elements within Markdown or Asciidoc achieve a bit of interactivity yet avoid the verbosity of having multiple subsequent samples in view. Use these code snippets to show multi-language snippets on GitHub.
Groovy ```groovy logging.captureStandardOutput LogLevel.INFO println 'A message which is logged at INFO level' ```
Kotlin ```kotlin logging.captureStandardOutput(LogLevel.INFO) println("A message which is logged at INFO level") ```
++++
Groovy ++++ [source,groovy] ---- logging.captureStandardOutput LogLevel.INFO println 'A message which is logged at INFO level' ---- ++++
++++ ++++
Kotlin ++++ [source,kotlin] ---- logging.captureStandardOutput(LogLevel.INFO) println("A message which is logged at INFO level") ---- ++++
++++ Here it is in action: Note that this won't work for jekyll or static websites, so there we have to write a bit of code. Groovy and Kotlin DSL samples on the web With a bit of CSS and JavaScript, you can make a nice little language selector UI that remembers user selections. The combination of this vanilla CSS, HTML, and JavaScript creates what you see at the top of the post. A little bit about what the code does: First, the JS initializes the preferred language, getting and storing in window.localStorage so that user preferences are saved. Ne ## Frameworkless JavaScript Part 3: One-Way Data Binding DevFeed: [Frameworkless JavaScript Part 3: One-Way Data Binding]() Original publisher: [Read original article]() Author: Jack Tarantino Published: 2018-02-26T00:43:11Z Content type: tutorial Language: en Sources: [Jacopo Tarantino]() Topics: [JavaScript](), [Vanilla JavaScript](), [data](), [Document Object Model (DOM)](), [proxy](), [React](), [Angular](), [Ember]() Tags: [angular](), [callback](), [code](), [developers](), [ember](), [javascript](), [re](), [react]() ### AI overview A tutorial on implementing one-way data binding in frameworkless JavaScript using native APIs, the DOM, ES6 Proxy objects, and callbacks. It explains how to update DOM content when data changes and works toward reusable node and proxy constructors. ### Source excerpt This article is one in a series about writing client-focused JavaScript without the help of libraries and frameworks. It's meant to help developers remember that they can write good code on their own using nothing but native APIs and methods. For more, check out the original article on writing small ## Frameworkless JavaScript Part 2: Templates and Rendering DevFeed: [Frameworkless JavaScript Part 2: Templates and Rendering]() Original publisher: [Read original article]() Author: Jack Tarantino Published: 2017-01-08T18:19:00Z Content type: tutorial Language: en Sources: [Jacopo Tarantino]() Topics: [Vanilla JavaScript](), [JavaScript](), [Code](), [Framework]() Tags: [best-practices](), [code](), [frameworks](), [how-to](), [javascript](), [templates](), [templating](), [vanilla-javascript]() ### AI overview This tutorial explains how to implement basic HTML templating and string interpolation with vanilla JavaScript, using native APIs and methods instead of libraries or frameworks. ### Source excerpt This article is one in a series about writing client-focused JavaScript without the help of libraries and frameworks. It's meant to help developers remember that they can write good code on their own using nothing but native APIs and methods. For more, check out the original article on writing small ## Plain JavaScript animated window scroll function DevFeed: [Plain JavaScript animated window scroll function]() Original publisher: [Read original article]() Author: Stanko Published: 2016-09-28T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [JavaScript](), [Vanilla JavaScript](), [npm](), [Web Development]() Tags: [element](), [import](), [input](), [javascript](), [npm](), [object]() ### AI overview A tutorial presenting a plain JavaScript function for smoothly animating window scrolling without requiring jQuery. It documents the animated-scroll-to npm package, including installation, usage, duration settings, the scroll element, and cancellation on user input. ### Source excerpt Before modern frameworks, I always used jQuery's scrollTo method. At some point, not every project included jQuery, so I wrote simple function to animate window scroll. I have kept copying that function from project to project. Finally I took some time, cleaned it up and published it on the npm (this is the first npm package I published). Check the demo and read documentation of Github. Find it on Github and npm Installation # npm install animated-scroll-to Usage # import animateScrollTo from 'animated-scroll-to'; // desiredOffset - page offset to scroll // options - object with options // default options const options = { // duration of the scroll per 1000px, default 500 speed: 500, // minimum duration of the scroll minDuration: 250, // maximum duration of the scroll maxDuration: 1500, // DOM element to scroll, default window // Pass a reference to a DOM object // Example: document.querySelector('#element-to-scroll'), element: window, // should animated scroll be canceled on user scroll/keypress // if set to "false" user input will be disabled until animated scroll is complete cancelOnUserAction: true }; const desiredOffset = 1000; animateScrollTo(desiredOffset, options); ## Developing small JavaScript components WITHOUT frameworks DevFeed: [Developing small JavaScript components WITHOUT frameworks]() Original publisher: [Read original article]() Author: Jack Tarantino Published: 2016-04-17T20:11:45Z Content type: tutorial Language: en Sources: [Jacopo Tarantino]() Topics: [Vanilla JavaScript](), [Web Development](), [Frameworks]() Tags: [best-practices](), [code](), [developers](), [frameworks](), [javascript]() ### AI overview This tutorial argues that small JavaScript components can often be built with vanilla JavaScript instead of frameworks, plugins, and other tooling. It uses a programmatically generated employee list for a corporate homepage to examine the problem scope and question whether heavier tools are necessary. ### Source excerpt You too can write vanilla JavaScript! A mistake that a lot of developers make when they first approach a problem (me included!) is to start thinking about the problem from the top down. They start thinking of the problem at hand in terms of frameworks and plugins and pre-processors and ## Play Framework - Kevin Galligan DevFeed: [Play Framework - Kevin Galligan]() Original publisher: [Read original article]() Published: 2011-10-08T04:00:00Z Content type: opinion Language: en Sources: [Touchlab | Enterprise Mobile Innovation & Development]() Topics: [Frameworks](), [Vanilla JavaScript](), [Web Development](), [Mobile](), [Heroku](), [Google]() Tags: [android](), [development](), [distributed](), [framework](), [google](), [heroku](), [java](), [mobile](), [thoughts](), [web]() ### AI overview Kevin Galligan reflects on his first week using the Play Framework, comparing it with Seam for Java web development. He discusses Play's simplified stack, its lack of session and conversation scopes, and the trade-offs involved in deploying applications on services such as Heroku and Google App Engine. He also describes wanting a framework that can support mobile apps and enable rapid prototyping and deployment. ### Source excerpt It's been a week with the play framework. The summary? Play comes from France. The differences from frameworks I've used in the past are very significant.