teleren/devto huggingface dataset:
My New Website (tools and kits)
Tags: development, webdev
Published: 2020-08-09 20:21:23

After a long time of procastinating, I've finally been able to make time to create my own personal website. This website involves a relatively
small tech stack and doesn't cost a dime as it involves no hosting or backend. In this post, I will like to share what the website is built on with you.

Here is a link to the site on Github: [Code](https://github.com/oluwakeye-john/personal). You can grab some codes and use it in yours.
Also, feel free to raise an issue.

## Tool Stack

### Gatsby

[Gatsby](https://gatsbyjs.org) is a static site generator (SSR) which is used to make blazing fast websites and it is based on React. Gatsby uses server-side rendering to create static websites.
Build usually take a while, which is based on the number of pages and images. I chose Gatsby for this project because it:

- Has great image optimization
- East to setup
- Has a large ecosystem of developers
- Is blazing fast

### Github

Both the code and the post content are stored on github.

### Styled Components

I used [styled components](https://styled-components.com/) for styling. Styled components allow for true reusable components, locally scoped classes and prevents clashing class names.
I plan on writing more about styled components in future posts

### MDX

Most developers love markdown. So combining the power of markdown (md) and react JSX for a blog is absolutely incredible. It allows you to embed any react components directly into your blog.

### ImprovMX

[ImprovMX](http://improvmx.com/) serves as my mail forwarder. It forwards mails from \*@keyejohn.com to my personal email account. BTW, It’s free.

### React-icons

[React-icons](https://react-icons.github.io/react-icons/) is a collection of different fonts from different: font-awesome, material design icons, etc. For this project, I used only font awesome though I hope to explore other ones in future.

### PrismJS

[Prism JS](https://prismjs.com/) is a lightweight, extensible syntax highlighter, built with modern web standards in mind. For this website, I used a theme called <a href='#'>prism-tomorrow</a>

### Netlify

This website is hosted on [Netlify](httsp://netlify.com). I enabled continuous deployment, so that the code is automatically updated from Github

## Tradeoffs

Overall, this stack is good. The major problem however is the long build time. This denies the opportunity to see changes to the site immediately. However, the introduction of Gatby's incremental build has reduced this drastically.

## Summary

This stack is in no way perfect. I however went with this because:

- It has great developer experience (DE)
- It is cheap (comes at no cost)
- It is very easy to maintain
User Signup adjustments
Tags: 100daysofcode, javascript
Published: 2020-08-09 20:21:09

I made a few a adjustments to my user model. The signup should require the first name, last name and the email should be unique.
```javascript
const userModel = new Schema(
  {
    firstName: {
      type: String,
      required: true
    },
    lastName: {
      type: String,
      required: true
    },
    email: {
      type: String,
      required: true,
      unique: true
    },
  }
);
```

Day 24
TikTok Loader in CSS 🎶
Tags: css, animation, loader, webdev
Published: 2020-08-09 18:45:02

I like TikTok's loading animation, here's my attempt to recreate it with just a few lines of CSS:

{% codesandbox thirsty-mcclintock-vfqen %}

A couple properties/tricks that make this possible:

### `mix-blend-mode`

Produces the overlap effect between the two circles. There are a bunch of different [values](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for this; the native app appears to use `color-dodge` but `multiply` looks cooler IMO 😎.

### `animation-delay` 

The [`animation-delay` property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay) is used to apply the same animation to different elements at different starting keyframes. Passing a delay of half the length of the full animation will offset it halfway, and making it negative will prevent an initial pause for the delay to end.

---

~~P.S. doesn't look like the TikTok web app has a loading animation, feel free to use this on the site @tiktokdevs 😇~~ Nevermind, not true! Just noticed it.
All the Clouds in AWS
Tags: aws, career, beginners, 100daysofcloud
Published: 2020-08-09 20:10:28

### Cloud Services

I often hear AWS users complain that there are too many services with "cloud" in the name. These services are usually completely different from one another which leads to even more confusion. 

In this quick post I will list all of the current services with **Cloud** in their name and what they are used for.

## Types of Services:

### CloudFormation
[CloudFormation](https://aws.amazon.com/cloudformation/): Is infrastructure as code. It gives you the ability to use a templating script like `yaml` or `json` to set up services. 

**How it works**
- Use `yaml` or `json` to code your infrastructure from scratch
- upload your local code to a S3 bucket.
- Use AWS CloudFormation to create a stack based on your template code. 
- AWS CloudFormation will provisdion and configure the stacks and resources for you. 

### CloudTrail
[CloudTrail](https://aws.amazon.com/cloudtrail/) is a log of all actions that have taken place inside your AWS environment.

- CloudTrail answers: "Who did what on AWS?"
- It is a web service that records API activity in your AWS account
- Logs information on:
    - who made a request
    - the services used
    - the actions performed
    - parameters for the actions
    - the response elements returned

### CloudFront
[CloudFront](https://aws.amazon.com/cloudfront/) is a Content Distribution Network. It creates a cached copy of your website and copies to servers located near people trying to download a website.

### CloudWatch
[CloudWatch](https://aws.amazon.com/cloudwatch/) focuses on the activity of AWS services and resources, reporting on their health and performance.

- CloudWatch answers: "What is happening on AWS?"
- monitors AWS resources and applications
- collects and tracks metrics
- collects and monitors log files
- with CloudWatch you can set alarms

Cloud Watch is also a **collection of multiple services.**

**CloudWatch Logs**: any custom log data, memory usage, Rails logs or Nginx logs

**CloudWatch Metrics**: metrics that are based off of logs like memory usage

**CloudWatch Events**: trigger an event based on a condition like "Every hour take a snapshot of the server"

**CloudWatch Alarms**: triggers notifications based on metrics

**CloudWatch Dashboard**: create visualizations based on metrics

### Cloud Search
[CloudSearch](https://aws.amazon.com/cloudsearch/) is a search engine used for sites like an e-commerce website that you want to add a search input too.
Simple text blinking animation using styled-components
Tags: react, css, styledcomponents, animation
Published: 2020-08-09 20:04:48

# tl;dr
```
import React from 'react';
import styled, { keyframes } from 'styled-components'

function blinkingEffect() {
  return keyframes`
    50% {
      opacity: 0;
    }
  `;
}

const AnimatedComponent = styled.div`
  animation: ${blinkingEffect} 1s linear infinite;
`
const App = () => {
  return (
    <AnimatedComponent>_</AnimatedComponent>
  )
}
```

# Issue
My app is pretty simple and I created it for learning purposes. 
The user must enter a binary value and the app converts the value into a decimal number. You can try it here: https://jovial-wilson-a92dc1.netlify.app/

After adding the main functionalities I wanted to use CSS to animate the output field.
*The output field must show a blinking underscore character until the user types a valid binary value*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rkqi3p79km827yvx2is4.gif)

# Solution
I first added styled-components to the project:
```
yarn add styled-components
```
Then I imported styled-components' `styled` and `keyframes` into my App:
```
import styled, { keyframes } from 'styled-components'
```
For `keyframes` to work with styled-components, I created a function outside of my App:
```
function blinkingEffect() {
  return keyframes`
    50% {
      opacity: 0;
    }
  `;
}
```
You can name the function whatever. Remembering that `keyframes` is a CSS concept. Keyframes controls the intermediate steps in a CSS animation.

Our animation is defined after as a styled component and it references our keyframes function `blinkingEffect` declared before:
```
const AnimatedComponent = styled.div`
  animation: ${blinkingEffect} 1s linear infinite;
`
```
Lastly, I created our react App which returns the `AnimatedComponent` and some text - that will blink according to the implementation:
```
const App = () => {
  return (
    <AnimatedComponent>_</AnimatedComponent>
  )
}
```
# Conclusion
This is a pretty simple app and animation for learning purposes. I googled *text-blink animation* and didn't find the solution exactly, so I created this post. I hope it helps you too!

The code posted here isn't functional since you have to configure your app using `create-react-app` or something similar.

You can find the *convert binary to decimal app* code here: https://github.com/veller/app-ideas-Bin2Dec

Here's another source that helped me to get to the solution: https://github.com/styled-components/styled-components/issues/14
Keeping an Offline Copy of StackOverflow with Kiwix
Published: 2021-03-10 23:39:52

---
title: Keeping an Offline Copy of StackOverflow with Kiwix
published: true
date: 2020-08-09 20:03:00 UTC
tags: 
canonical_url: 
---

For developers working in an offline environment such as public transit or rural dead zones, looking up information on sites like Wikipedia or StackOverflow might seem impossible.

Lately, I’ve been using [Kiwix](https://www.kiwix.org/) to keep offline copies of popular sites like Wikipedia and StackOverflow, aided by the availability of cheap USB mass storage devices. Kiwix is an offline web browser that uses a [specialized archive file format](https://en.wikipedia.org/wiki/ZIM_(file_format)) to store copies of reference material. It was built to view Wikipedia articles but later expanded for other data sources like StackOverflow and Open Street Map.

Keeping an offline copy is simple:

1. [Download Kiwix Reader](https://www.kiwix.org/en/downloads/kiwix-reader/)
2. Find [relevant ZIM packages](https://wiki.kiwix.org/wiki/Content_in_all_languages), downloading them via BitTorrent. The files are large, often several hundred GB in size. A new USB drive may be helpful.
3. Open the files using Kiwix.

The experience is like the web version but with a blazing fast load time and the ability to look things up when the internet cuts out.

![Viewing Wiki articles on Kiwix](https://rickcarlino.com/images/2020/kiwix_wikipedia.png)

![Viewing StackOverflow articles on Kiwix](https://rickcarlino.com/images/2020/kiwix_stackoverflow.png)
Forms in React
Tags: react, forms, validation, hooks
Published: 2020-07-13 14:22:01

---
title: Forms in React
published: true
description: A new way of doing forms in React
tags: React, Forms, validation, hooks
---
# Forms in React
Forms have always sucked a bit in React. Which is pretty frustrating given how much of web interactions are done with them. 

Formik tried to solve this and did a pretty good job, until you wanted to do something a bit more complicated. For example I had a form where the user would select a value from a dropdown which triggers an API request to get the options for the next dropdown. If there was only a single option returned then I needed to set the value to that option. This proved far more complicated than I had hoped.

Hooks have also made the situation much easier to deal with, but if you're using lots of `useState` calls to store individual fields then there can be quite a lot of boiler plate just to update a form field, and that's before you've considered doing other tasks such as validation.

```javascript
function HookForm() {
    const [ firstName, setFirstName ] = useState("")
    const handleFirstNameOnChange = (e) => setFirstName(e.target.value)
    const [ lastName, setLastName ] = useState("")
    const handleLastNameOnChange = (e) => setLastName(e.target.value)
    ...
}
```

## So what's the new way
I whipped up a (very) quick proof of concept over the weekend, and have called it [FormUp](https://github.com/wozzo/formup) (Reform was taken).
The idea is to declare the form using a fluent API in a similar way to how [Yup validation](https://github.com/jquense/yup) schema's are written. The result from this hook will then give you everything that you need to not only render the form, but also to update any of the values and which fields have error messages etc.

```javascript
const { fields, form } = FormUp.useFormUp({
  name: FormUp.text(""),
  email: FormUp.email(""),
  dob: FormUp.date(""),
}, {
  onSubmit: (e) => console.log("Submitted"),
});
...
return (
  <FormUp.Form form={form}>
    <FormUp.Input field={fields.name} />
    <FormUp.Input field={fields.email} />
    <FormUp.Input field={fields.dob} />
    <button type="submit">Submit</button>
  </FormUp.Form>
)
```
## What's next
It's still very raw and certainly not ready for anyone to use. But I'm hoping to quickly add features to enable validation, value management. Let me know what you think. Is this likely to be useful or are we happy with Formik?
Wie du ein Multi-Step Formular in WordPress erstellst
Tags: wordpress, formular, wordpressplugins, wpforms
Published: 2020-08-19 13:45:26

---
title: Wie du ein Multi-Step Formular in WordPress erstellst
published: true
date: 2020-08-09 19:35:54 UTC
tags: Wordpress,formular,WordPressPlugins,WPForms
canonical_url: https://j0e.org/wpforms-multistep-formular/
---

![Multi-Step Formulare mit WPForms](https://j0e.org/wp-content/uploads/2020/08/wpforms-multi-step.png)

Mehrseitige Multi-Step Formulare haben den Vorteil, dass du die Informationen häppchenweise und wohl-sortiert über mehrere …



Der Beitrag [Wie du ein Multi-Step Formular in WordPress erstellst](https://j0e.org/wpforms-multistep-formular/) erschien zuerst auf [WordPress und Marketing](https://j0e.org).
Testexpo2020
Tags: softwaretestingconference, agile, conference
Published: 2020-08-09 19:34:35

Now, is the time to address this by focusing on increasing quality. Digital transformation is driving a shift in the testing landscape. Different skills are now required for success with agile and automation now default and we must test for new technologies. All of this opens up new challenges for the testing team — mobile testing, which tools to use, how do you move to the cloud, and stay secure, and how do you do all of this fast enough to keep up with business demand.
Changes in processes and mindset are fundamental. Agile is beneficial if you find the right methodology and the rest of the business is fully aligned. Thorough mobile and omnichannel testing is a must for delivering the desired level of quality and security testing at the application layer before release is critical.
UNICOM is an events and training company specializing in the areas of business, IT, and Quantitative Finance. The company’s products include conferences, public and in-house training courses (including certified training), and networking events.
UNICOM serves two groups of customers (1) 'end-user' organizations from the private and public sectors who want to learn about new trends and best practices, gain knowledge, skills, qualifications and new strategies and (2) product vendors and consultants who want to meet prospective customers and achieve visibility in specific areas of business.

The development and commissioning of these events are based on market research, technology analysis from a business perspective, and most significantly the requirements and feedback of our customers.

By understanding the clients' needs, keeping them informed and updated, and acting as a convenient "one-stop information shop", UNICOM strives to create quality information products and offer a high standard of service.
 unicom organizing an Agile and DevOps Test Expo Event on 15th October 2020. There will be sharing of practical experiences, extended knowledge-sharing sessions, “Round Table” discussions for sharing insights and industry trends. Amongst many related topics, the event addresses areas such as agile, test design, automation, performance, security, and DevOps.

event link: https://conference.unicom.co.uk/testexpo/2020/london/
Curated list: Math on YouTube
Tags: machinelearning, statistics, mathematics, datascience
Published: 2020-08-09 19:32:49

> *<span>Cover image by <a href="https://unsplash.com/@isaacmsmith?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Isaac Smith</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>*

Hello everyone!

This post is just to share with you some incredible playlists I have found on YouTube with priceless content about Statistics, Probability, Linear Algebra, Calculus, Machine Learning, and so on. These videos are helping me a lot to remember and to improve the mathematical concepts behind the Data Science universe.

[Statistics Fundamentals](https://www.youtube.com/watch?v=qBigTkBLU6g&amp;list=PLblh5JKOoLUK0FLuzwntyYI10UQFUhsY9) - StatQuest with Josh Starmer

{% youtube 0oc49DyA3hU %}

[Introduction to Probability](https://www.youtube.com/playlist?list=PLIeGtxpvyG-I9m4otjYGCQL_1m0Edm0LA) - Brandon Foltz

[Linear Regression and Linear Models](https://www.youtube.com/watch?v=PaFPbb66DxQ&amp;list=PLblh5JKOoLUIzaEkCLIUxQFjPIlapw8nU) - StatQuest with Josh Starmer

{% youtube Qa2APhWjQPc %}

[Simple Linear Regression](https://www.youtube.com/playlist?list=PLIeGtxpvyG-LoKUpV0fSY8BGKIMIdmfCi) - Brandon Foltz

[Logistic Regression](https://www.youtube.com/watch?v=yIYKR4sgzI8&amp;list=PLblh5JKOoLUKxzEP5HA2d-Li7IJkHfXSe) - StatQuest with Josh Starmer

[Machine Learning](https://www.youtube.com/watch?v=Gv9_4yMHFhI&amp;list=PLblh5JKOoLUICTaGLRoHQDuF_7q2GfuJF) - StatQuest with Josh Starmer

[Essence of Linear Algebra](https://www.youtube.com/watch?v=fNk_zzaMoSs&amp;list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab) - 3Blue1Brown

{% youtube fNk_zzaMoSs %}

[Essence of Calculus](https://www.youtube.com/watch?v=WUvTyaaNkzM&amp;list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr) - 3Blue1Brown

[Diferencial Equations](https://www.youtube.com/watch?v=p_di4Zn4wz4&amp;list=PLZHQObOWTQDNPOjrT6KVlfJuKtYTftqH6) - 3Blue1Brown

[Neural Networks](https://www.youtube.com/watch?v=aircAruvnKk&amp;list=PLZHQObOWTQDNU6R1_67000Dx_ZCJB-3pi) - 3Blue1Brown

---

[STATS 101](https://www.bcfoltz.com/blog/stats-101/) - All playlists of Brandon Foltz

[Video Index](https://statquest.org/video-index/) - Video Index of StatQuest with Josh Starmer
Try to solve Invoke-SqlCmd reduced output 
Tags: powershell, invokesqlcmd
Published: 2020-08-09 19:16:08

<sub><span>Photo by <a href="https://unsplash.com/@johnmcclane?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Andres Siimon</a> on <a href="https://unsplash.com/s/photos/dig?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></sub>

We use Invoke-SqlCmd to execute short sql scripts modified in git repository.

But once we have tried to select a large JSON column, and get the result truncated.

The [popular answer](https://stackoverflow.com/questions/28374805/invoke-sqlcmd-doesnt-return-long-string) is to add the following option 
```Powershell
 -MaxCharLength 65534
```
but it did not work for us.

I find a workaround using Export-Csv.
If you are using Powershell 7, you can use -UseQuotes Never .

```Powershell
$files= git diff --name-status HEAD^ HEAD

...

if($line.Change -ne "D")
{
if($line.Path)
{
Write-Host $line.Path
$outputfile= $line.Path.Split('/')[1] -replace  ".sql", ".txt"
Write-Host "$(Build.ArtifactStagingDirectory)/$($outputfile)"
$result = Invoke-Sqlcmd -ServerInstance "$env:Server" -Database "$env:Db" -Username "$env:UserLogin" -Password "$env:UserPassword" -InputFile $line.Path 
$result | Export-Csv "$(Build.ArtifactStagingDirectory)/$($outputfile)"  -NoTypeInformation  -Delimiter "," -UseQuotes Never
$result

```

Sadly, the ouptut type was NVARCHAR(MAX), so it's still truncated.

Hope this help !
Beginner:Mongoose  in Nodejs
Tags: node, mongodb, productivity, npm
Published: 2020-08-09 18:50:07

#Some beginner level introduction to Mongoose

###Mongoose
A popular library which manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.
Sounds Tough!!
Let's just say it is used to create new objects(Models) in your database
For Example:
```
const User = mongoose.model('User', { 
    name: {
        type:String,
        required: true,
        trim:true
    },
    age:{
        type:Number,
        default:0,
        validate(value){
            if(value<0){
                throw new Error("Age must be positive")
            }
        }
    },
 const user1 = new User({ 
     name: 'Yash',
     age:21  
 });
```
The above piece of code can be used to create a new user with name Yash and age 21.

type, default, required, trim are all Schema types. You can more about them [Here](https://mongoosejs.com/docs/schematypes.html)

We can also use a very popular npm library-[Validator Library](https://www.npmjs.com/package/validator) for advanced validations in our projects.

###Connection to local server
```
mongoose.connect('mongodb://localhost:27017/myapp', {useNewUrlParser: true});
```
This piece of code can be used to establish connection.
```
user1.save().then(()=>{
    console.log(user1)
}).catch((error)=>{
    console.log("Error",error)
})
```
This will then save the user in your database.
```
app.listen(port, ()=>{
    console.log('Server is up on port '+ port)
})
```
If built correctly, you will get a console that server is running.

THANK YOU FOR READING. HOPE YOU LIKE IT.
Project Elpis #4: Checkpoints
Published: 2020-07-26 02:53:54

Hellooooooo 

This week I fixed some stuff and added a few new things.

First, I fixed the jump attacks that I talked about last week. We decided to just limit the amount of jump attacks to once per jump. So, I added a attackLock variable that determines whether or not the player can attack. If the player has already attacked once after jumping, the attackLock is set to true until the player returns back to the ground.

Then, I added checkpoints to our game. When the player reaches a checkpoint and presses the up arrow key, it restores the player’s health back to full. It’s pretty simple to make cuz I just changed the portal code up a little bit and used the corner notification system that Kevin made. I also adjusted the portal. Now, if the player wants to enter the portal, the player has to press the up arrow key as well.

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

Lastly, I added dashing to the main character. Part of the reason that I decided to finish the dash movement this week was because whenever we had to test the game, it took too long to finish the level. Now that we have dashing, the character can move much faster, and we don’t have to walk for a long time when we just want to test a minor thing.

Oh and I also reorganized the folders and deleted some levels that I created for testing cuz Kevin was complaining XD


\- Katherine :)
Python Code/seeing. When do you start “seeing” the Dictionaries and variables you make with python? 
Tags: python, django, kivy, javascript
Published: 2020-08-09 18:43:16

Creating Dictionaries, variables, lists, classes, tuples, ect....

When do you start seeing the data used? Or even style to place it? 

So far with flask, it’s html and css with the {% blocks %}, but is there something more/else to do? 

How is that info used???