teleren/devto huggingface dataset:
Best ways to center objects in CSS (Horizontally and Vertically )
Tags: css, frontend, webdev, html
Published: 2021-02-01 13:48:02

In this article, I'm going to show you how you can center your objects horizontally and vertically in CSS in three different ways.

####Number one:
```CSS
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
```
####Number two:
> This way is not supported by IE
```CSS
.parent {
  display: grid;
  place-items: center;
}
```
####Number three:
```CSS
.parent {
  position: relative;
}
.child {
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
}
```
####Number four:
> Mentioned by @mrdanielschwarz
```CSS
.parent {
  display: flex or grid;
  height: 100vh;
}
.child {
  margin: auto;
}
```


Which way you prefer and do you know other ways?
Screenshoteer - Makes web screenshots and mobile emulations from the command line.
Tags: github, puppeteer, node
Published: 2021-02-01 13:34:56

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

<p>Tool based on <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>. </p>

<h4>Installation </h4>

```shell
npm i -g screenshoteer
```
<p>You can use  screenshoteer like this:</p>

```shell
screenshoteer  --url https://www.example.com

or .html localy copy the url path from the browser

screenshoteer --url file:///Users/../index.html
screenshoteer --url file:///C:/Users/../Random-HTML-file.html
```

<p>And with the help of puppeteer(Headless Chrome) it will generate screenshot of the entire web page.</p>

<p>
Parameters:  


-h help  
--url web page url  
--emulate - emulate web device example: --emulate "iPhone 6"  
--fullpage - can be true or false. It will take screenshot of entire web page if is true. True is the default parameter.  
--pdf - generate additional pdf  
--w - width of the Web Page in px  
--h - height of the Web Page in px  
--waitfor - wait time for the page load in milliseconds  
--waitforselector - wait for the selector to appear in page
--el - css selector document.querySelector  
--auth - basic http authentication  
--no - exclude "image", "stylesheet", "script", "font"  
--click - example: ".selector>a" excellent way to close popups or to click some buttons on the page.  
--file - output file name (optional, otherwise based on page title and timestamp)  
--theme - switch to dark or light color theme  
--vd - Emulate vision deficiency 'achromatopsia', 'deuteranopia', 'protanopia', 'tritanopia', 'blurredVision', and 'none'
<p>

<h4>Examples: </h4>

```shell
screenshoteer  --url https://news.ycombinator.com --fullpage false

screenshoteer  --url https://www.reddit.com/r/nodejs --emulate "iPhone 7"

screenshoteer  --url https://www.nytimes.com  --emulate "Nexus 4"

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 800 --fullpage false

screenshoteer --url https://www.reddit.com/r/javascript/ --w 600 --h 0 --fullpage false

screenshoteer --url https://lobste.rs --pdf

screenshoteer --url https://lobste.rs --w 500

screenshoteer --url  https://news.ycombinator.com/item?id=18598672 --el ".fatitem"

screenshoteer --url  https://site.com --auth "username;password"

screenshoteer --url https://www.nytimes.com --no "image"

screenshoteer --url https://www.nytimes.com --no "script"

screenshoteer --url https://www.economist.com/ --click ".ribbon__close-button"

screenshoteer --url file:///Users/../index.html

screenshoteer --url https://www.slashdot.org --file /tmp/slashdot.png

screenshoteer --url https://mxb.dev/blog/color-theme-switcher/ --theme dark

screenshoteer --url https://news.ycombinator.com --vd blurredVision
```
Github: https://github.com/vladocar/screenshoteer
Explaining RSpec describe, context in 2 minutes
Tags: rspec, ruby, testing
Published: 2021-02-01 13:10:59

`describe` and `context` group related checks and set the structure of the test.

Structure is the skeleton of the test, reflecting its logic. Without structure, the test is difficult to read: the narrative jumps around, attention wanders, and searching for related checks is frustrating.

Without structure:
```ruby
it "#accessible_projects return all system projects when user is admin"
it "returns no projects when user is not admin"
it "returns user full name with email"
```

With structure:
```ruby
describe "#accessible_projects" do
  context "when user is admin" do
    it "returns all system projects"
  context "when user is NOT admin" do
    it "returns no projects"

describe "#user_name_with_email" do
  it "returns user full name with email in parens"
```

## When and what to use

I use `describe` for entities (who?, what?) and `context` for states (when?, if?, with what conditions?). It makes it easier to navigate possible situations and explore conditions.

```ruby
# Meh
context "associations"
context "#full_name"
describe "when user is admin"
describe "with valid params"

# Good
describe "associations"
describe "#full_name"
context "when user is admin"
context "with invalid params"
```

I start contexts with words when, if, with, given. If I see them in the test description, I pull them out:

```ruby
# Bad: condition, situation description
# (user is editor) is hard to notice
it "returns only published posts when user is not editor"
it "returns published and draft posts when user is editor"

# Good: the situation is explicitly stated in the context
context "when user is editor" do
  it "returns published and draft posts"

context "when user is NOT editor" do
  it "returns only published posts"
```
## Cheat sheet
```
describe <something>
context <when... / if... / with... / given...>
```
JS Test #1: Type conversion in JavaScript
Tags: programming, codenewbie, javascript, beginners
Published: 2021-02-01 13:17:13

A couple of months back, I've started posting colorful JavaScript code snippets that you can use to [check your JS skills](https://learn.coderslang.com/tags/js-test) on my blog. Every problem has the correct answer and explanation. But I strongly suggest you first try to solve it yourself. 

Every day in February I'm going to post a new JS test here on **Dev.to**. Follow, like, comment if it's something you're interested in.

Let's go 🚀!
![js-test](https://learn.coderslang.com/js-test-1.png)
What’s going to be printed to the console?

.

.

.

.

.

.

.

.

.

.

.

.

.

In the first line, we define the variable `str` and initialize it as a string with the value `1`.

In the second line, there are two typecasts, first `!str` gives us `false`, and then `+false` converts `boolean` into a number `0`.

Eventually, in the third line, the `typeof` operator looks up the current type of `str` which is `number`.

ANSWER: string `number` will be printed to the console

[Learn Full Stack JavaScript](https://js.coderslang.com)
Urdu Poetry for anyone Enjoy!!!
Tags: urdupoetry
Published: 2021-02-01 13:17:08

My name is Naveed and I am from Pakistan. One of my dreams was to write poetry. I have loved poetry since childhood. And so today my dream has come true. I have created a poetry site. All of you are requested to read it. https://poetryurdu.net/
https://write.as/2t3v29yx00mx726r.md
https://splice.com/PoetryUrdu
Daily Developer Jokes - Monday, Feb 1, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-01 13:00:13

---
title: "Daily Developer Jokes - Monday, Feb 1, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Feb%201%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b2d77d4.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What's the second movie about a database engineer called?

___A:___ The SQL.
 -->
Here i want to display a component based on category selection
Published: 2021-02-01 12:48:08

here i want to display the component based on category selection. If we enter a single family home in below category field then i want to display the 3rd component similar if we are entering other category then different component should display

<template id="step1" v-if="currentStep == 1">
    <input style="width: 93%;" type="text" class="vuepost_ad" 
    placeholder="Search your category"
    name="category" @change="onChange($event)"
    v-model="step1_category" maxlength="200" id="id_post_type" :rules="inputRules">
    <p>this is 3rd component</p>
    <button type="button" @click.prevent="stepsback(5)">Previous</button>
    <button type="button" @click.prevent="goToStep(6)">Next</button>
</template>

<template id="step2" v-if="currentStep == 2">
    <p>this is 4th component</p>
    <button type="button" @click.prevent="stepsback(5)">Previous</button>
    <button type="button" @click.prevent="goToStep(6)">Next</button>
</template>

<template id="step3" v-if="currentStep == 3">
    <p>this is 5th component</p>
    <button type="button" @click.prevent="stepsback(5)">Previous</button>
    <button type="button" @click.prevent="goToStep(6)">Next</button>
</template>

*vue.js*
Vue.component('step1', {
template: '#step1',
props: [
'currentStep',
'step1'
]
});

Vue.component('step2', {
template: '#step2',
props: [
'currentStep',
'step2'
]
});

Vue.component('step3', {
template: '#step3',
props: [
'currentStep',
'step3'
]
});

var app = new Vue({
el: '#app',
data: {
currentStep: 1,
step1: {
step1_category: '',
},
step2: {

},
step3: {
}
},
// By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and
// vue.js conflicted, delimiters helped here to solve the conflicts
delimiters: ["<%","%>"],
ready: function() {
console.log('ready');
},
// Here we have written vue.js methods for increment and decrement of next and previous steps
methods: {
goToStep: function(step) {
this.currentStep ++;
},
stepsback: function(step) {
this.currentStep --;
},

//here if i will enter a "Real Estate | Single Family Homes" then i want to display 3rd component that means if a select the above category then if i will click on next then third component should display
onChange(event) {
var category = event.target.value
if (category == "Real Estate | Single Family Homes"){
this.step3
console.log(a)

}
},
Prep For Interviews Like a PRO!
Tags: javascript, career, algorithms, webdev
Published: 2021-02-01 12:47:31

### 1. [Tech Interview Handbook](https://yangshun.github.io/tech-interview-handbook/)
> Handbook ordered based on every step of the interview process

![Tech Interview Handbook](https://dev-to-uploads.s3.amazonaws.com/i/8cflr3hlhnah9spu5o8m.png)<br/>

### 2. [JavaScript Algorithms](https://github.com/trekhleb/javascript-algorithms)
> All algorithms & data structures with JavaScript examples

![JavaScript Algorithms](https://dev-to-uploads.s3.amazonaws.com/i/hj5nceko0gi6k1hyjn44.png)<br/>

### 3. [Soft Skill Preparation](https://www.zippia.com/employer/behavioural-interview-questions/)
> To prepare for behavioral questions in interviews  

![Soft Skill Preparation](https://dev-to-uploads.s3.amazonaws.com/i/742f3myawqgbwyur142e.png)<br/>

### 4. [Asking Questions](https://medium.com/better-programming/105-questions-to-ask-a-company-during-your-tech-interview-2464864b3272)
> Good questions are important for highlighting your interest in the role & company

![Asking Questions](https://dev-to-uploads.s3.amazonaws.com/i/ha9q80hixax75xblkwkc.png)<br/>


Use some other resources? Do share in the comments!

<br/>
Connect with me : [Github](https://github.com/deyRupak) | [Tutoring](https://www.fiverr.com/share/V763ld) | [Freelance Web Dev](https://www.fiverr.com/share/Rld9Y8)
Tornando nossas mensagens mais inclusivas
Tags: powershell, tutorial, beginners
Published: 2021-02-01 12:40:05

Seguindo nosso post anterior [sobre como fazer o terminal falar](https://dev.to/msplatam/ensinando-o-terminal-a-falar-d2l), vamos melhorar nosso código para evitar a repetição de sempre colocar um **Write-Host** e o narrador com o mesmo texto. 

Para resolver isso, vamos criar uma pequena função.
Nela vamos receber o texto da mensagem, escrever ela na tela e utilizar o narrador para falar. 

Isso em código, fica assim: 
{% gist https://gist.github.com/IGDEXE/3b0658b3e7dd3dce69e377f6757bb03c %}

Para exemplificar o uso pratico disso, vamos aplicar ao MyGIT a versão atualizada dos retornos, ficando assim: 
{% gist https://gist.github.com/IGDEXE/15364638d15883a1bf670147f8e2e937 %}

Pronto, agora podemos deixar nosso script organizado e com os recursos de fala.
Laravel 8 with Fortify, Vue 2 and Tailwind CSS
Tags: laravel, fortify, vue, tailwindcss
Published: 2021-02-01 12:39:50

---
title: Laravel 8 with Fortify, Vue 2 and Tailwind CSS
published: true
description: Basic setup Laravel 8 + Fortify + Tailwind + Vue 2 SPA with Email Verification
tags: laravel, fortify, vue, tailwind
//cover_image: https://direct_url_to_image.jpg
---

I want to make a project with the newest Laravel 8 for the public web and having Vue JS SPA for the private web app. I found out it's quite tricky to setup the authentication part since Laravel explicitly instruct you to choose between Breeze and Jetstream starter kits.

The closest setup they have is Laravel Jetstream with Inertia and Vue JS but it doesn't really suit my needs, and I don't need the extras.

To keep it slim down and simple, I decided to make my own starter template. Luckily there's some helpful tutorials out there, notably by Laravel Daily / Povilas Korop https://dev.to/povilaskorop in his YouTube video:

{% youtube NuGBzmHlINQ %}

In this video he explains everything you need to know about the Laravel situation and the decision choosing Fortify.

After setting up Fortify, I continue setting up Vue, Vuex and Vue Router with the help from this article https://medium.com/@martinsOnuoha/set-up-vue-vuex-vue-router-sass-in-laravel-8-590c768e8387. Then I did the Tailwind setup with the help from their documentation https://tailwindcss.com/docs/guides/laravel.

I spent about 4 hours on this setup. Let me know if anything doesn't run as expected or if you need any help. Hope you find this helpful.

Here's the final result:
{% github laurensiusadi/laravel-fortify-vue-tailwind-template %}

Note, I haven't make anything on the API side, how the Vue will interact with Laravel API, but you can use `window.axios` in the Vue component.
Monetise your content as a developer
Published: 2021-02-01 12:13:11

*Web monetisation* is way to pay content creators for every content they put on the web. How can a developer, data scientist and designers benefit from this? As a developer we often write articles about what we are learning, latest technologies we are working with, bootcamp experience and new year review. Web monetisation brings a way for you to make money off your content, byebye to the era of free articles. 

**Getting started**
    Getting started with web monetisation is very easy, all you have to do is create web monetisation wallet for keeping your funds#wink and sign up on web monetisation provider. I'll be treating the two process and give a brief self explanatory note on them.
#### **Web monetisation wallet**
You withdraw your money through this platform, you could withdraw via bank transfer depending on your location, crypto assets and stocks. These platforms makes use of Interledger, Interledger is a network of computers that enables the sending of value across independent payment networks. You can sign up on uphold(https://www.uphold.com/signup) or Gatehub(https://gatehub.net/)

#### **Web monetisation provider**
These are services that allows you to build your web monetisation based product/service or run web monetisation on existing services.
**Coil** https://coil.com/ is an example of web monetisation provider that allows you to integrate their API into your website, connect blogs like dev.to, hashnode. Coil support blogs in various domains like entertainment, technology and gaming, check out https://coil.com/explore to learn more about the support.

You can also go through https://webmonetization.org which explains more on how you can use web monetisation API in your custom website, make money with puma browser.

**Resources**
- https://hammedbabatunde.hashnode.dev/monetizing-your-contents-as-a-content-creator
- https://dev.to/hacksultan/web-monetization-like-i-m-5-1418
Increasing React components development productivity
Tags: react, webdev, productivity, showdev
Published: 2021-02-01 12:00:55

Every react project is unique and may follow some conventions on how every component should be structured. It always depends on the size of the project, team preferences, etc. Here is an example of a typical react component in my projects:

```
|__Button
| |__Button.module.scss
| |__Button.stories.mdx
| |__Button.spec.ts
| |__Button.tsx
| |__index.ts
| |__README.md
```

While I personally find this structure convenient and self-contained, it is a bit painful to create all of the files from scratch for every new component. So I usually end up with copy and pasting the whole folder, renaming filenames and contents, fixing imports, etc.

It's definitely a bit faster but still takes some time. That's why I decided to create and use a tool that would make this process easier and faster. If you're interested in its development process here's an [overview article](https://dev.to/streletss/bystro-an-open-sourced-template-scaffolding-cli-util-built-with-typescript-and-clean-architecture-41gm).

{% github streletss/bystro no-readme %}

To see it in action let's create a custom `react-component` template. Do this from the project root:

```
mkdir .bystro
mkdir .bystro/react-component
cd .bystro/react-component
```

Then describe its structure by simply creating desired files:

```
|__<<Name>>
| |__<<Name>>.module.scss
| |__<<Name>>.stories.mdx
| |__<<Name>>.spec.ts
| |__<<Name>>.tsx
| |__index.ts
| |__README.md
```

`<<Name>>` is a variable that would be replaced with real component name you'll enter later. It could be used in file contents as well:

```
import React from "react";
import styles from "./<<Name>>.module.scss";

type <<Name>>Props = {
  className?: string;
  onClick?: (e: React.MouseEvent) => void;
  children: React.ReactNode;
};

const <<Name>> = (props: <<Name>>Props) => {
  return null;
};

<<Name>>.defaultProps = {};

export default <<Name>>;
```

There could be as many variables you like but to make them processable you need to create a `.templaterc` file inside of template folder. In our case it is `touch .bystro/react-component/.templaterc`:

```json
{
  "variablePrefix": "<<",
  "variableSuffix": ">>",
  "variables": [
    { "name": "Name", "description": "React component name"}
  ]
}
```

And that should be it, our template is ready.
Let's create a new component from it. From inside the project root run:

```
npx bystro react-component ./src/components
```

After that you'll be prompted to fill all of the variables:

```
? Enter Name (React component name): 
```

For example, enter `Title` and there you have it! Navigate to 
`./src/components` to see your newly created component:

```
|__Title
| |__Title.module.scss
| |__Title.stories.mdx
| |__Title.spec.ts
| |__Title.tsx
| |__index.ts
| |__README.md
```

Thanks for reading. 
Would <3 to receive some feedback.
Using Expose by BeyondCode for WordPress development
Tags: wordpress, code, development, php
Published: 2021-02-09 21:33:37

---
title: Using Expose by BeyondCode for WordPress development
published: true
date: 2021-02-01 11:45:14 UTC
tags: wordpress,code,development,php
canonical_url: https://ovirium.com/blog/using-expose-by-beyondcode-for-wordpress-development/
---

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

Developing using a local server and domain is the fastest way until you need to share your work with someone outside your local machine without uploading your code anywhere.

Imagine you need to develop a plugin, that will communicate with a 3rd-party API. That service should be able to ping your local site using a webhook to provide you some information based on the activity on your site. For example, that might be a PayPal IPN sending you the status of the WooCommerce payment.

But as you are working on a local site – remote servers can’t access it by default. There are several ways to fix this issue:

* use PhpStorm “upload to a remote server on file save” feature
* use ngrok (npm package)
* use Expose (composer package)

I got in-depth about each of them in a blog post on my site: [Using Expose by BeyondCode for WordPress development](https://ovirium.com/blog/using-expose-by-beyondcode-for-wordpress-development/), especially focusing on the Expose tool.

I've also shared a GitHub gist with a bunch of filters that you need to apply to be able to trick WordPress and make it work correctly with all its generated URLs.
A list of 30 Python language tricks
Tags: python
Published: 2021-02-01 11:27:48

I wrote this article, [30 Python Language Tricks](https://medium.com/pythonland/30-python-language-tricks-that-will-make-you-a-better-coder-f08f811a7b0f?sk=f140c6aa3a21d4f39065ca3827836456), on Medium. it's a "friend link" which bypasses the paywall. It contains a wide selection of topics, for both beginners and more advanced level programmers. Enjoy and let me know if you liked it!

[![30 Python language tricks logo image](https://dev-to-uploads.s3.amazonaws.com/i/f7hax3r5lpenpyvno4kk.png)](https://medium.com/pythonland/30-python-language-tricks-that-will-make-you-a-better-coder-f08f811a7b0f?sk=f140c6aa3a21d4f39065ca3827836456)