Search posts, tags, users, and pages
Sounds like you are tattooing ants with an orbital laser cannon. Please, STOP misusing frameworks!
right? So why not throw away all frameworks and libraries, and just write it in good old vanilla web tech? I know, for a fact, that small applications are not the target of big frameworks, like Angular and React. And I know from experience, that responsiveness is super easy to implement - you might even get it for nearly free depending on how you work. Vanilla tech will always be up2date, so you won't have to think about migrating it ever again!
Thanks for the answer. Well, yes you are right, this application is quite small and maybe indeed does not require a framework. I just started it with AngularJS to learn the framework itself with this project.
Having up-to-date code in 10 years from now sounds really great. :) My problem is that I only worked with JQuery, AngularJS, Angular and some NodeJS express apps. If I would want to go with vanilla JavaScript I don't know how to start with it. Do you have some pointers where to start or how to set up a project?
Dávid Paksy Yes, gladly. When using vanilla JS, you have to decide everything yourself. What technologies you want to use (JavaScript? Typescript? CoffeeScript...), how you structure your project and code, etc.
Personally, I find it the easiest to re-visit school-knowledge. Start by creating a folder structure:
my-app
|- css
|- js
Create a text-file inside the root folder and name it index.html. Add text-file called main.css to the css directory. Last but not least, create a main.js file inside the js folder.
Then start in the HTML file by creating the basic structure. While you should make sure which features you can use based on your browser matrix, I will just go ahead and assume modern ever-green browsers for now (meaning things like deferring scripts and JS modules are available).
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<link rel="stylesheet" href="/css/main.css">
<script defer type="module" src="/js/main.js"></script>
</head>
<body>
<!-- content -->
</body>
</html>
Next, fill the body with your content. Since you already have a layout from the old application, you can just roughly copy that. Don't do CSS or JS, yet. Just try to write the rough content.
Once the content is done, next up is CSS. You want to style that content, now that you have it in place. You can use IDs and block-level classes to easily select your elements. Make sure the CSS stays consistent on all browsers. By the way, if you plan on adding old browsers, like IE, I recommend usinga CSS normalization (like this, which at least sets all browsers to the same base style.
In the end, it's JS time. Since I used type="module" in the HTML, you can go all out and use modern JS module syntax there. You might have to use Babel to transpile it for older browsers, though, or directly leave out some modern features. Btw, you don't need stuff like jQuery anymore. Modern JS has you covered, with things like document.querySelectorAll('#myID').forEach(ele => { ele.innerText = 'Hello World'; })
You can use mdn as documentation for HTML, CSS and JS. CanIUse will tell you which browsers support a specific feature. Smashing Mag is my #1 source for UI/UX tips and tricks, putting modern architectures and patterns into web applications. If you have any more specific questions, don't hesitate to ask them on Hashnode.
Also, maybe as a little spoiler, I am currently writing an article on how I'd create a static website from scratch (with the example of my personal website), which means I am going for a lot of vanilla tech sane plus sugar. I plan to release it some time next week, so stay tuned :)
If I would want to go with vanilla JavaScript I don't know how to start with it
...and that supports something I'm always saying about these frameworks, they actively encourage NOT learning to use the underlying languages, good practices, or anything else YOU SHOULD KNOW BEFORE YOU EVEN CONSIDER USING A FRAMEWORK! If you don't know how plain JavaScript works, how do you have ANY clue as to if the framework is doing anything right? If you don't know how plan HTML and CSS works, how do you know if garbage like bootcrap is screwing you over or not.
Hence why EVERYTHING built with them are buggy, bloated, house of card disasters just waiting to topple. -- and why the ONLY reason these systems are as popular as they are is a combination of propaganda, echo-chamber style stamping out of dissent, and preying on the ignorance of beginners.
NOTE I do not mean ignorant in an insulting manner here, it just means you don't know. You can fix ignorant, and it's VERY easy when ignorant to get saddled up by a scam hidden by a shiny veneer and soothing-syrup words. Trust me, we've ALL been there at one point or another. For me with web development this is nonsense I had cut the cord on twenty years ago.
It's painful watching people in 2018 being fed the same lies and making the same bad choices the majority of people working professionally in the industry spent 1996 to 2008 fighting to get rid of!
Also why us older developers are so cynical about these ALLEGED "easier" innovations. We saw this BS before, and what did it land us with? FONT tags, presentational attributes and tables for layout. BARF Now people just slop classes in any-old -way to replicate the exact same MISTAKES!
All that said, with the extra information you gave in your response to Marco, I'm skeptical you even NEED JavaScript, and if you were to use it as I said in my own reply on the topic, make the page work without it FIRST!
That way those who block scripting, have it unavailable for security reasons (common in many workplaces), and under UA's such as screen readers and braille readers where client side JavaScript only functionality is a giant foxtrot yankee to users, you are still presenting a useful and functional page.
Though if they're choosing between images, it's unlikely you care that much about the visually impaired.
Basically though I bet a LOT of what you think 'needs' JavaScript to be done is actually HTML and CSS' job. You'd be shocked how much heavy lifting people used to waste four to eight dozen lines of JavaScript on can now be done in a dozen (or less) lines of CSS. Now that realistically we can stop caring about IE7/earlier... or in some cases making it 'perfect' in IE altogether.
So, as a total newbie, what would you recommend to start learning and do you know of any good resources? My guess would be:
Please correct me if I'm wrong. Thanks!
Jurgen Landrie ES6 is just a version number. HTML, CSS and JS are the holy trinity of the web (the only thing any browser can understand), and you should always try to use them in the latest version possible (check against your browser matrix ;) )
Resources... use MDN as an introduction and for documentation. Well. Hmm. I learned the stuff at school and via selfhtml, which is a German site. Other than that I just had hands-on-experience, so I can't really recommend a site or book. Well, keep your hands away from videos and w3schools. Videos usually are bad in general all around for programming and w3schools is just rubbish.. I recommend asking a question on Hashnode :)