teleren/devto huggingface dataset:
How to hide something on different screen sizes with Bootstrap?
Tags: bootstrap, webdev, responsivedesign, tutorial
Published: 2021-11-02 17:15:37

Let's look at the display features with bootstrap, which is the most popular one of the frameworks when the subject is responsive web design.

In order to understand the architecture of the display options of bootstrap, let’s check breakpoints.

Breakpoints are the exact width pixel values that decide the screen size of the browser. 

![Table of Breakpoints in Bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/leg8bbegx81tt37vax78.png)

`Table 1: Dimensions regarding the screen size.`
[Bootstrap Source Link](https://getbootstrap.com/docs/5.1/layout/breakpoints/)

You can check the breakpoints in the table above. Those dimensions mean that if you are under 576px it means that your screen size is x-small, if your width pixel is higher than 576px it means that your screen size is small (until you reach 769 px), and it continues like this.

Since Bootstrap developers used `min-width` property of CSS while adding those breakpoints, if you only apply a display property to a small screen, it works on both small and larger screens rather than working only on small screens.
[Bootstrap min-width](https://getbootstrap.com/docs/5.1/layout/breakpoints/#min-width)

This means that; if you add `d-lg-flex` to a class, flexbox property will be applied to lg, xl, and xxl screen sizes.

In Bootstrap there is a display property called `none`.
If you add a class named `d-none` to your element it will not show it.

So if you want to hide something only on small devices, we need to assign two display classes to the HTML element.

**For example, you want to use a flex display property on the container:**
```
<div class= container d-flex> … </div>
```

This `d-flex` property will affect the all kind of screen sizes since it has no screen class infix (check Table-1). It means that you are applying that property to x-small and larger screens.

**What if we want to hide something in x-small and small screens?**

So now, we want to “hide” the container unless it is a medium or larger screen. 

```
<div class= container d-none d-md-flex> … <div>
``` 

In this case, `d-md-flex` property will override the d-none property after screen size reaches 769px ( which is breakpoint of medium screen)

**What if we want to display something on small screens but not on large screens?**

In this situation, unless it is a medium screen, we want to show it as flex. If it is a medium or larger screen, we want it to be hidden.

```
<div class= container d-flex d-md-none> … <div>
``` 

In the code above, you may see that `d-flex` property will be applied to whole screen types unless it reaches the medium screen. Since `d-md-none`  affect medium or larger screens, you will be able to hide container for those screens.


If you want to apply different display properties for every different screen sizes, it means that you need to add display properties individually with all breakpoint class infixes.

[Ekim](https://www.linkedin.com/in/ekimcem/)
Cultural aspects of creating a highly evolved DevOps organization
Tags: culture, devops
Published: 2021-11-08 17:02:54

---
title: Cultural aspects of creating a highly evolved DevOps organization
published: true
date: 2021-11-02 17:00:03 UTC
tags: culture, devops
canonical_url: https://www.armory.io/blog/cultural-aspects-of-creating-a-highly-evolved-devops-organization/
---

<center><a href="https://resources.armory.io/webinars/cultural-aspects-of-creating-a-highly-evolved-devops-organization">
<img alt="Cultural aspects of creating a highly evolved DevOps organization" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je0gj9d5ijhouerym425.png">
</a></center>  
Join Armory for a roundtable discussion with DevOps leaders to examine the impact that company and team culture have on DevOps adoption rates. 

Following in the footsteps of [Puppet’s 2021 State of DevOps report](https://puppet.com/resources/report/2021-state-of-devops-report?ls=Outbound&lsd=Paid-Search&cid=7016f000001tqfOAAQ&utm_medium=paid-search&utm_campaign=FY22_AMER_All_DEMAND_SER_GDN_State_of_Devops_2021&utm_source=google&gclid=Cj0KCQjww4OMBhCUARIsAILndv4IeH4Z5YK9pJ56kICnG_Mrfta0ZtCU2WCSuJQ60DP8u6l3EBsKtHwaAg3ZEALw_wcB), Armory’s Thomas McGonagle sat down for a discussion with  
• James Bland Global Tech Lead — DevOps, AWS,  
• Margaret Francis, COO & President, Armory, and  
• Nigel Kersten, Field CTO, Puppet

to examine the myriad factors that affect a company’s success in adopting DevOps. This talk was born from some of the key findings of Puppet’s report. In light of Puppet’s finding that “cultural blockers are keeping mid-[DevOps-]evolution firms stuck in the middle,” we wanted to get out a magnifying glass to better understand the cultural differences that make certain companies great and keep the rest from reaching peak DevOps adoption.

We hope you enjoy this topic, which covers a wide range of topics, including team organization principles, securing executive buy-in, diversity & inclusion, and various tips from each of the speakers’ companies. Enjoy and please engage with us to share your thoughts!

<center><strong><a href="https://resources.armory.io/webinars/cultural-aspects-of-creating-a-highly-evolved-devops-organization">WATCH NOW</a></strong></center>



The post [Cultural aspects of creating a highly evolved DevOps organization](https://www.armory.io/blog/cultural-aspects-of-creating-a-highly-evolved-devops-organization/) appeared first on [Armory](https://www.armory.io).
Manual install of Ceph part 1 - Cluster backbone
Published: 2021-11-02 16:56:00

---
title: Manual install of Ceph part 1 - Cluster backbone
published: true
description: We go though how to manually install a ceph cluster. A manual installation gives you a better overview of how ceph works and we will talk about different concepts that is used when running a cluster.
tags:
cover_image: https://i.ytimg.com/vi/LxDQyFWDNHI/maxresdefault.jpg
---

{% youtube LxDQyFWDNHI %}

We go though how to manually install a ceph cluster. A manual installation gives you a better overview of how ceph works and we will talk about different concepts that is used when running a cluster.
Kotlin for Server-Side
Tags: todayilearned, kotlin, webservice, backend
Published: 2021-11-02 16:19:27

With **Kotlin**, we can create different applications for different platforms. Server-side applications are no exception. Similarly to Java, Kotlin can be used to set up and run server side applications. Several frameworks like **Spark** and **Spring** which is used with Java also have support for Kotlin. I will show you four of them as we proceed. But first;

###Ktor###
Ktor (pronounced Kay-tor) is an asynchronous open source framework for creating micro services and web applications. It was developed with Kotlin by Jetbrains. The framework is lightweight and has a great support for coroutines and KMM (Kotlin Multi Platform).

####Four frameworks for server-side development with Kotlin ####
1. **Spring Boot:** This framework is widely used for creating stand-alone Spring Based Applications. Applications created with Spring Boot are of large-scale, production-grade, while you just need to trigger the run button.

2. **Javalin:** This framework is referred to as the most lightweight for Kotlin and Java server-side development. Javalin supports network configuration components such as Web Sockets, HTTP2 and async requests and so on. Javalin was initiated as a clone of Java. Although it was not anticipated by its developers, still Javalin emerged into a wider framework. It was moulded into a ground-up rewrite, with reference to the JavaScript framework koa.js.

3. **Spark:** Spark is one of the earliest expressive Kotlin or Java web framework built for rapid development. It can also be used in higher-level Kotlin development. It is not so popular. Spark is not so trusted with respect to micro-services.

4. **Vert.X:** Just like Java and Kotlin, Vert.X is an ecosystem used for building reactive applications in different programming languages. Vert.X comes with a powerful set of tools. However, it is not advisable for everyone. It comes with detailed documentation and is thoroughly compatible with Kotlin libraries. It creates reactive Web applications for the Java Virtual Machine.

###Why Ktor ?###
It is a very lightweight framework that reduces the effort required to create web applications in Kotlin. It doesn’t manipulate the underlying technologies of a project and is compatible with most of them, with very rare exceptions.

It is highly reliable, as it is a product of the Kotlin team, itself. It allows developers to rapidly create both, client and server-side applications that target multiple platforms. Ktor exploits Kotlin Coroutines for providing high scalability and offers an efficient and idiomatic API for developers.

It works on a minimum memory footprint and comes in as a lightweight thread. It is analogous to Javalin, it is also a real micro-framework plus it's simplicity. Left to me, I'd say it's the most suitable for prototyping.
Do we have to deal with too much complexity?
Tags: watercooler, discuss, complexity
Published: 2021-11-02 16:08:52

---
title: Do we have to deal with too much complexity?
tags: #watercooler #discuss #complexity
published: true
---

I've been coding for 10+ years professionally (20 as a hobby) and something strikes me hard: it seems that our job gets more and more complex.

To be a software engineer, we need to know how databases work, trendy programming languages, the 39020 services proposed by the cloud, containerization and orchestration (docker & kubernetes), the command line, algorithms, good practices... the list goes on. On top, most opinions about software development are just that: opinions. Nobody really agree, we just speak forever about what to do without empirical arguments. 

Is it possible nowadays to have one server, put a monolith on it, and maintain it as long as possible?

Is it possible to bring back simplicity in this ocean of tools, practices, workflow, and opinions?
CSS Pseudo Elements
Tags: css, webdev, beginners, 100daysofcode
Published: 2021-11-02 16:00:58

Hey friend, are you finding CSS pseudo-elements difficult?
No worries, I was also finding it difficult when I was new to this CSS. In this doc I will be explaining you `CSS pseudo-elements` in a very easy manner. So lets start,
Suppose I have given you a task to design only the first letter of a word in your `HTML` page. How will you do this? One will say that okay I will apply a span tag to that letter, and then I will style it. But my friend its 2021 are you thinking that is it a good practice. At the end it's a single word then why will you apply `<span>` tag.

Right?

Here comes the role of this `pseudo-elements`. Pseudo-elements is used to customize any specific part of any element.
Till now you have understood that okay **a CSS pseudo-element is used to style specified parts of an element**. But I you don't know how to do that. 
Before jumping into that let me explain you the different types of *CSS pseudo-elements* present.

There are majorly 6 pseudo-elements available and they are:
- ::before
- ::after
- ::first-letter
- ::first-line
- ::marker
- ::selection

 Now, let just discuss them one by one.

- **::before**
```
p::before{
   content: 'Hello world';
   color: blue;
}
```
So, before is used to add a content before any class or element. In the above written example `Hello world` will be embedded before the paragraph with blue color. Now you can customize it according to your choice.

- **::after**
There is no difference in `::before` and `::after` but as their name suggests before adds content before any element while after will embed it after the element.

- **::first-letter**
```
p::first-letter{
   color: blue;
}
```
It is used customize the first letter of any element as we have discussed in the example.

- **::first-line**
Again there is no difference between ::first-line and ::first-letter but as their name is suggesting it is used to customize the first line of any element.

- **::marker**
The marker is used to style the markers of the list item.

- **::selection**
Honestly talking this is my favourite pseudo-element, as it helps to customize the area that has been selected/high-lighted by the user on the dom.
Example speaks: means by default if you high-light any text on the browser the background color changes to blue, but now you customize it by your own. Isn't it amazing. I think you will agree with me.

So, this is was all about the pseudo-elements, hope you liked it and get some new knowledge. 
Thank you!
1 line of code: How to get the longest string of an Array
Tags: javascript, webdev, performance, codequality
Published: 2021-11-02 15:48:56

```javascript
const longestString = arr => arr.reduce((prev, curr) => prev.length > curr.length ? prev : curr);
```
Returns the longest string entry of an Array of strings.

---
## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---
Firefox Developer on Linux
Tags: firefox, linux, developer, browser
Published: 2021-11-02 15:25:26

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/firefox-developer-no-linux-71a0295641a8)

Firefox is one of the best open source browsers. Developed and maintained by Mozilla, it offers a simple interface and support for various plugins and extensions.

> Firefox Developer Edition is the extremely fast browser that offers cutting-edge development tools and latest features

## Download

Para fazer o download do browser, acesse o link abaixo

https://www.mozilla.org/en-US/firefox/developer/

When downloading comes a compressed file, by default a shortcut will not be created as it is just an extraction.

## Creating the icon

For the shortcut to be created follow the steps below.

* First extract the file into an easily accessible folder, in my case I like to put third-party programs in the `/opt` folder

```shell
sudo tar -jxvf firefox-94.0b9.tar.bz2 -C /opt/
```

* Create a shortcut to make the program easier to run;

```shell
sudo ln -sf /opt/firefox-developer/firefox /usr/bin/firefox-developer
```

* Open the text editor and paste the code below

```shell
[Desktop Entry]
Name=Firefox Developer
GenericName=Firefox Developer Edition
Exec=/opt/firefox-developer/firefox
Terminal=false
Icon=/opt/firefox-developer/browser/chrome/icons/default/default128.png
Type=Application
Categories=Application;Network;X-Developer;
Comment=Firefox Developer Edition Web Browser.
```

* Save the file with the name of firefox-developer.desktop
* Now open the terminal and enter the commands below.

```shell
sudo chmod +x firefox-developer.desktopsudo mv firefox-developer.desktop /usr/share/applications
```

* (optional) steps 3,4 and 5 summarized in one command.

```shell
echo -e '
[Desktop Entry]
Name=Firefox Developer
GenericName=Firefox Developer Edition
Exec=/opt/firefox-developer/firefox
Terminal=false
Icon=/opt/firefox-developer/browser/chrome/icons/default/default128.png
Type=Application
Categories=Application;Network;X-Developer;
Comment=Firefox Developer Edition Web Browser.
' | sudo tee /usr/share/applications/firefox-developer.desktop
```

Now just look in the menu or type `firefox-developer` in the terminal.

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊
Implementation Of Stacks Using Array In JAVA
Tags: java, database, beginners, programming
Published: 2021-11-02 15:20:58

# Statement 
> I created an Stack using array and created its Three Basic operations i.e. PUSH , POP and Top.<br>
where PUSH is insertion operation.<br> POP is deletion operation. <br> Top just returns variable at top of stack. <br> I also added Logic of "Overflow" and "Underflow" state with some exception handling.
The code is explained in details using comments .

**To Tinker the inputs and check the operations**  [Click Here](https://www.jdoodle.com/a/3XbY)

## Code
```
import java.util.*;

public class Template {
	static int max_size;
	static int top ;
	int temp;
	static int arr[];
public void Stack(int size) {
		 arr = new int[size];
		 max_size = arr.length;
		 top = -1;
	}
	
	public boolean empty() {          //checking if stack is empty .
		return temp  == -1;
	}
	
	public boolean full() {  //checking if stack is full .
		return top + 1 == max_size;
	}
	
	public void push(int Ip) {//PUSH operation
		if(top <= max_size) {
		top++;
		}
		try {             	 			//bit of exception handling while insertion/PUSH operation
			if(top >max_size) {
				throw new ArrayIndexOutOfBoundsException();       
			}
			else if(empty()|| top<=max_size) {
			arr[top] = Ip; 
			}
		} catch (ArrayIndexOutOfBoundsException e) {
			System.out.println("Stack overflow");
			top--;
		}	
	}
	
	
	public void pop() {   // POP 
		 temp = top;
	if(top > -1) {           // stop top from further decrementing if already -1,
		top--;				// if not it will interfere with push operation.
		}else { temp--;}		
	try {						//bit of exception handling while deletion/POP operation
		if(temp < -1) throw new ArrayIndexOutOfBoundsException();
	}catch (ArrayIndexOutOfBoundsException e) {
			System.out.println("Stack underflow");	
	
	}
	}

	public void Top()
	{
		 System.out.println(arr[top] +" at index "+ top);
	}


    public static void main(String[] args)
    {
    	
    	Template t = new Template();
    	t.Stack(4);
    	t.push(6);
    	t.Top(); // <---- Return Top variable of Stack
    	t.pop(); // <--- 6 is removed from the stack so stack will be empty
    	t.pop(); // <-- so removing element from empty stack will return "UNDERFLOW"
    	t.push(101);
    	t.Top(); // <---- Return Top variable of Stack
    	t.push(10);
    	t.Top(); // <---- Return Top variable of Stack
    	t.push(112);   
    	t.Top();    // <---- Return Top variable of Stack
    	t.push(14); //<----- stack will be full at this point
    	t.Top();
    	t.push(146); // so if you push anything it will print "OVERFLOW"
    	t.push(110);
    	t.Top(); // <---- Return Top variable of Stack
    }
    
}
```
Small Breaks, Big Productivity
Tags: productivity, programming, motivation
Published: 2021-11-02 15:15:06

## It's In The Details

All developers know programming is a detail oriented task. Syntax errors, typos, incorrect logic, can plague developers at any experience level. I was told to test early and often to help mitigate this as you code. I still strongly believe this is true. Each one of these issues be mentally taxing on their own, exhausting all together. You can prepare yourself by studying proper syntax, approach code with a TDD mindset, and by learning and adhering to, best practices. These are arguably essential to moving forward as a developer and again I was prepared with sound advice for this. However one thing I was not told regularly was how important it was to take breaks. 

I don't mean a lunch break either. I mean regular intervals of 10-15 minutes of doing something else not related to a screen. I have found that when you are coding for long stretches of time, say 8-12 hours (any longer is unproductive IMHO), your brain will need to reset. I try to do this everyday, and I will admit that I am not the best at following a regimented schedule but I do try. Every hour that I work I try to take a 10-15 minute break. Some methods are different like the [Pomodoro Technique](https://en.wikipedia.org/wiki/Pomodoro_Technique) but whether you choose your own methods or a tested time boxing technique, it is about _increasing_ your productivity.

This may seem counter intuitive, but it has been proven time and time again that you work better with rest. I find these breaks especially helpful when I have been stuck on a particularly tough issue, or when intensively studying something new. These breaks can be anything you like that allows your brain to take a moment, but I enjoy the following:

- Taking my dog for a walk
- Light stretching and deep breathing
- Listening to relaxing music
- Going for a quick bike ride
- Read a book(non-technical)

You could also do something productive, like dishes or laundry, which some of the time I do. Ideally, you want this to be relaxing so just make sure whatever your method make sure you are calming yourself and resting your brain.

That's it for now, if you don't do this yet, give it a try and let me know what you think. Thanks for reading, and happy coding.
small-events-swoft 1.0
Tags: showdev, php, swoft
Published: 2021-11-02 15:14:00

I've just release the first stable version of small-events-swoft.

It allow you to send events across a message broker (For now only RabbitMq) and dispatch them to other applications.

The listeners forward events to native Swoft events system.

Composer package : sebk/small-events-swoft
GitHub repository : https://github.com/sebk69/small-events-swoft
How to configure your WSL resources?
Tags: linux, devjournal, wsl
Published: 2021-11-02 14:59:54

In this simple tutorial, I will be explaining how to configure your windows subsystem for Linux efficiently and optimize your WSL performance when you're running applications through them.

# Why WSL firstly?
 -  Everyone has widespread access to windows but they may or maynot be savvy enough to run their favorite flavour of linux due to various constraints
 - WSL2 really makes life easy for those devs who can't access linux through a cloud provider or locally run it on their devices.
 - WSL has support for various distros like Debian, Arch and Ubuntu.

Now coming to the interesting part, windows has all access to the CPU and memory resources in your device and it is built in a way which will optimize the resource utilization but how do you limit your linux subsystem, let  us say you'd like to manipulate the configuration to suit your needs the best, then you should follow these steps.

## Step one:
Shut your current running instance of WSL using this command
  ```ps
wsl --shutdown
```
**Run this command through powershell as administrator**

## Step Two:
Create a configuration file for WSL on your user profile directory

```ps
notepad "$env:USERPROFILE\.wslconfig"
```

## Step Three:

<u> **This is the most important step in this project, so please follow carefully** </u>

The following parameters define their corresponding resources:
  - _CPU_  = > cores dedicated to WSL
  - _Memory_  = > RAM allocated to WSL
  - _AutoMount_  = > Mount your default NTFS drive to your subsystem
  - _Boot_ => defines your booting options for services
  - _Kernel_  = > Custom kernel for linux
  - _LocalhostForwarding_  = > for port-forwarding your applications running on localhost

My configuration for CPU and memory:
```ps
[wsl2]
memory=9GB  
processors=4
```
 
This is how you can configure your resources for WSL 😀. Feel free to leave some comments down below⬇️.

You can read this [document](https://docs.microsoft.com/en-us/windows/wsl/wsl-config) for the reference