JavaScript

🖥 how you can directly import JSON data efficiently into your ❤️ Svelte app thanks to SvelteKit's Vite tooling.

Handy when your client wants to update a site you hand over.

Hope you find it useful!

https://rodneylab.com/sveltekit-json-import/

framework requirements:

- split desktop similar to the application
- possibility to control the layout on the fly - show, hide, zoom in, zoom out
- minimization of client-server communication during work 
- clear structure on the server side
- access controlled via AD 
- no redrawing of already displayed content when reading "subpages" .. no flashing
(it is debatable whether to talk about sub-page here, maybe is better say form or report)
- menu constantly available 
- show where I am and who I am 
- central variable store
- local variable store for the current "sub-page"
- central control by one script 
- all other are dynamic scripts ... clean up after each other when the "subpage" is finished .. when her user left
- use of common central libraries in JS ... objects
- objects can be combined in different ways 
- all objects managed only by parameters => no inheritance, no additional functionality added by inheritance
- communication with server side only AJAX, POST, JSON
- modal windows, formulas .. at least 2 levels
- charts
- datetimepicker with positioning
- tabs
- messages .. errors, warnings, information
- complex tables => tables in tables .. classic HTML tag table is slow ... paging, filters, sorting, row, cell, column selection, text rotation, colspan
- file gallery, image gallery, EXIF
- data processing, import .. CSV on client ... to AJAX server with already processed data
- export CSV, XLSX creation on client
- multilingualism = translations
- no work with HTML templates, all is created by using JavaScript a jQuery => no spaghetti code

It took me a couple of days more but I'm happy finished the 30 day challenge 😊

https://javascript30.com/

Made a 🎵Music Player 🎶 with HTML, CSS and Vanilla Javascript.

👉 The basic features of the Music Player are:
🔹 It displays the song's title and artist's name.
🔹 It also displays the total song duration,
🔹 And updates the current lapsed duration too, as the song is playing.
🔹 It allows user to play and pause any song.
🔹 It also allows user to jump to a specific time in the song.
🔹 The user can use the 'Play All' feature to play all the songs in the list.
🔹 There are options to go to the next or the previous song.
🔹 The song cover image changes with each song.

👉 What did I learn?
🔹 About HTMLAudioElement API and its events.
🔹 I created the design for the UI in Figma. I learnt how to create reusable components in Figma.
(If you guys have any resources to learn Figma, please let me know in the comments.)

Live Demo on Github

For anyone learning JavaScript and finding it difficult to understand, you may find many resources on youtube but there is one which I recently came across and kinda got my attention. I would like to share that with the network, following is the youtube playlist created by an Indian YouTuber known as "Namaste JavaScript" where "Namaste" basically means "Hello" and trust me when I say, you will fall in love with JavaScript post watching it. Do give it a try :
(https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP)

Just completed a great Javascript course. This is my jumping off point for learning Google Tag Manager, Apps Script, React or other web technologies in depth.