teleren/devto huggingface dataset:
Day 8 Challenge
Tags: challenge, webdev, 365daysofcoding, frontend
Published: 2021-01-08 14:51:57

Create a page with a sign up form. It can have any input but you must require, first name, last name, phone number and email. It should also have a section for OAuth (allow for sign in with Facebook, Google, etc.) The email must be a valid email and phone number should be formatted.

**Part one:** Create a page with a basic form
Day 8 - Check If Two String Arrays are Equivalent
Tags: leetcode, python
Published: 2021-01-08 14:38:04

## The Problem

>Given two string arrays `word1` and `word2`, return true if the two arrays represent the same string, and `false` otherwise.

>A string is _represented_ by an array if the array elements concatenated in order forms the string.

__Example 1:__

```
Input: word1 = ["ab", "c"], word2 = ["a", "bc"]
Output: true
Explanation:
word1 represents string "ab" + "c" -> "abc"
word2 represents string "a" + "bc" -> "abc"
The strings are the same, so return true.
```

__Example 2:__

```
Input: word1 = ["a", "cb"], word2 = ["ab", "c"]
Output: false
```

__Example 3:__

```
Input: word1  = ["abc", "d", "defg"], word2 = ["abcddefg"]
Output: true
```

__Constraints:__

* `1 <= word1.length, word2.length <= 10^3`
* `1 <= word1[i].length, word2[i].length <= 10^3`
* `1 <= sum(word1[i].length), sum(word2[i].length) <= 10^3`
* `word1[i]` and `word2[i]` consist of lowercase letters.

## My Tests

