teleren/devto huggingface dataset:
How to Make an Animation Using CSS Only – No JavaScript!
Tags: css3, latestposts, css, cssanimations
Published: 2020-01-16 14:43:17

---
title: How to Make an Animation Using CSS Only – No JavaScript!
published: true
date: 2020-01-16 14:00:00 UTC
tags: CSS3,Latest Posts,CSS,css animations
canonical_url: http://robdoylecreative.com/how-to-make-an-animation-using-css-only/
---

Do you know how to make an animation using CSS only and no JavaScript?. Today we are going to dive into a fun little CSS3 Animation demo that will show you exactly how easy it is to do. Sometimes when you visit websites you may see some cool animations to help get a message across. […]

The post [How to Make an Animation Using CSS Only – No JavaScript!](http://robdoylecreative.com/how-to-make-an-animation-using-css-only/) appeared first on [Rob Doyle Creative](http://robdoylecreative.com).
Meza: Extract text from file
Tags: linux, productivity, commandline
Published: 2020-01-16 13:52:20

If you ever have a situation where you have a huge file and want to extract a certain portion from this file (e.g. a log file or database dump), you can use the **sed** command.

Sed is a *stream editor* that is used to perform basic text transformations on a file or input stream.

👇

Extract between two patterns (or words):
```ruby
sed -n '/beginning_pattern/,/end_pattern/p'
```

Extract from a pattern (word) to the end of the file:
```ruby
sed -n '/beginning_pattern/,$p'
```

For more information about sed, check out this [link] (https://www.gnu.org/software/sed/manual/sed.html).
Scopes in Javascript
Published: 2020-01-16 13:51:20

There are 4 types of scopes in JavaScript. The global, function, block, and lexical scopes.

Variables in the global scopes can be accessed anywhere in the code. They are declared by not adding the variable declaration term (var, let, const) before the identifier.

```
function funcWithGlobalVariable(){
  globalVariable = “I am declared without the identifier”
}

function test2(){
  console.log(`${globalVariable} is the best`)
}
funcWithGlobalVariable()
test2()
``` 

We are declaring the variable in function test and access in test2. However, if we declare it as:

```
function funcWithGlobalVariable(){
  globalVariable = “I am declared without the identifier”
}

function test2(){
  console.log(`${globalVariable} is the best`)
}
funcWithGlobalVariable()
test2()
```

This would error out because the declaration and the invocation of the variable are in different scopes.

```
ReferenceError: bestMod is not defined
```
    
Variables in function scope exist inside the function. All variables that are declared inside the curly brackets, stay in the curly brackets. Continuing from the example above:

```
function test(){
  let bestMod = "mod3"
}

function test2(){
  console.log(`${bestMod} is the best`)
}
test()
test2()
```

let,const and var make the variable function scoped. The above code will give the same error as above.

Variables in block scope exists inside a block of code.

```
for(let i=0;i<10;i++){
   ...
}
console.log(i)//this will give an error
```

The "i" does not exist outside of the for loop, so the console.log line will return an error.

Last but not least, lexical scope. Lexical scope means that in the hierarchy of code, everything under the level of where it was declared can access the variable.

```
function test(){
  let bestMod = "mod3"
   test2()


    function test2(){
      console.log(`${bestMod} is the best`)
    }
}


test()

```   
The above code will work because "bestMod" used in "test2" is declared in the function that is wrapping it. This scope was the hardest for me to remember coming from ruby where I would have to pass it in to the function for me to be able to access it.

In all of the four scopes, it is better to go from the lowest to the highest. It is always a good practice to keep the variables in block scope or function scope. Global scope, no matter how enticing it may be, is always to be avoided.
a devto TEST post to test image upload bug
Tags: devto, test, images, upload
Published: 2020-01-16 13:33:49

a devto TEST post to test image upload bug(s)

just uploaded 2 images ! where have they gone ?

ok i can now see a HEADer image but where is the BODY image ?

ok i can see img url in popup and click done BUT nothing happens for body images :(

need to create 1 bug on github asap
Do you still use "position" to center align vertically and horizontally? 
Tags: discuss, css, layout
Published: 2020-01-16 12:54:34

---
title: Do you still use "position" to center align vertically and horizontally? 
published: true
description: Alignment in CSS
tags: discuss, css, layout
---
It's 2020 and we have amazing flex and grid method to center align items both horizontally and vertically. I wonder anyone still use position absolute to center align items? If yes, when and why do you use them?
Change on study plan (2)
Tags: devjournal
Published: 2020-01-16 12:27:55

Since first day of the year, I have been writing posts everyday.

But, I found that every single day is not enough long to write posts that are informative to others.

As far as I see articles posted on DEV Community, well-summarized and relatively longer post seems to “get popular”. Popularity and usefulness are not necessarily cause and effect, but I think they are correlated.

I will try to make posts every Monday for the time being.
첫 글쓰기
Tags: motivation
Published: 2020-01-16 12:27:01

엔지니어, 개발자로 생활해 오면서 종이 노트에 기록을 많이 했었다. 하지만 결국 그 노트들은 잃어버리게 되거나, 남아 있더라도 먼지를 뒤집어쓴 채 다시 찾아보는 것은 야무지 헛된 계획임을 알게 되었다.

목표는 이렇다. 내가 나중에 쉽게 찾아보기 위해서 혹은 다른 누군가에게 작은 도움이 되기 위해서 배운 것을 여기에 적어봐야겠다. 나는 두뇌 회전이 빠르지 못하고 단번에 핵심을 도출해 내는 능력이 없다. 그래서 잘 정리정돈된 글쓰기는 엄두가 나지 않는다. 그냥 조각조각 배운 내용들을 적기로 한다.

몇 주만 지나도 내가 작성했던 글이나 코드와 그림인데도 불시착한 밀림의 풍경처럼 낯설게 느껴지는 것을 많이 경험해 왔다. 그래서 미래의 IDOT 나에게 이해를 시키기 위해서, 길지 않고 쉽게 작성하는 것이 목표이다.
Choosing a tech stack for your startup?
Tags: discuss
Published: 2020-01-16 12:21:39

---
title: Choosing a tech stack for your startup?
published: true
description: stack, backend, frontend, startup
tags: #discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wnbj378o9ha4ycqhhziz.jpg
---

If you could choose a dream tech stack to work with for your startup. What would that be and your motives behind it?
GIT rebase 
Tags: git
Published: 2020-01-16 12:01:50


Let's imagine  that you very hard work on project changes in `your changes` branch :smirk:

```bash
[master] -> [10ed] "list of option"
[**your changes**] [111a] "list of option" -> [e45f] "addlogin panel" -> [8e69] "add recovery panel"
```

But somebody update `master` branch and add new option there.

```bash
[master] -> [10ed] "list of option" -> **[6lyer] "add coment"**
[your changes] [111a] "list of option" -> [e45f] "addlogin panel" -> [8e69] "add recovery panel"
```

 Very good for project, but what do you shuld do now? Create new branch basic on new data and start again (manually  copy your files)? **NO** Git have smart  solution for it. 

```bash
git branch "your changes"
git rebase master
```

Please switch to `your changes` branch and use **git rebase** to refreshing data. The effect will be as follows:

```bash
[master] -> [10ed] "list of option" -> [6lyer] "add coment"
[your changes] **[222b] "add coment"** -> [e45f] "addlogin panel" -> [8e69] "add recovery panel"
```

**And this is all.** You branches get actual data from `master` branch and you didn't lose your changes

> Please focus that after rebase, `your changes` branch was remove [111a] hash ("list of option"), and now your history was started at new [222b] hash ("add coment")

But please be careful. What is good looking solution for local repository, for foreign repositor it can destroy branch strategy. Please save this sentence:

> [**Do not rebase commits that exist outside your repository and that people may have based work on.**](https://git-scm.com/book/en/v2/Git-Branching-Rebasing#_rebase_peril)

Cheers !
has anyone writen a screenshot saver plugin for chromium or edge or firefox ?
Tags: browser, plugin, screenshot
Published: 2020-01-16 10:47:49

now that mozilla firefox have stopped storing your screenshots (they used to save them forever) has anyone writen a browser (and desktop) screenshot saver addon / extension / plugin for another image store such as [cloudinary](https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ewvwdmx8c1msv9xxpk5e) or [imagekit.io](https://imagekit.io/plans)

if not i will try and write one a post a link to one below (but id rather use/fork yours :smile: )

here are some refs that might help you create one
* https://www.sitepoint.com/build-vue-chrome-extension/
* https://davidwalsh.name/cloudinary-image-uploader
* https://cloudinary.com/documentation/upload_widget
* https://github.com/cloudinary/cloudinary_js
* https://github.com/cloudinary/cloudinary-react
* https://github.com/blueimp/jQuery-File-Upload
Code Signing Certificate vs SSL Certificate
Tags: security
Published: 2020-01-16 10:40:44

We are going to clear your the confusion between Code Signing Certificates vs SSL Certificates in this post.

When you decide to secure web presence, a question must have raised in your mind about customers’ data security. One of the finest solutions for it, is digital certificates. Today, we will discuss about two types of digital certificate naming “Code Signing certificate and SSL certificate“.

However, there is a big difference between these two words. The basic difference is SSL certificate works on website security on the other hand; software code integrity can be preserved with Code Signing certificates.

In this short piece of information, we would like to bring a major difference between these two certificates.

Read complete information here https://www.clickssl.net/blog/code-signing-certificate-vs-ssl-certificate-find-out-difference
fast.com - the latest speedtest on the block
Tags: speedtest, adsl, isp, broadband
Published: 2020-01-16 10:31:34

the latest speedtest on the block 

[https://fast.com](https://fast.com/#) from netflix 

![fast.com speedtest](https://res.cloudinary.com/osde8info/image/upload/v1579170418/Screenshot_2020-01-16_Internet_Speed_Test_ersjkf.png)

whats you speed ? broadband, fibre, 3G, 4G, 5G
will desktop side rendering (DSR) be the next big thing for static websites ?
Tags: static, dynamic, html, dsr
Published: 2020-01-16 10:17:40

thanks to @gaelthomas who wrote [fastio static sites](https://dev.to/gaelthomas/how-to-deploy-a-static-website-for-free-in-only-3-minutes-with-google-drive-254c) ive just discovered free static hosting from [fast.io](fast.io) from gdrive or github repos

so that led me to thinking why dont i render a site locally on my desktop with node express pug react (babel & webkit) all running locally (in dev mode) and push index.html & bundle.js etc into a github repo for auto deployment on [fast.io](fast.io) ie desktop side rendering (DSR) ?

i will start working on my DSR POC today and will post a link below if successful

link to POC added 16 jan 20 3:33

https://dev.to/osde8info/an-abc-for-dev-s-and-webdev-s-3di2
A Brief Overview of Mass Assignment in Laravel
Tags: laravel, php
Published: 2020-01-16 10:06:09

Laravel's ORM (Eloquent) provides an extremely easy way to communicate with a database. Each database table has a model class which is used to interact with a table. Most object-relational mappers (ORM) have the ability to mass-assign properties directly into the database, which is a security vulnerability.

What then is mass assignment? simply it is a process of sending an array of data that will be saved to a specified model at once. Usually, you don't need to save data one by one you can do that in a single process. Mass assignment is something most programmers make use of as it provides a convenient way to populate the properties of a model object from a form. Unfortunately, it's simplicity can make it a target for hackers. What if someone passes a value to the model and without protection they can directly modify all fields including the ID which is not good.

Let's say we have an 'employee' table which has fields 'first_name, last_name, employee_type' you may want to mass assign 'first_name, last_name' but you may want to protect 'employee_type' from being directly changed. this is where we need **fillable** and **guarded**.

### What Then is Fillable
Fillable specifies the fields that can be mass assign in your model and this can be achieved by adding a property $fillable in your model as shown below

```php
<?php
class Employee extends Model {

  protected $fillable = ['first_name', 'last_name'];
  
  //only the fields inside this array can be mass-assign
}
```

the 'employee_type' is exempted because we don't want to mass assign it.

### What Then is Guarded
Guarded is the reverse of fillable which specifies the fields that are not mass assignable. we specify such using a property $guarded in our model class

 
```php
<?php
class Employee extends Model {

  protected $guarded = ['employee_id'];
  
  //only the field name inside this array cannot be mass-assignable
}
```
if you want to block all fields from being mass-assign, you can add '*' in your guarded array ad shown below

```php
<?php
class Employee extends Model {

  protected $guarded = ['*'];
  
}
```
Git: amending commits and forcing with lease a push
Tags: git
Published: 2020-01-16 10:03:44

I often have a discussion about `git commit --amend` and `git push --force` versus `git push --force-with-lease` with new colleagues.

First things first: it is ok to rewrite commits on your working branches, even already pushed commits. It allows you to remove useless commits and inconsistencies, resulting in a cleaner history.

Rewriting commits seems tricky as a beginner. However, if you want to rewrite the last one, `git commit --amend` allows you to do it easily. Not only the commit message is alterable, but the content of the commit too (you just have to add or remove some changes before your `git commit --amend`). This is definitely my main way for editing a commit. More advanced history rewrites may be done with `git rebase` which is a broad topic I will not discuss in this post.

After changing an already committed work, you will then be forbidden to push it the regular way. The reason is it would result to an inconsistent synchronization between your local machine and the remote. So you have to force your `git push`. But as you maybe already heard, `git push --force` is a truly bad habit. This is because, if something changed on the remote, it will not be taken into account. Put it another way, if someone else pushed a commit and you didn't pull it before, the commit will be lost (or more precisely, it will be hard to recover).

Maybe you think `git push --force` is unavoidable after rewriting your commits history? Spoiler alert: it's not true. The alternative is to use `git push --force-with-lease`. The `--force-with-lease` option works somehow like a `--force`, but will check if you are well synchronized with the remote before pushing. If you are not up-to-date locally, the command fails and warns you. In other words, you are forcing, but safely. This good practice may avoid many “where is that damn commit?!” situations in your team.

I sometimes heard: “I do not `git push --force-with-lease` but I always `git pull` before every `git push --force`”. Unfortunately, this is not enough yet because another push could be done by someone else between the two commands. Rare, but not impossible.

![But when I do, I use --force-with-lease](https://raw.githubusercontent.com/lepieru/lepieru.github.io/master/images/force-with-lease-meme.jpg)

The Git CLI gets nicer these days, e.g. adding in version 2.23 the `switch` and `restore` sub-commands to do some stuff `checkout` is already capable of. Thanks to this update, we have now more suitable verbs to do the job. However, the CLI change I would be the most happy to see is a `-f` short option bound to the `--force-with-lease` option of `git push`. In this case, brutal force short option could use `-F` instead. Sadly, it would be a breaking change. Nevertheless, I am still passively hoping.
Vue packages version mismatch error fix
Tags: vue
Published: 2020-01-16 09:47:28

---
title: Vue packages version mismatch error fix
published: true
description: Fixing vue package missmatch
tags: #Vue
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wxm7f8ytyb7w4vm0pf96.jpeg
canonical_url: https://anansewaa.com/vue-packages-version-mismatch-error-fix/
---


Approachable, versatile and performant are the words used to describe Vue.js on their website. Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue is widely used with Laravel framework, By default, fresh Laravel applications contain an ExampleComponent.vue Vue component located in the directory. The file ExampleComponent.vue is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications.

Vue packages version mismatch error occurs when Vue and Vue-template-compiler version numbers are different.

![Vue and Vue-template-compiler package mismatch](https://thepracticaldev.s3.amazonaws.com/i/80k4jrhn0okmy4v32l20.png)

As shown in the image above, my Vue version is higher than that of the Vue-template-compiler, this causes things to not work correctly. Make sure to use the same version for both. Specifying the exact version of Vue and Vue-template-compiler rather than leaving it up to npm (node package manager) to install or yarn to figure out dependencies helps keep both in sync hence no Vue packages version mismatch.

##How I got it to work

Since the version of the Vue-template-compiler is older than that of the Vue I decided to update it to same version number as the Vue thus 2.5.16 In your case the number might not be same as mine so replace the version number with what you see in your error message in the following command

```
npm install vue-template-compiler@2.5.16 --save-dev

```


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1ziu5vgm554zxwluqjk7.png)

The above command would fix the version mismatch error as shown in the accompanying image above.
SEO Lazy - Keyword Tracking & Backlink Monitoring
Tags: seo, keyword, copywriting
Published: 2020-01-16 09:30:30

Take a look at this amazingly easy tool for accurate SEO data:
https://www.seolazy.com/

You cannot improve what you cannot measure. SEO Lazy gives you just the needed info to track your website's progress over time.
Work for me! It's free. What do you think about?
Can I Borrow a Medium account?
Tags: medium
Published: 2020-01-16 09:29:06

---
title: Can I Borrow a Medium account?
published: true
description: Can you?
tags: medium
---

So sad for this story, because I read a lot, so Medium starting push upgrade to premium. If anyone can share with me then contact me via any skype, telegram, facebook, github...

Thank so much!

Skype:  teenmaz
Telegram: @tpt_rich
Submitting sitemaps on deploy with Netlify
Tags: netlify, javascript, devops, tutorial
Published: 2020-01-16 09:15:49

There's plenty of static site generators out there, and most support generating sitemaps. To make sure google indexes
your pages as quickly as possible, it's a good idea to ping them with your sitemap when it's updated.

Netlify provides some hooks which can be used to run functions once the deploy is complete. This allows us to ping
google when production is deployed.

[Github Repo with Code](https://github.com/atymic/netlify-submit-sitemap)

## Submitting Site Maps Automatically

Copy the `functions/deploy-succeeded.js` file to your project. Keep in mind you can't change the name, otherwise
Netlify won't detect it as a hook.

Next, update your `netlify.toml` to define your functions folder. This is where the compiled functions will be stored, and can
be named anything (in this example, we use `lambda`). These files should be committed to your VCS. 
Alternatively, you can update your build script to build them in CI (in which case, you can gitignore them),

```
[build]
  publish = "dist"
  command = "yarn build"
  functions = "lambda" # netlify-lambda reads this
```

You'll also want to install `netlify-lambda` and `axios` and compile the function (this bundles the dependencies & code into a single file):

```bash
yarn add netlify-lambda
./node_modules/.bin/netlify-lambda build functions
```

Next, configure the `SITEMAP_URL` environment variable inside Netlify's build settings, like so:

![Cofigure Enviroment Vars](./images/zeit-now-dns-management/envs.png)

Make sure your static site generator is updating the sitemap on each build.

If all went well, on your next deploy Netlify will run the hook, and alert google that your sitemap has changed

> 10:14:21 AM: 2020-01-14T23:14:21.146Z	864f3fb2-1c2d-41a5-aa4f-0379008aa81c	INFO	Sending sitemap ping to google for https://sitemap-submit.netlify.com/sitemap.xml  
> 10:14:21 AM: Duration: 59.46 ms	Memory Usage: 75 MB	Init Duration: 137.25 ms
Annamraju| Web Development Company Hyderabad | Website Design Company

Tags: webdevelopement, webdesign
Published: 2020-01-16 09:13:35

Annamraju Designs and Technologies are into IT Services which can provide both Website Application Development and Web Designing. We are the leading Web Designing and Web Development company in Hyderabad. Web Applications that can manage your data simple and safe. Serialize your data with roles and authorizations. We cover multiple business domains like TRAVEL, HOSPITALITY, REAL ESTATE, EDUCATION, E-LEARNING, HEALTHCARE, FITNESS, PATRIOT and NATION, FINANCE, ACCOUNTS, etc.
T-Shirt for next Interviews
Tags: interview, go, java, jokes
Published: 2020-01-16 09:11:20

I've been at perhaps 50-60 tech interviews since my "IT career" started at 2008. And I come to think that appearance and attire, though are not the top-important, but really have some weight :)

So for next interviews I ordered t-shirt with custom picture (see below).

**Is the sarcasm too obvious?**

The matter is my background is heavy in Java and BigData. Recently I grew curious about Golang. I want to try migrating to this field for few years. But still I have some doubts about the language (especially about lack of conditional expression) - so I encoded a bit of irony in the text above the image.

_P.S. Please don't mind ushanka and balalaika - the picture is taken, I believe from stuff of local Golang conference - so they are just "national symbols"._

_P.P.S. Sorry for cat. She wanted to get into._

![Joke t-shirt for golang interviews](https://thepracticaldev.s3.amazonaws.com/i/cvmr31olx3kr8eo5gh3d.jpg)