#TheOpenDevCon 2018 — JAMstack & Hacktoberfest

Every year, Ahmad Awais, Maedah Batool and their team organize several meetups/conferences aimed at upskilling the local community here in Pakistan. 2018 was no different as well, with the series of events starting from WordPress & JavaScript Meetup Lahore, held in January. This October, they arranged another conference, #TheOpenDevCon2018. It mostly revolved around JavaScript, APIs, and static Markup as well as celebrating open-source on the 5th edition of Hacktoberfest. The program also incorporated talks and a workshop about JAMstack.

Meetup Particulars

The University of Engineering and Technology, Lahore was the venue for this conference. The audience substantially comprised of CS, CE and EE students. Whether they were absolute beginners or developers with intermediate skills, there was something for every one of them to learn.

Talk by Ahmad Awais

Ahmad started the conference with a brief introduction and told everyone why he loved teaching and delivering talks. He considers it his way of giving back to the community. Ahmad is a hyperactive open sourcerer. He advocates open source wherever and whenever he gets the chance to do so.

Building a project is good, but creating a community around it is even better. And there is no better way to do so than to open source. He shared why every aspiring developer should start contributing to open source right now. He even declared contributing to open source a life-changing decision of his life.

Git/GitHub

Next, Ahmad gave an excellent fundamental understanding of Git. He also demonstrated the primary commands and their usage. While maintaining an entertaining atmosphere by cracking silly jokes and puns, Ahmad also gave useful resources to learn Git. That being done, the audience was thoroughly educated about how to create a pull request, make the commits and push it.

After giving the intro to Github/Digital Ocean. He told the audience about the 5th edition of Hacktoberfest, a month-long celebration of open source. And how anyone can earn a free limited edition T-shirt and other goodies by creating five pull requests.

🥞 JAMstack

The next part of the talk was about JAMstack. It is a web development architecture established on JavaScript, APIs and prebuilt Markup.

💼 JavaScript

“Why JavaScript? 🤔” One of the biggest dilemmas of web developers is figuring out which language to learn. Ahmad explained how Javascript is easy to pick up and fun. You can start coding it right inside your browser without setting up a developer environment, which is a reason beginners find it more comfortable.

Moreover, it can also be used on the server-side with node. JavaScript is everywhere. All this, while still ensuring highly paid gigs in the industry.

💻 APIs

The section about APIs was really a fun part. Ahmad shared why the concept of APIs was easier to understand but hard to explain. But he had a fun interpretation up his sleeve. Imagine you are ordering some food form a menu in a restaurant. There needs to be some link between the kitchen and your order. API is that critical link. It can’t be that simple. ✌️

• “Kitchen” is the server.
• “Menu” includes requests to be made to the server.
• “Waiter” is the API here.

📖 Markup

Markups are converted into HTML via build tools. Making sure that the attendees do not feel overwhelmed, Ahmad performed a live project. Here is it’s demo. It included building a simple static blog using Gatsby, Netlify, and MOAAR.

⚙️ Gatsby

GatsbyJS is a modern site generator for React. Credits to its impressive documentation and easy to find resources, you can build super fast static websites and much more. Ahmad demonstrated all the steps from installing it to creating a Gatsby site.

Netlify

Netlify is a JAMstack hosting but a lot more than that. It delivers an all-in-one workflow to establish and control modern web projects. Some of its impressive features are:

• 😮 Serverless functions
• 🤖 Automatic deployment/Cache invalidation
• ⚡ HTTPS, Custom domain, DNS Management
• 🦄 Authentication signups, logins, & pass recovery and so on

Personal Branding

Lastly, Ahmad concluded the topic by emphasizing personal branding. Ahmad likes to put forward real-life scenarios to make discussions more gripping. This time he mentioned a situation, which compared the approach of a nerd and a relentless brainstormer towards naming an assignment.

The purpose was to educate the audience about personal branding, and why a professional approach to branding yourself is critical. No wonder, “naming things” is regarded as one of the hardest things in Computer Science.

He showed how the tools as mentioned above could help set up a blog on a domain of your name. Undoubtedly, being known as a professional is one of the most significant advantages one can have today.

🔥 Excited to be keynoting on #TheOpenDevCon talking about #JAMstack — @Gatsbyjs with @Netlify.

📺 Keynote Slides: https://t.co/c7vEANls7D
👨‍🏫 Focused on EE, CE, CS, Students at UET LHR
🏛️ API Servers with @Linode + @DigitalOcean
📯 Conf Site: https://t.co/xqafVyXsr5

🙌 Retweet pic.twitter.com/VlYcO6lKGV

— Awais.dev (@MrAhmadAwais) October 28, 2018

Q/A Session

Consider this. Meetups are organized with two targets in mind; one is to impart new knowledge to the participants so that they get to learn something new. The other one is to interact and connect with like-minded people. Many meetups may cover the first objective, but the second one is even more important.

This conference, being a large scale version of a meetup included an interactive discussion and Q&A session covering both the objectives mentioned above. Ahmad took a surprise quiz as well. He asked industry focused questions from the attendees.

The answerers were appreciated by presenting them with free domains. Besides, there were cool stickers, swag and what not. Some of the attendees approached Ahmad after the talk to ask questions and discuss ideas. Many were interested in adding to open source software. It turned out to be a reasonably healthy discussion with Ahmad guiding them and showing them the way to go in the future.

