Téotime Pacreau · @teotimepacreau
57 followers · 271 posts · Server mastodon.design#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day41 : Beginned email template in Newsletter Express project
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Learned :
-inline styles
-html tag <style>
-email HTML current state : can get rid of tables if using divs. Still need to learn more about the support of semantic html elements
#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS #emailgeeks
#100daysofcode #nodejs #express #sqlite #vanillajs #day41 #webdev #frontend #css #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js #emailgeeks
Téotime Pacreau · @teotimepacreau
56 followers · 264 posts · Server mastodon.design#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day40 : Added unsubscription logic and SQL handling in Newsletter Express project
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Added :
- Unsubscription logic : Create a route for users to unsubscribe from the newsletter. Update the database accordingly.
Learned :
-async await handling of errors in Express, require to try catch and next to a middleware
#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #nodejs #express #sqlite #vanillajs #day40 #webdev #frontend #css #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
Téotime Pacreau · @teotimepacreau
56 followers · 264 posts · Server mastodon.design#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day39 : Continuing Newsletter Express project with several UI changes
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Added :
- modified homepage
- unsubscribe page
- beginned unsub route but i need to add SQL DELETE for the email
#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #nodejs #express #sqlite #vanillajs #day39 #webdev #frontend #css #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
Téotime Pacreau · @teotimepacreau
54 followers · 262 posts · Server mastodon.design#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day38 : Newsletter building
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Learned :
- intro to Backend : learned basics of NodeJS, Express and SQL
- Express subscription routes : adding entries from the user to an SQLite database
- Displaying notif if the entries are correctly added
#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #nodejs #express #sqlite #vanillajs #day38 #webdev #frontend #css #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
Téotime Pacreau · @teotimepacreau
50 followers · 227 posts · Server mastodon.design#Day33 :Classes Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Classes-Exercice-Day34-of-100DaysOfCode/tree/main
Learning :
- class allows to create an object with built in properties
- class `constructor` is the better way to add properties
- this
- class extending to create child objects of the class that herits properties
- `constructor` and `super` to rewrite or add properties to the child class
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #vanillajs #day33 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
Téotime Pacreau · @teotimepacreau
50 followers · 224 posts · Server mastodon.design#Day32 : Sets and Maps Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Sets-and-Maps-Exercices-Day32-Of-100DaysOfCode
- `Set` to get unique elements from an array
- `Map` to organize array in objects using as we want keys
- find unique values in a big array combinating `map` array method, flattening and `Set`
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #vanillajs #day32 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
barefootstache · @barefootstache
101 followers · 960 posts · Server qoto.org#DailyBloggingChallenge (13/25)
One of my favorite things to do is exploit the DOM (ethical concerns aside).
Lots learn early on if some pesky web component is blocking your view, just delete it in the developer’s tools.
This is usually the spark into what other configurations are possible.
As a #WebDeveloper by trade we are constantly in the developer’s tools trying to understand why certain elements are behaving the way they are - visually or in action. Though we have access to the code base, so it’s easier to understand.
The fun begins when you only have access to the website!
- For one time edits basic DOM manipulations will suffice.
- For simple tasks the console will suffice.
- If you started editing the CSS, you can save your changes and load them next time you visit.
- If you don’t care about #fingerprinting, you can use extensions like #GreaseMonkey or #Stylus.
In the realm of heavy duty modifications, there are a couple of options:
- Write your own #browser extension.
- Write your own library and run it through the console. This permits to offline development in your preferred coding language and you can bundle it either through #webpack or #wasm.
- Host your code on #npmjs, use a CDN bundler, and then preload it via an extension like GreaseMonkey.
- There is also the option to preload your script into the browser’s config, though with each update one has to do this anew, not questioning the potential #security flaws.
Through these possibilities one will learn a lot about vanilla #WebDevelopment and #VanillaJS.
#DailyBloggingChallenge #stylus #browser #webdeveloper #fingerprinting #greasemonkey #npmjs #security #vanillajs #hacking #webpack #wasm #webdevelopment #programming
Téotime Pacreau · @teotimepacreau
50 followers · 222 posts · Server mastodon.design#Day31 : Higher Order Functions Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Higher-Order-Functions-Exercices-Day31-Of-100DaysOfCode
- concatenate strings with reduce
- some, every array method
-populating an object : using a combination of storing object, for...of loop, sort, slice, map
-create object with bracket notation storingObject[key] = value
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #vanillajs #day31 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
Rustie · @rusticola
3 followers · 126 posts · Server hachyderm.ioI’m looking for (the holy grail) of a performant, accessible date picker ideally as a #WebComponent or #vanillaJs. The Scottish gov date picker seems to be pretty good - does anyone know of a better one? - https://designsystem.gov.scot/components/date-picker.
McFunkypants the #gamedev · @McFunkypants
626 followers · 128 posts · Server mastodon.gamedev.placetoday's #gamedev fun included implementing variable costs for different walkable terrain tiles
armies now prefer to march the long way around muddy farms unless there's no other way
made in #html5 #vanillajs for a HomeTeamGameDev.com collab project called Kings of Pixeldeep!
Téotime Pacreau · @teotimepacreau
49 followers · 212 posts · Server mastodon.design#Day30 : Object Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Object-Exercices-Day30-Of-100DaysOfCode
- using for in loops and understanding that it requireds the [index] of the item
- using .every() array method that return a true or false
- structuredClone() to deep copy an object
using Object.keys, Object.values, Object.entries and array destructuring
.find() array method
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS
#100daysofcode #vanillajs #Day30 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #learnjavascript #js
Téotime Pacreau · @teotimepacreau
49 followers · 212 posts · Server mastodon.design
#Day29 : Loop Exercices part III from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Loop-Exercices-III-Day29-of-100DaysOfCode
- reminded filter and map array methods
used for...of, forEach loops
- copied an array to avoid mutation
- push into an array if a condition is met
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#100daysofcode #vanillajs #day29 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #codingday #frontenddevelopment #codingchallenge #learncode #webdevelopment #learnjavascript #js
Pascal Garber · @jumplink
21 followers · 146 posts · Server floss.social🔗 Check out valtio-yjs, the bridge between valtio and Yjs! 🌉💡 Simplify your usage of Yjs with valtio's easy-to-use proxy state library for #ReactJS and #VanillaJS. With valtio-yjs, a valtio proxied object can be used just like a regular JavaScript object, making collaboration with Yjs seamless. Find it here: https://github.com/dai-shi/valtio-yjs #JavaScript #TypeScript #Collaboration #ProxyStateLibrary #valtiojs #CRDT #Yjs
#ReactJS #vanillajs #JavaScript #TypeScript #collaboration #proxystatelibrary #valtiojs #crdt #yjs
Téotime Pacreau · @teotimepacreau
46 followers · 207 posts · Server mastodon.design#Day28 : Array Exercices part III from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Array-Methods-Exercices-III-Day28-of-100DaysOfCode
- array destructuring with... in order to use Math.min() and Math.max() (because they only works on numbers and not on an array)
- reduce in order to calculate a sum of elements necessary to an average
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#100daysofcode #vanillajs #day28 #30daysofjavascript #webdev #frontend #webdesign #learnwebdev #javascript #learntocode #codingday #frontenddevelopment #codingchallenge #learncode #webdevelopment #learnjavascript #js
Manuel · @elmanu
23 followers · 66 posts · Server digitalcourage.socialLearnings: #01. If you have an HTML form with the name contact. And optionally a list of checkbox fields with the name select. If there is one checkbox, you can address it with document.forms.contact.select. If there is more than one checkbox you can iterate document.forms.contact.select.forEach((select) => select.checked); To distinguish you can check: 'length' in document.forms.contact.select
#learnings #html #js #jsdom #vanillaJS
#vanillajs #jsdom #js #html #learnings
Téotime Pacreau · @teotimepacreau
46 followers · 203 posts · Server mastodon.design#Day26 : Array Methods partII from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Array-Methods-Exercices-II-Day26-of-100DaysOfCode
- import and export arrays from separate files
- replace string method to - remove string elements
- split string method to put each element in an array
- filter out one element of an array
- sort ascendantly
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#js #learnjavascript #webdevelopment #learncode #codingchallenge #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #30daysofjavascript #Day26 #vanillajs #100daysofcode
Téotime Pacreau · @teotimepacreau
46 followers · 203 posts · Server mastodon.design
Téotime Pacreau · @teotimepacreau
45 followers · 199 posts · Server mastodon.design#Day25 : Functions Exercices from #30DaysOfJavascript
Source Code : https://github.com/teotimepacreau/Function-exercices-Day25-of-100DaysOfCode
- reminded multiple parameters
- concatenation of string, math operations
- multiple if conditions
switch/case statements in order to take several conditions
- looping through an array and displaying each entries
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS
#js #learnjavascript #webdevelopment #learncode #codingchallenge #frontenddevelopment #codingday #learntocode #javascript #learnwebdev #webdesign #frontend #webdev #30daysofjavascript #Day25 #vanillajs #100daysofcode
Téotime Pacreau · @teotimepacreau
45 followers · 199 posts · Server mastodon.design
Kaan Barmore-Genç · @kaan
154 followers · 189 posts · Server fosstodon.org
I needed to print addresses on an envelope, and guides online said to use Microsoft Word. I don't have that, so I instead made my own template! I probably spent more time making this than I would just handwriting the addresses, but hopefully others will find it useful!
https://seriousbug.github.io/print-to-envelope/
It clocks in under 10kb (minus favicon), uses #VanillaJS and plain handwritten #HTML and #CSS. It even works with Javascript disabled except for some minor enhancements. All #OpenSource.
#vanillajs #html #css #opensource