I'm newbie to Bootstrap 3, but I noticed that Bootstrap require Javascript even if it's not necessary, e.g. dropbown menu doesn't work if js is disabled. Is there any good reason to prefer js over CSS?
I think cause Javascript and CSS are different and can't replace each other.
In CSS you can't do for example calculations, DOM manipulation, react on click and other live events. Javascript can't style your HTML, have media queries etc. see also: Performance: Pure CSS vs jQuery
Yes, i know there are alternative for everything, see:
Can I do this in pure CSS instead of using jQuery?, Can I have an onclick effect in CSS?, etc .... but it is not the same.
What's your problem with javascript? in the first place? Do you have some requirements like: "should work with javascript disabled". Should your site work with this requirement or should it be exactly the same. What are you alternatives for javascript disabled? basic CSS? full css3? For me it seems realistic to prevent errors with javascript disabled but not expect all work the same. In the case of a dropdown you could consider a alternative navigation structure.
Related
We are using this approach to rendering content:
<div id="full-article" v-html="content"></div>
this.content = api.response.data
In this approach, "content" is retrieved from an API, but because we also use Server-Side-Rendering (SSR), the final HTML is turned into this:
<div id="full-article">$real_html_content</div>
this.content = $real_html_content
This approach means that the content is repeated, once as rendered HTML, and once as a javascript variable. But in this scenario we are not using the javascript content variable. The fact that it's still included in the final HTML page means that the page size is twice as big as necessary. How can we prevent this? Is there some way of hiding/removing javascript content that has already been rendered by SSR?
Alternatively, maybe it would be better to deal with this content differently, perhaps insert it at a later stage and not involve Nuxt or SSR?
This is what you're looking for: https://github.com/maoberlehner/vue-lazy-hydration
Created by Markus Oberlehner who was seeking to avoid shipping to much JS to the frontend, especially when this was not needed.
You do have several options but this is how it can be used
<lazy-hydrate never>
<article-content :content="article.content"/>
</lazy-hydrate>
In this case, the hydration (injecting JS into static content) will never happen. There are other interesting options that can be used too!
Keep in mind that this was more of a proof of concept, hence why Markus still considers it as beta-ish. This project will probably die at some point because Vue3/Nuxt3 will be able to do this in an official way.
Still, even if I did not tried it yet, you can totally use it as of right now and enjoy a JS-light experience, it should work!
I want to use Polaris css components for my shopify app. I have go through their document https://polaris.shopify.com/components/get-started#navigation. As mentioned there I have include their css and html code for a component but some components are not working functionally like Date picker I have put html code on my page but I am not able to change month, select date etc.
I think I have to load js for get that working but I didn't found any js link in their document.
Can you please help me out?
If you are using the CSS-only version, we do not provide any JS. The CSS version is meant for someone who does not want to use React and is willing to write the scripts required for any interactive components. If you are using the React components, you will not find everything; as you've identified, this is not exactly like Bootstrap or similar frameworks. This is a more selective set of components that encompass patterns that have been established for Shopify's own applications. We will probably add more components in the future, though; if there's something you feel is obviously missing, please feel free to leave an issue.
As the title implies, I need solid SEO and thus I need to have all the HTML loaded on my site on initial load. However, because the backend is written in PHP, and because it would be more work to write my Vue components with the server in mind, I don't want to use server-side rendering (SSR).
That leaves me with the option to send HTML over the wire, the "old school" way. What I am thinking of doing is writing each page's HTML like normal, but make one of the root html elements a Vue element in order to "upgrade" it. So the initial load downloads the finalized HTML, with all the data (tables, lists, etc already populated), but then after all the scripts are loaded, javascript can take over to make things easier and give a better UI experience. This poses a few questions, however:
Am I limited to a single component, the root? It'd be nice to still have many sub-components that would each have their own state. Perhaps inline templates can be used somehow?
Vue templates have their own templating system, like the mustache braces for displaying variables {{ myVar }}. Will I not be able to use them? The one way I can think of is to create a Vue template (that can be loaded from an external script) that is identical to the part of the HTML that it "takes over". The downside is that I'd have to maintain that component both in the original HTML and in the vue template.
Are there any good examples of what I'm trying to accomplish here?
Edit: I want to clarify that I'm aware I can put in various components here and there throughout the page. This still poses the question of how to make those components already start out rendered. Better yet would be to turn the whole page into Vue, much like an SPA.
I need solid SEO and thus I need to have all the HTML loaded on my site on initial load.
This is not entirely true. Google (80% of search traffic) easily parses SPAs now, so SSR purely for SEO isn't required anymore.
But to answer your question in general, you should check out Laracast's Vue.js series. They go in-depth on how to use PHP with Vue.js (including templating and variables).
I'd ask what it is you want to achieve with Javascript/Vue.js in your page. If everything is already rendered in PHP, does Vue provide a simple UX enhancement or takes over most of the page's heavy lifting (navigation, etc.)? If you have no reactive data and want Vue to simply be a controller for rendered components, then knock yourself out, although it might be approaching an 'overkill' scenario.
Have you looked into Prerender SPA Plugin ( https://github.com/chrisvfritz/prerender-spa-plugin )?
It is offered in the Vue documentation as a viable alternative to server side rendering ( https://v2.vuejs.org/v2/guide/ssr.html#SSR-vs-Prerendering )
Recently I've developed a multi-page application using Vue, here is how i tried to solve the SEO (Maybe this can help you ):
Htmls of header and footer (and other main common components) are packed to the page.html(eg: home.html, search.html).
Script and style are of header and footer imported in page.js(eg: home.js, search.js).
Add div.seo-zone to page.html's div#app, which includes the main SEO data(using some h1,h2,p,div and so on), and add
.seo-zone {
display: none;
}
in your css.
4. Make sure your app's root component's el is '#app'(each page's main content can be a Vue app).
Develop your app as usual.
After Vue rendered, the div.seo-zone will be replaced with your Vue components (although it can not be seen)
How to change this below Xpath to css? Please help.
//button[text()='Continue' and #class='buttonLargeAlt' and #type='submit']
Unfortunately, you can't.
The problem is that CSS selectors can't find by text. Therefore, you can't translate text()='Continue' XPath to a working CSS selector. This is one of the two main reasons for XPaths to be actually used till today for HTML elements selecting.
There was a :contains() pseudo class for this in CSS3, but it's long gone. Sizzle, the JS engine for CSS selecting in Selenium, has kept it, though. So if your browser doesn't support native CSS selecting (or you disable it), you can use it like this:
button.buttonLargeAlt:contains('Continue')[type='submit']
I normally use this cssify, This is pretty cool
I'm trying to reduce the size of my CSS file. It is from a template which is very CSS & JS heavy. Even with CSSMin the CSS file size is 250kb.
Whilst I use alot of the CSS - I know I dont use it all. So I'm trying to work out which styles can be removed. I'm aware of Dust-Me selector - but that only takes a static look at the website. With HTML5 and CSS3 - websites are now very dynamic, and most of my CSS occurs from dynamic events, or 'responsive' events i.e. Bootstrap.
Question: Is there a tool which 'records' all my CSS use on a website for a perioid of time, so I can go and click/hover/move over each element and interact with my site. Then at the end let me know which styles were & were not used?
CSS Usage is a great extension for firefox. It tells which css are currently used in a page.
Link: https://addons.mozilla.org/en-us/firefox/addon/css-usage/
There are two tools that I think might help you out.
helium is a javascript tool that will discover any unused css rules.
csscss is a source code analyzer that will report any duplication. I'm biased because I wrote csscss precisely because I couldn't find anything that did this. But many people seem to find it useful.
250kb is really such a big figure for just CSS files.
The templates generally have all the CSS required for all the pages in a single file.
I would suggest:
Do not cut your CSS code, they might be needed some point of time.
Instead i would suggest, break your CSS file into number of small files for different page stylings,
such as a different CSS for login page, different CSS file for home page, etc.
Read your own CSS and HTML code vigorously to find out which significant part of CSS code is used in which HTML section.
Update:
You may try Removed Unused CSS - CSS optimizer.
I personally did not use it just hope it works for you.