teleren/devto huggingface dataset:
How to publish a ReactJS app on GitHub
Tags: react, github, webdev
Published: 2020-12-12 21:27:57

        
[GitHub Pages](https://pages.github.com) is a hosting service that lets you publish your projects to the web, directly from your GitHub repository. And it's **free** to use.

Pages is really useful if you need to **get your portfolio projects up and running quickly**. As you learn new skills and update your repos, you have peace-of-mind knowing that your projects can be published with just a few clicks. If you've ever had to unexpectedly share your portfolio with a potential client or recruiter, you know how valuable this can be!

So let's get started.


### Step 1: Create a ReactJS app

1. Open your terminal.
2. Navigate to the directory where you want to save your project.
3. If you haven't installed **Node.js** or **npm** on your device, you can [find instructions here](https://www.npmjs.com/get-npm).
4. Create your new app. This will be the **local repository** for the project.
```console
npx create-react-app my-project
cd my-project
``` 

    
### Step 2: Initialize a Git Repository

1. Log into your [GitHub](https://github.com) account.
2. Create a new repository with the **same name** that you used for your local repository. This will be your **remote repository** for the project.
3. Connect your local and remote repositories. 
```console
git remote add origin
https://github.com/my-username/my-project
```

    
### Step 3: Build Your App
1. In the terminal, type `npm start` to spin up a local server on your device.
2. Open [http://localhost:3000](https://localhost:3000) to view your app. *The page will automatically reload as you make changes.*
3. Build your app! 


    
### Step 4: Publish to GitHub
1. When your project is ready to publish, bundle it by typing `npm run build` in the terminal. 
2. Push your production-ready app to GitHub.
```console
git add .
git commit -m "Add a short description of the changes you made."
git push -u origin master
```
3. Open your project's repository on [GitHub](https://github.com).
4. Click on the Settings tab and scroll down to the GitHub Pages section.
5. Under Source, select the branch that you want to publish. The default choice is usually the `master` branch or the `main` branch. 
5. Click Save and GitHub will display the URL for your project. 

**Tip:** To learn more about configuring source branches, see this [GitHub Docs page](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site).


    
### Step 5: Use a Custom URL
1. In your project's repository on GitHub, click on the Settings tab.
2. Scroll down to the GitHub Pages section.
3. Under Custom Domain, enter your domain name and click Save. 

**Tip:** To learn more about configuring custom domains, see this [GitHub Docs page](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site).

    
### Conclusion
GitHub Pages makes it easy to deploy and host web-based apps. If you need a **simple, user-friendly** way to publish your portfolio projects, give Pages a try!
CanCanCan 3.2.0
Tags: rails, cancancan, ruby
Published: 2020-12-12 21:25:12

Hi all 👋,
a new version of CanCanCan is out!

Again, we have a minor release but it includes a bunch of very important features, next to support for Rails 6.1.0.

I have [opened a sponsorship program](https://github.com/sponsors/coorasse), please consider supporting the project if you use CanCanCan. It really helps! 

## Switching query strategy

Since version 3.0.0 we started changing the way we perform the queries when using `accessible_by`, in order to be more performant and reliable. 

As expected, this new way of performing the queries didn't fit everyone, so in version 3.1.0 we switched from `left_joins` to `subqueries` ([see relevant PR](https://github.com/CanCanCommunity/cancancan/pull/605)).

This again didn't make everyone happy 😃 , so we decided, in the version 3.2.0 to allow to configure the preferred query mechanism: left joins or inner queries. 

You can now setup:
```ruby
CanCan.accessible_by_strategy = :subquery # or :left_join
```

to change it.

## Support for Single Table Inheritance

Single Table Inheritance is now supported. Given the following:

```ruby
class Vehicle < ApplicationRecord

class Car < Vehicle

class Motorbike < Vehicle
```

You can play with rules by defining:

```ruby
can :read, Vehicle
```

and query for:

```ruby
Vehicle.accessible_by
# or
Motorbike.accessible_by
```

Here is an example:

```ruby
can :read, Motorbike

Vehicle.accessible_by(...) # => returns only motorbikes
```

Check the [relevant PR](https://github.com/CanCanCommunity/cancancan/pull/649/files) for more examples and note that [there are currently some minor issues](https://github.com/CanCanCommunity/cancancan/pull/663)

## Support for associations in rules definition

When using associations in rules definition you always had to use column names. Now, [thanks to this PR](https://github.com/CanCanCommunity/cancancan/pull/650) you can also use the association name.

```ruby
# previously you had to define:
can :edit, Book, author_id: user.id

# now you can also write:
can :edit, Book, author: user
```

Enjoy! And to the next one...
Know which products are available in a region
Tags: azure
Published: 2020-12-12 20:36:52

<sub><span>Photo by <a href="https://unsplash.com/@nordwood">NordWood Themes</a> on <a href="https://unsplash.com/s/photos/comparison">Unsplash</a></span></sub>

Multiple regions are available in Azure. But all region do not have all products sadly. Available geographies are listed [here](https://azure.microsoft.com/en-us/global-infrastructure/geographies/#geographies).

Each region has its own list of products available that can be listed or compared in the page.

Example for India:

https://azure.microsoft.com/en-us/global-infrastructure/services/?regions=central-india,south-india,west-india&products=all

[You can even list the product you require to know where you can deploy.](https://azure.microsoft.com/en-us/global-infrastructure/services/?regions=central-india,south-india,west-india&products=azure-firewall,virtual-network)


Hope it helps !
Introduction to Bash Scripting - A DO Hackathon Submission
Tags: dohackathon, bash, linux, css
Published: 2020-12-12 20:35:53

## What I built

I created a website to showcase the open-source eBook 📘 that I wrote a couple of weeks ago.

The website was built with TailwindCSS and [Tails](https://devdojo.com/tails) 🌪.

The website also includes an interactive training section based on Katacoda where you could run commands on a fully functional Bash terminal directly in your browser!

You can follow the interactive training online here:

[Introduction to Bash Scripting Interactive training](https://ebook.bobby.sh/training.html)

### Category Submission: 

Personal Site 👋

### App Link

https://ebook.bobby.sh/

### Screenshots

![Introduction to bash scripting](https://imgur.com/TAbsRMm.png)

![Introduction to bash scripting 2](https://imgur.com/bhr1mZF.png)

![Introduction to bash scripting 3](https://imgur.com/9Kdu4ah.png)

![Introduction to bash scripting 4](https://imgur.com/tpzjnJS.png)

### Description

This is a website to showcase the open-source introduction to Bash scripting guide/ebook which will help you learn the basics of Bash scripting and start writing awesome Bash scripts that will help you automate your daily SysOps, DevOps, and Dev tasks. No matter if you are a DevOps/SysOps engineer, developer, or just a Linux enthusiast, you can use Bash scripts to combine different Linux commands and automate boring and repetitive daily tasks, so that you can focus on more productive and fun things.

The guide is suitable for anyone working as a developer, system administrator, or a DevOps engineer and wants to learn the basics of Bash scripting. 

### Link to Source Code

https://github.com/bobbyiliev/introduction-to-bash-scripting

### Permissive License

MIT License

https://github.com/bobbyiliev/introduction-to-bash-scripting/blob/main/LICENSE

## Background

I wrote the Introduction to Bash scripting opensource guide/eBook and I wanted it to reach more people and help them expand their Bash scripting knowledge!

I also wanted to add an interactive training so that people could run the bash scripts and other examples from the book directly in their browser, so I achieved that thanks to Katacoda!

### How I built it 

I wanted to learn more about TailwindCSS and I went through the ["Beginner Tailwind" Course](https://beginnertailwind.com/). After that thanks to the awesome Tails components, I was able to quickly put together the website!

I've been working as a DevOps engineer for a long time now and I know that building a full CI/CD pipeline requires a lot of skills and time. I'm truly amazed every time I use the DigitalOcean App Platform and the simplicity it brings to the whole CI/CD process. 🙌

### Additional Resources/Info

- The PDF generator: [Ibis](https://github.com/themsaid/ibis/)
- Book Cover was created with: [Canva](https://www.canva.com/)
- Website was built with: [Tails](http://devdojo.com/tails)
- Interactive training is based on: [Katacoda](https://www.katacoda.com/)
Button Hover Effect Using HTML/CSS
Tags: html, css, design
Published: 2020-12-12 20:33:36

###let's make a button hover effect. 

first, use a button tag is very important for the behavior. 

please don't use < a > tag for buttons. they have different meanings and behavior. 

< a > tag is used for link responses not for actions like < button > tags.

< a > used for navigation, user can click it to open in a new tab, all that I want to tell you, 

don't use < a > tags for make an action use < button > tags for that, and now let's start to make our 

beautiful button effect.

###let's make our body HTML Tage : 
	
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2xtev0k3ydnl9hgg5zmm.png)

You should be able to use < button > everywhere, but if you want something, and Now Let's Make The Stylesheet.


###Styleseet

1- let's make the CSS for a button with the regular style, we pass the position relative to the button because we will make the span absolute later to make our effect.
	
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bu1t5s4emf8hg9c2d13j.png)

you should have a regular style like this :
	
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0uccigly7m6m409y0e3s.png)

2- we need to focus on the < span > tag  it will take all the work, let's give it some style
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ueveekowg0ujcbxj1qmf.png)
  
we give it a **display: block** to respect all the height and width of our button, we need to make sure that,

our span has the full width and height of the < button > tag when we **hover** it.

3- next, we need to make a beautiful effect that when we **hover** the Button or the < span > tag,

we get the beautiful effect, let's make the **before** And **after** to the span.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/73go6sa98tvapv6ol011.png)

**now** we have the position *absolute* for the **before** < span > tag with 50% **width** and

**z-index** -1 to make sure that the effect uder the title of the < span > tag, **transform:scaleX** and **transform-origin** for the direction of the *before* effect

the **transition** for the smooth effect

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8tvklrqyjhhop6qlbu8u.png)

**NOTE**: the *scaleX* = **1** in The photo we will put it = **0** in the first and when we hover the **before** it will change to **1** With a small **transition** effect

4- let's make the **after** effect too, the same with the **before** 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ry4xbz570bspszve2vmw.png)

5- let's make The **NOTE** and make the *after* and *before* hover effect

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g74gxlmmj35fxdhu4fv0.png)
	

 **all** what we need is to change the **scaleX** and make a nice transition. 


##Finally, 

we did it, in the end, you should have a nice and smooth effect button link this : 

 https://codepen.io/abdallahifox/pen/NJGoVV?editors=1100

###The-End

I made it with HTML/CSS, but it can be achieved with any Framework as well. I hope your main take away will be thinking of a button effect how to make the effect, not the code itself.
Fisher-Yates shuffle algorithm with Ruby
Tags: ruby, algorithms, shuffle
Published: 2020-12-12 19:52:23

The simplest shuffle algorithm, Fisher-Yates, is widely used and easy to implement. I personally used it to create a card game in *Sinatra*:  

```ruby
# Fisher-Yates Shuffle Algorithm

module FisherYates

  def self.shuffle(numbers)
    n = numbers.length
    while n > 0 
      x = rand(n-=1)
      numbers[x], numbers[n] = numbers[n], numbers[x]
    end
    return numbers
  end

end
```  

So let's imagine you want to use it in your *Rails app,* you could do something like this:

```ruby
  def initialize(numbers)
    shuffle = FisherYates.shuffle(numbers)
    return shuffle.inspect
  end
```  

If you want to test this script from shell, add this after `FisherYates`, and save as `shuffle.rb`. Add numbers as arguments, or just execute script to shuffle defined numbers from array:

```ruby
  @numbers = [1,2,3,4,5,6,7,8,9,10,12,13,14]

  if ARGV.empty?
    puts FisherYates.shuffle(@numbers).inspect
  else
    puts FisherYates.shuffle(ARGV).inspect
  end
```  
Without `inspect` you would get each number in separated line, but with `inspect` we receive array of numbers printed in terminal.
Go - Set structure
Tags: go
Published: 2020-12-12 19:43:10

Simple `Set` struct in Golang.

{% gist https://gist.github.com/takakd/d344ab4ae550b2b50a837862e4cbf153 %}

**Example**

```golang
package collection_test

import (
	"fmt"
	"<Project>/collection"
)

func ExampleSet() {
	s := collection.NewSet()

	// Set values
	s.Set("value1")
	s.Set("value2")

	// Check
	fmt.Println(s.Contains("value1"))
	fmt.Println(s.Contains("value2"))

	// Remove
	s.Remove("value2")

	// Removed so does not exists.
	fmt.Println(s.Contains("value2"))

	// Output:
	// true
	// true
	// false
}
```
Frontend best practices (Part I)
Tags: frontend
Published: 2020-12-12 19:41:08

In this post, I will try to summarize some of the tips my team and i were using to write a quality code:

# Naming

* When trying to name your variables or your components try always to make **the name describe the purpose** of the variable or function or component. 
**Rule:** If you need a comment to describe the purpose of variable/function/component most probably you didn't use an adequate name for your variables.
It's okey if the name is long as far as it still making the purpose clear.

* One more thing you need to consider when choosing names is **consistency**. 
Assuming that you are creating a file `Registration.js` the styles of this file should be in `registration.scss` and if you have more files related to registration like `RegistrationCTA.js` as separate component for the call to action button you can use a folder called Registration to put all files together.

# Styling:

## 1. Mobile first: 
When trying to style your page, it is recommended to start by designing the mobile first then use media queries to design tablets and desktop.
This rule creates consistency between all your styles and all the team working on separate pages or other parts of the page. In addition it makes media queries simpler to understand for developers.

```
.registration-form__image {
  padding: __px-to-rem(40);
  margin: 0 __px-to-rem(20);

  @media (min-width: $tablet-breakpoint) {
    padding: __px-to-rem(80) __px-to-rem(40) 0;
  }
  @media (min-width: $desktop-breakpoint) {
    margin: 0 __px-to-rem(129);
  }
}
```
 
## 2. Common files: 

When working on a project and you have recurrence of some values across files like colors, variables of media queries and mixins in this case it's recommended to create a common folder:
```
common
   |
   |__colors.scss
   |__queries.scss
```
his will help ensure consistency across project.

## 3. BEM naming:

Like any other rules that has a purpose to keep consistency in the project especially if there is a big team working on it they need  to name Class Names using a standardized naming convention. For that you can use [BEM](http://getbem.com/naming/) to name all CSS classes.
CSS class is taking this format 
                 `block__element--modifier`

**Block**
Standalone entity that is meaningful on its own.
form header footer section container menu 
**Element**
A part of a block that has no standalone meaning and is semantically tied to its block.
title item list checkbox caption 
**Modifier**
A flag on a block or element. Use them to change behavior or appearance.
color disabled highlighted checked

```
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

``` 
Note: They better appear in css files in same order they are in your component.


# Consider SEO and Accessibility 
In next articles I will talk about both of them
Less Magic, Please
Tags: csharp, dotnet
Published: 2020-12-12 19:29:41

I haven't posted in a while. I need to fix that. I have a lot of topics I wish to discuss in the near future. For now, here's a quick thought.

C# delegates are great, aren't they?

```csharp
public string DoTheThing(Func<int, string> handler)
{
    return handler(_data);
}
```

See how I invoked that delegate? I simply treated it like a method: `handler(_data)`. The issue is that delegates are objects, not methods. I've noticed in my own code that I've taken to writing this instead.

```csharp
return handler.Invoke(_data);
```

I never _consciously_ decided to invoke my delegates this way. It sort of just happened. Reflecting on this, I realized that being able to call delegates directly as if they are methods kinda hurts readability. I want my code to be just a bit more explicit. Let's look at another example.

```csharp
if (flag == true)
```

Huh? What's going on here? Why bother with the `== true` part? Let's simplify that.

```csharp
if (flag)
```

That's better. Except... C# is angry now.

> Cannot implicitly convert type 'bool?' to 'bool'. An explicit conversion exists (are you missing a cast?)

Ooooooh. I get it. The `== true` part is a sneaky workaround to the fact that `flag` is a `bool?` or `Nullable<bool>`. In that case, I have a preferred way to handle this.

```csharp
if (flag.GetValueOrDefault())
```

See, I don't like obscuring the fact that `flag` is a `Nullable<bool>`. I don't want to pretend that it's a flavored `bool`. The fact is `Nullable<T>` is its own type with its own rules. The code above makes it _abundantly_ clear to any reader that we are dealing with a `bool?` and not a `bool`.

Agree or disagree. I like comments and discussion.
Count Repeated element in the list [duplicate]
Tags: python, tutorial, devops
Published: 2020-12-12 19:20:16

#Count the number of Repeated element in the list
To count the Repeated element in list is very similar to the way we count the character in a string. here are three methods that can be use to do this.
##Method 1 : Naive method
just like we learn in counting character in string we need to loop through the entire List for that particular element and then increase the counter when we meet the element again.
###Example
you were given a variable MyList containing some elements you were to count the number of 'a' in the string.
Here is the codes:
```python
MyList = ["b", "a", "a", "c", "b", "a", "c",'a']
count=0
for i in MyList:
    if i == 'a': 
        count = count + 1  
print ("the number of a in MyList is :", count)
```
`Output:`
```
the number of a in MyList is : 4
```
##Method 2 : Using count()
Using count() is the convinient method in Python to get the occurrence of any element in List. the formula to count element in list with this method is:
`list.count('element')`
###Example1
Let say we need to count 'b' in MyList here is the code:
```python
MyList = ["b", "a", "a", "c", "b", "a", "c",'a']
counter_b=MyList.count('b')
print(counter_b)
```
`Output:`
```
2
```
###Example2
what if we wish to count each of the elements in the List. our code will be..
```python
MyList = ["b", "a", "a", "c", "b", "a", "c",'a']
duplicate_dict={} # a dictionary to store each of them.
for i in MyList:#loop through them.
    duplicate_dict[i]=MyList.count(i)
print(duplicate_dict)#to get the occurence of each of the element
```
Output:
```
{'b': 2, 'a': 4, 'c': 2}
```
A shortcuts code for the above are:
```python
MyList = ["b", "a", "a", "c", "b", "a", "c",'a']
duplicate_dict = {i:MyList.count(i) for i in MyList}
print(duplicate_dict)
```
Output:
```
{'b': 2, 'a': 4, 'c': 2}
```

##Method3 : Using collections.Counter()
This method works also the same way only that you need to import Counter from the collection before use.
Let's see how to use it to solve the same question
```python
#we need to import counter function.
from collections import Counter
MyList = ["a", "b", "a", "c", "c", "a", "c"]
duplicate_dict = Counter(MyList)
print(duplicate_dict)#to get occurence of each of the element.
print(duplicate_dict['a'])# to get occurence of specific element.
```
`Output:`
```
Counter({'a': 3, 'c': 3, 'b': 1})
3
```
remember to import the Counter if you are using Method otherwise you get error. I hope you find this helpful, yeah keep on enjoying coding.

if you have any question don't hesitate to ask. chat me up on [WhatsApp](https://wa.me/2349153036869?text=Hey!%%20Maxwizard%20l=I%20need%20your%20assistance%20from%20dev) or [Mail](mailto:aoladejo382@stu.ui.edu.ng?Subject=Hey!%%20Maxwizard%20l=I%20need%20your%20assistance%20from%20dev). Don't forget to follow me on [Twitter](https://twitter.com/oladejoabdulla7) so that you don't miss any of my articles.
Clean Code : Functions
Tags: cleancode
Published: 2020-12-12 19:05:17

I think every developer should read the book Clean Code by Robert Martin. The book gives great *guidance* for writing high-quality, well-tested, and maintainable code. 

An often quote piece of advice is to keep functions as small as possible. My recollection is that Clean Code suggested functions should not be more than 20 lines long. a 20 line function is a good basis to work from but, clean code gives guidance, it does not prescribe rules.

Oftimes the readability of code is decreased through having too many small functions. In these cases, another suggested rule should take preference: a method should do one thing, do only it and do it well.

An area I often make a long function is in simple PHP scripts. A PHP script is usually readable by scanning from top to bottom. Breaking it into functions would make it harder to understand.

Take guidance as a *suggested* best practice and evaluate the current scenario before blindly following it.
My first impressions of the DigitalOcean App Platform
Tags: dohackathon, watercooler, webdev
Published: 2020-12-12 18:52:42

I have to say I'm very impressed with the DigitalOcean App Platform. I'm an existing customer and had come across it in the last month or so but didn't really see how it was relevant to me. At least not for the small scale stuff I do in my spare time.

I want to make a submission for the #dohackathon so got stuck in for an hour or so to see what it was all about and to my surprise I'm really enjoying it. It's perfect for a lot of the stuff I do. I'm going to measure existing performance and bandwidth usage and I'm contemplating making the switch from their traditional offering and jumping over to the App Platform...

The only issue I've encountered was adding custom domains on mobile. Kept getting a 401 error, but it worked first time on desktop.

You can preview the first idea I've pushed out over at https://whisky.charanj.it - nowhere near finished but it feels great to get started!

I'm planning to finish before the year is out, but I really hope I can get it finished in the next week or two.