teleren/devto huggingface dataset:
FFMPEG: Overlay a video on a video after x seconds
Tags: ffmpeg
Published: 2020-07-24 10:07:31

I’m currently working on a video editor and there is a feature where you can select a gif from Giphy and overlay it on top of your video after a header transition.

With FFmpeg you can manipulate, combine, add effects with filters. There is a filter called `overlay` - that we can use.

### **This did not work as I expected:**

To apply a filter after a certain amount of time we'll use the option `enable` (this option allows for [timeline editing](https://ffmpeg.org/ffmpeg-filters.html#Timeline-editing)).

The below script overlays the gif.mp4 on top of main_video.mp4 during the 1 - 3 seconds duration.

```sh
ffmpeg -i main_video.mp4 -i gif.mp4 -filter_complex
  “[0:v][1:v]overlay=enable='between(t,1,3)'[out]”
-map [out] complete.mp4
```

** `[0:v]` --> first video (main_video.mp4)
** `[1:v]` --> the second video (gif.mp4)
** `[out]` --> first and second video combined into one after the overlay.

Problem: gif.mp4 will start playing from the beginning so after 1 second has passed the gif video will be 1 second in already.

### **Solution:**
Use the `setpts` filter to delay the overlay video (gif.mp4) start with x seconds.

```sh
ffmpeg -i main_video.mp4 -i gif.mp4 -filter_complex
	“[1:v]setpts=PTS-STARTPTS+1/TB[delayedGif];
	 [0:v][delayedGif]overlay=enable='between(t,1,3)'[out]”
-map [out] complete.mp4
```
The setpts filter evaluates its expression and assigns the value as the timestamp for the current frame it is processing. For a detailed explanation check out this [awesome post](https://stackoverflow.com/questions/43333542/what-is-video-timescale-timebase-or-timestamp-in-ffmpeg).

For `setpts=PTS-STARTPTS+1/TB`:
** `+1` is the time in seconds we want to delay our offset 
** TB is the timebase.

Too see the gif-overlay in action check out [Glitterly](https://app.glitterly.app/) - a web based video editor I've been working on.

I'm constantly posting more FFmpeg tips and tricks on Twitter (and happy to answer any questions!) - [@AhlrothOskar](https://twitter.com/AhlrothOskar).
Remove flickering flash messages on Turbolinks
Tags: code, turbolinks, javascript, rails
Published: 2020-09-10 10:14:45

---
title: Remove flickering flash messages on Turbolinks
published: true
date: 2020-07-24 10:06:21 UTC
tags: code,turbolinks,javascript,rails
canonical_url: https://www.michielsikkes.com/remove-flickering-flash-messages-on-turbolinks/
---

If you're using Turbolinks, and flash messages in your Rails app, then this might come in handy.

You might have seen flickering flash messages on your pages when you re-visit them in your app. This is because Turbolinks caches the full page content in its own internal cache. And this cache includes your flash message if you don't explicitly take it out.

Thus, when you revisit a page where a flash message was just displayed, you first see that cached page for an instance. Then the flash messages dissapears because Turbolinks asynchronously loads your actual page content via AJAX.

Here's a snippet we're using to take any flash messages out of the page before sending it to the Turbolinks cache:

```
document.addEventListener("turbolinks:before-cache", function() {
   const flash_message_element = document.querySelector(".flash")
   if (flash_message_element) {
     flash_message_element.remove()
   }
 })
```
<figcaption>Remove flash message before sending to Turbolinks cache</figcaption>
🦊 GitLabCI: easy build and deploy an image with Kaniko
Tags: gitlabci, ci, gitlab, tutorial
Published: 2020-07-24 09:52:39

I read differents post about image build and deployment with GitLab CI and i would like want to share one tip : use Kaniko 😁.


To create an image you can use the usual docker command
```
docker build -t <your image name>
```

And to push this image, this one :
```
docker push <your image name>:latest
```

All built with the docker image, and the _dind_ services :
```
image: docker:stable
 services:
   - docker:dind
```

And finally, in your gitlab-ci.yml, you will have this :

```
🐳  build_and_deploy_classic: 
  stage: build
  image: docker:stable
  services:
    - docker:dind
  script:
    - docker login -u GitLabci -p "$CI_SECRET"  registry.GitLab.com
    - docker build -t <your image name> .
    - docker push <your image name>:latest
```

This work correctly, of course you can use this.

But on my jobs, i prefer use [**Kaniko**](https://github.com/GoogleContainerTools/kaniko). Why ? Simply because in one line you can build and push on a repository. 

Juste before this, you need to write in a file your username, password and auths.

That's all 😎

```
🐳 build_and_deploy_kaniko:
  stage: build
  image:
    name: gcr.io/kaniko-project/executor:debug
    entrypoint: [""]
  script:
    - echo "{\"auths\":{\"$CI_REGISTRY\":{\"username\":\"$CI_REGISTRY_USER\",\"password\":\"$CI_REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
    - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile --destination $CI_REGISTRY_IMAGE
```

In this example i deploy my image on the GitLab registry but you can deploy on others repositories.

Don't hesitate to give me comments 😋
Failed to fetch error while trying to pull/install a debian image!
Tags: linux
Published: 2020-07-24 09:50:22

If you see failed to fetch error messages followed by an HTTP error 403 Forbidden, it could be related with the requirement to pull the data via a secure channel.

Try the below steps.
1. apt install apt-transport-https
2. apt install 'the actual package you wanted to install'

This should resolve the problem.

If the problem persists, kindly edit the corresponding remote source's protocol value from HTTP to https under /etc/apt/sources.list
Solving missing System Entities in Actions Builder: Community Types!
Tags: actionsbuilder, actionsongoogle, googleassistant, opensource
Published: 2020-07-24 09:44:40

If you have tried the new tool for building Actions on Google, the Actions Builder, you may have noticed a few things missing ([feature comparison of Dialogflow/Actions Builder](https://dev.to/denisvalasek/actions-builder-vs-dialogflow-feature-availability-4pho)). One of them being a large collection of System Entities - predefined data sets that enable you to extract specific data from user queries. 

With Actions Builder, you have the following Types (entities) available: 
![Actions on Google](https://dev-to-uploads.s3.amazonaws.com/i/no82vy0w5vdkfzbuccdt.jpg)

For comparison, [Dialogflow contains 30+ system entities](https://cloud.google.com/dialogflow/docs/reference/system-entities) in different languages. 

But one of the cool features of Actions Builder is the ability to relatively quickly import new Types/Intents using [gactions CLI](https://developers.google.com/assistant/actionssdk/gactions). 

So I decided to use that to create [open collection of types](https://github.com/DenisVCode/aog-community-types), created by the community, for the community! You will find the list of types along with instructions on how to include them in your new Action.

Contributions are highly appreciated! 

Find [Actions Builder Community Types on Github](https://github.com/DenisVCode/aog-community-types)!

Enjoy #AoGDevs!
Make a Level Selector and Scene Transitions in Unity (Indie Game Devlog)
Tags: unity2d, android, game, devlog
Published: 2020-07-24 09:43:56

This is the third episode in this develog seires, where I document the entire game making process.
In this week I started to work on the level selector and also on the scene transitions and animations,
works out to become really beautiful! 

{% youtube Lo0EKCRmZPs %}

> Like this post? 
> Consider Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Or Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
A web designing course gives you 3 tips to de-clutter your web design 

Tags: webdesigningcourse
Published: 2020-07-24 09:42:22


 

How to give the end-user an engaging experience?
A web designing course empowers designers to create attractive websites and create an engaging experience.  However, they should consider elements that trouble visitors and make them leave the site. These include slow loading times, overpowering navigations and Excessive 404 errors. A web designing course helps eliminate these errors.
3 Tips to de-clutter your web design after a web designing course
 Most of you would be clueless on how you could get rid of the extra stuff on your website. Maybe, a web designing course can help in that aspect.  At the same point of time, here are some ideas:
1.	 Get Inspiration from Nature
Some organizations can take inspiration from nature by using pictures containing nature scenes. Furthermore, web designers could reconsider the color palettes for their website.  For instance, they could rethink whether a dark design suits a lighter background. Or, does a certain color look out of place.  Then, they could bring about the relevant changes. This could bring about the good vibes and experiences for end-users.  You could learn more about color palettes and layouts in a web designing course.

https://www.technobridge.in/web-designing-training-course.php

2.	Create a Expected Rhythm
The next step is to find elements and interactions which do not give the end-user an engaging experience.  Designers need to remove these unpredictable patterns which make the end-user feel that   they have no control over the experience. They will then not like the thought of not taking the experience one bit at a time. As a result, they leave the website. Thus, designers need to ensure that button shapes and colors are designed consistently throughout the site. Also, they should choose no more than two or three fonts to establish a rhythm in their content.  Hence, one  must build mobile-first websites even if the design sometimes appears asymmetrical. Learn in detail about button shape and fonts in a web designing course.

3.	Get rid of the excessive elements 
The final step is for web designers to check what elements are not needed for a website. If they feel that there are elements that are excessive and do not contribute much to the user experience. They must get rid of these elements. However, if designers notice that visitors are not affected by the excessive elements, they should not incorporate more of them. A web designing course would help de-cluttering the websites.
To conclude, web designers must find the issues and then find a way to resolve them. They learn about it in a web designing course.
Understanding Deep Copy and Shallow Copy in Javascript
Tags: javascript
Published: 2020-07-24 09:19:57

## Shallow copy
> Shallow copies duplicate as little as possible. A shallow copy of a collection is a copy of the collection structure, not the elements. With a shallow copy, two collections now share the individual elements.

## Deep copy
> Deep copies duplicate everything. A deep copy of a collection is two collections with all of the elements in the original collection duplicated.

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

 
## Primitive data types

> When you create these values, they are tightly coupled with the variable they are assigned to. They only exist once. That means you do not really have to worry about copying primitive data types in JavaScript. When you make a copy, it will be a real copy. 
Let’s see an example:
```javascript
let a = 5;
let b = a;
b = 6;

console.log(a); // 5
console.log(b); // 6
```

## Reference data types
> Technically, arrays are also objects, so they behave in the same way. I will go through both of them in detail later.

> Here it gets more interesting. These values are actually stored just once when instantiated, and assigning a variable just creates a pointer (reference) to that value.

### With Object

Create an object **a** with property **test** with value **test1** and then copy `b = a` and then change value **test** in object **b**.Let see example:

#### Shallow copy
```javascript
const a = 5;

const b = a;

b.test = 'test2'; //Shallow copy

console.log(a); // test 2
console.log(b); // test 2
```

#### Deep copy
```javascript
const a = { test: 'test1' }

//you can use spread or Object.assign() method for clone an object

const b = {...a}; // or const b = Object.assign({},a);

b.test = 'test2'; // Deep copy

console.log(a); // test 1
console.log(b); // test 2
```
##### Making deep copies without thinking
```javascript
const a = { test: 'test1' }
const b = JSON.parse(JSON.stringify(a));
b.test = 'test2';

console.log(a); // test 1
console.log(b); // test 2
```
### With Arrays
> Copying arrays is just as common as copying objects.You can use some ways for deep copy are **Spread Operator**,**Array Functions**, **Nested Array**.
Let see an example below:
```javascript
const a = [1,2,3]
let b = [...a] // Spread Operator
let b = a.map(item => item) // Array Functions
let b = a.slice(0) // Array Functions

let b = JSON.parse(JSON.stringify(a)) // Nested Array
```

### Conclusion
In the end, you know should use the copy with reference data types for some case  you want to copy an object or array split with original and some ways how to make a deep copy.

*Thanks for reading.Please share your experiences,questions and feedback below!*

### Reference
https://www.freecodecamp.org/news/copying-stuff-in-javascript-how-to-differentiate-between-deep-and-shallow-copies-b6d8c1ef09cd/
https://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy
The Flexible Flamework When I Explain A Technology
Tags: discuss
Published: 2020-07-24 09:14:34

Hey guys.
I would like to post more thchnical stuffs.
What do you think what are important things to write on the post when you explain some technical things ?

My framework is as below.
- Background of the technology and what is problem in that field
- What is technology about
- How the technology solves the problem
- Application to real problems
- Other tips
- What is existing problem and what are future works I am expecting

Your opinion will meke my post better and better.
Enjoy hacking!
MDaemon to Office 365
Published: 2020-07-24 09:11:16

Instantly migrate MDaemon to Office 365 with CubexSoft MDaemon to Office 365 Tool. A complete secure, reliable and one of the easiest solution to migrate MDaemon multiple users to Office 365 environment. It directly move MDaemon emails, contacts, calendar and other items to Office 365 account directly without altering the data originality. Follow the steps and see how it instantly performs the batch migration process:

Step 1. Download and run MDaemon Converter on Windows PC.
Step 2. Click on Select Files/Select Folder and load MDaemon files or folders as per need.
Step 3. Software start listing MDaemon items with checkboxes. You can use the checkbox to select the desired files that are needed for migration process. 
Step 4. Go to Select Saving Option button and select Office 365
Step 5. Enter Office 365 login details and set filters as well as other options for specific MDaemon migration. 
Step 6. At last, click on Connect button to initiate the process.

Now, tool will quickly start the process and move each and every item of MDaemon into Office 365 directly. Use the free demo version of the tool now that allows to move first 25 files from each folder free of cost.

For more, visit: https://www.cubexsoft.com/mdaemon/office-365.html
How to stay updated when working remotely
Tags: codenewbie, productivity, webdev
Published: 2020-07-24 09:04:02

Ever since the coronavirus struck us, many companies started to work remotely. Not many were sure how it’s going to impact the quality of the workplace and the daily routine for developers. I personally feel that working from home helps me to boost my productivity. I'm able to achieve so much more. Yet, one of the best things about going to an office is that you could dive into a professional talk and get a hang of what's going on in the eco-system. 

The thing is that developers are always striving to learn and grow otherwise we will stay behind. I’ve been getting some comments recently that suggest remote work equals more time, but in fact, it's quite the opposite (at least for me). Now that we are apart, it's much harder to stay on top of updates and news in the development world. 

## Why is it a big deal?

So when we at [daily.dev](https://daily.dev/) saw this situation we identified several problems:
1. Low-quality content is all around. We would find ourselves going through 10-20 posts before we could find something that is actually valuable. 
2. There are so many blogs and platforms to check every day. As of today, there are probably more than 500 English speaking publications (excluding personal blogs). That’s intense and nearly impossible to cover.
3. It takes too much time to find a real gem. We don’t have time. It’s just too much to do both coding and learning. Trying to multitask simply reduces the quality of our work.

## How about solving it?

To address these issues to all of you who care about staying up-to-date, without wasting a minute on searching dev news, we've developed daily.dev. It's a browser extension that collects hundreds of development news every day, ranks them according to the developers' community interests, and displays them on every new tab.

**The extension is free of charge (forever), doesn't require signup, and the best thing that it's 100% open source.**

If you feel like giving it a try go here:[https://r.daily.dev/get](https://r.daily.dev/get)

Hope you guys enjoy it and make the best out of your remote working! We'd love to hear your thoughts in the comments section down there 👇🏽

<hr/>
_[daily.dev](https://r.daily.dev/get?r=devto) delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future._
[![Daily Poster](https://dev-to-uploads.s3.amazonaws.com/i/b996k4sm4efhietrzups.png)](https://r.daily.dev/get?r=devto)
Powerful @property 🔥
Tags: html, css, javascript, webdev
Published: 2020-07-24 09:00:31

After reading the wonderful post by [@una](https://twitter.com/una), I know what is **@property** in CSS?


&nbsp;&nbsp;&nbsp;&nbsp;First of all, it's a CSS Houdini custom property. If you don't know what is CSS Houdini, then read [this](https://developer.mozilla.org/en-US/docs/Web/Houdini#:~:text=Houdini%20is%20a%20group%20of,be%20implemented%20natively%20in%20browsers.) first.

ok, let's start.

# CSS syntax:

```
// For Chromium 85 and above
  @property --MyColor {
    syntax: '<color>';
    initial-value: red;
    inherits: false;
  }
```
&nbsp;&nbsp;&nbsp;&nbsp; If your Chromium browser is from 78 and above and below 85, then you should include some javascript code to make this functionality to work.

# Fallback JS code:

```
CSS.registerProperty({
  name: '--MyColor',
  syntax: '<color>',
  initialValue: 'red',
  inherits: false
});
```
## structure:

* **name** - name of the property(eg: myColor, columnPercentage, etc...).
* **syntax** - syntax of the property.
Allowable values are

     1). length

     2). number

     3). percentage

     4). length-percentage

     5). color

     6). image

     7). url

     8). integer

     9). angle

    10). time

    11). resolution

    12). transform-list

    13). transform-function

    14). custom-ident

* **initial-value** - Begining value of the property
* **inherits** - Defines whether inherit the value from the parent or not

&nbsp;&nbsp;&nbsp;&nbsp;After knowing this thing as a web developer, you might have the following question.

### How it defers from normal CSS variables?🤔
    
   &nbsp;&nbsp;&nbsp;&nbsp;In the CSS variable, we can only give value. But using the @property, we can define the syntax like value should be in color.

So, we can write the code with a more semantical meaning 🔥.

Let's explore this property with the following Example

{% codepen https://codepen.io/Alwar-G/pen/QWyoaOm %}

### Note:
   &nbsp;&nbsp;&nbsp;&nbsp;We can able to overwrite the values in the particular block like below.
```
  @property --Mycolor {
  syntax: '<color>';
  initial-value: red;
  inherits: false;
}
.text {
  --Mycolor: blue;
  color: var(--Mycolor); // blue
}
```

   &nbsp;&nbsp;&nbsp;&nbsp;If we give invalid value, then it will back off to the initial value. for example, if we give some number value(67) in the color property, then it will back off to the initial value(red).

```
.text {
  --Mycolor: 67;
  color: var(--Mycolor); // red
}
```


I hope you enjoyed this post 😍. Thanks for reading.

Source Url: https://web.dev/at-property/
DevLorem: Rewritten from the ground up in Go
Tags: go, lorem, news
Published: 2020-07-24 08:53:02

About 3 weeks ago my good old [DevLorem](https://github.com/Kovah/DevLorem) project was a simple PHP website that generated Lorem Ipsum text made from movie quotes of famous actors and actresses. I decided to rewrite the whole thing with Go to dive into the language and its features.

Yesterday I released version 2, the complete rewrite with many more features. A demo of the website and API is available on [devlorem.kovah.de](https://devlorem.kovah.de/).

## Using Go to develop a feature-rich application

The main idea was to have one single binary that could be used as a web server handling the website, as well as a CLI tool to generate quotes right in the terminal. The first steps of getting a simple website up and running with Go were fairly straight forward. I used the [gorilla/mux](https://github.com/gorilla/mux) package, which provides a set of tools to run a HTTP web server. The examples have given me a good direction to build both the website itself, and the API.

Adding CLI commands were a bigger task as I also had to implement the generation in the terminal. The [Cobra](https://github.com/spf13/cobra) package, also used by famous projects like Hugo, has given me the perfect framework to build all command line options.

## One binary for 7 platforms, and a Docker image

One of the most important features after the rewrite: DevLorem is now available as a single binary for 7 different platforms, including Linux, macOS and Windows. With the help of the [go.rice](https://github.com/GeertJohan/go.rice) package, I was able to bundle all assets, from the quote sources to the static CSS and JavaScript for the website, into one binary.

Besides of that, I built a Docker image that is now available as `kovah/devlorem` on the Docker Hub. It provides all features of the tool itself.

You can download the executables from the [latest release](https://github.com/Kovah/DevLorem/releases/tag/v2.0.0).

## The first steps with Go

Go itself is an amazing language. After writing the dynamically typed PHP and Python, using a strict type system was a great step forward. I already worked with static types in Rust, which was more a pain than a help because I spent more time fighting with type abstractions than writing productive code. Go has a clear and easy to understand type system and I was able to work with it right from the start. If you want to learn Go and come from another programming language, your best way to start is the [Go by Example](https://gobyexample.com/) website. It has all the important aspects of Go packed into simple examples.

I will probably use Go more in the feature, and update the CorporateLorem tool too.