#vanillajs

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day20 : Bookmark reader using only Raindrop.io API

Inspired by the excellent design and functionality from @iamrobin https://www.iamrob.in/bookmarks

Online demo :
https://teotimepacreau.github.io/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode

Project goals ↓

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day19 : Issue Tracker

Online demo :
https://teotimepacreau.github.io/Issue-Tracker-Day19-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Issue-Tracker-Day19-Of-100DaysOfCode

Project Goals :
- textArea length Checker with .length string property
- localStorage
- status updater is possible with a button that updates the JSON

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day18 : Github profile insights

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/My-Github-Insights-Day18-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/My-Github-Insights-Day18-of-100DaysOfCode

Project Goals :
- handle multiple API endpoints chaining promises method
- array destructuring, .map(), .join()

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day17 : List Randomizer

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/Grocery-List-Randomizer-Day17-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Grocery-List-Randomizer-Day17-of-100DaysOfCode

Project Goals :
- FormData JS object
- users can add item, select a random item and see a toast notification
- localStorage

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day16 : DynamicTable Of Contents

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/Dynamic-Table-of-content-Day16-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Table-of-content-Day16-Of-100DaysOfCode/blob/main/README.md

Project Goals :
- dynamic TOC by retrieving h2 ID's and then set anchor link
- Missing IDS are intentionnally set in
- User generate title

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment

Implementing my own dark-mode toggle icon using JavaScript+CSS+SVG, and really enjoying writing plain vanilla JavaScript. You can do a lot in just a few dozen lines of boilerplate vanilla JavaScript that is easily googleable. It's honestly not that bad, and I don't have to deal with the Lovecraftian nightmare of complexity that is npm, yarn, babel/webpack, React, etc.
http://vanilla-js.com/
#javascript #vanillajs

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day15 : Popover API and Anchor Positionning

Tuto by the great @jhey

Online demo :
https://teotimepacreau.github.io/Popover-API-and-Anchor-Positioning-Day15-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Popover-API-and-Anchor-Positioning-Day15-of-100DaysOfCode

Project goals :
- Popover API
- Anchor positioning to avoid position absolute
- Best UI practices for dropdown

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #Front #Components

Nur das Wetter machte nicht mit. Sonst aber… https://mont.thomasweibel.ch (iOS only). #opendata #vanillaJS #geoinformatik

Na, geht doch. https://mahjongg.thomasweibel.ch #games #vanillaJS

@loupbrun @antoinentl RDV 20 Juin pour - PAGED.JS

"Faire du Web to print et transformer des contenus HTML en PDF depuis un navigateur."

#HTML2PRINT #WebToPrint #PAGEDJS #CSS #VanillaJS @julieblanc @julienbidoret @polylogue @kajou @jeremy

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day14 : Interactive Form

Online demo :
https://teotimepacreau.github.io/Interactive-Form-Day-14-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Interactive-Form-Day-14-of-100DaysOfCode/blob/main/README.md

Project goals :
- learning input, forms and radio buttons UI best practices
- form validation, error alerts, password visibility
- checking for best practices to control email, passwords

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

Mit dem #Gamedev müsste man mal ein Wörtchen reden. https://mahjongg.thomasweibel.ch #vanillaJS

Im Frühtau zu Berge: Berggipfel erkennen mit MONT (iPhone only). https://www.thomasweibel.ch/mont2/ #vanillaJS #OpenData

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day13 : Sliding Menu and Grid App View

Online demo :
https://teotimepacreau.github.io/Sliding-menu-and-grip-app-view-Day13-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Sliding-menu-and-grip-app-view-Day13-Of-100DaysOfCode

Project goals :
- lch() color function
- button alignment with ::before technique (vertical-align: middle) and UI principles of 2ex padding-inline for 1ex padding-block

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

The video recording (in French) of my "VanillaJS & the Web Platform, a match made in heaven?" talk at Very Tech Trip is now online, https://grep.codeconsult.ch/2023/03/29/vanilla-js-web-platform/
#webplatform #vanillajs #webcomponents

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day10 : View Transitions API

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-Day10-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-Day10-Of-100DaysOfCode

Project goal :
- View Transitions API experimentation : understanding principle of implementation with VanillaJS .startViewTransition and DOMChanges activator

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily #ViewTransitionsAPI

@calebhailey
They are not wrong you know? :thinkerguns:
Kudos to them for linking the Mozilla documentation.

