Forem: saintmalik

Open Source Internships and Programs in 2022

saintmalik — Mon, 10 Jan 2022 18:25:48 +0000

Before we start, i will like to say, All this programs listed are not mandatory for you to contribute to open source.

But you can contribute to open source even if you don't get selected for this programs, you can always contribute to open source programs anytime you want.

And also contributing to open source doesn't mean free, many companies have their open source projects and yeah they make money from it.

See how the Founder of Ghost made $63,000/mo building an Open Source Publishing Platform.

So there is more to Open Source than just sending PR's and submitting issues, you can also start your own open source projects.

Let’s jump in.

1. Reinforcement Learning Open Source Fest

The Open Source Reinforcement Learning programs has the largest pay out in the list open source internships.

You will recieve payment of $10,000 stipend if you get in, well this program is yet to be known by many, due to the fact that they just started the program in 2020.

The program is focused on introducing students to open source reinforcement learning programs and software development and yet working alongside with researchers, data scientists, and engineers on the Real World Reinforcement Learning team at Microsoft Research NYC.

The program is a four-month research programming project during academic breaks in universities from May-August, its fully remote and online.

Who is Eligible?

Students who are in any accredited university, colleges doing their Masters, phD or Undergraduate programs.

Things you will be doing when you get in

Submitting quality works, i.e writing codes that compile, doing unit tests and documentations, passing code reviews
Regular standup with mentor /collaboartor
Communicating and working with collegues

Program details

Region: Worldwide
Stipend: $10,000
Deadline to apply: NILL for 2022
Program dates: May - August Redacted (2022 application not opened yet)

Apply on their official page: Microsoft Reinforcement Learning Open Source Fest

2. MLH Open Source Fellowship

Major League Hacking is a well known platform amidst devs and hackers, so apart from their regular fellowships.

They also have Open Source Focused Fellowship also, the fellowship is a 12 weeks Internship for aspiring software engineers.

What you will be doing on the MLH Open Source Internships is contributing to any Open Source projects that most companies depends on,.

That way you will be able to get first hand software engineering experience from seniors and experts.

Program details

Region: Worldwide
Stipend: The amount of the stipend is determined by your track and the country you are residing in during the program.
Upcoming Batches
- Spring 2022 Batch (Jan 31 – Apr 22, 2022)
- Summer 2022 Batch (May 30 – Aug 19, 2022)
- Fall 2022 Batch (Sept 19 – Dec 9, 2022)

Apply on their official page: MLH Open Source Track

3. Google Season of Docs

This program is for the documentation and technical writers geeks, No open source projects can do away with documentation,.

So in this program you collaborate with other technical writer and open source organizations to write their documentations for them.

Well they just wrapped up the 2021 Program and the 2022 Application form is yet to be out, keep on the look out during the period of July.

Also note you must be aged 18 above to participate in Google Season of Docs.

Program details

Region: Worldwide
Stipend: Payment varies based on the Open Source organisation you are working with, but yeah it starts from $3000 above.
Deadline to apply: NILL for 2022 yet
Program dates: July (2022 application not opened yet)

Apply on their official page: Google Season of Docs

4. Season of KDE

Okay Season of KDE is open to everyone to apply, student or not, everybody can apply, it is similar to Google Season of Code.

You can participate in both code and non-code projects that benefits the KDE ecosystem.

The 2022 application is out already and yeah it will last for 2 - 3 months, deadline for application for both students and mentor is January 15, 2022.

Application form has been open since December.

Program details

Region: Worldwide
Stipend: MERCHANDISE AND SWAG SENT OUT BY COURIER.
Deadline to apply: January 15, 2022
Program dates: December 15, 2021 - May 20, 2022.

Apply on their official page: Season of KDE

5. Google Summer of Code(GSoC)

Well, GSoC is known to be for students, but recently google annouced that other people apart from students can also participate in GSoC.

Bear in mind that you are not an employee of Google neither as an intern at Google. You’re working with Open Source organizations that you applied to or got selected in.

Stipend is paid to you by those organizations, it might vary based on your performance and the work youve done.

Program details

Region: Worldwide
Stipend: $1000 above
Timeline: Application opens in April, 2022 for contributors

Apply on their official page: Google Summer of Code

6. Hacktobefest

You all wont want to miss Hacktoberfest, its full of fun activities, collaboration, working with different Open Source Organisations in the month of October.

The program is seasonal, also i will like to clear out something, Hacktoberfest isn't just hosted by Digital Ocean alone.

Alot of organizations do host their own Hacktoberfest event and reward contributors either through giftcards, coupons, keyboard, T-shirts, bottles, bags and stickers.

You can check this list for companies that also hosted hacktoberfest in 2021, it will be updated with 2022 when hacktoberfest starts in October, 2022 also, do well and bookmark the page down.

Program details

Region: Worldwide
Stipend: Swags, Stickers.
Timeline: Application opons in October, 2022
Program dates: October 01, 2021 - October 31, 2022.

Apply on their official page: Hacktoberfest

7. Outreachy

When it comes to diversification in Open Source, Outreachy ranks number 1, it's totally a remote internship that lasts for 3 months.

Only few students are always selected and majority are women, physically impared individuals around the world.

Outreachy Internship focuses on both documentation, programming and project marketing and more tech paths, its a paid internship, so you will get some funds for balling when you are done.

Program details

Region: Worldwide
Stipend: $7000
Timeline: Application opens February 1, 2022
Program dates: May, 2022 - August, 2022

Apply on their official page: Outreachy

8. Summer of Bitcoin

Summer of Bitcoin is a summer internship program aimed at introducing university students to bitcoin and open-source development all over the world.

You will learn how bitcoin works, contribute to bitcoin projects, Get a summer job offer, a full-time open-source development grant, or a position with one of the most reputable bitcoin companies and earn bitcoin as stipend.

Program details

Region: Worldwide
Stipend: $3000
Timeline: Application starts from January 1, 2022 - March 15, 2022
Program dates: May 9, 2022 - August 29, 2022

Apply on their official page: Summer of Bitcoin

That's all for now.

Peace out ✌️.

DOHackathon: Building super fast Portfolio with Hugo

saintmalik — Wed, 06 Jan 2021 16:56:15 +0000

What I built

Guys, i have built my personal portfolio site using a static site generator called Hugo, made use of Hugo template alongside, I did redesign and twist things to my own taste.

Category Submission:

Personal site/Portfolio

App Link

DO generated URL: https://saintmalik-qu9u2.ondigitalocean.app/

My Custom Domain: https://saintmalik.me/

Screenshots

Description

My personal porfolio website, making it blazing fast and stress free with DO.

Link to Source Code

https://github.com/saintmalik/saintmalik.me

Permissive License

Background

(What made you decide to build this particular app?)

Well starting out my career, i see alot of collegues pulling up their folio page, says it speaks everything they need to whoever is looking for them, making them a present individual on the internet space.

So i decide to pull up mine, a blogging section is available to share things i learn, also a work/project page to share with people what I've done or what am working on.

(What inspired you?)

I wanted my own personal portfolio to be out there, to speak about me, to share ideas also via blog section.

How I built it

(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)

Started by reading alot of tutorials and hugo documentations, then i proceed to install Hugo CLI on my system.

Then i picked one of the hugo themes that caught my attention, found some other designs attractive too, but the one i picked at first is what i wanted to work with,but there is a particular feature on the other themes that made me love them.

So i went on building with the first theme i picked, keeping in mind that i will make the feature in other themes for mine also, yeah it was these Avatar feature, see a demo here

So i keep coding and googling stuffs, there was a point i had issues with Hugo Server Auto reload, did so many research before getting ahead of the issue.

hugo server --disableFastRender

Thats the command that bailed me out✌️.

I was new to Go lang and Hugo entirely, i had to keep googling stuffs, i spent up to three days before i could seperate the Title tag of the Home page from the one of the blogpost page.

Spent tons of hours trying to figure out how to seperate the descriptions/meta description each posts will render to what the blog home section will render.

Now coming to the issues of compressing my code because it was bulky, that brought me to learning about how compression works, googled alot of stuffs, found Babel and Webpack.

The integration wasn't friendly for a beginner in Hugo, so i had to use the in app Assets minification techniques that hugo has, read more about it here Hugo Assets Minification

Also i learned about Asset bundling, i.e Concatenate many js files into one, to reduce the HTTP request made when your website loads up Hugo Assets Bundling.

And yeah i also learned how Fingerprinting/Hashing of files work, it makes it easy for caching web app assets, which definately helps the website to speed up on the next visit of a user.

