Good evening,
I have a website with a current css optimized for a desktop experience. I am working on an Iphone css, using IwebKit5 to provide a better user experience on the go.
I was using javascript, parsing the user agent to detect which css to use. I was looking for a way to avoid use of javascript, and discovered the media queries feature.
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css"/>
<!--<![endif]-->
<link type="text/css" rel="stylesheet" href="desktop.css"/>
This is what I tried, it works well on desktop (the Iphone css is ignored), but on Iphone I realized that both mobile.css and desktop.css are loaded, so I am trying to find a way to avoid that. What is the option to add in order to avoid this behavior ?
Thanks !
I believe you're approaching this the wrong way.
Include desktop.css first, and let that be included unconditionally.
Then, inside mobile.css, add/override whatever properties you need to.
The vast majority of desktop.css should still be relevant on the iPhone - you should just be adjusting sizes/lengths and other such small tweaks on various elements inside mobile.css.
Related
So I've got flutter web up and running (pretty amazing work tbh) and I went about bench marking the Button Press Count app that it gives by default on PageSpeed Insights. The results were impressive but there's one suggestion that would seem to increase the score. Is there any way to include <link rel='preload'> for the assets they mentioned?
And would there be anyway to do code splitting as well the way webpack does it for main.dart.js
See the website here: https://flutterdemoapp.netlify.app
You can try to add this code to your index.html file which is under the web folder,
<html>
<head>
<link rel='preload'>
<script defer type="application/javascript" src="main.dart.js"></script>
</head>
</html>
If you already tried that or this doesn't work so you can use this library. It makes this automatically.
We are developing a worklist application for Purchase orders. Upon clicking an entry in the table, the user will be navigated to the object view. The issue here is that when the application loads the first time, the resources haven't been loaded yet. The object page contains a fair amount of controls and the first time a user opens the page, it takes a very long time (5-6sec). After that, performance is okay.
Any idea on how to improve performance the first time or how to load the object page (or controls) beforehand?
Worklist view
Pre-loading your libraries in the application's <head> improves startUp performance, using data-sap-ui-libs
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page</title>
<script src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-libs='sap.m, sap.ui.layout,...'
data-sap-ui-preload="async">
</script>
</head>
Check the network tab in your browser's dev tools and see if there are any libraries that are not preloaded but fetched synchronously on-demand. A similar issue and the solution can be seen here: How to load sap.ui.comp.smarttable.SmartTable faster?
Make sure that the debug mode is turned off.
Follow the performance guidelines.
I have a use case where the favicon shows up in desktop tabs but not on mobile devices in recently viewed websites on Chrome.
Upon browsing through SO and the net, I found multiple ways like use manifest.json, browserConfig.xml or multiple tags specifying all the expected sizes.
The documentation is pretty skewed and it is not easy to find one particular recommended way to show favicons.
These is what I have tried so far.
Using https://realfavicongenerator.net/, I uploaded a png image for
the favicon and included all the generated renditions, site.webmanifest and broswerconfig.xml in server root.
After this, I included the block generated in my tag in base template html.
Can I use this method or is there a better and more compact way to ensure favicon renders perfectly on all screen resolutions on all browsers both mobile and desktops?
The same best practices that hold good for a normal website hold good for an AEM application as well.
AEM WCM Core components has a working example of using multiple favicons for different viewports.
Refer to the below files from the repo.
Head.html under page component
<template data-sly-template.head="${ # page }" data-sly-use.headlibRenderer="headlibs.html">
------------------
<!--/* For IE 9 and below. ICO should be 32x32 pixels in size */-->
<sly data-sly-test.faviconIco="${page.favicons['faviconIco']}">
<!--[if IE]><link rel="shortcut icon" href="${faviconIco}"/><![endif]-->
</sly>
<!--/* Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. */-->
<link data-sly-test.faviconPng="${page.favicons['faviconPng']}"
rel="icon" type="image/png" href="${faviconPng}"/>
<link data-sly-test="${!faviconPng && faviconIco}"
rel="icon" href="${faviconIco}"/>
<link data-sly-test.touchIcon60="${page.favicons['touchIcon60']}"
rel="apple-touch-icon" sizes="60x60" href="${touchIcon60}"/>
<link data-sly-test.touchIcon76="${page.favicons['touchIcon76']}"
rel="apple-touch-icon" sizes="76x76" href="${touchIcon76}"/>
<link data-sly-test.touchIcon120="${page.favicons['touchIcon120']}"
rel="apple-touch-icon" sizes="120x120" href="${touchIcon120}"/>
<link data-sly-test.touchIcon152="${page.favicons['touchIcon152']}"
rel="apple-touch-icon" sizes="152x152" href="${touchIcon152}"/>
</template>
PageImpl.java
protected void loadFavicons(String designPath) {
favicons.put(PN_FAVICON_ICO, getFaviconPath(designPath, FN_FAVICON_ICO));
favicons.put(PN_FAVICON_PNG, getFaviconPath(designPath, FN_FAVICON_PNG));
favicons.put(PN_TOUCH_ICON_120, getFaviconPath(designPath, FN_TOUCH_ICON_120));
favicons.put(PN_TOUCH_ICON_152, getFaviconPath(designPath, FN_TOUCH_ICON_152));
favicons.put(PN_TOUCH_ICON_60, getFaviconPath(designPath, FN_TOUCH_ICON_60));
favicons.put(PN_TOUCH_ICON_76, getFaviconPath(designPath, FN_TOUCH_ICON_76));
}
For better understanding of favicon best practices -
favicon best pracs
jonathan neal
I've been wanting to get into learning build-automation within web development having only real experience with ANT in building Android applications.
I want to build websites that utilize LESS but I can't see how to achieve this as It sounds like a it's good practice to use the embedded JS approach in development and compile LESS into CSS when deploying but I don't understand a good approach that would match up the LESS links and JS include for jess.js within a build script. e.g.
Replacing:
... html ...
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
... html ...
With:
<link rel="stylesheet/css" type="text/css" href="styles.min.css" />
I hope what I've mentioned makes sense.
Useful
HTML5 Boilerplate Build Script
Phing
If anyone could give me any pointers/advise on this matter I would greatly appreciate it.
I'm on the core team for Less.js. Don't use the browser version of LESS if you can avoid it (for instance, you might be enabling users to edit "themes" in real-time in the browser... but unless you're doing something like that, avoid the browser version).
Try using this build tool for compiling Less to CSS: https://github.com/assemble/assemble-styles. The recommended practice is to pre-compile LESS to CSS, and assemble-styles makes it easy to create "bundles" or multiple versions of your LESS/CSS files, and you can add a watch task so that as you are working on the LESS files they automatically compile to CSS.
With LESS being compiled to CSS as part of the development process, you can then just focus your energy on how you want to handle your CSS in production (without having to even think about LESS). Make sense? If you have any questions I'm happy to help.
If you are familiar with npm, then this is simple to use. Just do npm install assemble-styles
Then follow the instructions on the README.
No build script will be able to merge a css file with a js file as in your example. They are two completely different languages serving two completely different needs, and they need to be kept apart from each other. As Less is, in the end, just CSS it makes no sense to merge a Less file into a js file.
Moreover best practices suggest to put css links in the head of your document (as Steve Souders suggests here) and javascript code at the end of the document, just before the closing body tag (again Steve Souders, here).
If you follow these rules (which is strongly recommended for performance) you'll end up placing css links far away from your js scripts in the html, like so:
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.css" />
</head>
<body>
....here goes the content of the page
<script type="text/css" src="scripts.js"></script>
</body>
</html>
Now, let's imagine a very basic workflow.
You have your bare-bones HTML structure and you need to adjust its layout.
You add a css reset (reset.css) and start styling your document in a Less file called style.less. If you add
<link rel="stylesheet/less" type="text/css" href="styles.less" />
in the head of your document you won't be able to see any change as browsers do NOT understand .less files. These files need to be pre-processed and "translated" in css, so browsers can parse them and apply the given styles to the HTML page. So you'll run your (.less) file into a preprocessor which in turn will spit out a css file. So your <head> will be:
<head>
<link type="text/css" href="css/reset.css" />
<link type="text/css" href="css/styles.css" />
</head>
Notice that the styles.less file will NOT be referenced in the HTML, but only its CSS counterpart styles.css. When you'll be satisfied with your layout it'll be time to move on.
Here's now a good place for a build script to really shine.
A build script will (among other things) concatenate external files of the same kind.
In this case it will be able to merge these two files in a single one. Your new <head> will be:
<head>
<link type="text/css" href="css/main.css" />
</head>
The same thing will happen with js files at the bottom. From:
<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>
to:
<script src="scripts.js" type="text/javascript"></script>
As I said this is a very basic, rough example of a workflow using Less (or Sass/Scss, or Stylus) and a build script. I would say that Paul Irish gave the simplest and clearest representation of a build script in action in this video, which I highly recommend, especially because it features the HTML5 Boilerplate, as referenced in your question.
Hope this helped you better understanding, let me know if you have any doubts.
I am trying to figure out if there is a way to use LESS or SCSS without having to save the document or refresh the browser. At the moment I use CSS Edit which is great for live previews but I cant find a way to get the live previewing to work with LESS or SCSS. My ideal situation would be to get a truely live (or as close to) setup working with Textmate and my broswer. I have looked at a few options, WebPutty is great but it's in Beta and web based so I'd love a solution that could fit into my existing workflow.
Many thanks
This might be what you're looking for: livereload.com
I only just found this myself while Googling for the same problem, Haa!
It's currently only for 64-bit Macs. Its also in beta..
Windows version under dev.
Can't seem to find a link to the v1 that is mentioned on the site?
If you're using static files you can use this code taken from http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.html
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
However, if you are using localhost, I've not figured out how to get this to work yet.
Check out EDGE. http://getedge.io - it let's you live edit Sass and LESS files from Sublime Text or Textmate. No need to save the file - it updates as you type. You can sign up for the private beta right now.
There is no complete solution for what you are looking.
Chrome dev tools (with sass source maps enabled) is your best bet but I don't think you can do mixins
http://livestyle.emmet.io/ is another option you might want to try
Brackets works well with live changes but applies only for chrome
Here's what I do and it serves the purpose and works like a charm in mac/pc and linux
Have one terminal open that does sass --watch
Have another terminal/app that lets you run live-reload
Your sass will compile and as soon as your stylesheet changes all your browsers get refreshed
But you can't do style injection with this, meaning the page WILL refresh (if you want to theme dialogs, you will have to open them again) But there are other tools available for style injection as well
Hope this helps!
live.js is your solution :)
It doesn't not only work with html, js, css but also less.
You have to trick it with filetype of css:
<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">
Tried the bookmark version on rails local server. Works a breeze!
CssRefresh
My co-worker and I whipped up http://less2css.org the other day. Allows you to choose the version and see your less converted in realtime.
Hope it helps someone.
I think there is no such add-on right now, but I'm also a fan of Live CSS Editor (if that's what you meant by CSS Edit).
I think it would be useful to have something similar with SASS or LESS support, so I made a quick prototype for such Chrome add-on (analogue to Live CSS Editor). It includes syntax highlighting and LESS support with use of client-side LESS library. It's not user-friendly yet so not a candidate to the Chrome Store, but here is it's Google Code Project where it can be downloaded and loaded into Chrome as unpacked extension. I'll try to improve it over time, but anyone else can try too ;)
Screenshots and a bit more are in this blog post.