teleren/devto huggingface dataset:
Inline vs Inline-Block Display in CSS
Published: 2021-04-29 15:24:51

display: inline-block brought a new way to create side by side boxes that collapse and wrap properly depending on the available space in the containing element. It makes layouts that were previously accomplished with floats easier to create. No need to clear floats anymore.

Compared to display: inline, the major difference is that inline-block allows to set a width and height on the element. Also, with display: inline, top and bottom margins & paddings are not respected, and with display: inline-block they are.

Now, the difference between display: inline-block and display: block is that, with display: block, a line break happens after the element, so a block element doesn’t sit next to other elements. 
Here are some visual examples:

display: inline
Notice here how the width and height are not respected, and how the padding top and bottom are present, but overlap over the lines above and under.

span.box {
  display: inline; /* the default for span */
  width: 100px;
  height: 160px;
  padding: 18px;
})

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03xbs2ax58eb9exgh0sj.png)

display: inline-block
Here the width, height and padding are respected, but the two copies of the element can still sit side by side.

span.box {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 18px;
}

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

display: block
Here again everything is respected, but the elements don’t sit side by side.

span.box {
  display: block;
  width: 100px;
  height: 160px;
  padding: 18px;
}

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbugv6rdglcxsz6k2kxi.png)
Pulling JSON Data using R
Tags: developer, codereview, r, datascience
Published: 2021-04-29 15:23:43

Simple code to pull JSON data and convert into .xlsx format.

Code created using R Studio version R-3.6.1

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

       # Import packages 
      install.packages("rjson")
      install.packages("jsonlite")
      library("rjson")
      library("jsonlite")
      install.packages("openxlsx")
      library(openxlsx)

      # Place from where we need to download JSON file (sample URL)

       json_file <-"https://opendata.ecdc.europa.eu/covid19/casedistribution/json/"


      # read url and convert to data.frame
      document <- fromJSON(txt=json_file)
      summary(document)
      # Location where the .xls file will be saved
      write.xlsx(document, "/COVID19.xlsx")



The data that will be pulled in can be used to create visulization. 
Below is sample tableau visualization. 

https://public.tableau.com/profile/swapanroy#!/vizhome/Covid19spread/COVID19-Curve
4 - Hackathons
Tags: hackathon, development, softwaredevelopment, azure
Published: 2021-04-29 15:23:37

![Cloud with Chris Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xea3wl8co4ylrpcvmuuh.png)

**This post was originally published on Sun, Apr 12, 2020 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/hackathons/).**

Here we go — Episode #4! Have you ever had an idea, and you want to quickly prove it out? Or have you wanted to build out a scenario to expand your own skills, whether that is development, design or perhaps other skills? You’ve probably heard about Hackathon events in recent years, and that’s what we’ll focus on in this episode! I’m very excited to introduce my second guest of the show, Maria Vrabie, a very good friend, who has plenty of experience with Hackathons, both participating in them and organising or mentoring for them. It’s a very insightful session, so let’s go ahead and find out more about Maria’s experience with Hackathons.

{% youtube Y24qiraX2m8 %}
3 - DevOps in a Cloud World
Tags: devops, azuredevops, shiftleft, datadevops
Published: 2021-04-29 15:22:06

![Cloud with Chris Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xea3wl8co4ylrpcvmuuh.png)

**This post was originally published on Sun, Mar 29, 2020 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/devops-in-cloud/).**

In this episode, I’m very fortunate to have my first guest come and join me! And what better way to kick this off, than a topic area which is very close to my own heart — DevOps. I’m very excited that I was able to invite Abel Wang, Principal Developer Advocate and DevOps lead to come and join me to talk of his experiences at Microsoft. We jump through a few different areas, from What is DevOps, how it links back to requirements, Data DevOps and shifting left. There’s plenty to learn from in this one, so let’s dive straight in!

{% youtube wfsqnds6KZ0 %}
2 - Cost Control
Tags: architecture, cost, governance
Published: 2021-04-29 15:19:50

![Cloud with Chris Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xea3wl8co4ylrpcvmuuh.png)

**This post was originally published on Sun, Mar 15, 2020 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/cost-control/).**

Let's introduce Episode #2! This was a suggestion from the community, so a big thank you to Garth Niblock for this one! Last time we talked about requirements, and cost is one dimension of that - but a very important one. When we move into a cloud world, the technology will change, but the way way that we think about cost changes as well. So this episode will be called 'Cost Control'. Let's listen in...

{% youtube MkbG0fQ7r5o %}
Port 8080 already in use (laravel)
Published: 2021-04-29 15:19:02

---
title: Port 8080 already in use (laravel)
published: True
canonical_url: https://jovialcore.tech/port-8080-already-in-use-laravel/
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

You get this kind of error for one reason: you are trying to run an app, example, a laravel project on the same port. 

So here are two quick simple solutions :

A. Close the terminal where you initially ran `php artisan serve` by pressing `ctrl + c ` then from your terminal, `cd` into the root folder of  your OTHER laravel project, then run `php artisan serve` again. 

####                        OR

B. CD into your OTHER laravel app root directory. Then define another port in your terminal by typing the command `php artisan serve --port=8081`

Now, you have two different apps running on two ports: `http://127.0.0.1:8000` and `http://127.0.0.1:8081`


I hope this helps.
1 - Requirements in Context
Tags: architecture, api, clouddesignpatterns, azure
Published: 2021-04-29 15:15:23

![Cloud with Chris Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xea3wl8co4ylrpcvmuuh.png)

**This post was originally published on Sun, Mar 1, 2020 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/requirements-in-context/).**

This is the first episode! We’ll be talking about all things requirements. Why is that? Well, that’s the place any kind of project should start — What are you aiming for, what are you trying to achieve and what is the context?

{% youtube YW08iPBTBCI %}
Discussion: What is a good Vulnerability Scanner for my JavaScript Project
Tags: javascript, javascriptdevelopers, programming, npm
Published: 2021-04-29 15:03:35

---
title: Discussion: What is a good Vulnerability Scanner for my JavaScript Project
published: true
description: What is a good Vulnerability Scanner for my JavaScript Project. 

tags: javascript, #javascriptdevelopers #programming #javascript #npm
#vulnerabilityScanner #vulnerabilityscanning #webdevelopment
//cover_image: https://direct_url_to_image.jpg
---
How to get free $100 credit for Hosting?
Tags: offers
Published: 2021-04-29 14:53:27

Hi,

I am back with a new offer on hosting :)

Linode is offering 100$ credit on hosting for new users.

Check offer - https://linode.gvw92c.net/c/1929920/939219/10906

Full step by step guide - https://dev.to/goonlinetools/free-100-hosting-credit-for-everyone-2g08
Kullanılmayan CSS leri Görüntüleme
Tags: css, chrome, devtools
Published: 2021-04-29 14:45:21

1. Chrome Dev Tools ile: 

Örneğin instagram landing sayfası için deneyelim: 

Chrome ile açtığımız sayfada sağ tıklayıp Denetle(Inspect) seçeneğine tıklıyoruz. 

Mac için (Command + Shift + P) 
Windows ve Linux için (Control + Shift + P) 

basarak çıkan komut satırına "covarage" yazıyoruz. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75xck07kik93jbpvdb75.png)

Çıkan tabda yenile işaretine tıklıyoruz. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe9wu5blnc1xhrvq73xq.png)

Çıkan ekranda hem css hem de js dosyalarının kullanım oranları yazıyor. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufvddjpnaxbakc2w9qwz.png)
    
url filtresine css yazarak, css dosyalarını filtreliyorum. 

Dosya üzerine tıkladığımda, yukarıda kırmızı ve mavi olarak kullanılan ve kullanılmayan css sınıflarını görebiliyorum. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3me1nea78aib7e8tbfn1.png)
 

Kaynak: https://developers.google.com/web/tools/chrome-devtools/css/reference#coverage
Sample test automation framework written in Golang
Tags: testing, automation, go
Published: 2021-04-29 14:21:48

There are multiple test automation tools which are already well-developed and highly used. However as a POC and to brush-up my golang skills, I have created a sample test automation framework.

The test suites are written in Golang and they can be used to verify Linux systems configuration.

```golang
fmt.Println("## TEST CASES ##")
fmt.Println("1. Verify software OS version")
fmt.Println(testSuites.VerifyOSVersion(expectedVersion))
```

Each test case calls another function which executes and parses the output.

```golang
func VerifyOSVersion(osVersion string) (bool) {
	var resultBool bool
	cmdOut, err := exec.Command("cat","/etc/issue").Output()
    fmt.Printf("OS version: %s", cmdOut)
	if err != nil {
        fmt.Printf("%s", err)
    }
    cmdOutStr := string(cmdOut[:])
	if cmdOutStrContainsOSVer := strings.Contains(cmdOutStr, osVersion) ; cmdOutStrContainsOSVer {
		resultBool = true
	} else { 
		resultBool = false 
	}
	return resultBool
}
```

