teleren/devto huggingface dataset:
What's the best approach for form validation in React?
Tags: discuss, react, beginners
Published: 2020-04-28 09:34:58

I had a task where I needed to validate a sign-up form in React.
There was a name, email, password, confirm password, and a checkbox. All fields were required and the password had a couple of rules.
I got it to work using Formik + Yup, was that overkill for this use-case? 

I found that there are a ton of form validation libraries, which one should I work with? What makes one better than the other?
have Fun With Flexbox
Tags: codepen, beginners, flexbox
Published: 2020-04-28 08:53:31

---
title: have Fun With Flexbox
published: true
tags: codepen, beginners, flexbox
---
A super simple example of how flexbox is awesome!!
Let's write some html:
```html
<body>
<header>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Contact</a></li>
            <h1>Flourish Collective</h1>
            <li><a href="">Blog</a></li>
            <li><a href="">Courses</a></li>
        </ul>
    </nav>
</header>
<section class="hero">
    <h2>Want to turn your passion project into a <br/> profitable, creative business ?</h2>
    <button>Enroll Course</button>
</section>
<section class="intro">
   <div class="intro-image">
       <img src="./macbook-pro-iphone-cup-desk-7974.jpg" alt="laptop">
   </div>
    <div class="intro-text">
        <h2>Hey I am GiandoDev</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, labore!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum hic, nulla.</p>
    </div>
</section>
</body>
```
and now a little bit of css
```css

html {
    font-size: 62.5%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: black;
    text-decoration: none;
}

nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
    min-height: 10vh;
    list-style-type: none;
}

.hero {
    min-height: 80vh;
    background-image: url("/silver-and-black-laptop-computer-1229861.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.hero h2 {
    text-align: center;
    margin: 2rem;
}

.hero button {
    padding: 1rem 2rem;
    background: #97e9d4;
    border: none;
}

.intro {
    display: flex;
    flex-wrap: wrap;
}

.intro img {
    width: 100%;
}

.intro-image {
    flex: 1 1 30rem;
}

.intro-text {
    flex: 1 1 30rem;
    background: #f7e6d6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.intro-text h2 {
    padding: 2rem;
}

.intro-text p {
    padding: 1rem;
}





```


