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.
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.
I have created a fully responsive website based off of the Bootstrap framework.
In the browser all the responsive features are working exactly as I want them to, however, it doesn't seem to be working on my iPhone. I'm still seeing a full size site.
Has anyone had this issue or would know what might be the cause?
You almost certainly forgot the <meta name="viewport"> tag the Bootstrap docs mention. In your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edit: Now that you've provided the URL, check out the syntax highlighting on this line:
<meta name="viewport' content="width-device-width, initial-scale=1.0"/>
You've opened with a double quote and closed with a single quote.
I always developed on Glassfish, using the deploy feature on it, but it seems that on productio is a little different, it seems that can't find my application path correclty.
I have this domain brainset.com.br, which you can see this screen when clicking on the link:
I didn't configure this Glassfish before, 'cause I don't know how to do it.
The website it's on air (or it should be) and I need to setup glassfish to the correct path.
brainset.com.br // gives the screen above
brainset.com.br/BRAINSET // it's the correct page, my index.xhtml
What I'm missing here ? Sorry if my post lack any information, I will provide soon as demanded, 'cause I don't know what could be useful to the post tough.
Any idea how to fix this ?
I actually found a solution, don't know if is the most correct one, but it works.
I had to acess my hosting account and navigate through the folders to found out where glassfish was installed, so inside /glassfish/domains/domain/docroot I edited this way the index.html file, then upload back the index.html overwriting it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.brainset.com.br/BRAINSET">
</head>
</html>
I think this is not the most correct way, 'cause I think that Glassfish can contain many different applications inside of it, which itself can handle the requests and redirect to the correct application and this way it always go to the same application, but I could be wrong on this. :)
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.
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.