teleren/devto huggingface dataset:
Save yourself hours of editing when working with recordings of work (art, coding, etc)
Tags: ffmpeg, productivity, linux, video
Published: 2020-04-27 17:21:23

{% youtube jWlYvUlGHy8 %}

## The Magic

This is probably one of the more helpful tricks I've shown off so far.

Here is command using ffmpeg that will, get this, remove all frozen frames from a video, leaving only the frames showing work being done.

```sh
ffmpeg -i video.mp4 -vf mpdecimate,setpts=N/FRAME_RATE/TB -an out.mp4
```

Let this run for awhile and **BOOM**, you get a clean recording devoid of down time.

This has one catch, **mpdecimate**, the filter removing the frozen frames, only operates on the frames of a video, not the audio.

I use the **-an** option to remove the audio, if not, it would be desynced and make no sense.

This has saved me **HOURS** of editing when working on my wife's recording of her doing graphic design work.

I hope it helps ya'll too.

## The Plug

If this trick helped ya'll, I would appreciate it if you would share the YouTube video and go sub to my channel, I'm working on growing my channel and any help would be amazing.
MultiValueDictKeyError at / 'username'
Published: 2020-04-27 17:12:37

Hello,
Am trying to create a Django form with HTML but validation is giving me this error MultiValueDictKeyError at / 'username'

here are my views 
def signup(request):
    if request.method =='POST':
        if request.POST['password'] == request.POST['password1']:
            try:
                user =User.objects.get(username=request.POST['username'])
                return render(request, 'accounts/signup.html', {'error':'Username already exist!'})
            except User.DoesNotExist:
                user = User.objects.create_user(request.POST['username'], password=request.POST['password'])
                auth.login(request, user)
                redirect('home')
    else:
        return render(request, 'accounts/signup.html')

my HTML code below
<body>

    

    {% block content %}


        {% if error %}

            {error }
            <br ><br >
        {% endif %}
        <div class="box">
            <h2>Signup</h2>
            <form method="POST" action="{% url 'signup' %}">
                {% csrf_token %}
                <div class="inputBox">
                    <input type="text" name="" required=" ">
                    <label>Name:</label>
                </div>
                <div class="inputBox">
                    <input type="text" name="" required=" ">
                    <label>Email:</label>
                </div>
                <div class="inputBox">
                    <input type="password" name="password" required=" ">
                    <label>Password:</label>
                </div>
                <div class="inputBox">
                    <input type="password" name="password1" required=" ">
                    <label>Confirm Password:</label>
                </div>
                <input type="submit" name="submit"> 
            </form>

            <footer class="text-muted">
                <div class="container text-center">
                    <p> &copy; Afriktour {% now ' Y ' %}</p>
                </div>
            </footer>
        </div>
        
    {% endblock %}
    
</body>
</html>
Select a row with Whereclause in SQLAlchemy
Tags: python
Published: 2020-04-27 13:35:01

I am new to SQLAlchemy and aiopg. After defined a Tabled object and finished DB initialization, I wanted to fetch one row with specified `id` in aiohttp server.

```python
import aiopg.sa
from sqlalchemy import (
    MetaData, Table, Column, ForeignKey,
    Integer, String, Date
)

...

product = Table(
    'product', meta,

    Column('id', Integer, primary_key=True),
    Column('Name', String(200), nullable=False),
    Column('Description', String(200), nullable=False),
    Column('Price', Integer, nullable=False),

)

async def init_pg(app):
    conf = app['config']['postgres']
    engine = await aiopg.sa.create_engine(
        database=conf['database'],
        user=conf['user'],
        password=conf['password'],
        host=conf['host'],
        port=conf['port'],
        minsize=conf['minsize'],
        maxsize=conf['maxsize'],
    )
    app['db'] = engine
```
After spending all afternoon, finally I figured it out. `text` can convert string as `TextClause` and it can be used in `Whereclause`.

https://docs.sqlalchemy.org/en/13/core/selectable.html#sqlalchemy.sql.expression.select

