DEV Community: Maedah Batool 👩‍💻

What Is Dwell Time & Why It’s Important for SEO

Maedah Batool 👩‍💻 — Thu, 25 Mar 2021 15:23:50 +0000

To browse something from Google, you know the drill. Type inside the search bar with the most related keyword, and Google generously delivers hundreds and thousands of results.

The chances are that you’ll click the very first URL that appears in the SERPs (Search Engine Result Pages). Why? Because your brain tells that the first link is the most related and authentic out of the lot.

You click the URL, and after scrolling through the site content, you decide to return to the search page because:

You didn’t get the desired info
You had a bad site experience, or
Diversity — you want to find out what other sites offer

So, what is dwell time?

This entire loop of time which started from clicking on a web URL till you return to SERPs for some other website, is called the “ Dwell Time.”

See, you’ve done this several times, and in the context of SEO, dwell time is an important metric that websites need to monitor.

How dwell time works?

Basically, the duration of dwell time helps Google understands how likable is your website’s content. E.g., for the first SERP result (website A), you spend 5 seconds on a website. The second search result (website B) brings more value and piques your interest. This makes you spend good solid 5 minutes before you jump to another site (website C).

Your 5 minutes stay on website B is far more impactful than website A. This user-generated feedback helps Google learn that the second website adds more value for readers. Now let’s consider that the same trend continues by other readers as well. The result will be that Google will improve website B’s ranking and places it in the first spot.

How to measure dwell time?

There isn’t any hard and fast rule to measure the dwell time since Google Analytics does not offer an exclusive filter to calculate it. On the contrary, with Google Analytics, you can learn about your website’s Avg. Session Duration, i.e., the average time a site visitor spends after they land on that page.

This span is relatively quite close to your website’s dwell time. To do so:

Login to Google Analytics
Go to Behavior ❯ Site Content ❯ Landing Pages
Create a segment that lets you view only the Organic Traffic
Done! Now you can view the time visitors spend on each page of your site

Tips to improve dwell time

Dwell time is quite subjective in that it gets affected by the entire SEO strategy of a website. So, if you ask me what are the tips to improve the dwell time, then here are some of the best practices:

Embed videos in your site content
Improve page load time if the site loads slowly
Write long-form content approx. more than 1000 words
Website content should be mobile friendly and optimized for different screen sizes

Was this piece helpful? I have also written a piece about why investing in a good SEO suite is important. Reading it might be helpful.

Also, please share your feedback through the comments section below, and for any further queries you can reach out to me through my Twitter account.

The post What Is Dwell Time & Why It’s Important for SEO appeared first on Maedah Batool.

3 Projects To Have in Your Technical Writing Portfolio

Maedah Batool 👩‍💻 — Tue, 05 Jan 2021 08:39:53 +0000

Growing your career in technical content writing can be somewhat tricky. Because there isn’t a well-defined route that is accustomed to other tech positions like full-stack web developer, solution architect, or web designer.

However, you can build a technical writing portfolio worthy of being hand-picked by recruiters and hiring managers quite easily. This is possible if you have at least these three types of projects in your content portfolio.

Hands-on tutorial
Long-form reviews
Guides/reference documentation

1. Hands-on Tutorial

A hands-on tutorial is a step-by-step learning material that teaches your audience about how you use a product and build something with it.

Generally, this is an 800-1200 words piece that includes a detailed explanation of all the important steps of the build process. Coupled with explanatory screenshots , code configurations , and GIFs , this type of content is the best way to explain your perspective and experience of using a particular product.

Content of this type is titled generally as:

How to do this …
Building this with …
Creating your first this with …

2. Long-Form Content

Long-form content is a lengthy piece anywhere between 1000 and 3000 words. It’s aimed to provide in-depth analysis and lots of information about a given product , a concept , or some on-going tech trend.

Apart from just length, long-form content also requires you to think critically about a topic. Other than the key details, readers would want to learn about your perspective and opinion. And this matters significantly if you are a published and a featured author.

In that case, your take on the matter would affect your audience the most. You have the power to gauge several leads into conversions.

