In a project that use 300 or more small icons which is a better method or is there any difference if you load the icons directly from the url in a folder or adding them in resource file and then use them in the project.
Using a resources way a size of an executable is bigger and you cannot change icons without recompiling the source code. But you may be sure that all the icons are in place.
And vice versa for the url/folder approach.
Related
I can't find how to load my own icons in Flet.
I'm testing Flet with the intention of making a desktop app (pure desktop, not Internet needed), but I'm not able to use my own icons to begin with. I can only use the ones that come inside ft.icons, but I'd rather use my own by loading them from a folder similar to /assets/icons. Can I do that? How?
Thanks.
Currently, I don't see a way of doing this; however, you could use the Image class instead.
I would suggest you create an assets folder under your main project folder.
Let's assume you have the following folder structure on your project:
/assets
/icons/my-icon.png
main.py
When you are running your app, you should provide that folder to the initializer in the following way:
flet.app(target=YourApp(), assets_dir="assets")
Then you can access your images there directly and create an Image instance in the following way:
test_image = flet.Image(src="icons/my-icon.png", width=32, height=32, tooltip="Image Tooltip")
You can nest these Image controls inside of anything you want, so you have a lot of flexibility.
The only downside of doing it this way is if you are using light/dark themes on your app. Compared to the Icon class, you will have to specify the light/dark theme versions yourself and update them manually when you are switching your theme.
Here is the official documentation
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
I'm using webpack to generate the appropriate files for a npm package which will host a few react components. They have some CSS attached, which references some fonts and icons.
When using the file loader, these assets are mis-referenced using their absolute paths (i.e. fonts/my-font.woff) in the main app which are missing.
Is there a way to fix this and make my main app look for the right files? I'd rather fix the package itself than doing things like copying the assets like someone has mentioned as I may not have full control of the main app.
Well, I'm going to preface this by saying that including fonts in a component is usually a bad idea since the main app likely has its own style/branding/etc that you'll be fighting with.
That said, if the fonts are something like icons you could base64 encode them and inline that in the CSS. There are several Webpack encoder plugins to do that.
You also mentioned icons, I would try to convert these to SVG and serve them up inside the code. You could also base64 encode the PNGs into your CSS as a fallback.
The benefits, to this approach:
Eliminating HTTP requests in the parent app
Parent app always has the latest (non-cached) icons/fonts when you update your package
You don't have to worry about paths, packaging external files, etc
Cons I can think of:
You're increasing script sizes significantly
You lose some caching benefits
If you're not the copyright owner of the icons/fonts, this may violate TOS
The Font-Awesome docs do not mention anywhere that other files need to be downloaded and included within a project so why are the icons missing?
I know that the font files should be within the relative path so Font-Awesome can see them, I understand that, but with reference to other techniques like combining and minifying css files and JavaScripts, why is it that there will more HTTP requests to get the fonts?
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (fontawesome-webfont.woff, line 0)
You can see that they do state that you need to copy the entire directory onto your webserver.
http://fortawesome.github.io/Font-Awesome/get-started/
EASY: Default CSS
Use this method to get the default Font Awesome CSS.
Copy the entire font-awesome directory into your project.
So just including the CSS file in your header isn't going to do much, because as others have pointed out.. it's a font. Think of it like Wingdings, so that's a font file.
Then the CSS basically sets the classes as background images, using the content but written using the font.
Minifying can cause some disruption to the paths of your CSS files. Basically, you need to make sure things are being referenced correctly. But firstly, ensure that the font files are on your webserver, and the CSS file of font-awesome is pointing to the correct path.
The entire point of Font Awesome is that it provides icons in form of a font file. Usually that font file is in the correct spot in the right directory next to the CSS files. The CSS files are referencing those font files (because they have to, somehow).
If you're picking that folder structure apart and are serving the CSS file from a different location then you'll also need to take care that the relative references to the font files don't break.
Follow the steps on their website.
Download here.
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.