![]() ![]() I usually use npm to download scripts into anycodings_css my dev environment and pack them in a single anycodings_css bundle but there are times when I want to anycodings_css keep one or more of those scripts non anycodings_css bundled (i.e. The first thing that comes into my mind is anycodings_css that there could be differences in how fast anycodings_css they are and how much they are used (so, if anycodings_css I use the one with the largest market share, anycodings_css I will be more likely to have my users anycodings_css already have the libraries in their anycodings_css browser's cache), but I'm not sure it this anycodings_css is just being nitpicky or if these anycodings_css reasonings are legitimate.Īlso, once I pick a CDN to load a script, anycodings_css are there valid reasons to always use the anycodings_css same for other scripts as well? anycodings_css BootstrapCDN, cdnjs, unpkg, jsDelivr and anycodings_css possibly others) but I don't understand when anycodings_css sould I use one over the others.Īs an example, examples in Bootstrap anycodings_css documentation show BootstrapCDN and anycodings_css jsDelivr, while aos's docs use unpkg, and so anycodings_css on. Cdnjs vs jsdelivr vs unpkg code#It's fast, very reliable, and keeps the code clean.What kind of reasoning should I do in order anycodings_css to choose a specific CDN to load Javascript anycodings_css & CSS libraries into my website anycodings_css development projects? You can use icons from Font Awesome, Octicons, or any of the awesome icon sets hosted on Github. ![]() I feel this is a pretty nifty approach for icons. You can use jsDeliver that has a similar API and supports raw Github repos as well. What if I want to use an icon set that doesn't have an npm package? ![]() It's a project supported officially by Cloudflare and serves 3B+ requests per day. Here is me loading 50 icons using the same approach.īesides, the icons are also cached when loaded first-time, so the subsequent loads are incredibly fast. For non-blocking resources loaded asynchronously, it's almost irrelevant. With HTTP2, the cost of making is incredibly low. Isn't it inefficient to fire XHR for every icon, instead of bundling them? With unpkg, you'll most likely be using versioned URLs (instead of which will make sure that the contents remain the same regardless of changes in the repository. What if there are changes in the repo (like, renaming files)? Won't it break my icons? There might fair amount of questions about this approach, so I will try to answer the most common of them. Note: The first load can have a slight delay because Unpkg fetches the package and extracts the file, but after the first request, the file is cached and served from Cloudflare CDN. Hurray! Now, if you need to use the cog icon, you don't have to hunt for the SVG code, or download it, you can just use cog.svg. ![]() Since the repo has an NPM package, we can browse it on unpkg: you click any file and use "View Raw" you'll see that the to any icon is something like this: can use this to start using the icon in our project. To my knowledge, it's the most extensive icon repository on Github that has 5k+ icons. Recently, I discovered that I can use the library and unpkg to quickly include an icon available on Github. And it's framework-agnostic, too (works with React/Vue/Angular.). You only have to worry about including the script somewhere in the code. However, svg-loader makes this ultra-convenient. The concept isn't new as svg-inject does something similar. The benefit? You can now customize the fill, inherit the colors, and use states like hover, which wouldn't have been possible with and tags. The library will fetch the SVG using XHR and inject it inline. Enter fullscreen mode Exit fullscreen mode ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |