teleren/devto huggingface dataset:
7 Ways to Escape CSS Hell
Tags: css, webdev, beginners, tutorial
Published: 2021-10-12 00:23:51

Ever have this happen? lol

![Funny meme about centering with css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r2aymznlg20174dp1kn.png)

Yeah, me too.

Here are the 7 ways to completely center whatever you want with CSS.

## `1. text-align: center;`

This works only on `display: inline` & `display: inline-block` elements. Note also that it must be applied to the parent element.

![Centering images and text with text-align: center css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3s2cf83jcl80t1bvkvj.png)

## `2. margin: 0 auto;`

This works only on `display: block` elements. And the element must have a width. 

You can also specify just `margin-left: auto` and `margin-right: auto` if you want margins on the top or bottom.

![Centering elements inside a div with margin: 0 auto css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qn1ukzmjdwlwlfx0z7q.png)

## `3. vertical-align: middle;`

This works only on `display: inline` & `display: inline-block` elements.

![Centering elements inside a list with vertical-align: middle css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izjek6gpt9z9w44l54ov.png)

## `4. float: center;`

lol (You cannot center floated elements.)

![It's impossible to both horizontally and vertically center an element with float: center css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maojxdh727cnyhqse4aq.png)

## `5. Centering absolute`

When this comes up, use `transform` and `50%` coordinates to center an absolutely positioned element.

![Centering child divs of a position: relative parent div with css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ia7j5deozist5z6wr09.png)

## `6. Centering with flexbox`

Flexbox has a bunch of different alignment classes that are always applied to the parent. This here will be completely centered within the box.

![Centering elements inside a div with flexbox css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2jejajip6lb2707df4s.png)

## `7. the one I forgot ;-)`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibn1xbzzst34jfvmvp9n.png)
Power Plant Equipment Suppliers
Tags: beginners, startup, webdev
Published: 2021-10-12 06:41:05

Skv Energy Services Private Limited power plant equipment or spare suppliers provide Boiler Spare parts , ash handling spares , fuel handling spares and hardware general items with the best quality you can check the  Boiler Spare parts list and all other items on our website  <p><a href="https://www.skvenergyservices.com/">Power Plant Equipment Suppliers</a></p>
Memory Management in Java | Heap vs Stack
Tags: heap, stack, memory, java
Published: 2021-10-31 11:41:08

In Java, a variable can either hold a primitive type or a reference of an object. This holds true for all cases. Primitive types are stored in stack and objects are stored in heap. To store objects, it needs to maintain their structure.

![Variable holds either a primitive type or the reference of an object
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53k0grjdlezurvapcl5n.png)

We’ve always heard that a variable can be passed by value or passed by reference. But, essentially, in Java, there is no such thing as pass-by-reference. It always passes variables by value. But, you need to see what the variable holds. If it holds primitive type then we call it to pass by value or in the case of the reference of an object, we call it to pass by reference. However, it always passes the copy of whatever it holds.


Remember that whenever a variable is passed, its copy will be passed. And, if the variable contains the pointer of an object then the copy will also contain the same pointer. So, if we change anything in the referred object, it will also reflect all variables that hold the same pointer.


##Final Variables and Const Correctness


Final variables in java are not essentially final. I know we cannot change the value assigned to the variable but if you assign a reference to an object. Then, we can change the referred object without changing the reference which the final variable holds. This is against the concept of const correctness.


Const correctness is basically the concept that if you pass a final variable to a function and the function is able to modify the state of the referred object. Then, the language lacks const correctness.
How to Survive as Programmer ?
Published: 2021-10-12 17:38:44

Hello People,
I am Ganesh currently pursuing graduation in computer science engineering during my programing journey I questioning my self How to survive as programmer? because programming is  not for everyone some people like to code or someone not but as computer engineer you have to code and in this entire process I found answer. If you want to survive as programmer then you must explore yourself in  different tech of domains like web development software development applications and designing part also if you explore in various tech,  then at the some point you can find your interest that actually help you for development and your career. Then you can easily survive as programmer Developer Designer whatever you want to be...!!
Python - Input and Output
Tags: python, tutorial, beginners, programming
Published: 2021-10-12 18:24:21

[Subscribe to our Youtube Channel To Learn Free Python Course and More](https://www.youtube.com/channel/UCQ8FDc6mi2BxxUSz8zcsy-A)

**Input and Output**
In this section, we will learn about how to take input and give output in Python. Till now we were writing static programs, it means that we were not taking any input from the user.

But in the real world, A developer often interacts with the user, in order to get data or show the user some result. For example, you are making a program which takes a name as an input from the user and shows a greeting message with the user’s name on the screen. For this program, you need to know two things. First, how to take input from the user and second is how to show output. 

Python provides lots of built-in functions. We will discuss Functions in detail later in the course. But for now, Functions are a reusable unit of code that is designed to perform single or related actions.  You have already seen a **print()** function that is used to show output. Similarly, there is built-in function **input()** for taking input from the user.
How to Take Input from the User

**How to Take Input from the User**
We will use Python’s built-in function **input()** for taking input from the user. Let’s see how it works.
Input takes a string as an optional parameter. Usually it's a description of what input you want to take from the user. See the below example.
```
# get the name from a user
name = input('Enter your name : ') 
Enter your name : 
```
When you try to run this program the following thing will happen:
- When you execute input() function, the program will stop until the user provides the required input.
- Once user enters the name it will save it in the variable **name.**
**How To Show Output**
Now we have the user input that we can show on the input. To show input on the screen we use Python’s built-in function print() is used
- In print function, you can pass multiple objects in the print functions
```
# print() function

print(2, 'helo', 3, True)
# Output: 2 hello 3 True

a = 2,

print('a =', a)
# Output
# a = 2
```
Using **sep** and **end** parameter in print function.
**sep**
	The sep parameter is used to separate objects. Default value is a space character(‘ ‘).
```
# sep 

print(2, 'Hello', 3, True, sep=', ')
# Output: 2, Hello, 3, True
```
**end**
The end parameter is printed at the last.
```
# end

a = 'Hello world'
print('a =', a, end='!')
# Output: a = Hello world!

print('code =', 3, sep='0', end='0')
# output: code =030
```
How to setup HPC cluster on AWS using AWS Parallel Cluster 2.0 | With Monitoring tool Grafana
Tags: aws, hpc, tutorial, awshpc
Published: 2021-10-14 06:38:54

In this tutorial, you will learn about High-performance computing using AWS. You will design 3 nodes cluster ( 1  master node, 2 compute nodes). Once you will set up a cluster then you will integrate the Grafana tool to monitor the cluster resources. Grafana is multi-platform open-source analytics and interactive visualization web application. Once the cluster and monitoring tool will be done, you will execute your first HPC job ( prime number calculation ).  

1. Setup cluster of 3 nodes ( 1 Master node, 2 Compute node) 
2. Setup Grafana for monitoring cluster resources 
3. Run you first HPC job ( Prime number calculation)
  
  

See complete Tutorial on YouTube
For more reference

{% youtube iHuu1mdWZYQ  %}
How to Handle Required Inputs in Angular
Tags: typescript, angular, javascript, decorators
Published: 2021-10-13 16:08:17

---
title: How to Handle Required Inputs in Angular
published: true
date: 2021-09-02 09:40:40 UTC
tags: typescript,angular,javascript,decorators
canonical_url: https://medium.com/@redin.gaetan/angular-for-everyone-required-inputs-ee916b2feaae
---

#### Handling Required Inputs in Angular Directive and Component.

![](https://cdn-images-1.medium.com/max/1024/1*r33XIdq-Ur8Y87CzrzilfQ.jpeg)

Hey, this article presents tips for handling required inputs in a Directive or a Component.

The classic approach could be implementing the ngOnInit method and throwing errors when the input value is not set.

```
public ngOnInit(): void {
  if (this.myInput === undefined) {
    throw new Error('input myInput is required for MyDirective');
  }
}
```

But I don’t want to have to write this for all my required properties… So yep, I’m a bit lazy … ^^ But the main goal is to **simplify the code**.

I recently found an interesting way to do it just once!

Do you know the concept of Typescript [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)?

### V1 class decorator

That’s what I would like to code:

```
@Directive(...)
@RequiredInputs('input1', 'input2')
export class MyDirective {
  @Input()
  public input1!: unknown;

  @Input()
  public input2!: unknown;

  @Input()
  public input3Optional ?: unknown;
}
```

Here’s how to implement the decorator which allows doing that:

{% gist https://gist.github.com/GaetanRdn/fce8417d59a04638c219ca351745ddf2 %}

Now you will get an error for input1 and input2 if it’s not set on the directive using:

```
<span myDirective></span> // throw Error
<span myDirective input1="1"></span> // throw Error
<span myDirective input1="1" input2="toto"></span> // No Error
```

As it’s said in comment by a reader you also can handle this with using the compoent/directive’s selector like this:

```
@Directive({
  selector: '[myDirective][input1][input2]',
  ...
})
```

But the error message will not be consistent. The directive will not be recognized by Angular if you do it like this and that’s all. Whereas here with the decorator you will have an explicit message for the case. So yes there are many ways to handle it, just choose your prefer way.

### V2 property decorator

Here’s the code:

{% gist https://gist.github.com/GaetanRdn/de66053b7a08831966b9ec7a6ba4c6d3 %}

You juste have to use it like this:

```
@Component(...)
class MyComponent {
  @Input()
  @Required()
  public myProperty: unknown;

  ...
}
```

Thanks for reading.

What about you? How do you handle this use case? Please tell me.

### Learn More

- [A decorator to coerce Boolean properties](https://medium.com/@redin.gaetan/angular-un-decorator-pour-forcer-le-type-bool%C3%A9en-%C3%A0-une-propri%C3%A9t%C3%A9-32931c79163)
- [TypeScript Function Overloads](https://dev.to/gaetanrdn/typescript-function-overloads-1eeo)
- [Angular for everyone: All about it](https://link.medium.com/SXPQgRn7xjb)
PrabhuPay WooCommerce Plugin for WordPress
Tags: wordpress, programming
Published: 2021-10-13 18:10:37

PrabhuPAY is a mobile wallet with mobile based payment solution under Prabhu Technology Pvt. Ltd. 

Now PrabhyPay plugin is available for WooCommerce. Get the plugin from  the following github link
https://github.com/madhav-dhungana/prabhu-pay-woocommerce
Divtober Day 14: Fancy
Tags: codepen, divtober, css, showdev
Published: 2021-10-14 11:59:44

---
title: Divtober Day 14: Fancy
description: Cartoon of a fancy-looking gentleman done with CSS and a single HTML element.
published: true
tags: codepen,divtober,css,showdev
series: divtober
---

The word of the day is "fancy"... so here's a cartoon of a fancy-looking British gentleman with a hat, a monocle, and an umbrella:

{% codepen https://codepen.io/alvaromontoro/pen/rNzOGMa %}

----

There's a second element (not used in the drawing) with a link to a [YouTube video of how it was coded](https://youtu.be/Giq9h88lVnc) (although it is a bit tough to follow with things "jumping around"):

{% youtube Giq9h88lVnc %}

*After recording the video, I changed the code a little. The image will look the same, but the code is a bit different (using the short notation) as mentioned in the comments below.

----

I did a quick second version with the man holding a cup of tea with the pinkie out:

{% codepen https://codepen.io/alvaromontoro/pen/RwZPXRa %}
Startup Landing page in sveltekit, svelte, TailwindCSS
Published: 2021-10-14 11:02:09

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yd0o53v9mcw6xlx0ci7.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp8l4i7nm29r59r8zpbs.png)


I made a Startup landing page in sveltekit and tailwind CSS for a competition.

###DEMO VIDEO: https://youtu.be/_7t4XKAwKaw
###LIVE DEMO URL: https://linuxify-startup.vercel.app/ 
###SOURCE CODE: https://rebrand.ly/startup_website

#**Features**

1. SSR Enabled
2. Highly Editable nothing is hardcoded everything in the src/assets/details.js file. Even the website name is editable.
3. Size of website is just 11.803KB
4. Fast Website
User-informed load tests
Tags: testing, performance, usability, script
Published: 2021-10-15 12:57:25

June this year I joined k6. A week later I heard that we were being acquired by Grafana Labs. I was positively thrilled, I know Grafana as a great open source citizen. Anyway, k6 is in the performance space, and although I have some experience with testing (usability and accessibility testing), I've never really touched load testing until now.
​
There was (and is) certainly a lot to learn, and I can recommend checking out Nicole van der Hoeven's excellent videos on how to [plan](https://www.youtube.com/watch?v=EFqBWqo3IzY)(1) [realistic load tests](https://www.youtube.com/watch?v=Xz6drbGuUdI)(2).
​
One thing that struck me as odd though is that tools (like k6) that offer a [browser recorder](https://k6.io/docs/test-authoring/recording-a-session/browser-recorder/), promote it as a tool for testers, or other members of the QA team. As mentioned before I've done some usability testing and certainly so has my dad and he won't shut up about it. Now I don't often (or: never) listen to him, let alone quote him, but he says that once you've participated in a usability test, you're now a usability expert. What I think he means by that is that you know what's the expected outcome, and you can never look at the same product with fresh eyes again.
​
Having engineers potentially use the browser extension and have that be the foundation of your test script, for me, is like having the developer in the room while you're asking a potential user to perform an action. You can **hear** them think "how do they not understand how navigation works?!". As a side note: I sent engineers out of the room when they got fidgety or started to influence the user.
​
I guess what I'm trying to say is that I would expect to see teams invite users to perform a task and record their session(s). Better yet: different tasks (scenarios / user paths), combine those in your script as concurrent requests, and sprinkle some dynamic think time (`rsleep();`) on top.
​
And empty the cache after every session, to not muddy the results.
​
But of course that is usability testing, maybe perf or load testing really "just" needs to verify business requirements. While I don't think experienced testers would only test for the "happy path", I think others might. Especially as passing the test is a mandatory step in their build pipeline.
​
Please excuse the stream of consciousness, and you're hereby invited to yell at me in the comments when you think I'm totally off.
iPhone 13 Previews
Published: 2021-10-29 10:37:04

Found iPhone 13 previews on the accounts of https://www.pinterest.com/anddasjdsa/ on Pinterest and https://dribbble.com/andddrew85 on Dribbble. 

iPhone 13-series device previews are located on a board called Devices https://www.pinterest.com/anddasjdsa/devices/:
* [iPhone 13 Mini](https://www.pinterest.com/pin/341992165463626915/)
* [iPhone 13](https://www.pinterest.com/pin/341992165463626917/)
* [iPhone 13 Pro](https://www.pinterest.com/pin/341992165463626919/)
* [iPhone 13 Pro Max](https://www.pinterest.com/pin/341992165463626921/)

iPhone 13-series device previews on Dribbble:
* [iPhone 13 Mini](https://dribbble.com/shots/16502037-iPhone-13-Mini-viewport-size-screen-size-CSS-Media-Query)
* [iPhone 13](https://dribbble.com/shots/16502125-iPhone-13-viewport-size-screen-size-CSS-Media-Query)
* [iPhone 13 Pro](https://dribbble.com/shots/16502155-iPhone-13-Pro-viewport-size-screen-size-CSS-Media-Query)
* [iPhone 13 Pro Max](https://dribbble.com/shots/16502187-iPhone-13-Pro-Max-viewport-size-screen-size-CSS-Media-Query).

There's also a blog post about [iPhone 13-series viewports, resolution, and screen sizes](https://blisk.hashnode.dev/iphone-13-series-viewports-resolution-and-screen-sizes) on a blog https://blisk.hashnode.dev/. [iPhone 12-series viewports, resolution, and screen sizes](https://blisk.hashnode.dev/iphone-12-series-viewports-resolution-and-screen-sizes)

There's a [Twitter account](https://twitter.com/andrii_bakirov)  that covers device viewports, resolutions, and screen sizes:
* [iPhone 13 Pro Max](https://twitter.com/andrii_bakirov/status/1440205880792739841)
* [iPhone 13 Pro](https://twitter.com/andrii_bakirov/status/1440205799029047297)
* [iPhone 13](https://twitter.com/andrii_bakirov/status/1440205734944247808)
* [iPhone 13 Mini](https://twitter.com/andrii_bakirov/status/1440205633689587717)

Mobile and responsive testing boards:
* GitKraken board for Mobile testing: https://app.gitkraken.com/glo/board/YYAGtEIdUAlyCam8
* GitKraken board for Responsive testing: https://app.gitkraken.com/glo/board/YYAG1kIdUAlyCaoN
* Trello board for Mobile testing: https://trello.com/b/9nRL3o1Q/mobile-testing-https-bliskio
* Trello board for Responsive testing: https://trello.com/b/Puuu5XwU/responsive-mobile-testing-https-bliskio
Exactly How to Check Wifi Password Windows 10?
Published: 2021-12-28 06:57:16

It has been said that Sometimes some of the people who generally forget the passwords of the wifi or face a great level of the difficulty in remembering the same try to keep those passwords safe by writing those down on the notebook or online in the notes app in the smartphone, but if you are not one of them who write down all the passwords. Then you must ask the question **[how to check wifi password windows 10](https://www.designdare.com/how-to-find-wifi-password-on-windows-10/)**? And trust me the answer for the question How to find wifi password on windows 10 is actually very simple as well as easy. 

Here in the article there are some proper steps to know the how to check wifi password windows 10 in the better way and easily that can be done.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvpjw4zfhqe0ryxm9ufn.jpg)

**Step: 1** click on the magnifying glass that is available on the left corner of the screen at the extreme bottom.

**Step: 2** the personal computer will be opened where the person will get the chance to edit the wifi passwords or we can say that the how to check wifi password windows 10.

**Step: 3** now in the sharing centre you are now required to choose one particular network among all the other available network options. 

**Step: 4** now to know about the how to check wifi password windows 10 select one network and add the name for the same. 

**Step: 5** then a person is required to select the wireless properties on the screen of the P.C

**Step: 6** now you are required to go on the securities tab on the screen of the P.C. 

**Step: 7** go on the connections tab, which is easily visible on the top of the screen on the computer.

**Step: 8** entering the password there will be very beneficial as well as helpful in completing the process. 

However, as per our knowledge there is a complete different as well as unique process that is required to be followed in order to know as well as understand the complete process of the how to check or we can also say that how to exactly find the wifi password in the windows 10 laptop or personal computer. Therefore, to know more you can search with the same name as well, which means you can type the how to check or find the wifi password in the windows 10 laptop or personal computer as the search term on the web browser on internet.
Imposter Syndrome
Tags: beginners, webdev, programming, codenewbie
Published: 2021-10-30 03:55:46

## Healthy Imagination
Not sure why developers struggle feeling like fakes. All people pretend till they become what they imagine. If no creative action is taking then it’s just fantasy.

### Willingness
The dedication developers put into understanding abstract computer science concepts is so admirable. From recognizing patterns to abstracting away implementations of interfaces for returning possible values. People capable of explaining their thoughts and ideas in syntax foreign to the common person.

## Definitely Real
We are not imposters. There’s nothing delusional about taking actionable advances to become the idea you hold in your head about yourself.

### Change
Expressing the concerns, worries, and fears along the way makes me believe your anything but an imposter.