So whenever a cache is cleared on the web app, a new hash code is generated for the JS/CSS files, so the old url for those assets will result in 404.

Then the new url will be fetched, isn't that awesome? Yeah it is.

In addition, The color blending, yeah am not so good at picking colors, so i spent so many days changing the colors of my folio site, before settling with the one thats on the folio site right now.

Lastly, i was able to get the heavy assets and code to load at 0.6seconds😎😉, thanks to DO Global CDN😊 which is powered with cloudflare.

Also i dont have to worry about DDoS attack, DO has DDoS mitigation in place 🙈😎.

I must say also, DO Auto Deployment to Github made everything more easy for me, so i worry less about the server, i make my changes on github and yeah it will reflect.

The auto detection of static sites also save me the stress of doing some build run or writing some special config so it recognize the static app and trying to deploy😍.

Additional Resources/Info

Hugo Documentation
Hugo Themes

Heres how i got my Hugo site to load in less than 0.7 sec!

saintmalik — Fri, 10 Jul 2020 11:35:04 +0000

Am a guy that’s obsessed with web page speed optimisation, so here is what I did to optimise my Hugo site speed to load inless than 0.7 sec.

1# Removing Unused CSS, Minifying the CSS and adding Fingerprint:

Yeah, I started by looking closely into CSS I felt ain't useful on the website and removing them.

Then I minified the CSS using the below code and added fingerprint, wondering what the fingerprint does?

the fingerprint helps in ensuring that fresh content are served, MD5 is the most common implementation of this idea.

MD5 hash will be calculated and added to the CSS file, something like this “styles.min.c1783285df9c580224cb4b14efea9ff1.css”.

The browser will keep cache this file and render it to users always.

So let's say you make few changes to these CSS files and redeploy it, a new md5 hash will be added to it.

So if you force clear cache the CSS for all browsers, the “styles.min.c1783285df9c580224cb4b14efea9ff1.css” will appear as 404 files if you inspect via Chrome Dev Tool.

So the fingerprinting of js and CSS assets helps you deliver fresh contents to users.

Below is code to minify and add md5 fingerprint to your Hugo site, add the below codes to your header files, the resources.Get “/styles.css” change the path of the CSS to your own CSS path.

{{ $style := resources.Get "/styles.css" | minify | fingerprint "md5" }}

2# Compress, Minify JS files, Optimize and Add fingerprints:

JavaScript happens to be most of the rendering blocking assets in Pagespeed Insights, so since I have more than one JavaScript files.

I will need to compress all the JavaScript files into one, so as to reduce the number of HTTP request made the server.

Now that the JS files are combined and concatenated into the bundle.js file, let's minify them to remove the unnecessary spaces and comments using resources.Minify

We’ve compressed the js into one, we’ve minified it, let's add the fingerprint, below are the lines of code that performs all the above explanation,

