Forem: Segun Olumide

QuickSort Algorithm Simplified

Segun Olumide — Wed, 09 Feb 2022 16:34:06 +0000

QuickSort is a sorting algorithm that uses a divide and conquer strategy to sort out elements in an array. This strategy uses the following steps:

Selects a pivot element from the array, which can be picked in various ways.
- Pivot set from the first element.
- Pivot set from the last element.
- Set a random element as a pivot.
- Use median as the pivot.
Uses the pivot to divide the array into subarrays. This process is called partitioning. The pivots partitions elements less than itself to the left side, and elements that are greater are to the right of the pivot.
Recursively splits the left and right subarrays using the 1st and the 2nd step until each subarray has one element left.
Once the process is complete, the element already gets sorted. Finally, combines the sorted elements back to an array.

QuickSort Partitioning Algorithm with Javascript

Here is an example of a quicksort function in javascript with a breakdown process of each statement.

const nums = [6,5,2,9,1,3,11,4];
function qSort(arr){

    if(arr.length <= 1){
        return arr
    } 
    let pivot = arr.pop(), left = [], right = [], newArray =[],  length = arr.length
     for(let index = 0; index < length; index++){
     if(arr[index] <= pivot){
         left.push(arr[index])
          }
          else{
            right.push(arr[index])
          }
        }
   return newArray.concat(qSort(left), pivot, qSort(right))
}

First, an array of unsorted elements are created.

//nums is the given array
const nums = [6,5,2,9,1,3,11,4];

Then the function qSort, to perform the quicksort algorithm. With the arr parameter to receive the array.
```
//QuickSort Function
function qSort(arr){

}
```

A condition is then set to make sure the array (arr) provided is not empty and does not contain only one element. If the array has less than one element, it will return that array but proceeds to the next step if it includes more than one element.

