Where to put css and javascript [closed] - javascript

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.

Related

Is there a standard way of packaging a Javascript GUI control? [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 1 year ago.
Improve this question
Is there a standard way (or ways) of packaging a Javascript GUI control such that it is easy for others to use and evaluate?
For example - should classes be named a certain way, should certain methods always be implemented?
Is a raw Javascript GUI control easy to use, or should it have a wrapper to make it usable in a framework? Currently, the code is not written for any framework.
Some background: I am a long time C# (WinForms) developer. To learn Javascript/HTML5, I ported one of my C# GUI projects, a spiral-shaped slider/track-bar, to Javascript and implemented a test harness using a HTML page. My plan is to use JSDoc to generate documentation once the classes/methods are stable.
Thanks in advance for any guidance.
There are a few best practices:
Use as few dependencies as possible.
Dependencies increase the package size and add the possibility that someone up the chain will insert a vulnerability. One dependency may be including a dozen more.
Don't put things in the global scope.
You can't trust other modules not to collide with you. If you must, pick a unique name.
Set "use-strict".
Use strict forces the browser to use more precise interpretation of your code. It can reduce errors and boost performance.
Don't eval.
While not necessarily evil, it's dangerous and often is a shortcut to doing something right.
As with all best practices, there are cases to ignore each of these.
There are some common patterns that js elements use when attaching to a page. Most typical is for an element that most closely matches the behavior is added to the document with a class that the script recognizes. For example <input type="number" class="praise-helix"></input>. HTML5 also supports custom data attributes, meaning that this is valid <input type="number" data-helix></input>.

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.

Drawbacks of including CSS and Javascript in HAML [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 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.

Web Scraping - What's a robust and extensible approach? [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 8 years ago.
Improve this question
I have some limited experience with web scraping using tools like Beautiful Soup and Nokogiri.
My approach thus far when looking for information is to first inspect the HTML elements and CSS tags, then applying the selector. While this works, slight differences/changes among web sites would render the code useless. Also, there have been situations where sites simply don't add the selector tags to their HTML elements, so I once had to resort to the hacky approach of selecting the style property of the element.
How would one devise a scraper that would work across multiple sites? I'm aware that the solution would depend on the context, but is there a general good practice in doing it? I was actually asked in an interview before this question and I had no idea.
I have tried googling but much of what I found doesn't go past the basics, and I don't know where to look. Any help would be appreciated.
It's not clear from your question what exactly you are trying to accomplish. If you want the content of the page (like in an article) - you should try goose, which should give you a leg up. You can also try searching for conventional web page approaches like meta tags.
Either way, you should remember that this is the World Wild Web, and the HTML is a very forgiving language, which lets people design pages which are very hard to read by a machine. Even big sites sometimes have their proprietary breaks from conventions, which forces exceptions in your code in order to read them. Site logic may also conflict with conventional logic, or other major site.
This means that your code would probably consist of a lot of use-cases and exceptions.
My suggestion to you is to keep samples of pages of sites you want to scrape, and have a unit test which iterates over them and verifies the scraping results. This way, each time you find a new quirk, you can add it to your collection, and be certain that if the change you made broke some other site's scraping, you would know about it.

obfuscate css file by javascript obfuscation [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 6 years ago.
Improve this question
If one have done some hard work and do not want anyone else to copy it, for example javascript, css, html. Is there a way?
I heard javascript can be obfuscated ( reffering to How can I obfuscate (protect) JavaScript? ) .
Theres no point in doing that for just html as SEO (search engine optimization ) would be effected.
How to do that for .css files though? Its very important for me.
What are the ways to make it harder? (other than just renaming variables/styles to bogus ones)
is there a way to include all the css and html into a javascript and then obfuscate the javascript?
Thank You.
The browser's built-in CSS debugger will show the RENDERED CSS, regardless of what sort of obfuscation madness you want to apply.
No point in doing it at all.
Or as I say: If you don't want it stolen, don't put it online.
You can parse/regex your outbound html with your external css files to make all your html have inline css, so nobody knows what classes you use.
Edit, yes, this is horribly and ridiculously inefficient, but it does prevent people from copy/pasting your valuable css files.
JavaScript can be obfuscated by using nonsensical variable and functions names and removing all formatting.
In CSS, the only thing you have control over is id names, class names and formatting. These are things that can easily be ignored or fixed, so there many other ways to obfuscate.

Categories

Resources