{{ $main := resources.Get "js/main.js" }}
{{ $menu := resources.Get "js/menu.js" }}
{{ $prism := resources.Get "js/prism.js" }}
{{ $theme := resources.Get "js/theme.js" }}
{{ $secureJS := slice $main $menu $prism $theme | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}

<script defer type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>

If you check the above code well, you will see I added defer to the

<script.....></script>.

Yeah, loading Javascript files Asyncronaously will help your page speed and improve website load time.

You might be thinking why didn’t I use async instead of defer, well defer seems to be the best practices.

You can as well look into this guide and make your own decision, choosing can vary based on what project you are working on.

To implement it, you need to create a javascript.html file in your Layouts/partial/, paste the following codes and call the JavaScript.html into the place you want it to be using

{{ partial "javascript.html" . }}

We aren’t done yet when you create a web application, you will need to see metrics on who visits the website, which brings in Analytics tools and the common on is google analytics, this is a third-party tool.

Third-party assets are known to slow down web pages because you have no control over them, you can’t set a caching rule on it, but will still do something to it anyway.

In Hugo here is the code that adds Google analytics to your sites and also loads it asynchronously

{{- if .Site.GoogleAnalytics }}
{{ template "_internal/google_analytics_async.html" . }}
{{- end}}

To set your analytics tracking code, just add this to your config.toml file

googleAnalytics = “Your Tracking Code”

That's all for JS files.

3# Optimize your images:

Images occupy 50% of a webpage, stop the habit of not optimising images before uploading them to your sites, according to web.dev, they advise webmasters and web dev to adopt the use of WebP image formats.

But seems not all browser supports that yet, alternative its better to use JPG images instead of the heavy png images.
Also using inline Images can help your website page speed, using im\line images live SVG or base64.

But Base64 encoded images can increase your site KB size but it will reduce your HTTP request.

Best place to use inlined mages are logos, favicon if possible, and images above the fold.

So next time you work on projects always optimise images you use, you can use sqooush.app to compress and even change image extensions and other edits, also you can use base64 to change your images to base64 inline images.

4# Host Fonts Locally:

When building a website, we all want to use fancy fonts, the option everyone uses is the Google font, well google font can really hurt your LCP (Large Contentful Paint) because you can’t control this font since it's not hosted on your site.

Well since we can host it locally why won't don't we do it then, download all the font sizes you will be using in your webpages.

Here is a correct font declaration when hosting your fonts locally, download the font to a directory on your website.

@font-face {
font-family: geomanist;
font-weight: 300;
font-style: normal;
font-display:swap;
src: url(../fonts/geomanist-light-webfont.woff2) format("woff2"),
url(../fonts/geomanist-light-webfont.woff) format("woff")
}

font-display: swap;

The ‘swap’ value tells the browser that text using this font should be displayed immediately using a system font. Once the custom font is ready, the system font is swapped out.

Also preloading or perfecting Fonts are good e.g
rel="preload" as="font" attributes will ask the browser to start downloading the required resource as soon as possible.

It will also tell the browser that this is a font, so it can appropriately prioritise it in its resource queue.

5# Preconnect External resources:

Well we can’t do without using external resources on our web apps since they are external resources, we have little control over, scripts like Google Analytics, Google fonts and many more external scripts that are common on web apps need to be fetched earlier so they won't have much impact on our web page speed.

This can be done using DNS-prefetch, reconnect and prefetch itself, below is the one I used.

Robin has a simple and straight forward guides preload, prefetch and prebrowsing.

6# Using a CDN:

Cloudflare to the rescue again, though netlify promise a CDN, which is called Netlify edge, I must say its Netlify Edge is so awesome when I used it, it did break some functionality on my website, so I left it to use Cloudflare, but I must say my page speed increased with 20% using netlify edge.

But Cloudflare the promising guy, who has data centre almost all over the world, think of it, it's an awesome package, but we the free Cloudflare users can also access it.

CDN works like this, it caches your CSS, js and image files and saves them to their storage on all their available data centre, so when a user from Australia visit your webpage, the cached resources of your site in Cloudflare CDN at Australia get delivered to the Australia users.

So the data gets loaded so fast because your files are available in the data centre near the visitor.

But when you don’t use any CDN, and your hosting provider doesn’t have data centre around the world, then some regions will experience slow load page, because your website will be rendering files from US data centre to Russia users which makes it a bit slower.

7# Configure your cache settings well:

This might be tricky at first, All website deployed on Netlify has a default cache control which is max-age=31536000, public, must-revalidate, which means all content should be cached but also re-validated.

The rationale is that “This favors you if you use the netlify edge can also as a content creator — you can make changes any of your content and see results instantly.

But am using Cloudflare CDN and I won't be changing contents or remodifying all time, so that cache control isn’t good enough for me, I want all my files to be stored in Cloudflare cache and I want the expiry period to be a year.

So I decided to override the netlify default cache using netlify.toml file and I set the

[[headers]]
for “/*”
[headers.values]
Cache-Control = “public”
[[headers]]
for = "/posts/*" # This defines which paths this specific [[headers]] block will cover.
[headers.values]
Cache-Control = "public, s-max-age=604800"

If you notice, I didn’t set max-age or s-max-age to the for “/*” header, I only set “public”, I did that because I already set the max-age value in Cloudflare.

You can also choose to set the whole thing using Netlify.toml, all you will do over your Cloudflare dashboard is to set Browser Cache TTL to Respect Existing Header.

For the [[header]] “/posts/“, this is the path to my blogpost page, where frequent changes could occur, so set s-max-age to 604800 (a week), so am using s-max-age to modify the cache setup for that particular path.

You can learn more about cache controls and Cloudflare cache with the below resources.
Getting started with cloudflare