Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Search - "chrome js react"
-
Somebody asked on how to get started on Full Stack web application development.
This is how I got started.
Client side Web Application Development:
---------------------------------------------------------------
• Start with basic HTML, CSS and JS, JSON. For quick learning, see W3Schools for these topic or YouTube it.
• Get a local web server. "200 OK!" webserver chrome extension is a good start. (https://chrome.google.com/webstore/...)
• Learn Chrome Dev Tools to debug the pages. YouTube it.
• Get a good IDE. I am very happy with VSCode. You can use it for very serious WebApps.
• Start learning JavaScript language in depth, but just related to Web Browser related topic or you would get sucked in server side too early.
• Install node.js. Learn NPM package manager. Learn basic node commands.
• Learn complexity of JS file referencing, JS modules in browser. Just learn, don't use it yet, to understand the benefits of code bundlers.
• Learn Webpack code bundler.
• Learn how to make you simple site much faster and using in Mobile using "Progressive Web Apps".
• Now learn to make modular UIs. I love React. Focus on getting the UI code modulear. Create Single Page sites. (You are not there yet to create a Web App) “Create-React-App” started kit is a good starting point.
• Learn to create multi-page site using React-router.
• Learn application state management using Redux.
• Learn to create application decision engine using Redux-Saga.
Practice and master each stage.
Along above, learn git / GitHub (to learn from others code), find good web resources like Medium / Smashing magazine, good YouTube channels etc. I subscribed to some popular Udemy courses too.
Server side Web development:
------------------------------------------
:) First learn client side Web Application development. Server side learning is another story.3 -
the year is 2050
- Linux is written in Rust and called Windows
- Python 2 market share increased by 2% since 2023
- The latest JS framework to finally solve everything just came out, and this time it’s the real deal. The exact same thing also happened in 2045, 2041, 2037, 2035, 2030 and 2026
- More than 60% of every CPU is hardware JS cores
- React became a separate language
- Sentient Copilot refused to write code in it
- Unit tests are illegal in three states
- Google had changed their motto from “Do The Right Thing” to “Do At Least Something”
- Chrome OS was rewritten in JS
- CSS is Turing-complete28 -
Et tu Chrome?
Closing a tab should kill it.
I writes code, my code somehow causes an endless loop, tab gets at 25% i7 CPU.
I tells Chrome: "end it", Chrome won't close.
I wants to see under the hood to diagnose, Chrome unresponsive, forget about DevTools.
I Ctrl + Alt + Dels it
Sad Windows user4 -
I wrote my first proper promise today
I'm building a State-driven, ajax fed Order/Invoice creation UI which Sales Reps use to place purchases for customers over the phone. The backend is a mutated PHP OSCommerce catalog which I've been making strides in refactoring towards OOP/eliminating spahgetti code and the need for a massive bootstrapper file which includes a ton of nonsense (I started by isolating the session and several crucial classes dealing with currency, language and the cart)
I'm using raw JS and jquery with copious reorganization.
I like state driven design, so I write all my data objects as classes using a base class with a simple attribute setter, and then extend the class and define it's attributes as an array which is passed to the parent setter in the construct.
I have also populateFromJson method in the parent class which allows me to match the attribute names to database fields in the backend which returns via ajax.
I achieve the state tracking by placing these objects into an array which underscore.js Observe watches, and that triggers methods to update the DOM or other objects.
Sure, I could do this in react but
1) It's in an admin area where the sales reps using it have to use edge/chrome/Firefox
2) I'm still climbing the react learning curve, so I can rapid prototype in jquery faster instead of getting hung up on something I don't understand
3) said admin area already uses jquery anyway
4) I like a challenge
Implementing promises is quickly turning messy jquery ajax calls into neat organized promise based operations that fit into my state tracking paradigm, so all jquery is responsible for is user interaction events.
The big flaw I want to address is that I'm still making html elements as JS strings to generate inputs/fields into the pseudo-forms.
Can anyone point me in the direction of a library or practice that allows me to generate Dom elements in a template-style manner.4