Drawbacks of including CSS and Javascript in HAML [closed] - javascript

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I need to change the design of various pages of a website developed in Ruby on Rails. I was thinking of modifying the HAML files to include CSS and Javascript to make the desining nicer and more responsive.
What could be the drawbacks of such an approach? I have came across such example here.

The drawbacks are exactly the same well known drawbacks of including anything but content in HTML.
Your muddling content with presentation and behavior. This leads down quick path to a total mess of inline everything and generally poor development practices.
Your CSS and JS will not leverage caching properly between pages that might otherwise share components.
Your CSS and JS will not be properly minified.
You will not be able to use code quality tools properly on CSS or JS.
The execution order of your JS is going to be confusing.
Your code indentation and quality in general will suck. This especially applies to HAML.
Other developers will hate you.
Rails even generates per controller stylesheets and scripts by default to make separating views from assets easier.
But in general the idiom of "per page" styles and behavior should be avoided unless you are creating trivial brocureware, you get better code quality and reuse if you try to envision a set of reusable parts or modules - HTML class attibutes are cheap - parsing a huge document with a junk drawer of CSS/JS is expensive.

Related

Can it be a good idea to build a website out of one line of HTML and fully Javascript? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
So what I did was that I created two files index.html and script.js and using all I did on the html was I just used the script tag.
<script src="script.js"></script> and on the script.js file I just typed document.write("<html><h...the whole html in a line></html>). Ok it may not seem like the best idea but it seemed more faster and the styling worked fine, so is it actually a good idea? and mainly is it faster?
No, I can't think of any logical way how that would be faster for a static page. I'm not sure how you were expecting it to work, but instead of just parsing the HTML, it has to run your script, inject the content into the page, and then parse the resulting HTML anyway.
Keep the JavaScript for when you need dynamic content.
My main concern, with constructing a page in the manner you've described is that it may not get indexed into the search engines as well as a page that has static HTML. The web crawler of the search engine would need to be sophisticated enough to run your javascript before scraping the page's text content. I'm not sure they all do that currently, but they should in my opinion.
So, I wouldn't do this on a page you want to be found via the search engines.
There are top-notch web applications built entirely out of JavaScript, using frontend frameworks like React.js, Angular.js, Vue.js, etc.
So it isn't actually a bad idea building your site fully out of JavaScript!
I don't know if you can compare HTML and Javascript frameworks which can be used to build websites (React, Angular, etc.), because they work very differently. Remember, HTML is a markup language, while things such as React and Angular are frameworks written in the JavaScript language.
So to answer your question, is it a good idea to build a website using only JavaScript? - The simple answer is it depends. Using React to make applications or even static websites can save you quite a bit of time, though using plain JavaScript really wouldn't have too many benefits as far as I can see. But if you just want to play around with whatever you're doing, then I'd say sure, go ahead!

Why do websites try to hide their front-end technoloies? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
Recently I started learning web development. I tried to read the HTML and CSS codes of some famous websites in my web browser. But I observed that they intentionally mess everything such as changing the real names of the bootstrap classes, while looking at the design architecture and page layout anyone could guess what kinds of technologies are used.
What would be the possible reasons?
I think it's not about security because any average programmer can still know everything about their front-end technologies if he puts some efforts.
There are multiple reasons.
Some companies, indeed, try to obfuscate some of all of the code to hinder some of the attacks. That is not 100% proof, of course, because a sophisticated actor can still reverse engineer almost any code that's out in the open.
However, most of the times it's simply how modern frontend development is done nowadays. The trend has been moving more and more towards using various build, bundle, code-minification and packaging tools. Like Webpack, for example.
What you see simply is a result of source code being processed packaged for optimal delivery and running in the browser.
The days when we could view web-page source and inspect pure HTML/JS/CSS, as it was written by the original developer, are long gone.

Where to put css and javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
If I understand Google encourages to put the css and javascript in the same page that the html. Internal css but not inline. On the other side, all the manuals and tutorials I have read say that I should use an external document.
Where should I put the css and javascript?
Note: in the design o my page there it makes no difference to use the css and javascript of the "above the folder" internal and the rest external. 90% or more of the css and javascript is for the content above the folder. In my case, it makes no sense make a distinction.
https://developers.google.com/speed/pagespeed/insights/
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles
https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains
There is marginal performance improvement in combining html, css, and javascript in a single document. This theoretical performance boost is outweighed by the many complicating factors that come from trying to do this. You might be saving 20-40ms by combining documents, which is generally not something the end user can detect. You will find more important performance improvements in many other ways.
Merging documents, when done at all, should be acccomplished by using a server-side assembly process so that your code can be well partitioned and well maintained. An example of this is webpack.
But again, unless there is some specialized use case that makes this important, it is not standard practice.

How to structure the JS? Put the code in a unique file or require the necessary JS code in the file where its used? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
Do you know if is better to have a unique file with all JS or is better in each file require the specific JS that is necessary for that specific page?
The project sould stay better structured requiring the JS specific for each file.
But in terms of performance do you know if is basically the same or not?
For a small JS snippets is always better to implement it only on pages you need.
But, for big classes, framework or huge functions is better use single file with an CDN. That way is better performance and finaly better to maitenance and for developing is better to stay organized.
As second, in single file you can easily do minified version fully automated.
I prefer creating a unique JavaScript file and then linking it to the html file. It is the most efficient and organized way of structuring your code. But if the amount of code is very small and only required for that single page, inline JavaScript is preferred.
Performance: External JavaScript is always faster because the browser can cache an external file but Inline JavaScript will always be loaded afresh and hence is slower.

Designing a web application with JavaScript [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have a question about the design of a web application with JavaScript: Should a web application be designed to work without JavaScript, and then later add JavaScript for users that have it? Or should I design a web application with JavaScript in mind and then add fallback functionality for user that do not have JavaScript.
I hope this question makes sense. Let me know if you need me to clarify something.
Thanks.
The terms, that describe what you are looking for are "Progressive Enhancement" and "Graceful Degradation".
Here is good article describing what you already have in your question in more detail:
A List Apart: Understanding Progressive Enhancement
An article that could help you on your decision:
Dev.Opera: Graceful degradation versus progressive enhancement (The named reasons are still valid, despite the fact that the article is marked as outdated)
I favor progressive enhancement in most cases, since it is more accessible when it comes to different output devices, software and the capabilities of the user using that website.
Answers like "there are so few people with JavaScript disabled" are just one side of the medal. Not relying on JS also could improve your site experience to non-graphical clients like search engine robots (how should they load AJAX content, when that is only accessible via JS?) or screen reader software. In fact there are many more good reasons not to rely on on JS.
At this time of age there are so few people with javascript disabled, that there is no signifcant benefit for creating a static version. Try to imagine who is your visitor and if he/she would even know how to disable it.
I suggest you to design a web application with JavaScript in mind and then add fallback functionality for user that do not have JavaScript.
Now a days everything runs on JS only. You should create some kind of services/API on server side and a separate project for UI, this is the trend being followed these days.
UI project can be based on any JS framework or it can even be a simple MVC/.net project. This approach can decouple stuff, and thereafter you can create 2 UI projects one for JS users and one for the users who do not have JS.
seems a bit of a work but, it will pay in the long run.

Categories

Resources