#codinghumor #javascript #vanillajs

This is pretty funny actually: http://vanilla-js.com

"0 bytes uncompressed" 😅

#Javascript #VanillaJS

@calebhailey also searching for a #VanillaJS community

@notabene Je ne comprends pas comment il peut être possible de recommander à quelqu'un d'apprendre directement un framework type React sans avoir les bases #HTML #CSS #VanillaJS

Just enabled the Live Demo, check it out https://plrang.github.io/CHIP8-Interpreter-Vanilla-Javascript/ #chip8 #js #javascript #emulator #interpreter #spaceinvaders #retrogames #codingisfun #vanillaJS

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day9 : Expandable FAQ

Online demo :
https://teotimepacreau.github.io/Expandable-FAQ-Day9-of-100DaysofCode/

Source Code : https://github.com/teotimepacreau/Expandable-FAQ-Day9-of-100DaysofCode

Project goals :
- VanillaJS closest selector and lastElementChild + DOM manipulation
- CSS use of linear gradient and box shadows
- multiple flexbox imbrication
- Font awesome icon toggle

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day8 : Glassmorphism split page

Online demo :
https://teotimepacreau.github.io/Split-Glassmorphism-Landing-Day8-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Split-Glassmorphism-Landing-Day8-of-100DaysOfCode

Goals :
- glassmorphism effect with CSS z-index, backdrop-filter, background-clip and box-shadow
- Vanilla JS add a class on mouseenter and remove class on mouseleave event
- CSS opacity and visibility transition for smooth

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day7 : Brutalist portfolio landing page and reveal animation

Online demo :
https://teotimepacreau.github.io/Brutalist-portfolio-landing-page-Day7-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Brutalist-portfolio-landing-page-Day7-of-100DaysOfCode

Goals :
- IntersectionObserver of VanillaJS to rerecreate scroll trigger without GSAP
- different CSS transition-delay on each line element to give the stagger feel
- CSS translateY, opacity and cubic-bezier

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS #GSAP

#Day6 : Text line filling opacity animation

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode

Goals :
- VanillaJSto add a line-mask div in each line (forEach and appendChild)
- line-mask CSS class with position absolute that cover the line from right to left with high opacity

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #Greensock

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day4 : #SlidingMenu and art landing page

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode

Goals :
- grid template areas
- position absolute and z-index for menu slider
- opacity transition
- mouse follower
- :hover and ::before to anim menu items
- Vanilla JS class toggle with click listener

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

I'm not saying that #jquery is bad, or that you should stop using it, or remove it from your app. It was instrumental in my initial #javascript training, and sometimes it's just easier to use than #vanillajs.

What I _am_ saying, however, is that #javascript has matured since then, and I want to have fewer dependencies in my projects these days.

Thus, I'm planning to eradicate it from anything I work on if I can.

#css got better, too, so I'm probably gonna stop using #sass so much, as well.

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day3 : Effet de défausse et #ContainerQueries

Le projet est à retrouver sur : https://teotimepacreau.github.io/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode

Goals :
- enabling dynamic and adaptive styling with container queries
- border-radius container handle images thanks to "overflow: hidden"
- discarding effect with translateX + rotate + scale

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

Heute vor 550 Jahren wurde Nikolaus Kopernikus im polnischen Toruń geboren. Zu seinen Ehren habe ich sein Hauptwerk, „De revolutionibus orbium coelestium“ aus dem Jahr 1543, auf der Basis seiner eigenen Illustration des Planetensystems animiert. Auf dass wir alle stets die richtigen Dinge in den Mittelpunkt stellen mögen. https://www.thomasweibel.ch/copernicus/ #opendata #openglam #vanillaJS @OpendataCH @OpenDataZurich @OSUniBe @OpenCulture

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day2 : Barre de progression évolutive accompagnée d'icônes

Le projet est à retrouver sur : https://teotimepacreau.github.io/Progress-Steps-Day2-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Progress-Steps-Day2-of-100DaysOfCode

Objectifs :
- position relative and position absolute to create the progress bar
- disabling and enabling buttons
- Cursor not-allowed and cursor pointer
- Vanilla JS IF logic

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

Customary #Safari is the new IE.

Just found out the <script type=importmap>, which makes it much easier to handle modules and dependencies with vanilla JS (without bundlers/building). Unsurprisingly, Safari is absolutely nowhere to be seen in that regard. 🤷 Oh well.