```python
from sqlalchemy import text

...

async with request.app['db'].acquire() as conn:
        whereclause = text('id = {}'.format(request.match_info['id']))
        cursor = await conn.execute(db.product.select(whereclause=whereclause))
        record = await cursor.fetchone()
        product = Product(*record.values()) 
```
I am really happy to know it :)  and I had better look into Official Document more carefully.
Off-Canvas Menu
Tags: flexbox, beginners, javascript, codepen
Published: 2020-04-27 17:01:15

---
title: Off-Canvas Menu 
published: true
description: Css, Flexbox, JavaScript Canvas Menu
tags: flexbox,beginner,javascript,codepen
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/taj23eu9weeeu93x6o2k.jpg
---

Let's build a simple canvas menu with JavaScript, html and css Flexbox.
First let us start with html:

```html
<div class="wrapper">
  <div class="off-canvas">
  <ul>
    <li>Home</li>
    <li>Portfolio</li>
    <li>Contact</li>
  </ul>
</div>
  <div class="content">
  <h1>Click the button</h1>
  <button class="btn-menu">
    Menu</button>
</div>
</div>
```
After Our Css:
```css
* {
  margin: 0;
  padding: 0;
  boz-sizing: border-box;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  }

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: grey;
  flex: 4 0 0;
  }

.content h1 {
   letter-spacing: .2rem;
 color: white;
  padding: 2rem;
}

.content button {
margin-left: 2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  padding: 0.5rem;
  border-radius: .4rem;
  color: red;
}

.off-canvas {
  background: darkgrey;
  flex: 1 0 0;
 }

.off-canvas ul {
  padding: 2rem;
  list-style: none;
  letter-spacing: .1rem;
  line-height: 2rem;
  color: white;
}


.open  {
 display: none;
  }
```
And in the end a bit of JavaScript:
```javascript
const canvas = document.querySelector('.off-canvas')
const content = document.querySelector('.content')
const button = document.querySelector('.btn-menu')


button.addEventListener("click", _ => {
 // var canvasWidth = canvas.clientWidth;
canvas.classList.toggle('open')

})
```
This is our Canvas Menu:
{% codepen https://codepen.io/giandodev/pen/PoPmyLN %}
Help the team to define the sprint goal
Tags: scrum, sprint, goal, issues
Published: 2020-04-27 13:26:45

We all know that having a good sprint goal is very important for any team, but do we all know how to define it?

In some cases, the team is not able to define a sprint goal at all because they basically consider it optional or they don’t know how to do it and as result they don’t see how to benefit from it. 

##Working without a sprint goal

I admit that in the past, I worked in different teams who were used to work without a sprint goal. Here are some of the related issues we faced in our daily work:
* The team is not able to deliver working software at the end of a sprint
* Team members focus separately on their own goals and don’t work toward the same goal
* The team doesn’t focus always on implementing the most important features
* Bottlenecks occur frequently in testing and code review which prevent work from being completed
* Lack of collaboration between team members
* Team members remain specialized in a particular area of product
* The daily meeting becomes a simple status report

##Bad sprint goal

In one occasion we tried to define a sprint goal to tackle some of the problems mentioned above but we failed. At that moment, we thought that we did well but much later we discovered that we defined a bad goal. Here are some examples:
* Complete user stories A and B
* Fix high-priority bugs

As you have noticed, those goals do not describe any special purpose for the sprint; they are generic and encourage the team to focus on completing tasks instead of delivering value to customers.

##Good sprint goal?

With a good sprint goal, we enforce the importance of having a real objective that is aligned with customer expectations.  Now the question is, how do we actually define a good sprint goal?
Props in React
Published: 2020-04-27 16:42:07

A very important part of React is the use of “props” which is a special keyword  that stands for “properties” and refers to a way of  passing data from one component to another. It is vital to note that data within props are passed in a uni-directional flow(meaning data can only be passed in one direction, usually from the parent component to the child/children components. 

In order to understand props, we must first take into consideration the concept of “component rendering “


##What is Component Rendering?
Let’s explain using code :

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

In the code sample above, we have two function based components, “App” and “Element”. Notice how the App component is passed into the Element component within the “return” method. This `<App/>` syntax means the App component is rendered within the Element component in order to be displayed on the web page. 


##How do we use props?

In order to use props, we pass a property which we can name anything we like  as an attribute to the rendered child component within the return method of the parent component. Thereafter we pass `props` as a parameter within the child component  and `props.attribute-name` into the JSX of the child component enclosed in curly brackets whenever we want to reference the props. Remember that anytime we want to reference any JavaScript syntax within JSX , we must enclose it in curly brackets.

Take a  Look at the syntax below for passing props into function based components :
 

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


Please note that when we want to pass props into a class based component, the syntax changes slightly by the addition of  `this` in front of the props such as `this.props.attribute-name`


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


##USING PROPS.CHILDREN

Suppose we have a new function component named “Word” which we want to render within the “Element “ component by nesting it within the App component. Notice how we split the rendered `<App/>` into `<App></App>` so that we can nest the Word component within it. We then pass in `this.props.children` to the App component. 

Look at the syntax below: 


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

##In conclusion 

Props are a very important part of React and they ensure that data can be passed from one component to another. This simple concept makes it easy for components to be reusable and to be able to interact with one another.
An omni-channel ticketing booth
Tags: twiliohackathon
Published: 2020-04-27 16:41:35


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

## What I built: The easiest way to get your tickets from email to whatsapp feat twilio & sendgrid 💕
#### Category Submission: Engaging Engagements 🔗


## Demo Link: (Awaiting whatsapp sender verification for a live demo 😥)
 

## Link to Code: https://github.com/estatheo/TicketBooth


## How it's made?

The best products are made of simple ingredients. As professor Utonium once said:
Sugar (Twilio), Spice (Sendgrid) and everything nice (C#, dotnet core, Azure, ngrok aaaand quarantine) its all it takes to make the perfect mix. A very easy integration between email and WhatsApp 🎉


## Additional Resources/Info

The solution can be run locally with an ngrok tunnel, or deployed to azure. It requires a twilio, sendgrid and azure account. It can be run with the WhatsApp sandbox or with a verified sender.


## The story

We are Mehdi & Theo, and together we are brightcast.io. We love twilio and we wanted to contribute our small part, to this nice hackaton. One of our clients had this very real problem of engaging better with a younger audience, and something that they tried in the past was reaching their users on whatsapp. 
So what we are proposing, is a little hack, that also has real world value, a simple integration between email and whatsapp.

Most of the ticketing systems nowadays will send your (e-)ticket via email, and very few will utilize alternative channels. Here is your Whatsapp TicketingBooth.

How it works:

- On the provider side, nothing changes, they won't require any api integrations or such, just resend the same ticket email with the phone number in the object field
- On the user side, they will still receive the ticket via email (if the provider wants) but the added benefit is that they will have it delivered also via whatsapp (did you know that whatsapp open rate is 98% vs email 17.80%?)

## Step-by-step guide

1. Clone the repo @ https://github.com/estatheo/TicketBooth 👩‍💻

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

2. Follow the readme instructions and run the project (remember ngork if running locally) 👩‍🏫

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

3. Send the ticket to the ticketing email 📧

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

4. Check the end result! 🎉🎉🎉


Hope you enjoyed it, we're here for any queries regarding the hack or more! #twiliohackaton
Shortcut to Theming Websites
Tags: webdev, ux, design
Published: 2020-04-27 16:37:59

A lot of programmers will create a prototype of something with minimal styling to prove a concept and say, "I know it's ugly, I am not a designer." This has always irked me from several angles. First, the line sounds vaguely like a humble brag that they're a programmer, not a designer, and that an eye for design is lower on the totem pole than talent in coding. Second, being self deprecating in a presentation, no matter how informal, is generally a bad idea. Finally, regardless of how much time developers work on their projects, it's often much longer than they would like to admit. Why not look at something more pleasing to the eye while building it?

One confession I must make is that every once in a while, I will procrastinate on a project by twiddling with the color theme in my terminal. Since I code in Vim most of the time, the terminal is where all of my interaction with the machine happens. The way that I often justify going about configuring my color theme stems from how my eyes are feeling. After a while my eyes may hurt from staring at the screen and the idea that changing the terminal's colors may make it easier to work slips into my head. There's a saying that goes, "the best lies are the ones with a little bit of truth in them." and that's exactly why this can convince me to deviate from the task at hand. In truth, taking a short break and coming back to the project with fresh eyes is the better course of action. Changing the theme still feels like work, though, and also led me to share this with you.

A lot of what I just wrote should set off design alarm bells in your head. Interacting with a machine and keeping track of how you feel when you're working with it. Designing a workspace to fit your subjective tastes. These are things that designers do. Voila, you're a designer. Some terminal emulators with GUIs have dropdowns containing dozens or hundreds of themes. Pick one and use the colors from it for your site. Or, go to a terminal theme designer website and randomly generate themes until you find one that fits your fancy. The algorithms behind these generators are often tuned to generate sets of colors that are designed to be legible and pleasing when used together.

After you start flipping through colors to use for your site, you won't be procrastinating any longer. Now you're theming your project. Now you're working! It will be easier for you to be proud of what you're sharing with your audience and easier for them to look at.
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-27 16:36:42

day 48-49/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn about Future, then, catch error, and handle error
https://github.com/triyono777/100-days-of-code/blob/master/log.md


sorry for skipping yesterday
Migrate Git Repository to Git Large File Storage (LFS)
Tags: git, github
Published: 2020-04-27 16:32:58

---
title: Migrate Git Repository to Git Large File Storage (LFS)
published: true
date: Mon, 27 Apr 2020 16:30:01 GMT
tags: git, github
canonical_url: https://notiz.dev/blog/migrate-git-repo-to-git-lfs
---

If you ever come across this error while pushing an existing repository or a large file to GitHub…

`remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.`

… here is how to setup [Git Large File Storage (LFS)](https://git-lfs.github.com/) and migrate your Git history.

## 1. Download and Install Git LFS extension

Download and install the [Git LFS](https://git-lfs.github.com/) extension, you can also install it using [Homebrew](https://brew.sh/).

```bash
brew install git-lfs
```

## 2. Setup Git LFS for your current user account

```bash
git lfs install
```

## 3. Select files to be managed by Git LFS

```bash
# track files by file type
git lfs track "*.zip"

# track directories by path
git lfs track "assets/*"

# track entire directory trees
git lfs track "assets/**/*"

# track file by path
git lfs track "path/to/file"
```

`git lfs track` will add the files tracked by Git LFS to `.gitattributes`. It is important to add `.gitattributes` to Git.

```bash
git add .gitattributes
```

> **Note** : Tracking files are **not** automatically converting these files from your Git history or other branches.

## 4. Migrate Git History

If you have existing files in your Git history or in other branches you need to migrate those files to be tracked by Git LFS as well. Git LFS provides a command [git lfs migrate](https://github.com/git-lfs/git-lfs/blob/master/docs/man/git-lfs-migrate.1.ronn?utm_source=gitlfs_site&utm_medium=doc_man_migrate_link&utm_campaign=gitlfs) with various options depending on your use case.

Before performing your migration you can perform a dry run with `git lfs migrate info [options]`. Use the option `--everything` to perform a migration in every branch. If you only want to migrate files you added before with `git lfs track` you will add those with the `--include="*.zip,src/assets"` flag comma separated.

Here is an example which performs a migration for all Zip-files.

```bash
# dry run of your migration
git lfs migrate info --everything --include="*.zip"

# perform migration
git lfs migrate import --everything --include="*.zip" --verbose
```

Now go ahead and push your repository to GitHub. If successfully pushed and setup GitHub displays the following tag for each file tracked by Git LFS.

![Stored with Git LFS on GitHub](https://notiz.dev/assets/img/blog/migrate-git-repo-to-git-lfs/optimized/stored-with-git-lfs.png)
RaisedButton Examples
Published: 2020-04-27 16:23:17

###RaisedButton
```dart
  Widget _makeButton() {
    return RaisedButton(
        child: Text("PUSH ME"),
        color: Colors.red,
        onPressed: () {
          print("OK!!");
        }
    );
  }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3f92949sev7nchc23usa.PNG)

###RaisedButton + Border
```dart
  Widget _makeButton() {
    return RaisedButton(
      child: Text("PUSH ME"),
      shape: Border.all(),
      color: Colors.red,
      onPressed: () {
        print("PUSHED");
      },
    );
  }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/26jsoenxfp1yejajisg8.PNG)

###RaisedButton + Border + Elevation
```dart
  Widget _makeButton() {
    return RaisedButton(
      color: Colors.red,
      elevation: 15,
      child: Text("PUSH ME"),
      shape: Border.all(),
      onPressed: () {
        print("PUSHED");
      },
    );
  }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tzxb1lnscwft7q260vua.PNG)

##RaisedButton + Elevation + Round Shape
```dart
  Widget _makeButton() {
    return RaisedButton(
      color: Colors.red,
      elevation: 15,
      shape: StadiumBorder(),
      child: Text("PUSH ME"),
      onPressed: () {
        print("PUSHED");
      },
    );
  }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/idz0alrgpiarzjzk2x9q.PNG)


##RaisedButton + Border + Elevation + Round Shape and Border
```dart
  Widget _makeButton() {
    return RaisedButton(
      color: Colors.red,
      elevation: 15,
      shape: StadiumBorder(side: BorderSide(color: Colors.black, width: 1)),
      child: Text("PUSH ME"),
      onPressed: () {
        print("PUSHED");
      },
    );
  }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qpzhecvdlv34slp90tlj.PNG)

##RaisedButton + Border + Icon + Elevation + Round Shape and Border
```dart
  Widget _makeButton() {
    return RaisedButton(
      color: Colors.red,
      elevation: 15,
      child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[Icon(Icons.access_alarm), Text("TIME ALARM")]),
      shape: StadiumBorder(side: BorderSide(color: Colors.black, width: 1)),
      onPressed: () {
        print("PUSHED");
      },
    );
  }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7t5iivascecmve7wv44d.PNG)
Up and Running with Gatsby — New Course
Tags: gatsby, webdev, productivity, programming
Published: 2020-04-27 16:02:20

Have you heard terms like "Gatsby," "static site generator," and "JAM stack" buzzing around but had no clue what they are? Maybe you've heard of Gatsby but just haven't had the time to sift through the docs and try it out yet. After all, diving into new technology can be overwhelming and confusing, even if you find the time for it. That's where [Up and Running with Gatsby](https://thinkster.io/tutorials/up-and-running-with-gatsby-intro?utm_source=devto&utm_medium=blog&utm_term=upandrunningwithGastby&utm_content=&utm_campaign=blog) by [Sam Julien](https://twitter.com/samjulien) comes in.

In this series of eight hands-on tutorials, Sam walks you step-by-step through all of the fundamental concepts of Gatsby from scratch. In each section, you'll learn just enough of each concept to get you ready for building real-world applications. You'll learn about layouts, querying for data with GraphQL, styling (including CSS-in-JS), image optimization, using Markdown and MDX for content, and much, much more. Each tutorial includes sample code and exercises to make sure you actively learn the material instead of just passively watching (and forgetting!). You'll benefit from this course whether you're a seasoned React developer or just getting started.

Learning Gatsby is also a GREAT way to learn React.

So check it out and see why so many people love Gatsby!

I've been going through this course myself because I think Gatsby is extremely cool and I've really enjoyed how Sam teaches the subject and gives you the hands-on experience to actually get to work with Gatsby. I hope you enjoy it as much as I am.

[Check Out the Course](https://thinkster.io/tutorials/up-and-running-with-gatsby-intro?utm_source=devto&utm_medium=blog&utm_term=upandrunningwithGastby&utm_content=&utm_campaign=blog)

Happy Coding!

Enjoy this discussion? Sign up for our newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=upandrunningwithGastby&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=upandrunningwithGastby&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster