teleren/devto huggingface dataset:
Lab 3 - Merging and resolving code conflict
Tags: opensource
Published: 2021-10-01 18:48:01

##Intro
For my third lab, we have to implement 2 more features to our Static site generator CLI. I choose to implement markdown support for horizontal lines and language support for HTML tags.
But this time we do not create Pull Request for each feature that needs to be added. We have to create one branch for each feature. After finishing the feature we merge both branches to the master branch and push to remote.

##Process
So I started to create a branch call issue-19 for my [Issue#19](https://github.com/Kevan-Y/text-ssg/issues/19) then another branch call issue-20 for my [Issue#20](https://github.com/Kevan-Y/text-ssg/issues/20). I checkout issue-19 and started to add my language support for HTML tag. After finishing implementing my feature [8bcd08a](https://github.com/Kevan-Y/text-ssg/commit/8bcd08aa135c843b725882410a7d41918a8cf14a), I committed my changes and switched to my issue-20 branch where I have to add a support markdown horizontal line. After finishing implementing this feature [9bee88d](https://github.com/Kevan-Y/text-ssg/commit/9bee88db00f338eaaba5876e0c3585ff452cfb48). I found out I have to go back to my issue-19 branch and add another commit to update documentation [f2608c4](https://github.com/Kevan-Y/text-ssg/commit/f2608c40fddb515cbea415c6cc9b99dc406cf21f). The same thing for issue-20 [bc7ec05](https://github.com/Kevan-Y/text-ssg/commit/bc7ec057a318cd921d366813c4f34baff2d0657b). 
After all, was done, I checkout my master branch then merged my issue-19 branch first which I did not have any issue merged it since it was a Fast-forward merge. But when I merged my issue-20 branch I had to resolve the conflict first do a commit for resolving the conflict [7ea3f6e](https://github.com/Kevan-Y/text-ssg/commit/7ea3f6e4e5683b0bacb9a14e7f01636e60f32b00), this is also called a 3-way-merge. After all, this is done I pushed my master branch to remote, then closed my issue + adding a message `Closed by <short_name_issue_code>.`

##Conclusion 
Git is very powerful. It can help us to work on two different features without making 2 hard copies of the project. I can start working on one branch and if I want to work on another branch I can either stash my work or commit my work then switch to my other branch to work on the other feature.
My 5 suggestions to help you become a better version of yourself
Published: 2021-10-01 18:46:46

Here's a list of my 5 twitter threads to help you become a better version of yourself.
🧵


**The Pomodoro technique - how and why?**
{% twitter 1425340977552584706 %}


**How to take your mind away from work after work hours?**
{% twitter 1439489693868040192 %}


**How to have a productive WFH?**
{% twitter 1440604954327064582 %}


**Habits and their impact on learning and productivity.**
{% twitter 1426505603925434368 %}


**How to write better blogs?**
{% twitter 1443247700984537089 %}
Merging branches
Tags: github, opensource, javascript
Published: 2021-10-01 18:42:58

In lab 3 of week 4, I was asked to implement some features that supports .md files to my SSG program. 

## The implementation 

### Horizontal markdown parsing 

This feature was the easiest to carry out with as many as [2 lines](https://github.com/TueNguyen2911/tue-1st-ssg/commit/890d07600e0c19549e0402f1fef51bf3de7dfc76#diff-e727e4bdf3657fd1d798edcd6b099d6e092f8573cba266154583a746bba0f346R106) of code
```javascript 
    if(param.match(/---/))
      return Object({type: 'hr', content: null});
```
I simply match any `---` and return a hr object(equivalent to `<hr>`) to be added the my `createHTML` function. 

### Inline code markdown parsing 
I continued to use regEx to match any 2 backticks and wrap the content between them inside `<code>`. It can be found [here](https://github.com/TueNguyen2911/tue-1st-ssg/commit/f329ad98647c70cc8ab93c9c8299aa87bb9b874d#diff-e727e4bdf3657fd1d798edcd6b099d6e092f8573cba266154583a746bba0f346R100)
```javascript 
    param = param.replace(/\`([^\`].+?)\`/g, "<code>$1</code>");
```

### Adding lang attribute to `<html>`
In my ssg, I've used `html-creator` npm package to create html string. However, it doesn't have any method that allow me to add a `lang` attribute to `<html>` tag. Therefore, I must [edit the html string](https://github.com/TueNguyen2911/tue-1st-ssg/commit/8ca16c3a06ca9992c1b6338f453fc372320b0f95#diff-e727e4bdf3657fd1d798edcd6b099d6e092f8573cba266154583a746bba0f346R173) after the I've convert the HtmlCreator object to string. 

This step seems to beat the purpose of using the library, I will try to make a pull request implementing this feature to the author's code 

---

## Merging feature branches

### Creating different branches for different features 

In lab 3, I was asked to create branches for different features, it's similar to a few developers branching off the main branch to implement different feature. It was expected to have conflict after the first fast forward merge 

### Merging 

After merging the first issue branch into main, I encountered some conflicts, but the problem was solved by looking at the difference between 2 files and figuring out which change to keep.

Take a look at my merges [here](https://github.com/TueNguyen2911/tue-1st-ssg/commit/92040d0f07ff307d0f3cd2ca79dc294e6e71d5aa) and [here](https://github.com/TueNguyen2911/tue-1st-ssg/commit/f3b10b6d4c58a92dfca86f08140fa240ada78246)
UPDATED: Bootstrap 5.1.1 Navbar Multi Level and Mega Menu
Tags: codepen, bootstrap, javascript, tutorial
Published: 2021-10-01 18:32:09

<p>Advanced Bootstrap 5 Navbar component with multi-level menu, megamenu, animated hamburger button and custom web fonts. Easy to use and NOW compatible with Bootstrap version 5.1.1!</p>

{% codepen https://codepen.io/typo3-freelancer/pen/poEvyGj %}
Thinking on AWS as Lego Blocks
Tags: aws, lego, devjournal, programming
Published: 2021-10-01 18:31:39

> Think of Lego blocks. Very simple in appearance and functionality on their own. However, put them together in the right way, with the right pieces, and you can create something highly complex and amazing.

The basic Lego unit is the 1x1. It’s the smallest block, connects to any other piece and hurts a lot when you step on it with bare feet.

The building blocks of AWS are Storage, Compute, Networking, Security, Monitoring, Media Processing, Analytics, and AI.

Once you’ve mastered creating simple buildings and boxes on top of your baseplate using your starter Lego set, you can graduate to a full-blown Lego kit with triangles, curved pieces and half moons to create more sophisticated things like castles, cars and bridges. In a similar fashion, after you get the hang of the AWS basics, you can add more specialized AWS services like DynamoDB, ElastiCache, Systems Manager, EFS, and Lambda.

No matter how sophisticated you get, everything is still rooted in those basic 1x1 building blocks.

But legos aren’t just about size or shape, they’re also about color. You can have the same Lego in a variety of different colors just like AWS services are variations of others. For example, Amazon Elastic Container Service (ECS), Amazon Elastic Container Service for Kubernetes (EKS), and Fargate serve the same purpose but just do it in a slightly different way whereas Elastic Beanstalk, OpsWorks, and CloudFormation all allow you to manage your infrastructure in an automated way but with different levels of control.

What you build with legos or AWS, and how you build it, is limited only by your imagination. But beware, just like creating a tower of legos, unless you build a sound structure, your building will fall over. A tall skinny tower without an intelligently-designed structure will eventually collapse, and the same holds true in AWS with experience, expertise and continued education, you can create a structure that is built strong enough to support your application and users.

AWS is a compilation of many different Lego pieces that all have their own simple functions. Although on their own they may lack much functionality; combined together with other services, they can construct a highly complex and practical applications. 

---

_Follow me on Twitter for the upcoming updates [@dominguezdaniel](https://twitter.com/dominguezdaniel)_

---
Default logging providers in ASP.NET Core
Published: 2021-10-01 17:27:48

`Main()` method in the Program class in `Program.cs` file is the entry point for an **asp.net** core application. This method calls `CreateDefaultBuilder()` method performs several tasks like 
1. Setting up the web server 
2. Loading the host and application configuration from various configuration sources and 
Configuring logging

The following is the code snippet from CreateDefaultBuilder() method. 
```
.ConfigureLogging((hostingContext, logging) =]
{
    logging.AddConfiguration(hostingContext.Configuration.GetSection("Logging"));
    logging.AddConsole();
    logging.AddDebug();
    logging.AddEventSourceLogger();
})
```
As part of configuring logging, `CreateDefaultBuilder()` method adds the following 3 logging providers by default. This is the reason when we run the asp.net core project we see the log displayed both on the console and on the debug window in Visual Studio.
1. Console
2. Debug
3. EventSource

`CreateDefaultBuilder()` method looks for Logging section in the application configuration file `appsettings.json`.

Logging section in `appsettings.json`

The following is the Logging section in `appsettings.json` file on my machine.
```
"Logging": {
  "LogLevel": {
    "Default": "Warning",
    "Microsoft": "Information"
  }
}
```
LogLevel is used to control how much log data is logged or displayed.
Make a Grid
Published: 2021-10-01 17:02:31

{% codepen https://codepen.io/ZevanRosser/pen/KKqYNGj default-tab=js,result %}

It's important to know how to align things in an absolute grid formation. Just one of many ways to go about doing this.

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Recursion and Stacks
Tags: algorithms, stack, recursion
Published: 2021-10-01 16:41:11

## What is Recursion?
> Recursion is where a function calls itself. 

_lets have an example_
> we are having a box that contains other boxes, and you know there is a key inside one of these boxes. You want to find that key, what would you do?

**Here is an approach:**
1. Make a pile of boxes to look through.
2. Grab a box, and look through it.
3. If you find a box, add it to the pile to look through later.
4. If you find a key, you are DONE!🎉

This approach uses a while loop, while pile is not empty grab a box, and look through it.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxryilbcve34pd1xln0w.png">

**An alternate approach:** 
1. Look through the box.
2. If you find a box, go to step 1.
3. If you find a key, you are DONE!🎉

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpldpa1bm0cuqzvvestq.png">

This second approach uses *recursion*.

```
be careful using recursion as it may end up with infinite loop. 
That's why recursive functions has two parts
1. The base case -> function doesn't call itself again.
2. The recursive case -> function calls itself.  
```

## Stacks
> Stack is an important concept in general programming, and also important to understand when using recursion.
_let's have an example_
we are having a stack of sticky notes. when we insert an item we add it to the top of the stack. when we read an item we only read the topmost item, and it is taken of the stack.
so our todo has two actions *push*(insert) and *pop*(remove)
**stack is last in first out data structures**

### The Call Stack
> The computer uses a stack internally called *the call stack* let's see how it works:
_example_
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd4k5fxhqkrc2kaica5z.png">
This greet() function calls two functions greet2() and bye().
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xclezq1k2578517v670t.png">
1. suppose you call greet('maggie') your computer allocates a box in memory for that function call.
2. variable `name` is set to `maggie` inside that memory box. 
  
>`every time you make a function call, your computer saves variables for that call in memory like the previous steps. Computer uses a stack of these boxes on top of each other every time you call a new function it is added to the top until it is finished then removed, that means the first function called the last to be finished.`
Addressing merge conflicts
Published: 2021-10-01 16:40:19

### Introduction
This week I worked on adding more functionality to [cli-ssg](https://github.com/dhillonks/cli-ssg). I decided to add support for a `--lang` flag to specify language and add the ability to produce horizontal rule:
[Add support for horizontal rule in markdown](https://github.com/dhillonks/cli-ssg/issues/15)
[Add a -l flag to generate the lang attribute](https://github.com/dhillonks/cli-ssg/issues/13)

### Working on the features
I created branches `issue-13` and `issue-15` from `main` and chose to work on these two issues in parallel. Implementing these features went quite smoothly and I was able to get them working in their respective branches.
#### issue-13
The code in issue-13 branch allowed the user to specify a `-l` or `--lang` flag to indicate the language for the `lang` attribute. 
```
 -l, --lang        Lang attribute for html element  [string] [default: "en-CA"]
```
**For example**: using `-l fr` would result in the root element being `<html lang="fr">`

#### issue-15
The code in issue-15 added support for the markdown syntax for horizontal rule. This allows the tool to render`<hr>` tags if 3 or more asterisks `*`, hyphens `-` or underscores `_` are present on a line by themselves.

**For example**: The following lines would result in a horizontal rule
```
***
******
---
___
```

### Merging the two parallel branches
Since the features had been implemented, I now had to merge the branches back into `main`. 
#### Merging issue-13
I started off by merging the first branch `issue-13` into `main`. This went smoothly as `git` simply performed a `fast-forward` merge.
[89ea750](https://github.com/dhillonks/cli-ssg/commit/89ea75099fc44a7095cb3d6cb77179e07940babb)
#### Merging issue-15
It was then time to merge the second branch `issue-15`. Since I had worked on these in parallel, I realized that it wouldn't be a simple `fast-forward` merge. As expected, when I tried merging `issue-15` into `main` using `git merge issue-15`, there was a conflict in one of the files. 
The conflict was actually quite small, and I ended up accepting both changes. After that, I added the file to the staging area and finalized the merge using `git commit`.
[0e1d4c8](https://github.com/dhillonks/cli-ssg/commit/0e1d4c8c578f5b337e519b3ed14160b5eee5cc9c)

### Conclusion
After finally merging the two branches back to `main`, I tested to make sure that the newly added features were both working and it was great to see that everything worked as expected. I ended off by commenting the merge commits and closing the both the issues on GitHub.
Ode to the forgotten editor
Tags: brackets, webdev, ide, editor
Published: 2021-10-01 16:38:11

Brackets, also known as Adobe Brackets, is a text editor. For a long time it was my preferred editor before moving on to fully fledged IDEs like PHPStorm. It has been killed mostly by Adobe (which moved most of its core team to work on Adobe Dreamweaver) and by Microsoft (due to the infamous Visual Studio Code).

Adobe Brackets was, is and will forever be my favorite text editor. Even with the lack of support, it is today a better text editor than a fully customized Visual Studio Code with tons of plugins.

Adobe Brackets reached End Of Life status on September 1st 2021 as Adobe finally pulled the plug. The cover is an hommage to the editor that got me through my self-teaching and my studies: My first editor opening my latest project.

I will forever be graceful for everyone who ever worked on Brackets or helped its community in any way, shape or form. If Adobe wasn't so stubborn on making Dreamweaver "usable" we would have Adobe Brackets as the main FOSS text editor of the entire programming community.

Farewell, you will always remain installed on my computers and future computers will always install a "portable" version in hommage to your greatness.
Week 1/Google PM Specialization -Part 2
Tags: management, coursera, projectmanager
Published: 2021-10-01 16:28:51

Hey all, 

Today I am going to write about what I've learnt from the course that I am taking currently about Project Management. 

As I have said in my previous post,I'm going to talk about CBA(aka Cost-benefit Analysis). 

CBA is a process that is used to compare project benefits to its costs, the goal is to reduce waste and invest resources responsibly. 

Project Managers don't make decisions based on gut instinct, they ask questions, gather data to analyze, use tools... 

Below are some questions to consider when determining the benefits and costs of a project. 

Example of questions to determine benefits : 
1.What value will the project create ? 
2.How much money could this project save ? 
3.How much time will be saved ? 
...

Example of questions to determine costs :
1.How much time will people spend on this project ? 
2.What will be the one time cost ? 
3.Are there any ongoing costs ? 
...

There is many ways to calculate costs & benefits of a project (known also as ROI : Return On Investment), here is one of them : 
**(G - C)/C = ROI**
G : Financial Gain
C : Costs

Let's take un example to calculate ROI : 
Consider a project that costs 5000$ upfront plus 25$ per month for 12 months. You estimate that the project will gain 10000$ using the formula above, ROI = (10000-5300)/5300, the result is : 0.88 or 88%. 

Depending on the ROI, the project manager and stakeholders will decide to pursue the project or not.

This is the end of this post, thanks for reading it. 

Have a good day :)
uwsgi error: bind(): No such file or directory [core/socket.c line 230]
Tags: uwsgi, nginx, django
Published: 2021-10-01 16:18:28

#Problem:
Sometimes, sites running on uwsgi and nginx cannot find `socket` file due to suddent restart of server. The most common error from `/var/log/nginx/error.log` in this case is:
```bash
bind(): No such file or directory [core/socket.c line 230]
```

#Content of Nginx config file:
Support, content of `/etc/nginx/sites-enabled/demo_app.ini` is:
```conf
server {
    listen 80;
    server_name www.example.com;
    return 301 https://example.com$request_uri;
}

server {

    listen 80 default_server;
    server_name example.com;

    location = /favicon.ico { access_log off; log_not_found off; }

    location /static/ {
        alias /home/ubuntu/app/demo_app/static/;
            autoindex off;

            location ~* \.(eot|ttf|woff|woff2)$ {
            add_header 'Access-Control-Allow-Origin' '*';
        }
    }

    location /media/ {
        alias /home/ubuntu/app/demo_app/media/;
        autoindex off;
    }

    location / {
        add_header 'Access-Control-Allow-Origin' '*';

        include         uwsgi_params;
        uwsgi_pass      unix:/var/run/uwsgi/demo_app.sock;
    }
}
```

#Content of uwsgi config file:
And, content of `etc/uwsgi/sites/demo_app.ini` file is:
```ini
project = demo_app
base    = /home/ubuntu/app

chdir   = %(base)/%(project)
home    = %(base)/venv
module  = conf.wsgi:application
env     = DJANGO_SETTINGS_MODULE=conf.settings

master  = true
processes = 5

socket = /var/run/uwsgi/%(project).sock
chmod-socket = 777
uid     = www-data
gid     = www-data

harakiri = 60
vacuum  = true
buffer-size = 32768

logger = file:/tmp/uwsgi.log
log-maxsize = 200000
```

#Solution:
After a reboot socket file inside `/var/run/uwsgi/` gets lost, because no folder exists with name `uwsgi`. That's why this folder is needed to be created.


```bash
mkdir /var/run/uwsgi
```
and

```bash
sudo chown -R www-data:www-data /var/run/uwsgi
```

Reference:
https://stackoverflow.com/questions/27791330/bind-no-such-file-or-directory-core-socket-c-line-230
I made an Async Service Container for Node/Browser
Tags: typescript, javascript, showdev
Published: 2021-10-01 15:34:05

Hey friends,

Over the years I have implemented service container architecture in many large-scale front-end apps and it has vastly improved their performance and maintainability. I've finally got around to turning it into an open-source library called "Be Our Guest." The name is inspired by the Disney song from Beauty and the Beast and the lyric "put our service to the test."

## So, what is it "Be Our Guest?"

It is an ASYNC service container that enables your node or browser applications to implement an Inversion of Control architecture for it's modules and dependencies. You may be thinking, "why do I need this?"

As an example to illustrate it's value, let's say we have a module that handles auth within our application. After you construct and register the module it requires a boot step to send some requests to the backend system to retrieve auth tokens that our other API modules will require. This action is an asynchronous action and we do not want to block initialization of our other modules while this module makes its request. We also need to inject this module into other modules that depend on the auth token. Those modules must await the initialization of our token module before they can be used. As you can see, providing async support for these types of initialization are crucial.

## Why not use X other service container library?

There are quite a few other service container libraries out there, but most of them require decorator support for your applications which is not an official JS api and will make adoption into an existing application more difficult (as you will have to do some refactoring). The primary reason they do this is to enable automatic dependency injection. While auto-DI is a nice feature, it's not a hard requirement for an IoC service container to be useful.

Also, **Be Our Guest** is completely async. This enables you to more easily register and boot dependencies that require async operations. It also allows the service container to register and boot all of your services without them blocking each other in the process, further increasing your app's performance.

### Check it out!

Please take a look at "Be Our Guest" and *give us a star* at https://github.com/AJStacy/be-our-guest .
Casting Integers to Doubles
Tags: swift, uikit, maths
Published: 2021-10-01 15:32:34

This week I got tripped-up by what I reckon is a rookie mistake.

Let's say we're building a clock face with just the hours. We'd use a maximum of 12 to represent each hour. 3 would point to 3 on the clock face, 7 to 7, etc

I was trying to work out how many degrees of a circular gauge view to fill when given two `Integers` representing its current and maximum possible values.

# What I did wrong

```swift
let current: Int = 6 // where the hour hand should point to...
let max: Int = 12
let degreesToFill: Double = Double(current / max) * 360.0
```

# How I fixed it:

```swift
let degreesToFill: Double = (Double(current) / Double(max)) * 360.0
```

# The mistake:

It seems that attempting to cast the result of the initial division returns 0 rather than the result as a `Double`, as expected.

The way which worked was to cast each `Integer` separately, then divide them before multiplying by the maximum number of degrees in the circle.