[Link to code](https://github.com/ruarfff/leetcode-jan-2021)

```python
import pytest
from .Day8 import Solution

s = Solution()


@pytest.mark.parametrize(
    "word1,word2,expected",
    [
        (["ab", "c"], ["a", "bc"], True),
        (["a", "cb"], ["ab", "c"], False),
        (["abc", "d", "defg"], ["abcddefg"], True),        
    ],
)
def test_array_strings_are_equal(word1, word2, expected):
    assert s.arrayStringsAreEqual(word1, word2) == expected
```

## My Solution

```python
from typing import List


class Solution:
    def arrayStringsAreEqual(self, word1: List[str], word2: List[str]) -> bool:
        return "".join(map(str, word1)) == "".join(map(str, word2))

```

## Analysis

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

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


## My Commentary

Not much to say about this one really. It's running in O(n). Not sure how to squeeze much more out of it. 

We convert each list to a single string and compare them.
How to Design Print Ready Website?
Tags: discuss, webdev
Published: 2021-01-08 14:51:12

Currently, I'm trying to make a document website about my projects. When I try to print the website, it will format like the full print document. 

Here is an example, from [tutorialspoint website](https://www.tutorialspoint.com/flask/flask_overview.htm)

**Website version:**

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



**Print version:**

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

I know there is some good documentation website like [docusaurus](https://docusaurus.io/). I don't want to use those.


### How can I achieve that style in CSS? 
### Please guide me. 
Thank you.😀
Open Source event tracking and gamification engine
Tags: gamification, rails, analytics, graphql
Published: 2021-01-08 14:43:37

---
title: Open Source event tracking and gamification engine
published: true
description: I've published an open source event tracking engine. It includes a gamification engine that will let you easily integrate any user engagement scheme into your applications.
tags: ['gamification', 'rails', 'analytics', 'graphql']
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/altqc15um5le4tuaerlt.png
---

## Siete Valles

The goal of [this application](https://github.com/jorgegorka/siete-valles) is to provide an easy way to integrate user engagement schemas and event tracking into your existent applications.

You can create specific schemas like an onboarding process and keep track of the progress of each individual employee. Or you can implement generic long term schemas and event tracking like tracking the activity of users on a website (articles, comments, likes, etc.).

## Use cases and examples

* Track important application events.
* Measure user's engagement.
* Lead users conducting important events like onboarding, placing an order...
* Etc.

There are a few [implementation examples](https://github.com/jorgegorka/siete-valles/wiki#examples) available.

## Technical details

[Siete Valles](https://github.com/jorgegorka/siete-valles) has been developed with Ruby on Rails and it has a full featured Graphql A.P.I.

[Detailed documentation available](https://github.com/jorgegorka/siete-valles/wiki).

### Technology

* Rails 6.1
* Graphql
* Stimulus JS
* TailwindCSS
* Mysql

You can check all my [open source projects](https://www.alvareznavarro.es/open-source).

Siete Valles means Seven Valleys and this is where [the name comes from](https://en.wikipedia.org/wiki/La_Rioja#Hydrography).

![Siete valles dashboard](https://dev-to-uploads.s3.amazonaws.com/i/altqc15um5le4tuaerlt.png)
Form validation in python made #EZ (By Yours Truly)
Tags: python, webdev, security, flask
Published: 2021-01-08 14:28:36

After looking at an NPM library called [joi](https://www.npmjs.com/package/joi), I was amazed at what it could do and how it could make your javascript form validation easy.

I was also disappointed that a similar library didn't exist for python that was framework independant, so I created one!

## Welcome to DontTrust

DontTrust is a python form validation library that is inspired by [joi](https://www.npmjs.com/package/joi). It is similar to joi, but it does lack a bit in features. Before we look at its features, we have to install it:

```bash
pip install donttrust
```

## Schemas

Schemas are what define a field in your form. There are 6 types of schemas currently:

- string
- number (includes `int`, `float` and `complex`)
- email
- date
- boolean
- any type

To initialise a schema:

```python
from donttrust import Schema

username_field = Schema("username")
```

The `"username"` parameter in `Schema` is optional, but it is recommended because error messages will be formatted with it.

To create a schema of a specific type,
```python
username_field = Schema("username").string()
# or .number(), .boolean(), .email(), etc
```

### Validate a schema

There are two ways to validate a schema:

```python
# With an exception
from donttrust import Schema
from donttrust.exceptions import DontTrustBaseException

username = Schema().required().string()

try:
    print(username.validate(1234))
except DontTrustBaseException as e:
    # Exception thrown
    print(e.message)
```

```python
# By returning false instead of an exception
from donttrust import Schema

username = Schema().required().string()
print(username.validate_without_exception(1234))  # False
print(username.validate_without_exception("test"))  # test
```

## DontTrust class

The `DontTrust` class allows you to combine 1 or more schemas together.

```python
from donttrust import DontTrust, Schema, ValidationError

try:
    trust = DontTrust(username=Schema().string().required().alphanum().min(4).max(32).strip().to_lower()
                      password=Schema().string().required().min(8))

    print(trust.validate(username="UseRNAME    ", password="pas5word1"))  # {"username": "username", "password": "pas5word1"}
    print(trust.validate({"username": "1NV@LID"}))  # Exception
except ValidationError as e:
    print(e.message)
```

And that's it for this python library! For more information, visit the [Docs](https://donttrust.gq), [API Reference](https://apiref.donttrust.gq) or the [Github repository](https://github.com/arnu515/donttrust) *(and drop a star while you're there ❤️)

If you have any suggestions for this project, create a Github issue or comment it down below. I'll try my best to implement it 🥳
How to fix audio from ubuntu 20.04 focal fossa "dummy-output"
Tags: linux, ubuntu
Published: 2021-01-08 14:23:51

Hello, I came across an issue from the latest update. I couldn't listen to any sound from my earphones it was only showing dummy-output as the default Output Device, which it was absolutely not right.

To fix it, I did the following (It must be done as root, so used sudo for it):

`sudo vim /etc/modprobe.d/alsa-base.conf`

At the end of the file I added:

> options snd-hda-intel dmic_detect=0 

Then I did:

`sudo vim /etc/modprobe.d/blacklist.conf`

At the end of the file I added:

> blacklist snd_soc_skl

I didn't even had to reboot, but, somehow it is always good to reboot the system after editing configuration files.

Note: I am using an acer swift laptop (intel) so please make sure that this works for you. I also use vim but it can also be done in your text editor of your preference

Happy Coding!
Easily checkout branch from checkout history with git-checkout-history
Tags: git, showdev
Published: 2021-01-08 14:20:20

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/vbuizzhnu1pmuor8uo9q.gif)

https://github.com/yulrizka/git-checkout-history

During development we sometime working on multiple branch at once. Switching between branches becoming a hassle because we need to specify the branch name each time.

To Make it easier, i created this [git-checkout-history](https://github.com/yulrizka/git-checkout-history) and with combination with [fzf](https://github.com/junegunn/fzf) make changing branches a breeze. It remembers the order of the previous checkout so last checkout will come first. Changing branch also can done with up and down arrow and also support fuzzy search (you just need to type some part of the branch name).

If you like the idea, please try it and let me know if something does not work.

Tips: the command can be shorted with alias. Example for bash
```
$ alias gch="git checkout-history"
$ gch
```
3 experiments with CSS paper effects
Tags: css, codepen, showdev, webdev
Published: 2021-01-08 14:19:30

Over the last few days I've been playing around with a few paper-inspired CSS effects in CodePen, and thought I'd share!

## Experiment 1:  Folded paper with taped edges

{% codepen https://codepen.io/aitchiss/pen/QWKmPqx %}

Inspired by new year's resolutions (and my lack of them), for this experiment I had a play about with a folded paper effect, and transparent layers to look like sellotape (or whatever brand of tape is popular in your country 😂).

The folded paper effect is created with an `::after` pseudo element (I used `::after` instead of `::before` to make sure the text looked like it had been folded in the paper too), with two layered linear-gradients - one running left to right, and another top to bottom.

The tape itself has opacity set to 0.5 to give the semi-transparent effect, and I added a small dotted border on the tape ends to make it look a little serrated like it'd been cut. 

## Experiment 2: Pinned card

{% codepen https://codepen.io/aitchiss/pen/zYKaaJr %}

I then wanted to play about with some less crumpled paper, and had a go at a pinned card. Sticking with the 'pop it on your noticeboard' theme, it just has a simple reminder about a zoom call on the card itself.

The fun part of this - of course - was the pin. I love a bit of CSS art 😄. The different components of the pin are commented in the code so you can see how I went about it (much like all these experiments, the CSS could very usefully be tidied up in future, but hopefully you'll get the idea!). Much like the folded paper, it relies primarily on linear, and this time radial, gradients to make it look a bit more 'life like'.

## Experiment 3: "Contact me" tear-off paper

{% codepen https://codepen.io/aitchiss/pen/zYKaMGo %}

Remember in the old days when you'd see adverts on noticeboards/lamp-posts/wherever with little phone number slips you could rip off and take home? I thought it might be fun to try to make one in CSS as an alternative "contact" section.

I wanted to try and make this semantic and accessible, so the contact links are all marked up as  list items (this makes sure they're announced as a list to screen reader users, and show as a nice vanilla list if the CSS fails to load). I've also made heavy use of `rem` units, as a slightly hacky way of making sure that if a user has a larger font-size set on their browser, the content scales up without affecting the "CSS art" of it 🙂

I've tried to make some of the paper slips stick out a bit more, as if they'd been folded out from the poster slightly. To do this I used `skew` and - yet again - some linear gradients. It would be cool to make this interactive at some point, to let a user "tear" an item off of the list. Maybe a future experiment!
Event Tent for Wedding
Published: 2021-01-08 14:06:16

<a href="https://indiantent.com/">Indian Tents</a> are ideal for those who are hosting big events such as weddings, banquets, and many other social events. They can provide accommodation for a large number of guests and provide an atmosphere that is luxurious and elegant. There is not always enough space in homes for these events and this requires consideration of outdoor space. This means that considerations such as the weather must be taken into consideration. Indian Tent is a great choice in such situations as they are very versatile and adaptable. They can be launched in many colors and sizes and many accessories come to suit the occasion.

There are many <a href="https://indiantent.com/"> Indian Tent</a> For Sale and the price of event tents may vary according to size and accessories. Most event tents are rented by individuals rather than purchased. These tents are very expensive to buy for one-time use and are therefore more commonly rented. Tents come with a guarantee against mildew, water, and sun. They can withstand most weather conditions but if the area is too windy then heavy materials should be used as these will avoid problems.

The Indian Tent on the market today are modern and up-to-date structures that can come with attractive interiors or interior features such as heating depending on weather conditions. These tents mainly come in two designs. The pole design uses a pole to form the canvas that forms the tent. Frame tents use a steel or aluminum frame to support the canvas. These tents usually depend on space requirements.

When deciding on Indian Tent it is important to determine if the tent needs a lot of accessories like lighting and many other features can be rented along with such as the tent. If the occasion is a wedding item such as fancy lighting may be required and it increases the additional cost. If the opportunity is small, it means that a tent that is not as fancy will be needed and therefore the tent should not be grand but very simple. The choice of the color of the tent is also determined by the event as well as the individual choice of the person conducting the event. If a lot of space is required then the tent should be a frame tent as these are the best option as there is no pillar in the entire covered area.

Make sure that any event you hire is treated for fire retardation and is waterproof. This ensures that the tent can withstand any fire hazards and allow enough time to get out. One of the best linings is the lining but it makes the material a little heavier to handle.
Mon nouveau challenge cette année
Tags: challenge, devlive, webdev, french
Published: 2021-01-08 14:05:54

---
title: Mon nouveau challenge cette année
published: true
description: 
tags: challenge, devlive, webdev, french
cover_image: https://images.unsplash.com/photo-1560443794-1333caf35d20?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80
---
Nouvelle annéee, nouveau temps, nouvelle ère, ou simplement nouvelles bonnes résolutions.
Janvier semble être le bon moment pour créer des habitudes et des projets.
Il est donc temps pour moi d'en créer une nouvelle.
Cette année, je me lance dans le blogging, en réalisant au moins un nouvel article chaque semaine, dans deux langues différentes, le français et l'anglais.
Le français tout d'abord, car c'est la langue de l'amour et de la romance, car c'est la langue de grands auteurs comme Hugo, Molière ou Raimbaud. Le français tout d'abord je l'ai dit, pour la meilleure et la plus pragmatique des raisons, parce que c'est ma langue maternelle.

Et deuxièmement en anglais, parce que c'est la langue internationale par excellence, et d'autant plus la langue de la programmation (et non pas le langage de programmation, vous l'avez ?).

Ce défi me donnera une chance d'améliorer mes compétences rédactionnelles, et mes compétences en anglais (tt p*tain il y a du taff). Cela me poussera également à découvrir et à apprendre de nouveaux concepts et technologies. Enfin, cela vous donnera une nouvelle liste d'articles à lire, et beaucoup de nouveaux concepts expliqués (je promets que je vais essayer)

Je sais déjà que cet article n'est pas si intéressant. Et si vous le lisez entièrement, je vous remercie. Mais c'est important pour moi d'avoir un bon départ dans ce défi.

Alors à bientôt ici pour un nouvel article. De l'amour. Bisou.

<small>_Photo by [George Pagan](https://unsplash.com/@gpthree)_</small>

PS : cet article est la version française de [cet article](https://dev.to/jeremymonatte/my-new-challenge-this-year-36md)
NodeJs: Build The Complete E-Commerce Web API
Tags: node, mongodb, webdev, javascript
Published: 2021-01-08 14:00:13

# New Free course: Build The Complete E-Commerce Web API

[Join Here](http://bit.ly/3oqSo9H)

## You’ll learn to:

- Confidently build RESTful services (APIs) using Node.js, Express.js, and MongoDB Atlas

- Employ the best practices for Node.js

- Avoid common mistakes

## What we’ll cover:

- Node module system

- Node Package Manager (NPM)

- Asynchronous JavaScript

- Useful ES6+ features

- Implementing CRUD operations

- Storing complex data in MongoDB

- Data Validation

- Authentication and authorization

- User Roles

- Handling and logging errors the right way

# Why Should learn Node?

Node is great for prototyping and agile development as well as building super fast and highly scalable apps; Companies like Uber and PayPal use Node in production to build applications because it requires fewer people and less code. Plus, Node has the largest ecosystem of open-source library, so you don’t have to build everything from scratch.

You learn in this course how to use mongoDb without any installing extra tools, MongoDB is now on cloud, so you will store your database in safe place!

This is not a reading documentation course. You have here a real-world project to learn from, and you will see the exact place of every feature of every technology used in this course.
Digital Ocean's Hackathon App: COVID-19 One Stop Solution
Tags: dohackathon, react, showdev, chatbot
Published: 2021-01-08 13:45:42

####What We built

We have built a COVID-19 tracker to track the latest data of the number of cases, the number of recoveries and the number of deaths both globally and country-wise.
The app also has a news section to get the latest news regarding covid vaccines and the new strain.
We also implemented a chatbot to check the chances of having the Corona Virus. The chatbot is at par with India's official Aarogya Setu app.

#### Category Submission: 

Program for the People

#### App Link

https://covid-19-tracker-react-iz8kt.ondigitalocean.app/

####Screenshots
Home Page:

<img src="https://i.ibb.co/n3QHfrX/Home.jpg">
Analyzer Page:

<img src="https://i.ibb.co/LkFsC9Y/Analyzer.jpg">
Stats Page:

<img src="https://i.ibb.co/NmKFKr3/Stats.jpg">

Mobile View Home Page:

<img src="https://i.ibb.co/M8m6MQ0/Screenshot-2021-01-10-00-52-13-95.jpg">
Mobile View Hamburger Menu:

<img src="https://i.ibb.co/SdHV3xp/Screenshot-2021-01-10-00-52-32-24.jpg">
Mobile View Analyzer Page:

<img src="https://i.ibb.co/CK3mt1p/Screenshot-2021-01-10-00-52-58-63.jpg">
Mobile View Stats Page:

<img src="https://i.ibb.co/zsjzPCm/Screenshot-2021-01-10-00-53-08-62.jpg">

#### Description

The project is a combined effort of me (@aryan040501) and Utkarsh Kumar (@thisisutkarsh). We have created a one-stop app for COVID-19.

The app has 3 main pages:
###Home: 
Consists of Latest news related to COVID-19.

###Stats: 
Consists of the daily number of cases, recoveries and deaths with graphs for global and also for every country on selection. It uses react and fetches data from an API which is a realtime JSON file.

###Analyzer: 
It is a bot that analyses if you have chances of COVID-19, *it is at par with Aarogya Setu (an Indian application supported by Govt of India)

#### Link to Source Code

https://github.com/aryan040501/Covid19tracker-react

#### Permissive License

MIT Licence

#### Background
(What made you decide to build this particular app? What inspired you?)

Amidst these hard times, we often get carried away that the virus might not be that dangerous as the media doesn't always show only about Covid19.
We came across this idea so that people from all over the world have access to the information and can also analyze if they have a risk of COVID.
We didn't want anyone to be at risk of exposure and that is what inspired us.

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)

We used React for the front end and also used covid's free API to help us with the statistics.
We learnt how to deal with API in React and also learnt how we can make bots for a website using "react-chatbot-kit"
We then used the free tier of DigitalOcean to host the app from GitHub.

#### List of All Technologies Used To Build
1.) React
2.) CSS
3.) HTML
4.) JavaScript
5.) Material-UI


#### Additional Resources/Info
This is a team project.
Personal website made with Python/django/bootstrap
Tags: dohackathon
Published: 2021-01-08 13:45:02

It's a site that I did as a project and practice for my python/Django skills.
One of the reasons why I made this is that since the time I started I really wanna have my own site just for me. so i did this

Link: https://tommysylver.pythonanywhere.com/
How to Become Better at Programming.
Tags: beginners, programming, motivation
Published: 2021-01-08 13:42:50

Here are 7 short steps you can take(steps are in no particular order) to become better at programming.

# 1. Allow yourself to fail.

You won't always know how to implement a procedure or fix a problem,  but go ahead and try it nonetheless. Allow yourself to fail X amount of times to know what not to do. Plus, you have Google and StackOverflow.

# 2. Be Creative.

There are some many to doing a thing when it comes to programming. Experiment with different approaches and methods, then compare to see which is better.

# 3. Projects.

Experiment by building projects, embark on a daring project, but not anything way above your knowledge level. Anything that'll make you improve, even if it's a To-Do App. urgh!

# 4. Critique dat cooode!

Yes, it works, but is it efficient and is that the only way to do it? Think of or google ways to make it better. Think in step 2.

# 5. Learn from the elders.

Read code from well-respected programmers in the community who code in the language you use. Don't forget to critique their code too, and if possible ask them questions on why they chose to do it the way they did it.

# 6. Have the hacker mindset.

Break parts of your code to see loopholes. By seeing the loopholes you can implement a robust solution.

# 7. Fear kills (note to self).

Don't let fear stop you. if you fail, then learn from it and get back to it. Remember that "there are people less qualified than you, doing things you want to do, simply because they decided to take action." I think Jack Ma said that.

## Summary.
Maybe this would have been a long article, but that would have been filled with fluff and digression. I believe this is the real deal. Short and straight to point.

Share, like, comment!

<small>Pss! Follow me on [Twitter](https://twitter.com/_romeopeter), I post there too.</small>