FCC & Non-profit good practice example

1

Every now and then, someone asks on the forum how they can help a non-profit with what they’ve been learning on FCC — without getting all three certs first. If I see that, I usually offer some easy tasks from the NGO I spend most of my time with. The tasks are of various difficulties, but more importantly of smaller size, so I think they’re easier to approach and less formidable than fullstack github projects (some of which are reinventing the wheel).

One such collaboration just successfully finished. @lukaszsobek helped redesign a small web application to look a bit more lively and less bootstrap-default. Here is the web service:
https://ebm.si/p/locevanje/
… and here you can see a visual diff:
https://ebm.si/p/locevanje/v1-2-v2.html

The workflow consisted of me explaining the goals and constraints and then we iterated on design ideas and regressions that inevitably happened. It was a learning experience for both of us, eg. just from the last code review: I didn’t know about the humans.txt spec (akin to robots.txt) and Lukasz learned about the rel=‘noopener’ attribute.

Big thanks to @lukaszsobek for helping make a difference!

6 Likes
2

It was a pleasure. Thank you for the opportunity of working together.

2 Likes
3

What kind of wizardry is that visual diff thing?!

4

They’re images and I guess the rest is just no-overflow resizing of their parent. It’s a small jquery plugin.

5

Another one successfully finished: this time @inder23 redesigned our 404 page to be more appealing and almost make you feel like you’ve accomplished something by getting there (which ideally would never happen). It’s visible here:
https://ebm.si/wtf

Do check out the site, as a static image does not do it justice. But here’s a visual diff from the gradient-only version of old anyway:
https://ebm.si/p/it-prostovoljci/404-v1-2-v2.html

It may seem like a trivial project, but it was a great proving ground, testing a wide berth of FCC, design and other webdev knowledge.

The collaboration was again a learning experience also for me.

Details

This time about the lang attribute for screen readers and what to do when a page contains more than one language? Use mul (one of only four exceptions) as the value on the html tag and individual language codes on the actual text.

And something completely different about font subsetting and modern browsers ignoring the subset parameter to Google Fonts API. They just check the unicode range CSS parameters to @font-face and download only what they need, even thought it looks like they’ll be downloading all font subsets like Greek and Cyrillic.

And the complexity of SVG animations. If you do them via CSS, it has to be embedded in the SVG, otherwise you can’t load it from an external file. Yuck.

@inder23 showed initiative and great willingness to learn, so show them some love!

3 Likes
6

hi there. I think its a nice way to learn, working on a small projects. How can i apply for to help nonprofits before the end of certification ? Im at the end of my front end tutorial…

7

Thanks @lynxlynxlynx for the oppurtunity, it was a great learning experience.

1 Like
8

So far, people just wrote to me. I recently extracted some of the todos into this basic list:

Of course there’s many more, but these are the ones that are mostly standalone, of limited scope and not requiring internal or cms knowledge (let’s face it, most of what everyone uses is not written from scratch).

The first two are very easy, the third is more about thinking the data presentation through and the last one is an integration/migration challenge not at all related to the FCC curriculum (more an example of real-life maintenance crap). And two were completed already.