teleren/devto huggingface dataset:
4 ways to perfectly center content using CSS

Tags: css, cssgrid, flexbox, html
Published: 2021-05-14 09:48:58

Centering content in CSS is something that beginners struggle a lot with. CSS provides a lot of options that allow you to center content inside a container. We'll try some of the most commonly used ones.

## Centering text

Let's start by learning how to center text in a container

```
<!--  our html has a container and text content inside -->
<div class="container center">
  this text should be centered
</div>
    
```
We can center the text content using `text-align: center`. Here's is how our CSS looks

```
/* Just to see how big the container is*/
.container {
  background: black;
  font-size: 2rem;
  color: turquoise;
  height: 400px;
}

.center {
  text-align: center;  /* horizontally center aligns the text */

  vertical-align: middle;  /* aligns the text in the middle of the `line-height` of the text*/
}
```
See it in action:

{% codepen https://codepen.io/rajatkapoor/pen/VwpvGMZ %}


If you want to place the text at the center of the screen, wrap it in a `div` and follow any of the techniques below.

## Centering a div inside another

There are multiple ways to do it. Check out all of these and let me know your favorite one in the comments. For the next few examples, we'll use this common HTML and CSS and highlight only the CSS changes needed to center the contents

#### HTML:
```
<!--  our html has a container which contains a div we wish to center-->
<div class="container center">
  <div class="inner">
  </div>
</div>
```
 #### CSS:
```
html,
body {
  height: 100%;
}
.container {
  background: black;
  width: 100%;
  height: 100%;
  font-size: 2rem;
}

.inner {
  background: turquoise;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
```
### Using `margin`

We can horizontally center the inner div using margin

```
.inner{
  margin: auto;
}
```
See it in action here

{% codepen https://codepen.io/rajatkapoor/pen/yLMYQYN %}

### Using `flex`
To center this using flex, we need the following CSS:

```
.center{
  display: flex;
  align-items: center;
  justify-content: center;
}
```
See it in action here

{% codepen https://codepen.io/rajatkapoor/pen/qBrOJQR %}



### Using `grid`

```
.center{
  display: grid;
  place-items: center;
}
```
See it in action here

{% codepen https://codepen.io/rajatkapoor/pen/RwpWqwy %}

## Conclusion

This is not all of it. There are many other ways to center content. Post your favorite way of centering content in the comments.
Design Pattern - Slider (Weirdness regarding Voiceover & NVDA)
Tags: a11y
Published: 2021-05-14 09:36:58

[Design Pattern - Slider](https://www.w3.org/TR/wai-aria-practices-1.1/#slider)

**Version**
- **VoiceOver** Utility: Version 9 (562.860) on macOS Mojave Version 10.14.6
- NonVisual Desktop Access(**NVDA**): Version 2020.3

**Weirdness**
When **using arrow keys to change** the value of the slider by one step, if the value of `aria-valuenow` is something like 0.56 (between 0 and 1), Voiceover will only read out 0.5 at the first change then stop announcing anything regardless of the value change, while NVDA will read out 0.560...001 or something similar (more decimal places out of nowhere).

If the value of `aria-valuenow` is 1.3 (one decimal place) or **integer**, Voiceover can work as expected (announce the value as it is). NVDA is still acting weirdly with value having one decimal place.

**Conclusion**
Better use integer for `aria-valuetext` or `aria-valuenow`.

**Known Inconsistent Behaviour**
VoiceOver will read out current status at first while NVDA will do at last (eg. voiceOver: `aria-valuetext` or `aria-valuenow`, `aria-label`; NVDA: `aria-label`, `aria-valuetext` or `aria-valuenow`)
How to Setup TYPO3 Frontend Login (Manually & With Extensions)
Published: 2021-05-14 09:34:03

Are you looking for TYPO3 login integration for your frontend users and customers? This blog will help you implement the TYPO3 frontend login feature with core ways, free TYPO3 login extensions, TYPO3 registration plugins, and tips to enhance your TYPO3 login.

Generally, small to medium level TYPO3 sites may require TYPO3 login features for their frontend users. Fortunately, the TYPO3 core team and community are always eager to make a better secure TYPO3. That’s TYPO3 take care to manage both backend and frontend users records within TYPO3 core ;)

Check this article for a deep dive into the TYPO3 Frontend Login setup. https://t3terminal.com/blog/typo3-frontend-login/.
TYPO3 Multisite: How, When, and Why?
Published: 2021-05-14 09:31:44

TYPO3 being an ultimate CMS holds the potential to scale from single to multiple TYPO3 websites aka TYPO3 multisite within a single instance, without settling on security, execution, or user efficiency in the front or backend

If your existing TYPO3 sites have a few things in common, or it calls for TYPO3 subsites then you might be wishing for a better way to run them than managing your TYPO3 them as single installs? Definitely TYPO3 Multisite could be what you’re looking for. It lets you create a network on your TYPO3 installation, meaning that you can then run as many sites as you want in that network, all on one instance of TYPO3 in order to create a more efficient workflow.

In this article, I’ll guide you through everything you need to know to install TYPO3 Multisite, TYPO3 Multisite domains, it’s benefits, and in which cases you should go for multisite TYPO3 websites supported by some important case studies. https://t3terminal.com/blog/typo3-multisite/.
TYPO3 extensions: What to know before you build them!
Published: 2021-05-14 09:29:20

TYPO3 comes with a lot of great features out of the box, but sometimes you need to add functionality to your website—-say, a news feed, a weather widget, or data pulled from spreadsheets. Because every TYPO3 website owner needs different features, you add them on as extensions—which keeps the default installation lean.

There are a lot of open-source extensions built for TYPO3 CMS. But if you can’t find exactly what you need, you can build your own extension. Read on for an overview of what you need to know about building extensions, and when you’re ready to build your own, you can read the documentation or follow our hands-on guide to building an extension in TYPO3 Guidebook: Understand and Use TYPO3 CMS.
Check this article for more information, https://t3terminal.com/blog/building-typo3-extensions/.
How to use TYPO3 + ReactJS
Published: 2021-05-14 09:23:25

T3Terminal launched the world's first-ever TYPO3 Reactjs Template using TYPO3 Headless APIs concepts. Are you looking at what/why/how to TYPO3 Reactjs development? You landed in the right place; it’s time to react ;)

3TERMINAL team had a dream to create a first-time TYPO3 Reactjs headless template in TYPO3 history. And, we have released the first-ever TYPO3 Reactjs/Nextjstemplate call T3 Shiva - Headless TYPO3 Template. An exciting thing about the name, In the Hindu religion, “Shiva” is the God of new creation. In TYPO3 faith (kind of purity for TYPO3 developers and people), by launching such innovation, we named it “T3 Shiva” ;)
In this blog, I want to answer many questions like, Why did we initiate and create such a TYPO3 Reactjs Template? How did we create TYPO3 Headless APIS? How did we develop TYPO3 Reactjs? And so on. Get ready to know how amazing it is when two awesome technologies collaborate and partner together. TYPO3 + Reactjs. https://t3terminal.com/blog/typo3-reactjs/.
JS interview in 2 minutes / Currying 🥘
Tags: javascript, typescript, beginners, career
Published: 2021-05-14 09:21:47

---
title: JS interview in 2 minutes / Currying 🥘
published: true
description: Let's try to figure out how to answer common JS questions in an interview.
tags: javascript, typescript, beginners, career
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1920px-Unofficial_JavaScript_logo_2.svg.png
---

**Question:**
What is currying in JavaScript?

**Quick answer:**
It is a technique used to convert a function that takes multiple arguments into a chain of functions where every only takes one argument.


**Longer answer:**
Currying is basically all about [Higher Order Functions](https://dev.to/kozlovzxc/js-interview-in-2-minutes-higher-order-functions-38kb). It is an application of JavaScript's ability to return functions from other functions.

We are replacing a function that takes `n` arguments with a set of `n` functions, which applied one by one gives exactly the same answer as original functions.

We can learn it by example right away. Btw it feels like this one is the most common one.

```javascript
// regular implementation
function add1(a, b) {
  return a + b;
}

console.log(add1(2,5)) // 7

// curried implementation
function add2(a) {
  return function(b) {
    return a + b
  }
}

console.log(add2(2)(5)) // 7
```

That is it. This is what currying is.

UPD: btw, also check out @kspeakman note about currying vs non-currying partial application [in the comments section](https://dev.to/kspeakman/comment/1eff3)

**Real-life applications:**
At first glance, it may look a bit weird 🤯 Why do we ever need to call a function separating arguments?

You can think of it as a function preparation for execution. If you have some common operation, e.g. getting an object property, you can move it to a curried version.

```javascript
function searchUser {
  // ...
  user['id']
  // ...
}

function updateUser {
  // ...
  user['id']
  // ...
}

// user['id'] can be refactored with
let getUserId = user => user['id']

// Or you can go even further and implement generic getter
let pluck = name => object => object[name]
let getUserId = pluck('id')
let getUserName = pluck('name')

let name = getUserName(user)
```

So functions like this can be joined to some helpers library. And here is [RxJS.pluck](https://www.learnrxjs.io/learn-rxjs/operators/transformation/pluck) and here is [Ramda.pluck](https://ramdajs.com/docs/#pluck).

Have a good curry 🥘

**Resources:**
[wiki/Currying](https://en.wikipedia.org/wiki/Currying)

**Other posts:**
* [JS interview in 2 minutes / Promise](https://dev.to/kozlovzxc/js-interview-in-2-minutes-promise-4fhl)
* [JS interview in 2 minutes / this 🤯](https://dev.to/kozlovzxc/js-interview-in-2-minutes-this-3hlm)
* [JS interview in 2 minutes / Encapsulation (OOP)](https://dev.to/kozlovzxc/js-interview-in-2-minutes-encapsulation-oop-2ico)

---

Btw, I will post more fun stuff here and on [Twitter](https://twitter.com/kozlovzxc). Let's be friends 👋
How To Clear TYPO3 Cache? [With Useful Plugins]
Published: 2021-05-14 09:19:54

When it comes to web performance, the TYPO3 cache is just one of those things that every site owner has to deal with at one point or another. Recently, one of our readers asked us how to clear cache in TYPO3? And we thought of writing this article on TYPO3 caching.

Basically, TYPO3 Cache is a technique to speed the delivery of web pages by saving portions of pages as they are generated. Then those "cached" portions are reused later when the page is requested again.

There are times when you will need to "clear TYPO3 cache" because that’s important. Read along with this blog on TYPO3 caching, how to clear TYPO3 cache, and TYPO3 caching extensions. https://t3terminal.com/blog/typo3-cache/.
TYPO3 Backend Login Setup Guide
Published: 2021-05-14 09:14:35

Are you looking for TYPO3 Backend login integration and configuration? This blog will help you implement the TYPO3 backend login feature with core ways, free TYPO3 login extensions, TYPO3 registration plugins, and tips to enhance your TYPO3 backend login.

TYPO3 core team and community are always eager to make better secure TYPO3. That’s TYPO3 take care to manage both backend and frontend users records within TYPO3 core ;)
content in the blog is:
Backend TYPO3 Login Extensions
Backend: Third-Party TYPO3 SSO Login Extensions
Miscellaneous TYPO3 Login Extensions

Let’s check to implement TYPO3 login features and available TYPO3 extensions in detail. Check this link for more, https://t3terminal.com/blog/typo3-backend-login/.
How to become a Backend Developer in 2021?
Tags: node, webdev, javascript, beginners
Published: 2021-05-14 08:55:31

Hi Reader! Thanks for the great reaction to [my previous post] (https://dev.to/sid__/why-do-you-need-helmet-in-nodejs-h1b) 

I have started publishing my learnings recently and wish to start a personal blog soon but till then you can always follow me here on dev.to and on [Twitter](https://twitter.com/acerbic_sid) to keep yourself updated with them (my learnings).

Now coming to the post, I stumbled upon [this link](https://roadmap.sh/backend) and thought I will share it with you guys. Do check it.

I plan to cover most of the parts mentioned in that link step by step in different series. Already started with Node and will start databases soon. I have also started a series for folks who know Node.js and want to learn Golang. 

Let me know in the comments what else do you want me to prioritize!! 

Till then, stay safe & take care.
I made a Twitter Clone with VueJS and Go
Tags: showdev, javascript, webdev, go
Published: 2021-05-14 08:55:30

Hello DEV community! 👋

I've recently attempted to make a clone of Twitter using VueJS as its frontend and Golang as its backend server.

![twitter clone profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts1k9b9b00x0qlx4xmfe.jpg)

![twitter clone status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbgvujwsj162ra7tqls5.jpg)

You can check the github repository here for the source code:

{% github HotPotatoC/twitter-clone %}

Please note that some features are yet to be implemented and i would love to hear your feedback!
Laravel 8 Form Validation Example Tutorial

Tags: laravel, php, programming, tutorial
Published: 2021-05-14 08:48:48

Hi Guys,

Today, I would relish to apportion with you how to utilize form validation in laravel 8.I will let you ken how to implement form input validation in laravel 8. In this tutorial, I will show you how to define laravel validation rules, how to validate form input and to exhibit validation errors.

if you want to see full example follow link..

https://codingtracker.blogspot.com/2021/05/laravel-8-form-validation-example.html
v-show versus .d-flex !!
Tags: vue, javascript, webdev
Published: 2021-05-14 08:35:06

While programming with **Vue/Bootstrap**, I was facing one case that **v-show** is not working unexpectedly.
In the below example, those two **div** elements are always visible, not based on **showBack**.
So I wondered, is Vue having some internal problem? :)

```javascript
<div class="d-flex justify-content-between" v-show="showBack">
~~
</div>
<div class="d-flex justify-content-end pt-4" v-show="!showBack">
~~
</div>
```



But finally I noticed, the reason.
**v-show="false"** => **display: none;**
**.d-flex** in bootstrap, => **display: flex!important**. omg~~

Do you have any experience like this?
With this opportunity, I noticed, that I am not still professional myself. lol
Healthcare App Development Benefits StartUps
Tags: startup, android, ios, devops
Published: 2021-05-14 08:11:53

In the era of digitization, almost every service and product are available on the Internet. People are getting food, cosmetics, groceries and even medicines using different mobile applications. It is fair to mention that mobile apps have impacted our lives a lot by touching all industry sectors.

Talking about the healthcare sector, this highly-regulated industry is growing rapidly with the help of customized healthcare apps. [Healthcare app development](https://www.suriainternational.com/doctor-appointment-app-development-cost-and-features/)

is aimed at building an app that can provide healthcare services to remote areas and implementing the concept of telehealth or telemedicine.

Feature-rich healthcare apps ensure that healthcare services remain accessible worldwide. In times like today when the pandemic is spreading and staying home is the best way to be safe, healthcare apps are being helpful to provide services to remote patients without coming to hospitals or clinics until emergency services are required or patients are in critical condition.

Let’s understand how a healthcare app with desired features can assist startup organizations to grow. But, before moving ahead, let’s go through the importance of a healthcare app.

Importance of Healthcare Apps

Healthcare apps are applications that help to achieve health-related tasks like meditations, exercise, diet, and simple or complex medical issues. These apps can play multiple roles ranging from spreading awareness for health to assisting the app users to stay fit through exercises and diet. The healthcare app development domain includes health & fitness, nutrition & diet, and healthcare categories.

Read More: https://www.suriainternational.com/benefits-of-healthcare-app-development/
Challenge 1 : Card Wallet
Tags: webdev, html, tailwindcss, vue
Published: 2021-05-14 08:11:45

Welcome to the `first challenge` 🚀
I will really proud if you enjoy to follow me in this crazy adventure. 
Each challenge will be organize of the same way : description about the project, roadmap to scope the project, deployment and of course clear documentation.


## Project overview 📝
The goal of this project is to build a card wallet and manage recent payment entries. A [demo](https://vue-card-wallet-h28cd9iji-geminii.vercel.app/) is available to see the result. 

![Vue Card Wallet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13ps94c41khyf6pwlbsk.png)

## Define your roadmap 🖊
To realize this project, i started to create a projet into my [Github](https://github.com/Geminii/vue-card-wallet) called `vue-card-wallet`.
 
Github permits you to define a [roadmap](https://github.com/Geminii/vue-card-wallet/projects/1) for your project as you can see here : 
![Github Roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnije753funked9r16rh.png)

Before to start to code, it's really important to define the scope of your project. You got the design, and the features but you need to put a limit. 

Create your roadmap to structure your ideas, and organize them through a priority order. I recommend that you rank in ascending order from most to least important. 

### What I wanted to do 👷‍♂️
- Templating Html/Css from FigmaCrush template
- Responsive even if no mobile version in the Figma template
- Create `Card` component to add a card in your wallet
- Manage recent payment (add and delete) with animation

## Technologies used 🛠
For this project, I decided to focus on the use of these technologies : 
- [Vue3](https://v3.vuejs.org/guide/introduction.html)
- [TypeScript](https://www.typescriptlang.org/docs/)
- [TailwindCss](https://tailwindcss.com/docs)


## What I learned 👀
Every project is different and it's always exciting to find out why. 

[Vue3] In this one, there is a lot of discovery in practice on Vue3 with TypeScript. But also the use of API composition to allow code reuse.
![RecentPayments Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hinmpr806w870pq6sdf3.png)

[CSS] Animation is a good way to improve your user experience. So simple and so fun to create. I wanted to experiment it through `transition-group`
![Bounce-in animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwphbcvvk9gpo9vn3zdj.png)

[TailwindCss] I also discovered some utilities classes in TailwindCss and customize the `font-family`. 
![Customize TailwindCss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yao5fu74bqg2sna20zpg.png)

## Improvements 🛫 
I think it could be nice to improve this project nope ? What do you purpose for this ? I have another ideas, but I'm curious to know yours 😀

Feel free to let me your comments 🙏 ❤


Thanks a lot to join me on this adventure and to follow me. 🤩 Continue to learn and practice by the same way. 🚀
CSS
Tags: css
Published: 2021-05-14 08:11:29

English website ref:
https://www.w3schools.com/cssref/css_selectors.asp
Chinese website ref: 
https://www.runoob.com/cssref/css-selectors.html
Select all element and set background color: 
```css
* { 
  background-color:yellow;
}
```
Select all element inclosed by div:
```css
div * {
  background-color:yellow;
}
```
Class selector:
```css
.intro {
  // select all elements their has class="intro" marker
}
```
Id selector: 
```css
#firstname {
  // select all elements their has id="firstname" marker
}
```
Element selector:
```css
div {
  // all div tag will be selected
}
```
Element,Element selector:
```csss
div,span {
  // select all div and span tag
}
```
Element Element selector:
```css
div span {
  // select all span tags that inclosed by div tag
}
```
Element>Element selector: 
```css
div>p {
  // select all p elements their father element is div
}
```
Cron Job Tutorials - How to set up cron job for Blesta?
Published: 2021-05-14 08:08:51



I installed Blesta on my server, and I want to set up a cron job to trigger Blesta's cron job script. What should I do to set up the cron job?

https://www.easycron.com/cron-job-tutorials/how-to-set-up-cron-job-for-blesta


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vmg22441e8348kmp4pn.png)
No Internet Connection wrapper for React apps
Tags: javascript, react
Published: 2021-05-14 07:36:26

Imagine, 
We have a web application that heavily depends on the backend server for information (eg. records in a table) and that information needs to be constantly updated. We might think to use some polling mechanism.

But if the data received from the server is directly stored in a React state variable and if the user loses the internet connection then there are chances of updating the state with empty data.

So, instead of showing empty data, we can show a message, something like "No internet connection." 

### How can we do that?
We can write a wrapper component and wrap the entry-level component. So whenever the internet connection is lost, a custom page/message can be shown.

Here I have used the [navigator.onLine](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine) API to get the network status.

enough story, show me the code :)

### Main component
```
import './App.css';
import NoInternetConnection from './NoInternetConnection'

function App() {
  return (
    <div className="App">
        <NoInternetConnection>
        <h1>My first post on DEV!!</h1>
        </NoInternetConnection>
    </div>
  );
}

export default App;
```
 

### Wrapper component
```
import React, {useState, useEffect} from 'react';

const NoInternetConnection = (props) => {
    // state variable holds the state of the internet connection
    const [isOnline, setOnline] = useState(true);

    // On initization set the isOnline state.
    useEffect(()=>{
        setOnline(navigator.onLine)
    },[])

    // event listeners to update the state 
    window.addEventListener('online', () => {
        setOnline(true)
    });
      
    window.addEventListener('offline', () => {
        setOnline(false)
    });

    // if user is online, return the child component else return a custom component
    if(isOnline){
    return(
        props.children
    )
    } else {
        return(<h1>No Interner Connection. Please try again later.</h1>)
    }
}

export default NoInternetConnection;
```

Here is the demo.

![ezgif.com-gif-maker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh6vclamb8kg32f8nmte.gif)

That's it. By the way, this is my first post on DEV (damn! on the internet :)). Feedback is appreciated.
Day 61 of 100 Days of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-05-14 07:56:32

I just started day 61 of 100 days of swiftui. I tried implementing offline support in the friendz app I created yesterday. But I ran into this issue and I have not been able to solve it. 
` error: No NSEntityDescriptions in any model claim the NSManagedObject subclass 'Friendz.UserModel' so +entity is confused.  Have you loaded your NSManagedObjectModel yet ?
`
I'm guessing I didn't set up CoreData correctly or something. I will try again in the evening and update this post with my findings. If you know how to solve this, please reach out.