I am building a dynamic navigation menu in HTML 5/CSS 3 with all the new good stuff. Some menu nodes will have an svg icon, some not. In some views the menu levels are rendered differently depending on the user authorization level and so on.
So my question is: What would be the best way to store these icons?
Since each icon i connected to a navigation node, would it be appropriate to store the xml for the SVG icon in the database? Does anyone have any good recommendations?
I'm working with .net MVC3 MSSQL , but it is probably not relevant for this question.
best regards
//K
You really don't need to store them in database. These requests should lower the performance a bit and prevent browser cashing in some cases. Separate files do the job better.
Additionally, you should look into some practises of stroring bitmap icons in one file. Something like putting all the SVG's in one largee file and do tricks with background positioning like in this tutorial. I didn't try it with SVG, but with some changes like background sizing this method should do good job for you. Keep tring.
You could store all the icons in one file. This file would contain all SVG symbol definitions. Then, you could reference these symbols in your HTML like this:
<svg class="icon-home">
<use xlink:href="symbol-defs.svg#icon-home"></use>
</svg>
You can learn more about this method here: https://css-tricks.com/svg-sprites-use-better-icon-fonts/
Using this method, your SVG can be cached, and it would only require one HTTP request to load.
To get up and running with this method, I recommend the IcoMoon app. It lets you import and select your SVG icons and generates those symbol definition files.
I would store them as separate files.
They will be cached by the client and makes it easier to change the files if they need changing.
Related
For resources like CSS and JS, these things are normally separate resources (which each require separate a HTTP request/response to get). But they can be inlined to reduce the number of separate resources.
I am wondering if the same sorta thing could apply to images.
Maybe include the images in the header?
Or inline in the actual HTML (in Base64 encoding or something)?
(1) Is this possible? (2) Is this a good idea? (why or why not?)
For reducing requests related to images, you can use CSS Sprites / Image Sprites which combines all the images in a single image (so only 1 request to server), which can then be shown as different elements using CSS
Refer W3Schools guide for more information
Spritepad is a good tool to generate image sprites
Inline HTML for images using base64 can become bulky as it would be downloaded everytime the page is fetched instead of caching the image
I would build my own font-awesome icons set. In particular I would build something which is a copy of font-awesome with all its features, but using just a subset of icons.
Furthermore, I'm really interested how they build files within the fonts folders.
On github I found this repo, which contains all svg icons. On ubuntu, using Font Custom, I was able to generate giving svg files as input, the fonts file, even if I'm not really satisfied. But besides that, I do not understand how to merge those files with font-awesome.
So summarizing, how can I create my own font-awesome set, using my own svg files?
Please, do not say to use fontello, icoMoon or similars, because I would like to do on my local machine, without any third-parties services.
I actually did something similar but have to admit it was never perfect, most likely due to bad font conversion, just never had time to make it perfect. Basically i used the following link (to the most part)
http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/
An overview of the process
Step 1 - Create the individual gylphs (you should use the special characters to avoid someone "typing" using your font.
Step 2 - Save gylphs selection as an SVG font.
Step 3 - Convert SVG font to web-font (there are plenty of free online converters)
step 4 - generate the CSS classes to use (create all of the possible classes for all individual glyphs) - outcome should be something like: "icon icon-lg icon-blue icon-hand" - (better using LESS / SCSS for this part - you'll get why later)
where one contains the general settings for all icons, the other controls size-overrides, one controls the color, and most important one that using the :after -> outputs the icon.
step 5 - now that you have a working web-font controlled by CSS, make a UI for selecting individual glyphs to be available. most likely you should use LESS, this way you are "exposing" only the classes that are selected by the user (EG. - icon-1, 2, 5, 8 etc) all other icons are still included in the font but their corresponding CSS classes are not outputted in the final CSS.
There might be more advanced ways of doing it but this overview and tutorial should help you get the basics.
I believe you can use FontLab Studio for that: http://store.fontlab.com/
However, you will probably have to write your own css, personally I think generating it with icomoon or similiar web based generator is much easier and faster, because it is made particularly for generating web fonts, in before FontLab Studio or similiar desktop applications were made to design desktop fonts and do not come with prebuilt css compiler/generator.
I would like to see a generator for desktop aswell.
I haven't dug deeply with own font-icon sets, but I assume there's some svg data in use.
Just as an idea of a different way to go- you could even use background-img on set classes :before / :after
useful resource: http://iconizr.com/ I find their data-url generation is useful (better svg conversion than fontello, icoMoon )
Nowadays it's common to see cool interactive SVG art embedded inside pages. I suppose people make their original art in Illustrator and then export SVG? How do they add behavious, etc.
Does anyone have a good resource for PRACTICAL SVG web development?
The first thing is making your SVG. You're unlikely to be able to write your path data manually, unless you are have very simple animations. The most popular editors are Illustrator (but it's very expensive) and Inkscape (just about fine for my purposes, and free). There are plenty of tutorials on how to make things with those. Inkscape can export to fairly neat and standard SVG, which you then will most likely need to animate manually.
The two ways I have added interractivity to my SVGs before is either by putting JS into the SVG itself (quite funky) and importing the SVG into the page with object or img; or by putting the SVG actually inside the page, and operating on it with the same JS as the rest of the page. It isn't hard: anything you could with JQuery to a page, like adding click handlers to items, moving things around, styling with CSS, you can do with the JavaScript. It's very handy.
As far as practical resources go, I use the Mozilla Developer Network a lot (MDN) because it has good resources on the SVG elements, and jQuery has its own excellent documentation as well as a near-infinity of googleable tutorials. Finally, Inkscape and Illustrator come with their own manuals. In a sense, you're probably asking the question because you're looking some really specific site that will make it all easy, but I don't think there is one, simply because it's basically the same web technologies as all the usual stuff you use, with the addition of a few SVG elements to get used to, and those aren't too fiddly if you generate them with a vector graphics package.
I want that my html page loads faster as it can. So I'm trying to put all CSS styles into the same .css file and all JavaScript code to the one .js file. How my colleagues told me it makes web page load faster. I want to ask some questions about it.
Just to be sure: Are my colleagues right? On which situations it's better to break CSS or JS code to the separate files?
Question is: If I have a lot of small icons on my page, like "delete, edit, add", should I load image with all icons at once or each icon separately? If I'll load all icons at once, how do I select desired one, if icon's size is 40x40px?
Thank you!
Are my colleagues right?
Single files can be downloaded with single HTTP requests (with single sets of HTTP headers, etc, etc) and can be compressed more efficiently then multiple files. So from a performance perspective, if you need all the content, it is better to place them in a single file.
On which situations it's better to break CSS or JS code to the separate files?
When you need a specific page to load very quickly (e.g. the homepage) or when there are sections of the site which use a large chunk of script that isn't used elsewhere then it can be beneficial to break the files up then.
If I have a lot of small icons on my page, like "delete, edit, add", should I load image with all icons at once or each icon separately?
From a performance standpoint, the same rules apply. However, there is no way to specify that a content image (and icons that don't decorate text are content images) is just part of a larger file. You have to use hacks involving background images. This breaks the separation of concerns around content and style and usually involves using semantically incorrect elements, and then requires further hackery to provide alternative content for users who can't see the image and that hackery rarely does as good a job as an alt attribute.
If I'll load all icons at once, how do I select desired one, if icon's size is 40x40px?
You have an element with specific dimensions and a background image with background-position set so that only the part of the image you want shows through.
Consolidating your CSS and JS code into a shared file will improve load times on all loads after the first so long as the browser uses the version of the file in its cache rather than downloading it again. There are many factors that can affect this, but under normal circumstances it should work.
Also, make sure your image files are stored in the same resolution as they will be displayed. Displaying a 40 x 40 pixel file at 20 x 20 pixels means that you have download four times the necessary image size. If the same icon file is referenced many places in an HTML document, then that icon file will only be downloaded once, so it will have little effect on page loading times.
For putting all the icons into one file and choosing which one, see this:
http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
You can use what they call CSS sprite.
The thing is very simple to think of but can be a little tricky to use. Here is the idea.
You merge all your images into on big image, making it a single load.
Wherever these images were used on the site, you replace it by a css class which use the big image as a background and a certain positioning.
Let's say you merge 4 image together : delete.png, add.png, edit.png, share.png.
You create a css class for everyone of these like so :
.delete{ background-image:url('../img/icons.png');
background-position:0px 0px;
}
.add {background-image:url('../img/icons.png');
background-position:0px 40px;
}
.share {background-image:url('../img/icons.png');
background-position:40px 0px;
}
.edit { background-image:url('../img/icons.png');
background-position:40px 40px;
}
This way, you reduce the number of request since you you use a single image to show everywhere.
The code was written on the fly, tell if something is wrong.
Also have a look at performance guru tools : Page Speed
Breaking CSS files is not really a problem, considering browser caching.
Breaking up JS files is okay. You can have one JS that handles things needed for the page to load in the <head> tag. And one js that gives interaction to you, after </body>. By doing this you won't have various effects, but you ensure your users sees your text content.
Regarding your images, there's a practice called CSS Sprites. You can use that to make one big file for your small images and use CSS background-position to show only the part you want. It's like cropping your image file based on the css class.
If speed is most important, then what you've been told is correct.
Less CSS and JS files means less HTTP requests to the server. I would only separate files if you have a specific need as part of a project (eg they need to be maintained in ver separate ways)
For JS I always load JQuery and other libraries from the Google CDN - this has a greater performance boost that merging the library into your code as users are likely to have a cached version of Googles code.
For icons I would use CSS sprites (again this means fewer requests to the server) or if you really want to go as far as possible - look into embeding Data URI in your CSS.
Further reading
Googles Page Speed tool
Data URI in CSS
If you want a better performance report about your page, you can take a look at these tools
YSlow: http://developer.yahoo.com/yslow/
PageSpeed: http://code.google.com/intl/es-ES/speed/page-speed/docs/overview.html
Both can be added into the FireBug plugin (Mozilla Firefox).
From YSlow documentation:
Minify JavaScript and CSS
tag: javascript, css
Minification is the practice of removing unnecessary characters from code to reduce its >size thereby improving load times. When code is minified all comments are removed, as >well as unneeded white space characters (space, newline, and tab). In the case of >JavaScript, this improves response time performance because the size of the downloaded >file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI >Compressor. The YUI compressor can also minify CSS.
Obfuscation is an alternative optimization that can be applied to source code. It's more >complex than minification and thus more likely to generate bugs as a result of the >obfuscation step itself. In a survey of ten top U.S. web sites, minification achieved a >21% size reduction versus 25% for obfuscation. Although obfuscation has a higher size >reduction, minifying JavaScript is less risky.
In addition to minifying external scripts and styles, inlined and blocks >can and should also be minified. Even if you gzip your scripts and styles, minifying them >will still reduce the size by 5% or more. As the use and size of JavaScript and CSS >increases, so will the savings gained by minifying your code.
Preload Components
tag: content
Preload may look like the opposite of post-load, but it actually has a different goal. By >preloading components you can take advantage of the time the browser is idle and request >components (like images, styles and scripts) you'll need in the future. This way when the >user visits the next page, you could have most of the components already in the cache and >your page will load much faster for the user.
There are actually several types of preloading:
•Unconditional preload - as soon as onload fires, you go ahead and fetch some extra >components. Check google.com for an example of how a sprite image is requested onload. >This sprite image is not needed on the google.com homepage, but it is needed on the >consecutive search result page.
•Conditional preload - based on a user action you make an educated guess where the user >is headed next and preload accordingly. On search.yahoo.com you can see how some extra >components are requested after you start typing in the input box.
•Anticipated preload - preload in advance before launching a redesign. It often happens >after a redesign that you hear: "The new site is cool, but it's slower than before". Part >of the problem could be that the users were visiting your old site with a full cache, but >the new one is always an empty cache experience. You can mitigate this side effect by >preloading some components before you even launched the redesign. Your old site can use >the time the browser is idle and request images and scripts that will be used by the new >site
If you are using JQuery, then you can take a look at this: Preloading images with jQuery
Interesting concepts to improve download speed, perceived speed and actual speed:
7 techniques for faster JavaScript loading without compromising performance…
Make better use of caching
Download external scripts after visible content is loaded &
download multiple JavaScript in batch (asp.net/ajax)
Most principles explained are still generally applicable.
In my rails app I have a need to save some webpages and display them to the user as images. For example, how would I save www.google.com as an image?
There is a command line utility called CutyCapt that is using the WebKit-Rendering engine to render HTML-Pages into various image formats. Maybe this is for you?
http://cutycapt.sourceforge.net/
Prohibitively difficult to do in pure Ruby, so you'd want to use an external service for this. Browsershots does it, for example, and it looks like they have an api, although I haven't used it myself. Maybe someone else can chime in with alternative but similar services.
You'll also want to read up on delayed_job or something similar, to make sure you're accessing those page images as a background task and that it doesn't interfere with your actual application.
You can't do it easily (probably can't do it at all).
Each page is just a text - html data. The view you want to make an image of is a rendered page. Browser renders the page using tonns of techniques like html parsing, javascript parsing, css parsing, font rendering, etc.. To make the screenshot of google page - you would need to do all the rendering somewhere in memory and then take a screenshot of rendered page.
That task is almost impossible (there is nothing fully impossible).
If you are really eager to donate tonns of time to accomplish that task - you should do this steps:
1) Find some opensource rendering engine. Firefox would do.
2) Find some way to communicate between ruby-on-rails and that engine.
3) Wire it all together and see the results.
However, I see steps 1 and 2 as nearly impossible.
Firefox addon:
https://addons.mozilla.org/en-US/firefox/addon/1146/