⚡️ Hands-On Workshop On Linode by Ashar Irfan

In the next round of the conference, Ashar Irfan — Lead Developer at WP White Security — conducted a hands-on workshop on Linode. Linode is one of the finest Cloud Hosting providers in the industry, and their services are just for everyone. Whether you are a developer, a designer or an absolute beginner launching a Linode cloud server is easier than ever. They offer the fastest hardware and network in the industry with scalable environments.

The prime focus of this workshop was teaching students about how to generate a static website using GatsbyJS and hosting it on the Linode server. Ashar began with explaining the initial setup which includes setting up a Linode server and hosting a Gatsby powered website.

Ahmad had already explained the creation of a static site with GatsbyJS, so it was easier for students to catch up with the Linode server setup. Later, during the question-answer session, he also explained how you could move your WordPress blog to Linode. Since almost 25% of the audience had their blogs powered with WordPress, so the concept of hosting static sites piqued their interests.

🐶 Hands-On Workshop With pudl by Maedah Batool

The final proceedings of the conference was an all-girl affair. Maedah Batool conducted a hands-on workshop presenting her newly-built static site generator called pudl. Being a maintainer of #GirlsWhoCode and #ReactJSLadies local meetup chapters, her workshop witnessed an audience of more than 30 girls.

pudl is a JavaScript-based static site generator for quick static site prototyping. She explained how quickly pudl could handle a good deal of automation for your development projects by writing simple Gulp tasks. Some students were new to pug and Sass, so she explained these two in detail.

Later she showed how pudl performs:

• Live reloads browser with BrowserSync.
• CSS: Sass to CSS conversion, error catching, Autoprefixing, and CSS minification.
• Watches files for changes in CSS.
• Corrects the line endings.
• InjectCSS instead of browser page reload
• Sends message notification to you.
• Prevents pipe breaking caused by errors.

🔥 Had incredible experience on #TheOpenDevCon. Awesome keynote by @MrAhmadAwais about #JAMstack — @Gatsbyjs with @Netlify

Presented my #JavaScript-based static site generator pudl to CE & CS students.

🏛️ API Servers @Linode & @DigitalOcean
📺 Slides: https://t.co/EaptHAZOpB

— Maedah.dev 👩‍💻 (@MaedahBatool) October 29, 2018

Refreshments & Swag

The conference was sponsored by Github, Digital Ocean, Twilio and Linode. They had sent some pretty cool stickers, swag, Git cheat sheets and guides for all the attendees. The audience also enjoyed refreshments, burgers, and drinks.

Resources

• 👇 Download and install Git
• 👨‍🏫 Resources to learn Git
• ❓ Learn more about APIs
• 🎯 Learn everything about Gatsby with this Gatsby tutorial
• ✅ How to Generate a Static Website Using GatsbyJS & Host the Website on Linode Server?
• 🤫 More features of Netlify
• How and where to work on Open Source projects?
• Watch Ahmad’s #OneDevMinute, in which he explains how to do it.
• Ahmad’s Hacktoberfest GitHub Repository can be ideal to start with. It has 5 branches and 58 contributors who have pushed 350 commits so far.
• More information about #Hacktoberfest can be found on its official site.

✍️ Meetup Details

• 🜸 Conference Site: 2018.TheOpenDev.com
• 📦Topic: Keynote about JAMstack and Hacktoberfest open source.
• ⚡️Sub-Topics: Git, Digital Ocean, Personal Branding/Portfolio Gatsbyjs with Netlify, API Servers Linode & DigitalOcean.
• ⏰Time: 12 PM to 3 PM
• 📅DATE: Sunday 28 October 2018.
• 🏠Venue: UET Lahore, PK.
• 👋Meetup.com Link: Event for TheOpenDevCon 2018
• 🎥 Keynote Slides by Ahmad Awais: TheOpenDevCon2018.AhmadAwais.com
• 👩‍🏫 Maedah Batool’s workshop on her #JAMstach Generator called pudl
• 📖 Slides by Ashar Irfan: Gatsby Hosting on Linode Server

🌟 Last but definitely not the least…

🙏 A BIG BIG thank you to our incredible sponsors DigitalOcean, GitHub, Twilio and Linode. Without their generous support, this conference would not have been possible.

One of the most go-to cloud platform for developers & teams. DigitalOcean helps you deploy, manage, and scale cloud applications faster and more efficiently.

Read More →

An all-in-one cloud communications platform. Twilio helps you create blocks to add messaging, voice, and video in your web and mobile applications.

Read More →

GitHub is the most go-to place for every developer. If you have written even a single line of code then GitHub is for you. It’s the world’s leading software development platform.

Read More →

Linode is one of the finest cloud hosting providers. Whether you are a developer, a designer or an absolute beginner launching a Linode cloud server is easier than ever. They offer impressive hardware and network in the industry with scalable environments.

Read More →

— And a few clicks from this super awesome event by Ashar and Maham.

🤔 New Addition To The Team

Hey, I am Ahmad Bilal, and this is my first article for TheDevCouple blog. You’ll be glad to know that I am the youngest brother of Ahmad Awais. It’s been almost a month since I have started pursuing my Bachelors Degree in Computer Science from UET, Lahore. I am super excited to be a part of TheDevCouple team and looking forward to exploring new endeavors.