Follow

web development, question 

If my website has dependencies (bootstrap, fontawesome, etc.) how do I manage them?

Just dump them in my repo?

Use NPM?

Something else?

help pls

· · Web · 8 · 4 · 3

web development, question 

@emacsen you can grab a minified “dist” (distribution/distributable) copy of the js and store it in your repo/site, or reference a public CDN if you like. If you don’t need a build process already, then npm/etc. is overkill and you can just manually grab the .js file. That’s what I’ve done for some small sites and web projects.

web development, question 

@amatecha

The challenge is that it's not easy for me to know which files in the "min dist" are required. This is especially hard with Javascript as (and I could be wrong) it means that it could load additional files. I know some fonts can do that, for example. How do you know which files are needed?

I think using CDNs has undesirable side effects.

web development, question 

@emacsen A given lib/framework often has one .js file needed, tho yeah, some will import additional scripts/resources. Their repo/site may include instructions on required files, but I think many assume the usage of a static site generator or build/packaging system. Worst case, add the main .js and look for 404 errors hahaha ;)

I can help you track down the right files for a given library if you need some help!

and yes I agree - not a fan of CDNs myself, typically

web development, question 

@amatecha

I appreciate that. Is there some programmatic way of doing this?

Eg in fontawesome, I need about 10 gylphs and not the others...

It's really fontawesome and bootstrap that are bigger than they need to be.

fontawesome is 20 meg, and I am so few glyphs, there's got to be a way to shrink this.

web development, question 

@emacsen Aaahh yeah, I see... it seems they gate that functionality behind their "pro" service. That said, I'm sure there's some DIY workaround, but I'm not familiar offhand.

fontawesome.com/v5.15/how-to-u

However, you might be able to grab one of these premade "subsets", if the ones you need are all contained in just one or two of these: fontawesome.com/v6.0/docs/web/

There are probably other ways, but I don't know offhand... Your site is just plain old JS, no build/pkg system?

web development, question 

@amatecha

Thanks. I ended up writing a shell script that does what I need.

It's like a package manager, only much worse :)

web development, question 

@emacsen hahah! yeah, I know many people who make their own static site generator from scratch just to keep it simple/efficient and only do what they need. bloatware is the nearly-universal trend these days :(

web development, question 

@amatecha

There are and will be a few features that will keep this from being an entirely static site, such as a contact page, and eventually a live page of updates from an external source.

web development, question 

@emacsen I check 'em into the repo.

web development, question 

@drwho The whole thing?

I don't *mind* it, but I'd rather keep my repo to only contain my own content, rather than some libraries.

web development, question 

@emacsen Yeah. bootstrap.[css,js], forkawesome.css, and so forth. I always have what I need where I need it. No version bumps in filenames to mess with stuff. I do it with de-Googlified components, too. That way, when I deploy a new version (using Pelican) I know everything is there and it'll work.

web development, question 

@emacsen I avoid using npm for this, since I have found it's best to keep bundle.js as small as possible.

So what I do with bootstrap is to refer to it directly from the HTML file starting the webapp, like eg. so github.com/steinarb/ukelonn/bl

web development, question 

@emacsen I don't use fontawesome. I use open-iconic, and what I do, is to download open-iconic with maven and unpack it into target/classes github.com/steinarb/ukelonn/bl

The unpacked open-iconic is then served from a jar resource in the Java servlet serving out the webapp.

web development, question 

@emacsen remember to clone the repos. For big things there’s npm, but it brings dependency hell.

For my personal projects I switched to vanilla Javascript (no dependencies — if I really need something, I just copy the specific code I need and note the copyright there), fonts I just copy in.

It can be quite some work to de-CDN stuff, and I hope that with my org-mode export I managed to fix it all.

If you want to go all-out, it’s npm, babel and webpack.

web development, question 

@ArneBab

My JS skills aren't good, but my web design skills are absolutely bad, so I often rely on pre-made templates, if I want this to look good.

I'm actually nearly done, I just want to get a repo up because it's the sort of thing where I think it's a good thing to publish source code, even if it's not something I expect others to use.

The only barriers are these libraries, and pulling out the proprietary (Shutterstock) photos.

web development, question 

@emacsen if you have any want of upgrading them, manage them with yarn.

web development, question 

@emacsen npm is one option. I'd avoid keeping it in the repo, u less with submodules.

I tend to just have a Makefile that downloads all the necessary assets from the source into a .gitignored dir

web development, question 

@kuba

I thought of that last night after posting. I though "There must be a reason people aren't doing this" but perhaps it doesn't matter.

Thanks!

@emacsen As I believe you're already a guixer I'd say guix 'em if possible, but they're probably not all in guix so that's a yakshave warning.

web development, question 

@emacsen Check the tool called webpack. You install dependencies with npm, create a config file and do required imports that looks like 'import bootstrap'. What's good about webpack is that it is a universal build tool, you can manage images, fonts and basically any data type with special loaders.

webpack.js.org/

If you don't need any modifications of bootstrap itself (it uses sass that compiles to css), then easiest approach to use cdn link to needed libraries

Sign in to participate in the conversation
Mastodon

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!