The titles of long-form content are statement-based and facts-based like:

What Will Next.js Be Like In 10 Years?
15 of the Best VSCode Themes for You in 2021
Build a Blog with Next.js: A Beginner’s Guide for 2021
AWS vs Vercel vs Netlify: What Are the Differences and When to Use Which Platform?

3. User Guides & Reference Documentation

A user guide/reference docs are generally a detailed book-length content showcasing all the essential information and instruction about a software product. It features sections like installation , usage , configuration , customization , error handling , troubleshooting , in short, everything possible that can be built using a product.

A user guide is considered short if it is about 10 pages and long otherwise. But writing projects like these aren’t easy to get. Developers tend to write it themselves since they know the product best or hire some pro-tech writer with good experience.

In this case, a great opportunity that can be tapped on is to start contributing to free and open-source software. Jump over to GitHub and start helping developers document their open-source work.

Are these three project types enough?

To grab a good technical writer position these three types of content projects are fairly good. But you should never hold yourself from innovating and being versatile. Keep writing rich and informative content targeted at the right audience.

Moreover, I am writing an e-book about a holistic content workflow that helps you to “ Write , Publish , and Market ” your technical content. It’s called “ Content For Developers “.

Professional 30+ Tips from a featured author with 10+ years of experience.

Currently, availble for pre-order sale at 65% discount.

Grab your copy → https://Writy.io

The post 3 Projects To Have in Your Technical Writing Portfolio appeared first on Maedah Batool.

Invest in A Good SEO Suite for Writing Web Content

Maedah Batool 👩‍💻 — Thu, 03 Sep 2020 10:00:39 +0000

I call it a total waste of time, revenue, and effort if you are writing web content and not investing in a good SEO suite. The main idea to write and make it public is that you want the others to know about your thoughts, ideas, or your product and services from a business standpoint. And if it is not reaching your target audience then everything will go in vain.

How good should your SEO toolkit be?

A good SEO suite should take care of all the essential SEO needs that your content requires. Some SEO toolkits are bombarded with so many configuration options that you need a good deal of time first to understand these options and then configuring them according to your needs. On the contrary, other solutions might carry so few options that you can’t even fulfill the basic requirements from it.

An ideal way to make your pick is to first curate a list of essential SEO steps and they choose the suite wisely and accordingly.

Basic SEO needs

Now I’ll help you understand what basic requirements should your SEO toolkit fulfills. I normally prefer a tool that helps me achieve the following:

Technical SEO
Targetted keyword research
Rank tracking mechanism
Backlink analysis
Video SEO
Link building
Content optimization

Based on the above-mentioned features, I then narrow down my search to going for either a free or a paid solution.

Following these steps can help you choose an intuitive SEO suite. Choosing an SEO suite is a one-time effort that you should do to ensure that your content reaches your targetted audience. Also, you should keep searching for better options with time because SEO companies continue and innovate with new and exciting features. So, if you are sticking with a paid solution chances are that you find the same variant for free or a much better variant at less price.

The post Invest in A Good SEO Suite for Writing Web Content appeared first on Maedah Batool.

My Closed Captions Writing Workflow in ScreenFlow

Maedah Batool 👩‍💻 — Tue, 07 Apr 2020 13:46:20 +0000

Every time I write closed captions for my videos I tend to forget how I did that the last time. So, this post is not only a reference guide for myself but also for my awesome readers who want to learn how you can add closed captioning to your videos.

First, let's start with the basics.

What are closed captions?

Closed captioning is essentially the subtitles or simply an overlaid text written on top of any video as it plays. This means that apart from just the audio and video you also get to read as you walk through any tutorial. Closed captions are super helpful from the accessibility point of view and are always considered as a good a11y practice.

My closed captioning workflow

I use ScreenFlow to record and edit my videos. So, this article will primarily focus on how you can write closed captions in ScreenFlow.

ScreenFlow offers an awesome caption editor to add, edit, and publish subtitles as caption tracks to a project. The closed captions track is not included by default at the time of recording a new video you need to enable it whenever needed.