{% codepen https://codepen.io/giandodev/pen/KKdmXoq %}
What are the Differences Between DevOps and Agile? (Infographic)
Tags: devops, agile, security, design
Published: 2020-04-28 08:45:51

People are often confused by DevOps and Agile in the software development industry.

You may have a lot of questions such as:

1. How are DevOps and Agile methodologies different?
2. Is one more secure?
3. Which one should I use?  (Just one or both)?

This infographic will break it down and simplify it for you.
Let’s start by understanding each one separately.

**What is Agile?**

This methodology takes an iterative and incremental approach to development.

1. Involves producing release cycles on a continuous basis.
2. Breaks the software down into small functional deliverables for customer 
   approval.
3. Addresses the gaps in communication between customer and developer.
4. Small and rapid releases, customer feedback, and collaboration are the focus 
   of this model.
5. Aims to bring agility to development.

**What is DevOps?**

This approach to operations focuses on communication, collaboration,  integration, and deployment.

1. Promotes collaboration between operations and development to deploy releases 
   to various environments.
2. Automation, continuous feedback, discipline, and process development are the 
   highlights of this model.
3. Development teams make small but frequent updates to the production software 
   which are often automatically deployed to environments
4. Aims to bring agility to operations and deployments.

**_Read the full post at [CypressDataDefense.com](https://www.cypressdatadefense.com/blog/difference-between-devops-and-agile/)._**
What should you do with your business during COVID-19?
Tags: covid19
Published: 2020-04-28 08:44:57

There's the desperation in the air: COVID-19 is spreading, businesses shut down. Yet, some companies figured out how to keep in touch with their customers and grow. We described some success stories and collected statistics on the possible growth areas.

Read more: https://medium.com/@ADCISolutions/what-should-you-do-with-your-business-during-covid-59a1276efa77
The Work From Home List
Tags: startup, sideprojects, wfh
Published: 2020-04-28 08:37:40

We are a passionate group of Work From Home (WFH) and remote workers. So we decided to create a list of our favorite tools both hardware and software into a Work From Home List. This list is open to contributions and voting. From idea to launch under a week.

The 56K.Cloud team had a meeting last week discussing how many customers/people still don't know where to find tools for Working From Home (WFH). During the meeting, we created an MVP list of features, what framework to use, and launched in less than one week. From idea to launch in under a week.

We plan to continue adding features but first wanted feedback from the community. The current list of products is open for contribution. Our objective was to deliver the first iteration with little coding or effort and launch and get feedback as soon as possible.

[WFHList.io](wfhlist.io)
🛠🏗 Projects Workflow
Tags: discuss, webdev, frontend
Published: 2020-04-28 08:32:12

---
title: 🛠🏗 Projects Workflow
published: true
description: 🐱‍🏍🛠
tags: #discuss, #webdev, #frontend
cover_image: https://images.unsplash.com/photo-1542744094-24638eff58bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80
---

Hello everyone! 👋🏾😀

I hope you are staying safe indoors.

I'm working on a side project and I'd love to hear your thoughts on your development workflows. Do you focus on styling or functionality first? What other factors do you consider when working on your project as well...?

Curious.... asking for a friend that may or may not be me 😅😂

###### Photo by Campaign Creators on Unsplash
MVC and Sinatra
Tags: codenewbie, ruby
Published: 2020-04-21 19:40:14

Another relic from the past - from December 2019 to the here and now, enjoy.

Digging into Sinatra has introduced me to a critical concept - the Model-View-Controller framework. Sure seems like it's here to stay - let's talk through it.

The **Model-View-Controller** framework is the foundation upon which a program can fluidly operate as a web application. 

To really drive this home, I'd like to expand upon Flatiron's restaurant analogy (kudos to Flatiron for the intro!).

**Models**

Imagine - it's date night and you've just sat down to dinner at [insert your favorite restaurant]. While you likely can't see him/her, you know the chef's in the kitchen.

Your waiter (finally) comes to take your order. Now the moment you've waited for - the waiter brings your order back to the chef, who prepares your meal. 

As soon as it's ready, the chef passes your plate to the waiter, who brings it directly to you. Bon appetite!

Now I'm hungry, but back to Sinatra. Models are the logic behind your application - and your **chef** is the **model** here. Your chef took your order from the waiter, prepared your meal, and gave it to your waiter. Your chef manipulated/created your food, and the models manipulate data.

**Views**

You place your order with your waiter. While you sip your fancy adult beverage, your waiter takes your order to the kitchen, and soon enough, you receive your meal. This meal, the food, is the **view**.

In Sinatra, views are what the user sees and the only part that the user interacts with directly. Views are written as `.erb` files. They consist of HTML and embedded Ruby, which is code written within HTML.


**Controllers**

Your waiter is the **controller**, the go-between for the kitchen and you. Your waiter takes your order from you to the kitchen. And, they take meals from the kitchen to you.

In Sinatra, controllers are the go-between for models and views. Controllers have routes. These routes take requests sent from the browser, run code, and then render the `.erb` (view) files for the user to see.

This MVC concept separates an application's code by function. Reason being, this makes writing, reading and even debugging code far more simple and far more pleasant.

So they say! I'll keep digging in and report back, but that's for now I'll take their word.

Connect with Me [Twitter](https://twitter.com/AnnaWijetunga) [LinkedIn](https://www.linkedin.com/in/annatattan/)
Why I Prefer PyTorch Over TensorFlow: Same Reason I Prefer Linux Over Windows
Tags: machinelearning, deeplearning, python, pytorch
Published: 2020-04-28 08:31:38

### Hey everyone as we kick start this series I would like to shed some light on why I prefer PyTorch over TensorFlow and why you should too.

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

As a deep learning practitioner I like (or require) custom architectures for my projects or research papers which can be difficult to build using TensorFlow because it’s implementation is not very friendly (non-pythonic). Hence, building a custom architecture in TensorFlow is time-consuming.

Additionally, unless you are using core TensorFlow you don’t have much control over anything other than the number of layers in a model and their configurations.

PyTorch, on the other hand, gives you complete control over how you want to train your model and what should be the underlying architecture. In fact, it uses OOP for building deep learning model and the training loop is an ACTUALLY python for loop!!

This gives you full control over how the model is trained and provides you with all the optimizations that libraries like TensorFlow provide.

Now that I’ve explained why I prefer PyTorch over TensorFlow we are ready to explore deep learning.

Cheers,
Jha

## This series will also be available on Medium
{% medium https://medium.com/@amit.jha6700/series-announcement-3aee57a44746 %}

## Some of my other blog posts that you may like
{% post https://dev.to/jha/7-tricks-to-get-more-done-as-a-developer-35k9 %}
{% post https://dev.to/jha/why-learn-redux-in-2020-a-way-to-deal-with-react-s-messy-state-management-dam %}
Effects a Data Breach Can Have on Your Business in the Long Term
Tags: datascience, devops, design, productivity
Published: 2020-04-28 08:24:46

In today’s cybersecurity landscape, businesses are increasingly becoming victims of data breaches. Worldwide spending on cybersecurity is estimated to reach a whopping [$133.7 billion](https://www.gartner.com/en/newsroom/press-releases/2018-08-15-gartner-forecasts-worldwide-information-security-spending-to-exceed-124-billion-in-2019) by 2022 and it’s not a surprise that businesses are more focused on building a better security culture.

Data breaches don’t just expose sensitive information, the attackers can burrow into the entire organization’s network or hack into their database and perform malicious activities.

A data breach could lead to a loss of data including sensitive information such as financial records, credit card info, personal details, or confidential data like contracts and agreements between vendors and companies. That data, if compromised, could cause havoc for the victim organization.

In fact, in the first half of 2019, a data breach exposed about [4.1 billion](https://pages.riskbasedsecurity.com/data-breach-quickview-report-2019-q3-trends) records which caused long-term damaging effects for the victim organizations.

When a data breach occurs, it costs the organization more than just money - it can cause severe damage to your organization’s reputation leading to a decline in your brand reputation, value, and relationships with your customers.

With cybercriminals using more sophisticated methods to attack enterprises and leveraging the latest technologies such as automation and artificial intelligence, data protection has become more challenging.

It is imperative for businesses to understand the consequences of a data breach and how it could impact their entire organization. It will help them take the necessary steps to mitigate their potential vulnerabilities and risks that could otherwise put their company and its customers at risk of a data breach.

We have compiled a list of the most severe long-term effects of a data breach.

Hopefully, this will help you get a better idea of how potentially severe a data breach could be for your company as well as show you the need for cybersecurity. 

**_Read the full post at [CypressDataDefense.com](https://cypressdatadefense.com/blog/business-data-breach/)._**
How has programming changed you for better or worse in your life? 
Tags: discuss, career
Published: 2020-04-28 08:04:22

Recently, I started wondering how my career choice impacted my life. I am coding for 20+ years and I consider myself really lucky since I love it, but there are days when I have no motivation and sometimes I feel burnout. 

I am trying to reflect on how this lifelong love of coding impacted other areas of my life? Spending lots of times coding will change you in many ways that are hard to notice. 

Here are a few not so great ways how coding affected me:   

* **Introvert**: I think being an introvert is a given and coding gave me an excuse not to improve in this regard. It was always easier to go into code instead of talking to people. 

* **Patience**:  when coding or debugging changes happen immediately. It is very easy to see the outcome. Other areas in life are not like this: gardening, investing, or SEO. You make a change and you will not see results in weeks, months, or years even. It is harder for me to start with that kind of thing because there is no instant gratification.

* **Control**: being in control and understanding your app. Managing all things down to the minuscule details. This is an important thing for me in coding. I expect to be able to control everything. Like I mentioned in the previous point, other areas in the non-digital world are not this black and white. The outside world is not in your control. Other people not in your control. Life is not black and white like when you coding... 

* **Shiny objects**, There is always a new shiny object that I am dying to know more about, learn about it and try. In the 30 minutes, it took me to write this article I found myself reading Svelte. Sometimes, it takes me a great effort to focus on my tasks and finish things. 

How coding is affected you and how do you try to overcome the not so great things in it?

If you like this article, share it, follow me and check out my other [blog posts](https://www.littlebigtomatoes.com/).
Visualisation tool for sorting algorithms.
Tags: beginners, opensource, react, showdev
Published: 2020-04-28 07:57:29

---
title: Visualisation tool for sorting algorithms.
published: true
description: A powerful tool for visualising algorithms.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qyk1nf7uv3xpfkpss0ht.png
tags: beginners, opensource, react, showdev
---
Edit: Added explanation on how it works.

This is a tool which visualises how algorithm works.

It is so good if we can SEE how it works in real time. Even more amazing to go back and forward, to see how the sort series was in the past.

I started working on this project so i can help young people to learn and understand how something works.

lets begin with sorting algorithms..

I created a framework where we can plug a sorting algorithm and see how it does sorting.

---
####How It Works....

**So first the framework generates some random numbers.**

**Once the algorithm is selected, 
all the random numbers are passed to that selected algorithm.**

**The selected algorithm then does sorting and stores each change in sorting order and the index which got changed.**

**Then it is returned to the react component which iterates through each change and updated the state after a few milliseconds.**

**Thats how it looks like animating.**

---

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

So you can select one of the algorithm and click play to start rolling...

i selected merge sort.

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

Then you can click pause and use arrows to go back and forth to exactly see how it gets sorted.

Link For website:
https://visual-algos.netlify.app/algos/sorting

There is a long list of sorting algorithms that needs to be implemented. It would be great help if someone can contribute to it.

- 🕒 currently working
- ✅ finished implementing

----

 - Selection Sort ✅
 - Insertion Sort ✅
 - Merge Sort ✅
 - Heap Sort 🕒
 - Bubble Sort
 - Binary Insertion Sort
 - Quick Sort (LR ptrs)
 - Quick Sort (LL ptrs)
 - Quick Sort (ternary, LR ptrs)
 - Quick Sort (ternary, LL ptrs)
 - Quick Sort (dual pivot)
 - Cocktail Shaker Sort
 - Gnome Sort
 - Comb Sort
 - Shell Sort
 - Smooth Sort
 - Odd-Even Sort
 - Bitonic Sort
 - Cycle Sort
 - Radix Sort (LSD)
 - Radix Sort (MSD)
 - std::sort (gcc)
 - Tim Sort
 - Block Merge Sort (WikiSort)


Link for github repo: 
https://github.com/SrikanthYashaswi/visual-algos
A Roadmap to Successful App Development for Startups

Tags: business, startup, app, mobileapps
Published: 2020-04-28 07:32:02

The difference between Startups and Established Brands are excessively evidential and endless to list down. When working with, you’ll get to know that both entities are different not only work or culture wise, but the difference is also in their business model and their expectations in terms of deliveries. 

While on one hand established brands, with their no shortage of funds and lower go-to market time, focus on the application quality, Startups generally seek faster time to market and best quality at low development cost. This difference in thought brings in a difference in deliverables too, particularly with regards to the delivery of a product that is an extension of the brand, displayed on a platform accessed by millions of users.

The product here being mobile applications. Here, we will look into the different challenges application development for startups brings with it. Also, will give you a guide of how to go about with the mobile app development process as a startup.

Startup’s Mobile App Development Challenges-
1. Low budget-
Startups generally accompany a limited budget. And even within that limited budget, they need to divide the funds between research, development, launch of application on the stores and its promotion. This lack of budget is the main reason for the brands not putting resources into a mobile app development company for startups.

2. Faster time to market-
Startups are more often than not in a race to come on top of the competition in the market. And, in that regard, they wind up looking at white label solutions since it’s simpler than building their own customized app, regardless of whether it implies getting a low quality product.

3. Lack of a market research team-
In most of the cases, startups are made of a team of 2 to 10 individuals, the chances that they would have a team specializing in finding the mobile app solution for a startup is very minimal. This absence of a research team makes it extremely difficult for them to find out about their customers.

4. Lack of app promotion ideas–
Taking note of the low budgets, the most serious issue that emerges with regards to mobile app development for startup is limitation in terms of app marketing or promotion once it is launched on the stores. Since we have looked into the different challenges that the SMBs face with regards to putting resources into mobile application development for startups, let us now give you a guide that we follow in our role as a web and mobile application development company for startups.

Roadmap of App Development for Startups-
Solidifying your software engineering identity
Tags: programming, discuss, showdev, challenge
Published: 2020-04-28 07:28:45

Hi, folks! 👋 My name is Anton and I just launched [CoreSkills Challenge](https://challenge.coreskills.dev) - a way to solidify your engineering skills with 10 min real-world coding tasks.

### Why on earth am I doing this?

During the past year, I've been running an interview platform called CoreSkills. That experience, combined with my 10+ years in the software industry, let me acquire knowledge that enabled me to do cool things. These are just a few examples: running high-load payment processing systems in production, leading a dev team of 6 great engineers, and run a side-project that made some cash (can even call it profitable maybe 😃) in my spare time. 

And CoreSkills Challenge is my attempt to share my knowledge beyond my current network. So let's see how it goes. 💫

### I also share behind the scenes
And in case you're interested, feel free to follow [my journey on Twitter](https://twitter.com/fenskexyz).

Stay curious! ✌️
What bash aliases does everyone use on a daily basis? 🔥
Tags: discuss
Published: 2020-04-28 07:26:04

Bash aliases are **incredibly** useful to reduce the amount of typing and memorisation of long or repetitive commands.

Some that I have set are: 

```
ga=git add -A
gc=git commit -m $*
gp=git push origin $*
gs=git status
```

I've also come across a good list here: 

https://github.com/algotech/dotaliases 

That being said, I'm also curious about what aliases does everyone use often, are their favourites or find intuitive for them? 😄
8 Best TYPO3 Ecommerce Extensions For Your TYPO3 Shop
Tags: typo3template, typo3extension, typo3saas, typo3website
Published: 2020-04-28 07:22:43

Are you looking to build an online TYPO3 store or integrate E-commerce functionality? 
Want to know which are the best TYPo3 eCommerce extension?

Choosing the right eCommerce extension is crucial for your business because a better platform means more opportunity for growth. Selecting the correct TYPO3 eCommerce extension for your needs is essential for your venture because it’s difficult to back out from your original decision if it turns out to be a poor fit.

In this article, we will share the 8 best TYPO3 eCommerce extensions. Read on to check each of them out in detail.

8) Mate Platform
7) Shopware Client for TYPO3
6) Launch Quick Shop!
5) Cart, TYPO3 Ecommerce Extension
4) Quick Shop — E-commerce with TYPO3
3) Caddy — Shopping Cart
2) Aimeos shop and TYPO3 e-commerce framework
1) Shop System TYPO3 Ecommerce Extension

Explore them in depth. Read the full blog — https://t3terminal.com/blog/8-best-typo3-ecommerce-extensions-for-your-typo3-shop/