Furthermore, I have included a CI using github actions. The entire repository can be found in [my github](https://github.com/sebastian-pazmay/os-testing).
Server Maintenance UI In HTML/CSS
Tags: uiweekly, webdev, html, css
Published: 2021-04-29 14:15:07

Server Maintenance UI is used when the website is in maintenance or under construction(in progress). So here we made a minimal user interface of Server Maintenance UI In HTML/CSS.

In this element, we used one SVG image form undraw and some basic text. To make responsive we used media quires.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/server-maintenance-ui-in-html-css/)
Music for coding 🎧
Tags: webdev, productivity, 100daysofcode, codenewbie
Published: 2021-04-29 14:12:56

Hey DEVs!👋
I hope you all are safe and doing well. There's so much debate goes on about listening music while coding. But in my case I like to listen non-lyrical music while coding. 

I will be sharing some of the resources. If you also like to listen to music while coding they might be for you.

Most of the time I listen to the **[freeCodeCamp CodeRadio](https://coderadio.freecodecamp.org/)**.📻

Here are some more music suggestions that I personally like.
## 1. Lo-Fi Beats
{% spotify spotify:playlist:37i9dQZF1DWWQRwui0ExPn %}

## 2. Jazz in the Background
{% spotify spotify:playlist:37i9dQZF1DWV7EzJMK2FUI %}

## 3. Peaceful Piano
{% spotify spotify:playlist:37i9dQZF1DX4sWSpwq3LiO %}

## 4. lofi hip hop / chillhop / beats to study/relax to
{% spotify spotify:playlist:32hJXySZtt9YvnwcYINGZ0 %}

You can visit Twitter thread here 👇
{% twitter 1387821626960515073 %}
I hope these playlists will make you productive. Happy Coding! ❤️ 
You can follow me on **[Twitter](https://twitter.com/maheshvpawar)** as well.
DISCUSS: Climate change and webdevelopment
Tags: discuss, watercooler, webdev
Published: 2021-04-29 14:05:55

I know, I know! Earth Day has already passed and I should've asked this last week. I only realised after I'd posted last week's discussion post that this topic would have been very relevant to that day. Still, this is worth talking about!

I'll be mainly focusing on webdev, but this could apply to any programming field.

# How our decisions could impact the environment

It shouldn't come as a surprise that the internet accounts for almost 4% of global emissions. Here's a [handy infographic](https://www.climatecare.org/resources/news/infographic-carbon-footprint-internet/) if you'd to know a more!

It's the reason why big companies are starting to opt for green energy. Think of Google running 100% on renewable energy for several years now. It even has a [site dedicated to sustainability](https://sustainability.google)! By using Google's services, you're essentially running your stuff on green energy.

Then, we've got the other side of the hill, like the NFT craze that's still lingering. One of the major arguments against NFT was its environmental impact due to the computing power required for each transaction. Even the [creator of NFT](https://www.theatlantic.com/ideas/archive/2021/04/nfts-werent-supposed-end-like/618488) talks about it. But right now, the technical solutions to reduce all that computing power are out there.

That's how we can make a difference. 🌱

Now, I don't want to go in-depth about this topic. This isn't an article to inform you all of it. Giving some examples might give some clarity on where I'm going with this. I mainly want to hear from others what they think they could do about it!

# ✍ Comment below answering the following questions

1. Do you think your **development process** can benefit or harm nature, even if in a small way? If so, how?
2. Is environmental impact part of your decision-making process when choosing between **products for development**? (e.g. hosting)
3. After reading this short post, do you feel climate change should **cross your mind more often** in your problem-solving process?

---

![Thalita logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa0hfs0886uf0g7c0b7e.png)

[Twitter](https://twitter.com/thalitadev) | [Website](https://thalita.dev)
DevOps Before and After Kubernetes - Hyscale
Tags: devops, kubernetes
Published: 2021-04-29 14:05:51

These new-world DevOps teams may do well with an automation process for delivery to Kubernetes so that efficiency gains and economic benefits can be realized sooner while also maintaining reliability and speed. Such automation along with a standardized process will further enable a clean hand-off interface between the IT teams managing the infrastructure and the app teams delivering apps to K8s. For enterprises pursuing agility and frictionless delivery at scale, finding the shortest path to Kubernetes will be at the heart of DevOps in times to come.
How to configure Azure Applications Insights on .Net 5
Tags: csharp, azure
Published: 2021-04-29 13:58:17

---
title: How to configure Azure Applications Insights on .Net 5
published: true
description: 
tags: 
- csharp
- azure
canonical_url: https://luturol.github.io/csharp/azure/how-to-configure-application-insights-in-net5
//cover_image: https://direct_url_to_image.jpg
---

## How to configure Azure Applications Insights on .Net 5

Application insights is a wonderful tool to help you track log, see performance issues and application map. It's more like CloudWatch on AWS.


First, you need to download two packages from nuget to start.

1. [Microsoft.ApplicationInsights.AspNetCore](https://www.nuget.org/packages/Microsoft.ApplicationInsights.AspNetCore)

1. [Microsoft.Extensions.Logging.ApplicationInsights](https://www.nuget.org/packages/Microsoft.Extensions.Logging.ApplicationInsights)

```bash
dotnet add package Microsoft.ApplicationInsights.AspNetCore --version 2.17.0
dotnet add package Microsoft.Extensions.Logging.ApplicationInsights --version 2.17.0
```

After that, you need to initialize the configurations from application insights on Statup.cs and Program.cs


On Startup.cs, you need to add the service dependency.

```csharp
public void ConfigureServices(IServiceCollection services)
{
    services.AddApplicationInsightsTelemetry();

    //others dependencies
}
```

On Program.cs, you need to set the Log Level and your Instrumentation Key.

```csharp
public static IHostBuilder CreateHosBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureLogging(logging =>
        {
            logging.AddApplicationInsights("your-instrumentation-key");
            logging.AddFilter<ApplicationINsightsLoggerProvider>("", LogLevel.Trace);
        })
        .ConfigureWebHostDefaults(webBuilder => 
        {
            webBuilder.UseStartup<Startup>();
        });
```

Now you can use ILogger to create logs on Azure Application Insights.


Don't forget to eat clean and drink water.

Peace!!
Linux Files Permissions and Those chmod Numbers we Use 🤔
Tags: linux, beginners, bash
Published: 2021-04-29 12:56:02

One thing to know about Linux is that you have file permissions for 3 categories.

1. User: The user who owns the file.
2. Group: Users belong to groups. Users in the same group also own the file.
3. Others: Permissions for users that are not the owners of the file and don't belong to the group.

# Example
Let's assume that your username is *mary* and you run an *ls* on your home folder

```
mary:/home# ls -lah
-rwxr--r--      1 mary   accounting    8 Jan 190 06:47 my_super_script.sh
 ^^^^^^^^^        ^^^^   ^^^^^^^^^^
 Permissions      User     Group
.....
```
> The first dash (-) represents the file type and it's not related to permissions.

Permissions are composed of 9 characters. In our case, those 9 characters are **rwxr--r--**

> Any permission not granted will be represented by a dash (-).  


Now, it might seem confusing reading **rwxr--r--**. This is because permissions for the 3 categories are put all together without spaces or delimiters of any kind.

But you can look at it like this to better understand it:

```
mary   accounting   Others    8 Jan 190 06:47 my_super_script.sh
rwx       r--        r--
```
> Here we broke down the 9 character string rwxr--r-- into 3 groups. Each one representing the three categories we mentioned earlier (user, group, others).

|User Permission (mary)|Group Permissions (accounting)|Permissions for others|
|:---:|:---:|:---:|
|rwx|r--|r--| 


- User Permission: The user *mary* can read, write and execute the file **(rwx)**.
- Group Permissions: Users in the group *accounting* can read the file but they can't write it or execute it **(r--)**
- Permission for others: Users that are not *mary* or don't belong to the *accounting* group can read the file but they can't write it or execute it **(r--)**

# Changing permissions and those numbers on the chmod command

You've probably copied and paste things like `chmod 644 myfile.html` or raised hell with `chmod -R 777 folder` when something wasn't working.

Remember that **chmod -R 777 folder** will do this:

![chmod777](https://gdi3d.github.io/img/chmod777-cartman.jpg)


But where do those numbers come from?. From this table:

|Code|Meaning|
|:----:|-------|
|0|Permission denied|
|4|Read access|
|2|Write permission|
|1|Execute permission|

Let's see some examples and use the table above to better understand it

| command | user | group | others|
|---|:---:|:---:|:---:|
| chmod 664 | 6 | 4 | 4 |
| | 4+2 (read + write) | 4 (read)| 4 (read) |
| chmod 600| 6 | 0 | 0 |
| | 4+2 (read + write) | No read, write or execute | No read, write or execute |
| chmod 777| 7 | 7 | 7 |
| | 4+2+1 (read + write + execute)|4+2+1 (read + write + execute)|4+2+1 (read + write + execute)|  


> Remember that you set permissions for 3 categories: user, group and others

What you're doing it's just adding up the code for each permission in each category.


# Read Official Docs, it's always helpful
For more detailed information read the manual [https://linux.die.net/Intro-Linux/sect_03_04.html](https://linux.die.net/Intro-Linux/sect_03_04.html)
CGN1 - Cloud Gaming Notes Episode 1 - Hosting a Game Server
Tags: architecture, gaming, gamedev, azure
Published: 2021-04-29 13:33:30

![Cloud Gaming Notes — Hosting a Game (With screenshot from Minecraft)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggd3wzt6qertn6scc6kx.jpg)

**This post was originally published on Wed, Feb 3, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/hosted-game-servers/).**

Ever thought about what it takes to host a game in the Cloud? Well, this is the series for you! On the first Wednesday of every month, we explore Cloud Concepts that impact your journey to a connected multiplayer gaming experience! In this first session, we'll play some Minecraft and talk to the concept of a hosted game server.


{% youtube VdiqtCRK6jQ %}
Using OAuth2 with webMethods.io Integration Clients
Tags: integration, oauth2, rest, api
Published: 2021-08-12 13:25:17

---
title: Using OAuth2 with webMethods.io Integration Clients
published: true
date: 2021-04-29 12:53:38 UTC
tags: #integration, #oauth2, #rest, #api
canonical_url: https://tech.forums.softwareag.com/t/using-oauth2-with-wm-io-integration-clients/240927
---

As of the April 2021 release of [webMethods.io](http://webMethods.io) Integration, you can protect integration services and REST APIs in [webMethods.io](http://webMethods.io) Integration using the OAuth 2.0 protocol.

In OAuth 2.0, the client obtains an access token issued by an authorization server on approval of the resource owner. The client uses the access token to access the protected resources. Know more about [OAuth 2.0](https://docs.webmethods.io/integration/data_access_and_security/oauth20/#gsc.tab=0).

This overview training will show you how to setup [webMethods.io](http://webMethods.io) Integration for OAuth 2.0 clients. The client used in this example will be the Postman REST client calling a REST API in [webMethods.io](http://webMethods.io) Integration.

Contains overview of setup steps and detailed demo:

{% youtube PdRbwiWvSlY %}

[Read full topic](https://tech.forums.softwareag.com/t/using-oauth2-with-wm-io-integration-clients/240927)
Code Smell 68 - Getters
Tags: codenewbie, tutorial, oop, programming
Published: 2021-04-29 12:53:12

*Getting things is widespread and safe. But it is a very bad practice.*

# Problems

- Naming

- Information Hiding

- Coupling

- Encapsulation Violation

- Mutability

- Anemic Models

# Solutions

1. Avoid Getters

2. Use domain names instead

3. Protect your implementation decisions.

# Sample Code

## Wrong

{% gist https://gist.github.com/mcsee/39d40cf2f0d4159c95d90243c59a4df5 %}

## Right

{% gist https://gist.github.com/mcsee/cd465eb9ca4f2771fb3dc5e30dc491cc %}

# Detection

Getters coincide in certain scenarios with a true responsibility. It will be reasonable for a window to return its color, and it may accidentally store it as color. So a *color()* method returning the attribute color might be a good solution.

*getColor()* breaks [bijection](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086) since it is implementative and has no real counterpart on our [mappers](https://dev.to/mcsee/what-is-wrong-with-software-5pa). 

Most linters can warn us if they detect anemic models with getters and setters.

# Tags

- Information Hiding

# Conclusion

Getters and Setters are a poorly established practice. Instead of focusing on object behavior (essential), we are desperate to know object guts (accidental) and violate their implementation.

# Relations

{% post https://dev.to/mcsee/code-smell-28-setters-2hih %}

{% post https://dev.to/mcsee/code-smell-01-anemic-models-4dg2 %}

{% post https://dev.to/mcsee/code-smell-64-inappropriate-intimacy-5h55 %}

# More info

{% post https://dev.to/mcsee/nude-models-part-ii-getters-3f2a %}

# Credits

Photo by <a href="https://unsplash.com/@vidarnm">Vidar Nordli-Mathisen</a> on <a href="https://unsplash.com/s/photos/pull">Unsplash</a>  

* * *

> The value of a prototype is in the education it gives you, not in the code itself.

_Alan Cooper_ 
 
* * *
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}