https://caniuse.com/mdn-html_elements_script_type_importmap

#webdev #webdevelopment #javascript #vanillajs #html #standards #frontend

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day1 : Création de cartes extensibles pour contenir des images dynamiquement

Le projet est à retrouver sur : https://teotimepacreau.github.io/Expanding-Cards-Day1-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Expanding-Cards-Day1-of-100DaysOfCode

- handle images with object-fit: cover
- Vanilla JS eventListener, loops, class and attributes handling, create/remove DOM elements

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #LearningDaily #FrontendDevelopment #WebDevelopment

I no longer criticise frameworks and stuff like Tailwind, even though I personally would not use them. I love it that the web is big enough for you to use whatever library, framework, system, or technique that you like, and that there are so many different ways to build stuff. It's a sign of strength in a system.

Heck you can even use #jquery or *gasp* #vanillajs and still have cool websites and apps.

Just, please only use #html tables for tabular data.

So many people have told me that you should become an expert in #react if you want to be successful as a #webdeveloper but that's like saying as a chef you should only know how to cook steaks. There's so much more to the web than React, but it's big enough that you can do that if you want, or use PHP , or Vue ( Just .. not Angular please ) .

The point is - if you stick to standards and use semantic tagging with accessibility in mind, you should be free to use whatever kind of code technique you want. And you should NOT have to feel like you have to just be a React / Tailwind developer. Be a #web developer.

Mit MONT Schweizer Berge entdecken: Smartphone auf den Horizont richten, Namen sowie Gipfelhöhe und Entfernung ablesen (iOS only). https://www.thomasweibel.ch/mont2 @OpendataCH @OpenDataZurich #opendata #vanillaJS

I prefer to write #VanillaJS in order to avoid tooling and make my webpages hackable/debuggable. However, I'll be first to admit that using the DOM to populate a template is the coding equivalent of CBT.

It sucks that web standards haven't embraced JSX style rendering like they had embraced jQuery style APIs. Thankfully, @webreflection's µhtml library might the closest to having vanilla JSX https://github.com/WebReflection/uhtml/blob/main/DOCUMENTATION.md

#JavaScript #frontend #programming

En lecciones aprendidas descubrí que #rails tiene cosas bonitas. No lo usaría, pero me permito admirar el calibre de proyecto que es. #ruby sigue sin gustarme ni un poco.

Y me mantengo firme en mi creencia de que #react es de hecho una mala elección si quieres que tu software sea pueda mantener hoy y en cinco años. #vanillajs ftw

My #Frontend dev journey:
#jQuery -> #React -> #Angular -> #VanillaJS -> #jQuery

When using #babel to #transpile a #nodejs library, is there something you must configure for editor #IntelliSense to work when importing the library? The actual import map is working (I can use modules in my project) but class properties and methods don’t have any IntelliSense in #vscode and in #webstorm class properties are highlighted as “undefined“ (even though they work just fine).

#webdev #question #SoftwareDevlopment #development #bundler #webpack #javascript #typescript #vanillajs

One of my goals for 2022 is to get back up to speed with vanilla JavaScript. No frameworks, just pure JS. Diving back into some new techniques and projects. Who else is focusing on the fundamentals this year? #javascript #vanillajs #newyearsresolution #coding

Cool thing about Custom Elements is you can call your methods from the DOM element directly. Such a great way to organize UI code with #VanillaJS

#javascript #frontend #programming #WebComponents

@IrrsinnHilft @DeveloperMemes drum verzichtet man wos geht idealerweise auf #javascript und schreibt wenn es nötig ist auch alles in #vanillajs (entsprechende erfahrung vorausgesetzt) :)

Im Frühtau zu Berge: MONT ist eine Augmented-Reality-Webapp für iPhones (iOS only), die sämtliche Hügelkuppen und Berggipfel der Schweiz einschliesslich Höhe und Distanz angibt. Die App basiert auf #Opendata, nutzt ein flat-file-Datenmodell und ist in #VanillaJS geschrieben. #swisstopo
Mehr: https://www.thomasweibel.ch/?post=mont-2
App: https://www.thomasweibel.ch/mont2

Any Svelte/Vite/Vanilla JS developers here who'd like to give me tips for my code? https://github.com/ronilaukkarinen/finnish-mastodon-users/blob/6d899cd72d8f48875ac557017a5dbdf2e77064fc/main.js