function qSort(arr){
      // if array contains less than one element, return the array
    if(arr.length <= 1){
        return arr
    } 
        // if array contains more than one element, proceed to next statement

The next step is to choose a pivot. In this case, the pivot is set to pick only the last element in the array with the left and right array for partitioning. newArray will append all elements to a new sorted array.

let pivot = arr.pop(), left = [], right = [], newArray =[], length = arr.length

A left and right array are created to partition the elements for the pivot. The pivot position lesser elements to the left and greater elements to the right.

let pivot = arr.pop(), left = [], right = [], newArray =[], length = arr.length
    for(let index = 0; index < length; index++){
        // push elements less than pivot to the left
  if(arr[index] <= pivot){
      left.push(arr[index])
   }
        // push elements higher than pivot to the right
   else{
     right.push(arr[index])
   }

This process continuous and breaks into partitions until one element is left.

At this point, all elements in the array are finally sorted. The last step returns all sorted elements to the newArray by concatenating the left, the pivot, and the right array.

let pivot = arr.pop(), left = [], right = [], newArray =[], length = arr.length
 for(let index = 0; index < length; index++){
    // push elements less than pivot to the left
  if(arr[index] <= pivot){
  left.push(arr[index])
  }
    // push elements higher than pivot to the right
   else{
     right.push(arr[index])
   }
return newArray.concat(qSort(left), pivot, qSort(right))

You can test the code using this link - Run quicksort with javascript.

How long it takes to run QuickSort Algorithm

There are three different time cases it will take the algorithm to run. The best case, worst case and average case.

Best Case [O(nlog n)]: The algorithm runs faster than other cases when the pivot is always selected at the middle element.
Worst Case [O(n2)]: This happens when the pivot selected is the largest or smallest element leaving one of the sub-arrays always empty.
Average Case [O(n*log n)]: This case happens when none of the above occur.

To get more information about quicksort algorithm you can check the following links below:

How to Create a Style Guide as a Technical Writer

Segun Olumide — Sun, 09 Jan 2022 21:29:56 +0000

Introduction

Having a style guide is a very useful way of having a clear and consistent form of writing that can be improved over time. This guide is mostly useful for technical writers. I'll be sharing a few things I learned so far, writing for an open-source community (Fastify).

There are a few things you need to know and consider when writing your style guide.

1. Why am I writing this?

Even though it is necessary to have a style guide, knowing why can help you figure what needs documenting. Speaking with your community members, developers, or a lead (Could be a program/project manager or a developer advocate if there is one), can help you identify your organisation needs.

2. Who am I writing this for?

Perhaps, you want a style guide for open-source community members who contribute to existing documentations or intended for developers who write API documentation and requirements. Describing what the Guide focuses on helps the reader identify which style guide to follow. You can save them the time of reading through the whole thing before they realise it, even some may not figure it out eventually. Do make sure you include a clear description of the guide.

3. What should I consider when writing one?

There is a lot to consider when writing a style guide, here are lists of things you may need to include in yours.

Guide requirements

A guide requirement tells the reader what they need to know before writing specific documentations. Take this example. A user finds an open-source project built with React Javascript framework they want to contribute to on Github but does not know the requirements needed. In this case, you can provide a requirement in a style guide that notes their need to understand specific tools and programming languages like Javascript, HTML, CSS and may also need to be familiar with Markdown.

Fonts

Your fonts determine the quality and standards of your documentation.
According to Uwe R. Zimmer, good typesetting is the technical skill that enables your reader to take in your material smoothly, fast, and efficiently.
Knowing when to use bold and emphasis, what font size to use and how much line space is needed, encourages better readability for your readers and improve the content design in general. If you want to know more about font selection, check out the 4 Basic Rules of Using Fonts Properly in a Technical Document by Ugur Akinci on medium.

Visual content

Some documentation doesn't require images. Most documentation tends to avoid Images to optimise storage and avoid the need to keep changing them when updates come up. It's okay to include them in product guides or documents that depend upon Images for a better description. You can also refer to an Image/Video linked separately (Youtube, Cloudinary, Vimeo.), which you can update without directly altering the docs.

Writing style

Including a writing style can help your reader know what type of document should be formal or informal. In my case, I find docs like references, terms & conditions in a formal tone, while guides, tutorials, and articles use a more friendly approach. Identify what writing style is needed before you conclude on which to employ.

Condescending terms

Condescending words give off a feeling of superiority to your readers. Using condescending tones are very sensitive. Words like "obviously", "him/he", "simply", or "master" are forms of condescending terms that can affect users who are not so confident or knowledgable about a particular topic. You might tend to lose them along the way. It's not a good reputation to let any of your readers feel like they are too dumb to understand or feel it's not for them. You can include a list of words to avoid in your guide (example: Use Primary ✅ not Master ❌, Use They ✅ not Him❌).

To get more insight, you can read an article by Carolyn Stransky - How to remove condescending language from the documentation.

Use of verbs

Verbs play a vital role in making the reader take action, and to take action, I mean to start your sentence with a verb. Highlighting when and how these verbs are applied can help improve the documentation, especially when it requires the user to take action. This approach is widely adopted in how-to guides because it requires the user to follow specific instructions.
Here's an example of where this can be used and compared to a less effective one:

Example:

Plain: To install all dependencies, you need to type in "npm install" in your terminal.

Use of verb: Open your terminal and type in "npm install" to install all dependencies.

Plain: There is a need to delete the folder called "Back up" so that the hard drive space can be saved.

Use of verb: Delete the folder name "Back up" to save hard drive space.

Code indentation

If your documentation might entail some form of code examples, providing a standard indentation style is essential to keep your code structured, neat and consistent. There are three indentation styles I know of:

Two spaces
Four spaces
Tabs

Developers have been debating on which indentation is best. "Spaces" always take the win due to PSR-2 standards. If your team already have a standard they follow, then you can include that in your guide.

There are many more things to consider. This guide will put you on the right track. I hope this gives you some direction to making the most effective style guide for your team.

Here are also some pointers that can help:

If you find this article helpful, a like from you will be awesome. It'll help push this article forward to those who might need this.

Happy writing and cheers.

Understanding How AMP Stories Work

Segun Olumide — Mon, 22 Jun 2020 15:30:36 +0000

AMP has been around since 2015 and has gradually become a very powerful framework in terms of optimisation and performance. Since my main topic is focused on AMP stories, I'll assume you already know what it is all about, but not to worry I'll start with an introduction just to be on the same page.

What Is AMP

AMP which stands for Accelerated Mobile Page, is an open-source web component framework built to make websites fast, easy to create and also mobile-friendly. To get started with AMP, just visit amp.dev, trust me it is easy to learn and adopt.

How AMP Work Basically

AMP replaces your HTML tags with AMP components also referred to as amp-script which enables you to add specific properties and values which give you more control over them just the same way Jquery provides a high-order functionality to Javascript, AMP does the same to HTML.

Example

<amp-component 
property= "value">
</amp-component>

Components are run by small bits of AMP's JavaScript which discourages you from writing any javascript code unless when necessary and it works seamlessly with the backend. Click this link to learn more about their component.

Now let's dive into AMP Stories

What Are AMP Stories

AMP stories focus on delivering media content, such as text/captions, images and videos. It is similar to what we have with on Facebook stories, WhatApp Status or Snapchat. Stories have emerged as one of the most delightful content types on our phones and now with just a few lines of code, we now have a tool for building our own.

Ever since it was launched in February 2018, it has become one of the most interesting features of AMP as it feels very native and looks great on both desktops and mobile.

How AMP Stories Work

These Stories are made up of different pages, in those pages are layers. Layers contain certain elements like video, images and texts which enables you to express your storytelling experience.

Before you create a story, you need the following:

Have basic knowledge of HTML, CSS and Javascript
Understand the core concept of AMP (get started here)
Have a Chrome web server and AMP Validator installed.

You may as well follow along by downloading a demo I created in my Github repo for one of my speaker sessions at GDGDevFest. The folder contains two different HTML files which are, start.html and finish.html. Open the start.html to follow from scratch or you can see the complete result on finish.html

First, you need to add the script responsible for the amp-Story component to work, this component handles the creation of the UI Shell which includes the gestures and the navigations as well.

<head>
<script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
</head>

Second, is to add the amp-story element to the body and specify the standalone attribute which is very important, this acts as the container and it only needs one amp-story element to do the trick.

<body>
  <amp-story standalone>
  </amp-story>
</body>

you may also add tags like the title, publisher, logo as so to give it more detailed information about your story

<amp-story standalone
    title="example"
    publisher="AMP example"
    publisher-logo-src="example.svg"
    poster-portrait-src="assets/example.jpg">

Next, is to create a page and amp-story-page inside the amp story element with a unique ID.

<amp-story standalone
     title="example"
    publisher="AMP example"
    publisher-logo-src="example.svg"
    poster-portrait-src="assets/example.jpg">
   <amp-story-page id="cover">
     <!-- layers go here --> 
   </amp-story-page>
</amp-story>

We can then go ahead to add the layers which contain the main contents. you may choose the type of template you want your layer to be in, fill, vertical, horizontal or thirds (more info here) and can add more layers to your page.

<amp-story-grid-layer template="fill">
  <amp-img src="example.png"
      width="xxxx" height="xxxx"
      layout="responsive">
  </amp-img>
</amp-story-grid-layer>

After completing a page with your layers you can add as many pages as you want on to your amp-story.

AMP-Story can also be used as an advertisement for your product, templates are also provided by AMP to help you find more creative options for your ads.

Thanks for reading
I hope this gave you an understanding of AMP Stories and how you can use them. Do feel free to ask me any question here or on twitter.

7 things you need to know about building a Developer Community

Segun Olumide — Tue, 21 Jan 2020 10:56:42 +0000

Starting a Developer Community can feel overwhelming, well, it was for me. I joined my first community in 2013 back in college, it was a small group of about thirty to fifty members and was quite an active one, active until the lead graduated and the group became a memory, but what I learned over those years volunteering in various communities (like ALC, Ingressive and GDG) and being part of their growth gave me a solid foundation of what I needed to get mine started.
Photo by Perry Grone on Unsplash

If you want to develop a platform for people who are interested in technology and want to make sure everyone gets the best out of it, this is what I have to share with you. Kindly note that this might not be a 100% accurate for everyone and it's mainly based on my experience so far over time, I believe it is something to be looked out for.
So, let's get straight to it, shall we?
Here are things you should have in mind.

Aim of your community

This is the very foundation of why you are starting it in the first place. You want to create opportunities for people to learn, collaborate, contribute to open source or even build a project around a particular technology, or maybe to provide Jobs opportunities for them. Whatever the reason could be, you need to know why you are doing this in the first place. This question set a clear path for you and help you communicate better with your community. You need a clear view of how you want things to go.

Just like Maya Angelou said - "If you don't know where you've come from, you don't know where you're going."

Community Audience and how to reach them

Knowing your audience will help you identify ways to reach them, Google, for example, has various Google Developer Groups that organise events and workshops for those interested in using their product. Let's take TensorFlow for instance, Tensor as an AI technology will have an audience centred around people who are into Machine learning or Data Science, you could even be a developer, someone into Robotics or just curious about Artificial Intelligence and wants to build a career out of it. The engagement will be a solid one since the majority of your audience have a common interest. You might not figure out completely who your audience might be but with time, getting feedback and working on that feedback will give you a clearer view of what you are dealing with.
Once you have that pretty much figured out then we can talk about what to finally look out for and how to get this community started.

Gather Your Squad

You need to also consider one thing in making this work. You choose to become a superman and try doing everything yourself, I mean handling publicity, social media, emails, banners, phone calls, venues and other resources that may arise, oh wait a minute…"You mean you can do all that yourself at the same time even with your other activities? you really must be superman", even superman had a justice league and batman had a butler but hey, you could as well find out for yourself. The key part of making this work is having a strong team, a team who shares the same vision and level of passion as you do, who will take it as their own and take necessary measures in making it a success, that's the kind of team you should look out for, the success of your community also depends on your team. So find one.

Engage the Community

Now let's talk about growth. This might not be full time but you can send frequent Newsletters to keep them updated on things centred around a common interest, it could be through an email or a community group (Slack, Telegram Whatsapp e.t.c). Have a social media platform lets people know what is happening in the community, which will also help you reach more people interested in becoming a part of it.

ORGANISING MEETUPS

Key things to consider when organizing meetups

Agenda

Time is a very essential value not to be taken for granted. You want to make sure you achieve the key things your meetup is set to accomplish at the time frame you provide, and of course, it's fine to give a few minutes before the event or even after but no longer than it should be. Normally it shouldn't matter if everyone is having fun, I mean learning is fun, but it can also make one lose track of time. so don't give in to that temptation. Make your meetup something to remember, it's not just what you say to them but it's mostly how you make them feel so make them feel they are in the right place, you want to impact and not let them depart.
oh, also make sure you have a hashtag on twitter to let people know what is going on at your event, after all, you want the world to know you exist right?

Publicity

I know of a few platforms that let you create events for people to register, websites like Eventbrite, Meetup and Attending among many others are the major ones I know of. Take advantage of the social media as well, Twitter to Facebook, to your Whatsapp groups that's if the group admin does not mind. Be creative and that also include a not so terrible banner for people to read online, trust me I won't look twice.
Lastly, it is best to always publicize months before the actual date at least a minimum of two weeks, set a date you know people to can be available to come and also venues that can easily be located.

Getting Sponsors

Want to get sponsors to support your event? I thought as much. This is the part where you hone your communication skills. There are companies looking for an audience like yours to reach out to, but it's not just as easy as that, it depends on your audience, you want to give them a win-win or they will see no reason to provide support. Imagine you set up an event for dog lovers, knowing they love dogs, only for you to reach out to sponsors making cat food. if you were that company would you want to spend your money on that? I didn't think so. Companies want to target people who can be of benefit to them. Reach out to those you think can benefit from it while you get more support for your event while making it fun for everyone at the same time, you see? Win-Win.
I hope you get to build a community people can't wait to be a part of, try to be accessible to your community and team, do that and growth will become accessible to you. Be creative, try new ways to make your community a useful one, not just for food, drinks or the swags but of value and impact.

Thanks for your attention so far 😁, kindly share to those who might need this.
Cheers