I include captions in the screencast when I export the project into one of the suitable video formats (generally it is mp4).

Consider that I have one such video opened in my ScreenFlow editor ready to be closed captioned.

The first step is to enable the Captions track. Two settings need to be configured:

Go to the menu [View] ❯ [Show Captions] enable it.
Then again go to [View] ❯ [Show Caption Track] enable it.

These will add another track called the Caption Track right on top of the video.

Next, it's time to define some shortcuts to add these captions. To do so:

Select the [ScreenFlow] menu
Click [Preferences].
Click the [Shortcuts] tab.

Following are my shortcuts for quickly writing the closed captions.

Play Caption Track: Command (⌘) + P
Next Caption Track: Command (⌘) + ]
Previous Caption Track: Command (⌘) + [

Here is a quick 1-minute illustration of how I close captions my videos.

The workflow goes like this:

After importing the video file enable [View] ❯ [Show Captions] and [View] ❯ [Show Caption Track] option from the View menu.
This adds another grey-colored track right at the top of your timeline. This is the captions track which we just enabled.
Try clicking through it and you find it divided into several sections.
Each section can be treated as a caption block.
Click one section and a writing box pops up where you can write the captions.
To play the caption track hit Command (⌘) + P write the text and then hit Command (⌘) + ] to jump to the next caption track. Anytime, you want to jump back to the previous caption track hit Command (⌘) + [ shortcut.
In this way continue with this sequence and start filling your captions track. It will take some time to get yourself accustomed to this flow.
Finally, try playing your track and the captions appear successfully with your playing video.
Now go to [Edit] ❯ [Captions] ❯ [Export to SRT] and export the SRT file to be uploaded with the video.

Caption tracks can be created in multiple languages. You can also export captions as an SRT subtitle file. Now with your own personalized shortcuts configuration, you can close caption your videos quite easily.

Do you find this article helpful? Let me know by posting your comments in the field below.

Embedding Videos in Your Gatsby.js Sites

Maedah Batool 👩‍💻 — Wed, 09 Oct 2019 14:12:30 +0000

Media elements like images, videos, and GIFs in blog posts and websites are becoming prominent day by day. Also, Gatsby-powered websites are the recent trend and people are very excited about #JAMstack.

When we talk about embedding/rendering these media elements we find different ways of doing it. Moreover, the process is not the same. It varies from one framework to another.

Talking about Gatsby specifically, then videos can be embedded either through a custom solution or by using remark plugins.

I'll be sharing an easier way of doing it. There is this incredible Gatsby plugin called gatsby-remark-embed-video which helps you embed videos from multiple video hosts like YouTube, Vimeo, etc.

I have written an in-depth tutorial where you can learn the entire process. You can find it here →

Go through it and trying adding videos yourself. Let me know if you come across any difficulty. I'll be glad to assist.

I also tweeted about it and you can follow me @MaeadhBatool

Maedah.dev 👩‍💻

@maedahbatool

⚡️ Videos are rendered differently and the process varies from one framework to another.

Learn how to embed videos in your @Gatsbyjs sites

🔘 Use `gatsby-remark-embed-video` plugin
🔘 With easy config options

Wrote an in-depth tutorial @scotch_io ⬇️

scotch.io/tutorials/embe…

13:35 PM - 09 Oct 2019

1 1

Solving Queries About Gatsby.js and WordPress

Maedah Batool 👩‍💻 — Mon, 07 Oct 2019 15:22:30 +0000

Last month I had a chance to speak about my favorite JAMstack framework Gatsby.js on the WordSesh EMEA 2019 edition. In case, you'd been following me and my work then, you must know that for the last 2.5 years I had been shifting gears to JavaScript and had been doing JAMstack consultancy.

I just love JAMstack with Gatsby and Netlify. This is why I write about it regularly in magazines like Scotch.io and have delivered talks on events like WordSesh and TheOpenDevCon.

🎙 Speaking Engagements About Gatsby

This year, I presented twice on WordSesh and both talks were about Gatsby. The topics are as follows:

⚡️ Fast Web With Gatsby & WordPress
👾 Optimizing Your Gatsby.js Site for Production

I have uploaded both these sessions on my YouTube channel. Feel free to subscribe and view these.

🚴‍♀️ Optimizing Gatsby.js Site for Production

The topic primarily covered all the important steps which should be implemented and configured before your Gatsby-powered website goes live.

I discussed the implementation of functionalities like:

Adding custom sitemaps
Support for rendering markdown pages
Embedding videos from multiple video sources
Adding an RSS Feed file making your site content subscribable

I plan to write individual blog posts about each of these features which I’ll share some time later.

For now, here are the links to the demo project’s GitHub repo and the presentation deck.

🌟 GitHub repo → https://Maedah.dev/WDSEPGH
👩‍🏫 Slides → https://Maedah.dev/WDSlidesSep19
🐦 Tweet → https://twitter.com/MaedahBatool/stat...

⁉️ Async Q&As

This time, Brian experimented with the async Q&A session. Event attendees were provided with a questionnaire through which they asked written questions.

So, I thought about sharing the answers to these queries from which you folks can benefit.

Can We Make Complex Woocommerce Sites With Gatsby? Is It Worth to Do?

Yes, you can definitely build WooComerce-powered WordPress sites with Gatsby that will pull the data from a REST API. Some time back, I tried building one such website using the gatsby-source-woocommerce plugin. This package helps to fetch data from protected routes using the WooCommerce REST API with all the required credentials.

WooCommerce offers a pretty robust API for handling stuff like products, orders, customers, reports, and discount coupons. By using this plugin, you can implement simple GraphQL filters and data variations as a set state to filter products according to your site requirements.

Moreover, since Gatsby does not has a default back-end you might face difficulty in handling the dynamic side of an eCommerce site like the checkout process. For it, you need to run ajax calls which are easier to handle with Gatsby since it is built with React.js.

If Our Website Has No WordPress Admin System, How We Can Provide Access for Editors to Publish New Content?

If there is WordPress there is always going to be an admin system. That's one of the key reasons for using WordPress with Gatsby that it provides a very powerful and strong back-end since Gatsby only offers blazing-fast front-end with modern cutting edge technologies.

But at the same time, you can always code a custom admin system for your website. Just feed in data to Gatsby and generate this functionality.

👋 That's about it!

If you have any further queries do share your feedback via the comments section below. You can also reach out to me through my Twitter account. Follow me here → @MaedahBatool.

Optimizing Your Gatsby.js Site for Production

Maedah Batool 👩‍💻 — Mon, 30 Sep 2019 07:19:47 +0000

I spoke about “Optimizing Your Gatsby.js Site for Production” at WordSesh EMEA 2019 edition. Thanks a ton to my friend Brian Richards for having me once again.

Talk Highlights

The topic primarily covered all the important steps which should be implemented and configured before your Gatsby-powered website goes live. The reason why I specifically chose Gatsby sites is that I love JAMstack and being the latest trend developers are now shifting gears to it.

I discussed the implementation of functionalities like:

Adding custom sitemaps
Support for rendering markdown pages
Embedding videos from multiple video sources
Adding an RSS Feed file making your site content subscribable

I plan to write individual blog posts about each of these features which I’ll share some time later.

For now, here are the links to the demo project’s GitHub repo and the presentation deck.

🌟 GitHub repo → https://Maedah.dev/WDSEPGH
👩‍🏫 Slides → https://Maedah.dev/WDSlidesSep19

I even tweeted about it:

Maedah.dev 👩‍💻

@maedahbatool

👩‍🏫Had a great @WordSesh talk about optimizing your @Gatsbyjs site for production.

🎙Highlights

👾 Sitemaps
📰 RSS Feed
📼 Embed Videos
✍️ Markdown Pages

GitHub repo → Maedah.dev/WDSEPGH
Slides → Maedah.dev/WDSlidesSep19

Kudos & thanks to @rzen for a successful event. 💯

15:05 PM - 25 Sep 2019

12 19

Generating A New SSH Key and Adding It to Github

Maedah Batool 👩‍💻 — Tue, 02 Apr 2019 13:18:33 +0000

Sometimes I behave like a crazy weird nerd. The developer instinct has always made me learn new things be it skimming through some random code, a tip or some dev-workflow. There are concepts which I just keep dumping in my brain without trying them. But the only motivation is that if needed I will definitely do it someday.

Each time I clone a GitHub repo I come across the option to clone it via SSH. I had an idea about SSH keys but never came across a situation where I had to generate one and add it to my GitHub account.

Today, I confronted the scenario where I had to connect my GitHub account with an SSH key since my GitHub repo couldn't be cloned locally. After figuring out the process, I finally did it and thought about writing my experience with you folks.

So, if you're finding it difficult to create an SSH key and connect it with your GitHub account, then this article is definitely for you.

Let's start with some basic concepts about SSH keys.

What are SSH Keys?

SSH (Secure Shell), is an encrypted protocol to communicate with servers allowing users to avail several network-services. SSH keys, in turn, provide a secured mechanism against brute force attacks which may occur while logging into a server with a password.

When cloning a GitHub repo, you sometimes come across an error saying:

Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.

This calls for the creation of an SSH key. Generating an SSH key results in two long string of characters which includes a public and a private key. The public key is used to unlock any server and then connect it with the client (typically your computer) where the private part of the SSH key resides.

Figuring Out Any Existing SSH Keys

Before you generate an SSH key, you must check if you have any existing SSH keys stored in your computer. To do so, open your terminal, type the following command and hit Enter.

ls -al ~/.ssh

It displays a list of files in your .ssh directory. Go through this list to find the existence of any public SSH keys. By default, public keys are stored with the .pub file extension.

Normally, public keys appear against the following names:

id_rsa.pub
id_dsa.pub
id_ecdsa.pub
id_ed25519.pub

If there aren't any public keys, it's time to create a new SSh key which I will teach shortly. On the contrary, if you find an existing public/private key pair (e.g., id_rsa.pub and id_rsa), you can use it to add to the GitHub account and get started.

I checked for the presence of SSH keys and here's the GIF:

Generating a New SSH Key

In case, no public key exists or you want to create a new key for your GitHub, type the following command in the terminal and hit Enter.

ssh-keygen

The process of key generation will start. It asks for the file in which to save the key with other related info. Fill these details. However, you can leave it empty, and it'll generate your first key with the default name as id_rsa.pub. Remember I didn't change any defualts here and just pressed enter or return key for all options like password and key path.

Here's the GIF:

Copying the SSH Key

Now it's time to copy the contents of the SSH key and add to the GitHub account. Type the following:

cat ~/.ssh/id_rsa.pub

The SSH key appears as follow. Just copy it!

Adding SSH Key to GitHub

Now heading to the final part where I'll add the SSH key to my GitHub account. In your GitHub Profile open Settings. Go to the section for SSH and GPG Keys. Click the New SSH key button, write a suitable Title, paste the copied Key and hit the Add SSH key button.

🤜 BOOM! Here you go. You have successfully added your first SSH to GitHub. Now the GitHub repo can be easily cloned. Moreover, you also get a confirmatory email to inform you about the addition of this new key. This is to make sure no unauthorized keys get added.

I am uploading the GIF to explain the aforementioned process.

👩‍🏫 Your Turn!

See how simple and easy it is to create an SSH key. You can generate multiple SSH keys and add to your GitHub account. But I'll recommend you to keep it as less as possible to support simplicity. Now it's your turn to replicate the process and share your feedback in the comments section below.

Moreover, you can Share on Twitter with the hashtag #GirlDevMinute or reach out to me through my twitter account (@MaedahBatool).

If You're A #CodeNewbie Learning #JavaScript This Is What You Should Learn Today!

Maedah Batool 👩‍💻 — Thu, 28 Mar 2019 18:09:36 +0000

Beginners who want to learn JavaScript find it hard to get started. Some would dive into the immediate basics while others may choose to do start with more technical stuff. However, today I am sharing with you folks a piece of handy advice.

So, if you're a #CodeNewbie learning #JavaScript this piece is definitely for you.

This is what you should start learning today:

🔘 What are JS Objects?
🔘 How to access JS Objects?
🔘 Convert JS Objects to JSON
🔘 Convert JSON to JS Objects

To learn all of that, I made a quick video tutorial featuring you can convert JavaScript Objects to JSON and vice versa. While watching this video you'll learn the concepts about console.log() and how to access any member of JS Objects.

📺 You can watch my #GirlDevMinute Video tutorial here ⬇️

ICYMI I started my edutaining series called #GirlDevMinute where I'll share what I know about development and program management. Feel free to tweet about it and say hi (and follow) me @MaedahBatool on Twitter.

Nevertheless, Maedah Coded! Announcing #GirlDevMinute

Maedah Batool 👩‍💻 — Fri, 08 Mar 2019 16:08:38 +0000

Today, when I look back, it's hard to believe that it has been ten years since I joined the tech industry. This is so overwhelming, but at the same time the feeling is so humble that I feel patting my back and say Maedah, you did great...keep going! 👍

Life seemed pretty simple. Future looked quite obvious which meant four years of graduation with a degree in Electrical Engineering and finally ending up in a corporate 9 to 5 job in a local telecommunication company. I had never thought that my crude passion for writing will take me this far and will help me find a new ME.

🙌 I am Maedah Batool an Electrical Engineer turned Open-Source evangelist. Who started from penning down a simple piece about "Health of a Pro-blogger" till today where I lead #GirlsWhoCode and #ReactJS local meetup chapters in Lahore. I have recently started contributing to Nodejs.dev part of the new Node.js website redesign project.

I'm currently one of the Marketing Representatives for the official Make WordPress Marketing Team. I'm also a WordPress Core Contributor, Open-source Journalist, and a teacher. While working as an OSS Content Program Manager, I’m a published author at TorqueMag, Envato Tuts+, SitePoint, Creative Market, and more.

A huge part of who I am and what I do comes from my passion for teaching. I have taught 2,500+ Girls #HowToCode through my startup — FinkTanks. And my journey continues. I have been planning and refining my idea for quite some time but then realized that I couldn't find a better opportunity than to announce it on this #InternationalWomensDay. So, instead of running after perfection I have decided to share the news today.

👩‍🏫 #GirlDevMinute...

I am starting an edutaining series under the name #GirlDevMinute. The idea behind it is to celebrate womanhood and empower all the beautiful women and aspiring girls out there who are part of the tech community by sharing what I know about development and program management. I am going to take it on myself to share more than I ever did. Help make the tech industry more accessible to women. And while at it, I am going to be taking on one apprentice every year. Now to see how it goes — I have already started tweeting it on my Twitter profile. Say hi (and follow) me @MaedahBatool.

👩‍💻 What's It All About?

I’m sharing what I know about the development and management of open source development and content. Next steps include setting up its website and then sharing short video/audio tutorials, tips &, tricks, exchange workflows, and more.

Recently, I have purchased a .dev domain against my name i.e., Maedah.dev. Currently, it is redirected to my website but I plan to build a JAMstack site with GatsbyJS and then host #GirlDevMinute site on this domain.

I know we all run after perfection. I am one of those who'll hold an idea to herself until I know it is perfect. But I am just trying to make an effort here to not do that anymore. I’ll launch early and improve daily. 🤞

If this has touched you and you are one of the #GirlsInTech then I'd love to hear your feedback. You can follow me on my Twitter account and/or post your comments below.

Wish me luck, peace! ✌️

P.S. A huge thanks to my better-half Ahmad Awais who has been a great support and a mentor throughout this time. He has always motivated me and made me believe that I can do things right. He’s too kind with words ⬇️

👩‍💻 I don't need #InternationalWomensDay to tell y'all that my better half @MaedahBatool is an incredibly awesome developer. If you've ever benefited from my open source work — @MaedahBatool is the reason for it. She makes it all possible. Go ahead and follow her @MaedahBatool 👌
— Awais.dev (@MrAhmadAwais) March 8, 2019

Introducing Pudl: An Easy to Use JavaScript-Based Static Site Generator

Maedah Batool 👩‍💻 — Fri, 19 Oct 2018 07:40:36 +0000

Today, I am super excited to release my dev-friendly starter toolkit pudl. In this post, I am going to share what is pudl, what is the motivation & philosophy behind building this dev-tooling, and the story of how I got started till its launch. Let’s start with intro first…

🐶 Introducing `pudl`

pudl is a JavaScript-based static site generator for quick prototyping of awesome little static demos while teaching/presenting. Packed inside pudl you'll find workflows for Gulp, Sass, and Pug to get you started. It is aimed at both beginners and professionals who are looking forward to getting a solid start for any static site. So basically, pudl is a simple implementation of Gulp which helps to perform the following tasks:

⚡️ Use Pug to generate HTML files
🎯 Handles Sass to CSS conversion
🔥 Live reloads the browser with BrowserSync
👊 Watch files for changes

🎩 How It All Began?

For the past 9 years, I have been working with WordPress and during all this time I have transitioned myself through different roles like from Content Strategist to Program Manager and to an aspiring Developer. But particularly for the last 2 years since I got married to the incredible Ahmad Awais — who's a huge open-source developer advocate I have been handling the pre-development workflows for his projects. During all this time I encountered a pretty monotonous work routine which included configuring tools which rendered pug to html, sass to css and integrate live reload with BrowserSync. Moreover, I realized that at least 20% of my time would go into this process every time I got started with any new project. So, to stop me from reinventing the wheel daily and follow the DRY (Don’t Repeat Yourself) philosophy, I decided to build a site generator with just the right features I need. When I got started, I only wanted it to cater my web-dev workflow needs. As I went ahead developing it, I realized that it could serve the purpose of several other developers as well. So, here I present pudl which is a simple implementation of Gulp for performing the following tasks:

✅ Pug to HTML conversion
✅ Sass to CSS conversion
✅ Watch files for changes
✅ Error handling and notify messages.

🔥 Getting Started

Getting started with pudl is way too easy. In just 4 simple steps you can §set up a basic web architecture for your development projects. And the best thing is that you don't have to repeatedly.

→ Step #0: Install Node & NPM Package Manager

In case you are an absolute beginner to the world of Node.js, JavaScript, and npm packages — all you need to do is go to the Node's site download + install Node on your system. This will install both Node.js and npm, i.e., node package manager — the command line interface of Node.js. You can verify the install by opening your terminal app and typing...

→ Step #1: Download the Required Files

Download gulpfile.js, package.json, .gitignore and config.js files inside the root folder of your project. You can also use your terminal to browse your desired folder and run the following command which will download all the required files for you via cURL.

→ Step #2: Editing the Project Variables

The next step is to change the project variables in the config.js file according to your folder structure.

→ Step #3: Installing Node Dependencies

The next step is that in your root folder install the Node dependencies. In the terminal run this command and wait for it to download all the node.js dependencies. It's a one-time process and can take about 5 minutes depending on the speed of your internet connection.

→ Step #4: Run `npm start`

Finally, run the following command to get up and running with pudl.

Now gulp will start watching your pug and sass files for any changes and provides you with a link through which you can access your site locally.

👊 `pudl` Folder Structure

Let’s now run through the most important parts of the pudl project.

☑️ `dist`

Instead of several tiers, I preferred compiling all the key files into one single folder and that is the dist folder. The overall folder architecture is pretty much simple and easy to comprehend since the two primary files which pique your interest is the gulpfile.js and config.js. The remaining files are the package.json and .gitignore. Let's quickly study the contents of gulpfile.js and config.js.

☑️ `gulpfile.js` File

The gulpfile.js is built in such a way that it can be used with any dev project. It consists of the following portions:

Configuration & Load Plugins: Handles project configuration for gulp tasks and load gulp plugins for it.
Task view: Compiles Pug into HTML, Error Handling and Notifies for the success message.
Task styles: Compiles Sass into CSS, Error Handling and Notifies for the success message.
Task bsync: Injects changes and automatically open the browser with BrowserSync live server.
Watch default Task: Watch for file changes and run specific tasks.

Here is the complete source code of the gulpfile.js file:

☑️ `config.js` File

The config.js has all the settings for project configuration. When you are integrating pudl in your development workflow editing of these project variables is a must thing to do because the folder architecture may vary from one project to another. However, I have tried to name these project variables in a way which are used quite consistently. Here is the complete source code of the config.js file.

✅ Running `pudl`

If you have been following this post thoroughly then by now I am sure you've understood the basic setup and working of pudl. So, before I end this piece let me show you how it works in a real-time environment.

→ Step #1

I created a simple testing project called demo-with-pudl in which I directly ran the curl command which I have mentioned in the getting started steps. [/wt_extendImage] This command will download the gulpfile.js, package.json, .gitignore and config.js files inside this root folder. Likewise, I edited my project variables in the config.js file and my folder architecture looks something like this: [wt_extendImage]

→ Step #2

Now I will install the node dependencies by running the npm install command in my terminal. This adds a new folder for node modules in the root folder.

→ Step #3

Now it's the final part of the setup where you will run pudl to see how gulp handles all the described tasks for you. Simply type the command npm start and hit Enter in your terminal. You are notified by a successful completion of views and styles which means both pug and sass are being rendered perfectly. Likewise, you are provided with a localhost link which live reloads for every change you make.

And It's A Wrap!

That's about it. The idea of pudl basically originated from my personal dev-workflow needs but later it got refined and has helped me open source it to the community on an advanced level. Now I am handing it over to you and look forward to your comments. Let me know if I missed something or if you didn’t understand a step or two. pudl is now available on GitHub and is free to use. Also, it'll be great to 🌟 its repository and share it across your network. Peace! ✌️

I’m Building A JS-Based Static Site Generator #WishMeLuck!

Maedah Batool 👩‍💻 — Thu, 20 Sep 2018 15:29:17 +0000

Browse the term static site generators, and you'll find plenty of them, in different languages, with lots of features, and what not. But if you're a developer then building your own is easier than you might think, and it's an excellent opportunity to learn some things in the process.

The Back Story

When I looked at my work routine, then the setup of basic web architecture for a new project was something which took more than 20% of my time. And reinventing the wheel daily was something which was bothering me a lot.

I figured out the basic needs of my web-dev workflow and realized that it shouldn’t be that hard to build something small, with just the right features I need.

The Requirements

The requirements this generator must satisfy are:

🤝 It's for quick-prototyping of impressive little static demos for teaching, presenting and making landing pages,
⚡️ Use Pug to generate HTML files — coz pug is awesome.
🎯 Handles Sass to CSS conversion — coz why not.
🔥 Live reloads the browser with BrowserSync.

Line of Action

Here it is, I'm building a JavaScript-Based static site generator so wish me luck! When I got started, I only wanted it to cater my web-dev workflow needs. As I went ahead developing it, I realized that it could serve the purpose of several other developers as well.

But now I am working on some advanced functionalities. And after I get ready with its first version, I plan to open source it. This way I can contribute my effort to makes the lives of developers easy and effective.

Progress

If I track my project status currently, then here is the timeline of things that are left to do:

✅ Testing
📖 Updating the docs
🚀 Releasing updates/commits
✍️ Working on its launching blog post
🎨 Designed its logo/name/featured image
🙌 Sending to some good folks for beta testing

Launch Date

Right now I am truly excited about this project, and it's been a great learning experience for myself. Still working out on some tiny miny details so, it'll be tough to share an exact date with you folks. Precisely, if everything sticks to plan then I'll be able to open-source it by the end of this month (i.e., September 2018).

Till then stay tuned for more updates. You can drop in your feedback in the comments section below. Or you can also reach out to me through my Twitter account @MaedahBatool.