It's currently not performant and may even crash the browser. If the authorize/follow function is enabled, getting easily rate limited.

All tips appreciated. #Developers #WebDev #JS #JavaScript #VanillaJS #Svelte #Vite #GitHub #OpenSource #Performance #Coding #CodingTips #HelpWanted

@acbilson forget what I said...

As they stand now without framework - #WebComponents are a nightmare to do in #vanillaJS. Let my last three weeks of back and forth be a testament to that!
(눈_눈)

Tried to attach #ShadowDOM to this blasted table, and it won't let me. Turns out we can have it on only so much base elements, and the most generic ones at that: div, article, section, etc.

To top it all, unhelpful #JavaScript error messages made me go debugging for other 3 hours!

Mit MONT Schweizer Berge und Hügel entdecken (iOS only): iPhone auf den Horizont richten, Namen sowie Gipfelhöhe und Entfernung ablesen. https://www.thomasweibel.ch/mont2/ #opendata #swisstopo #vanillaJS @OpendataCH

Wrote my first use of web #DragAndDrop tonight. I'm using #SolidJS for the main editing UI, so I wasted yesterday's coding trying to find+use a native D&D library for that, but stable object identity + #VanillaJS turned out to be much simpler than decoding those libraries' documentation.

Ein Höhenmesser für unterwegs? Voilà. https://www.thomasweibel.ch/altiswiss/ #opendata #vanillaJS

As an expert in unfinished projects, I thought I'd share some ancient web dev projects.

(2006)
https://talltree.us
Freelance development site. #ClassicASP, #TSQL
Includes a web UI for hosted sites.

(2006)
https://wireframe.talltree.us
Neat (free) wireframing tool but horribly coded in bad #VanillaJS. With a better UI/UX it could have been a fun project / service.

(2017)
https://fi.retorch.com
Manually track transactions, account balances, see #budget reports and net worth. Needs charts badly.

@jeff Similar. Comfortable in C#, SQL, even #VanillaJS - but takes a bit to get anywhere with #Angular or #React. A few years ago I was building a bunch of internal tools on Angular 7 #TypeScript! and that was pretty satisfying. But I've yet to start a React project from scratch and get anywhere...

@benjaminhollon OMG that is funny didnt know there was a framework called #vanillajs .
I thought that just meant pure js.

I guess I’ll spend some time with PWAs this weekend. Service workers seem straight forward. I just have to figure out if it’s feasible to write a proper app using #vanillaJS. For a few state transitions and a handful API calls as solo dev frameworks seem extremely wasteful.

Currently experiencing the unbridled joy of prototyping in vanilla JavaScript, without anyone trying to make me use TypeScript or webpack.

Live reload for the win. #VanillaJS

Made this thing at a hackathon: https://andri.io/woer
#effectivealtruism #xrisk #existentialrisks #vanillajs

A web page pretending #VanillaJS is a 0-kB #Javascript #Framework.

http://vanilla-js.com/

It's a joke, of course, and while reading the page the more experienced #webdevs among us should recognize it as such. Vanilla JS is what browsers give us, based on the EcmaScript specs and their own. It is not a script or library to load into a web site: it's already there.

The page author probably uses this to mock all those webdevs who couldn't write JS to save their lives, without jQuery...

#JavaScript doesn’t have to be bloated. Use http://microjs.com/ if you need a bit of help from dependency-free micro-libraries.

#vanillajs #leanweb

I'm glad this weird thing I helped make still exists. I should add touchscreen controls some time. #games #rva #vanillajs #hackrva https://games.hackrva.org/moon-defender/

#introduction #introductions

I've been a #webdeveloper for 17+ years, although back then you were called #webdesigner. Working with the classic #lamp stack, focus is on #WordPress, #ecommerce and #usability.

#linux #debian #ubuntu #xfce #php #oop #plugins #vanillajs #opensource

#Webradio #DJ for 15+ years. Weekly show: http://blackndeather.org

Other:
#musick #metal #blackmetal #punkrock #industrial #ebm #powernoise #breakcore #electro #darksynth #cubism #dadaism

Let's try to find people with common insterests using some hashtag magic, shall we?

#ableton #abletonlive #bitwig #sampling #beatmaking #maschine

#ruby #nodejs #golang #elixir #vanillajs

#aerial #trapeze #silks

#toronto #parkdale #kensington #junction