teleren/devto huggingface dataset:
Want more claps and followers on Medium? Here’s how to design your own “follow me” GIF in 5 minutes
Tags: writing
Published: 2018-01-22 09:13:14

---
title: Want more claps and followers on Medium? Here’s how to design your own “follow me” GIF in 5 minutes
published: true
description: Step by step tutorial on how to create gifs to spice up your articles.
tags: writing, 
---

I read an article about how adding a GIF demonstrating how to like and subscribe massively increased reader action. When I first read it, I though that it was too hard to do, so I never tried it.

Well, I recently started using a screen recorder for making video tutorials, and wondered if I could also make a GIF.

It turned out to be a pretty simple task.

The first thing to do is to record the clapping and following actions. I work on Ubuntu and used Kazam for my screen recording. If you work on Linux then I suggest you do the same. It has a great ‘record an area’ function which is very useful.

`sudo apt install kazam`

When it’s finished installing, open it up. It has a very simple user interface and is even easier to use. To test it out, select “area” then it will prompt you to select an area. Highlight a random area and hit enter to confirm. Now you’re ready to record.

![kazam screen reccorder](https://cdn-images-1.medium.com/max/1600/1*HQAq11-fMx8MRTl0pLPYwg.png)

Hit the “capture” button and then the countdown will start. Move your mouse around in the area or click on something so the area changes. When you’re done, click on the recording icon at the top right of your screen and “stop recording”. Click back onto Kazam and you’ll be asked whether you want to edit or save. We’ll be saving our clips. You can then view it to check that everything is working.

## Recording the Medium clap and follow

If you go into one of your own posts, you can’t clap or subscribe to yourself so we need to make a second account. Once logged into the second account, search for one of your articles and scroll to the “clap and subscribe” section.

Go back onto Kazam and select the area around the clap and subscribe. If it gives you a capture size of less than 1000x300 then zoom the browser. Having a higher resolution video means you can get a bigger gif, which is important since you can’t increase the size of medium images (or gifs).

![capture screen](https://cdn-images-1.medium.com/max/1600/1*kuT-Rkh85VOguNXCeWsl3Q.png)

Now you need to follow the recording process again.
- Start the recording.
- Wait for the countdown.
- Click the clap button then the subscribe button.
- Save the recording.

If you want to re-record the video, you can unsubscribe and recall the claps (using the three dots on the right) and try again.

## Video to GIF

There are loads of services online to convert videos to GIFs but I used EZ GIF. You can upload, trim and convert the video to a GIF really easily.

When you convert to GIF, make sure you choose a high resolution. I like “auto x 480" or “1200 x 300”.

## Play your GIF

You now have your own GIF to add to the end of all of your posts.

Unfortunately there's no way to add GIFs on DEV.to but that may be added in th future (nudge to developers).
Multiple projects with same dependencies. How to reduce size?
Tags: node, discuss
Published: 2018-01-22 08:51:19

---
title: Multiple projects with same dependencies. How to reduce size?
published: true
description: 
tags: node, discuss
---

I have multiple projects with a lot of similar dependencies that end up in the node_modules folder. These duplicates can add up both in size and unnecessary downloads. Is there a way to improve this situation?
Moving files into blob storage
Tags: softwaredevelopment, azure, development, devops
Published: 2020-01-20 20:04:20

---
title: Moving files into blob storage
published: true
date: 2018-01-22 08:00:19 UTC
tags: Software Development,Azure,development,devops
canonical_url: https://www.funkysi1701.com/2018/01/22/moving-blobs-cloud-suppliers/
---

We are in the process of moving our companies websites onto the Azure platform. One of the challenges was to move image files out of the website project into blob storage. This week I have moved 150,000 of them.

One thing I keep banging on about is that your source code should not contain data. If it does every time you do a deployment you need to consider where these images are located and ensure you don’t overwrite or loose any. It also goes without saying that deployments of a few Mb are a lot quicker than deployments of 100s of Mb.

Azure blob storage also gives you advantages like distributing storage across multiple datacenters which would be impossible with traditional files on a server.

So now that we have established that this is a good idea lets look at how we could move large amounts of data. In my case all the filenames are stored in a SQL database so the plan of action was to simply loop through the files in the database, download from current storage (either locally or other cloud storage), upload to Azure and tidy up afterwards. Due to the number of images I am going to update the database and mark when a file has been processed so I can do the move over several days.

This is my code

<style>.gist table { margin-bottom: 0; }</style>

First of all I create a tmp folder in the root of my website if it doesn’t exist to store my images temporarily.

I then use an entity framework model to query the database that haven’t been moved, and I use the take() method to limit how many results I process. (I have been passing in 1000 at a time)

I then use a foreach loop over all these files to perform the following actions.

1. Create additional subfolders if the filename variable stored in the database isn’t actually a filename but a filepath, note you will have to split filename and filepath which I haven’t included code for here.
2. Download file from the original url and save into the temporary folder
3. Upload to Azure
4. Delete temporary file
5. Update database giving a success or fail

Once the foreach is finished I commit the database changes and delete the temporary folder. I am sure there must be other ways to do this transfer but this was quick and easy to setup and now I have a copy of all the files in Azure storage so I can test out other issues with my website.

One last tip about how to schedule this code. I called the above code from a MVC controller and then wrote a Azure Function to call this code on a schedule.
The 5 minute series
Tags: appdev, code, concepts, product
Published: 2018-04-11 06:54:56

---
title: The 5 minute series
published: true
tags: appdev,code,concepts,product
canonical_url: 
---

As mentioned in my previous [blogpost](https://itscoderslife.wordpress.com/2018/01/14/hola-2018) the first among my targets this year is to start a 5 minute series to get introduced to anything. With this post I am listing down my initial set of topics which I will be writing on. This list will grow periodically and also will be updated with the links to each 5 minute series.

Following are the topics for which I am planning to do 5 minute introductions this year

- [WordPress installation on your local machine](https://itscoderslife.wordpress.com/2018/02/01/wordpress-on-local-machine/)
- [AWS stack and how things work](https://itscoderslife.wordpress.com/2018/02/20/aws-in-5-minutes)
- MEAN stack – Mongo DB, Express.js, Angular.js, Node.js
- Chef.io – Introduction to automating deployments
- A product – How Software as a service works
- [Blogging – how to journal public, private and shared] (https://itscoderslife.wordpress.com/2018/04/07/blogging-in-5-mins/)

I will be adding more to this list I finish each one.

This is the first time I am doing a 5 minute series. So your comments and suggestions are very very important to me. All criticism is taken up for improvement of such tutorials.
X-posting from your blog to dev.to, thoughts?
Tags: sideprojects, blog, discuss
Published: 2018-01-22 01:29:10

---
title: X-posting from your blog to dev.to, thoughts?
published: true
description: 
tags: sideprojects, blog, discuss
---

[This blog](https://dev.to/samjarman/how-to-build-an-online-presence-as-a-junior-developer) didn't make me think twice to blog after reading it. It just made perfect sense! Now for building online presence, does it make sense to cross-post on dev.to? (Meaning post in your blog and post on dev.to as well)

I am aware of the RSS feature of dev.to and in my opinion it's simply awesome!

Most of the stuff I write about are, if not beginner stuff, just personal documentation of my own learning.

Do you think stuff like those are worth x-posting from a personal blog to dev.to? What are your thoughts about this? (Posting newbie and personal learning to be specific) Isn't that going to clutter dev.to?

Hope you guys can say something about this. Thank you everyone!
TIL: Sending cookies with the fetch API
Published: 2020-05-06 23:30:14

---
title: TIL: Sending cookies with the fetch API
published: true
date: 2018-01-22 00:00:00 UTC
tags: 
canonical_url: https://jasonmerino.me/articles/til-sending-cookies-with-the-fetch-api/
---

Today I was trying desperately to create a login form for a side project I'm working on and I could not get the session to persist from page load to page load in [Express](http://expressjs.com/). I was doing the authentication via an ajax call, so naturally I was attempting to force the session to persist with req.session.save(), but that wasn't working either.

I was pulling my hair out going crazy, which in my situation isn't not a good idea as my hair falls out of its own accord, when I noticed that req.cookies was coming through as an empty object when making the auth request. After a little research I found that because I was using the new window.fetch API (and I was falling back using the [isomorphic-fetch polyfill](https://www.npmjs.com/package/isomorphic-fetch)) and I was neglecting the credentials flag I was not having my cookies sent across with the request.

So, here's what I had before.

```ts
fetch("https://url/to/my/api/endpoint", {
  method: "post",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email,
    password,
  }),
})
```

And then here's what I had after.

```ts
fetch("https://url/to/my/api/endpoint", {
  method: "post",
  credentials: "same-origin", // here's the magical line that fixed everything
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email,
    password,
  }),
})
```

Turns out the credentials flag defaults to 'omit' which basically means don't worry about sending cookies with this request. There are three different options and if you want to know more about them I would read about it on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials) as this is the easiest to understand page that I've found that explains everything about the credentials flag.
New Polymer 3.0 preview available
Tags: javascript, polymer, webcomponents, news
Published: 2018-01-21 21:22:31

---
title: "New Polymer 3.0 preview available"
published: true
description: 
tags: ["javascript", "polymer", "web components", "news"]
---

If you know me, you know how convinced I am that Web Components is the future of how we build components in the browser; not React, not Angular, and not Vue. With that said, Polymer is just one vision of how we can fill in the various parts of Web Components and make them easier to build. But it's a good one and I've used it myself successfully in a couple of projects now.

A few months back, the Polymer team announced that Polymer 3 wouldn't be a huge rewrite of version 2 as much as it would be a repackaging. For example, they were going to abandon HTML Imports in favor of using NPM and webpack to handle JavaScript modules. At that time they dropped a really early preview of version 3 which did that and just the other day they released a new one. Here are some links to both of the relevant blog posts as well as a link to a getting started blog post kind of buried in the middle of the first blog post. I wanted to pluck it out in case you never looked at the one from last August.

[Polymer 3.0: New year, new preview](https://www.polymer-project.org/blog/2018-01-18-polymer-3-new-preview.html)

[Polymer 3.0 preview: npm and ES6 Modules](https://www.polymer-project.org/blog/2017-08-22-npm-modules)

[Hands-on with the Polymer 3.0 preview](https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview) - You'll definitely want to pay attention to this one whether you read the one above or not. Otherwise you won't have a lot of getting started information. The two blog articles mainly talk about the whys and what has changed over time.
My current text editor setup
Published: 2018-01-21 21:16:57

---
title: My current text editor setup
published: true
description: Here is a quick overview of my current text editor setup
tags: 
---

{% youtube ehkER5IwmaM %}

Peek my user settings [here](https://github.com/alexcarpenter/screencasts/blob/master/09-text-editor-setup/user-settings.json).
Top High Quality Websites to launch your Startup
Tags: indiehackers
Published: 2018-01-21 20:58:42

---
title: Top High Quality Websites to launch your Startup
published: true
tags: indiehackers
---

The one's that I know are, in order -
1. Hacker News - https://news.ycombinator.com
2. Reddit - https://reddit.com
3. Product Hunt - https://producthunt.com

There are many other resources like https://startupmate.flammate.com & various others but they give a lengthy list of resources. So opening a new account on all those 1000+ sites seems too much for one guy. So other than the above 3 which websites do you think drive the crazy amount of traffic ?
Is is normal or am I worrying too much that I don't know that much?
Tags: discuss
Published: 2018-01-21 19:36:16

---
title: Is is normal or am I worrying too much that I don't know that much?
published: true
tags: discuss
---
Hi Fellow Devs!
I am a silent reader and follower of dev.to till now. The thing is I have been working in web development for one and a half year now. I have worked in Laravel, Ionic (framework to develop native apps) both versions of it, AngularJS and the latest angular. The thing I am trying to say is in the last year and a half even though the experience is not that much I have worked on many things, when I check job requirements many of those have points like:
you must know to work with socket servers or ports.
you must know to work on highly scalable apps with million of users.
This is my first job. I got into this company as an internee and the reality is I have never given a real technical interview. I have this feeling that I don't know enough and when I will give interviews that it would go bad. Is it only my feeling or is it mutual? Also according to my experience the requirements mentioned in the jobs do I need to learn them at this point for further jobs?
If anyone could discuss these that would be great.
P.S This is my first post ever, so apologies if I wrote horribly.
Evening Rust: Episode 4: War, War Never Changes
Tags: video, coding, rust, competition
Published: 2018-01-21 17:50:18

---
title: "Evening Rust: Episode 4: War, War Never Changes"
published: true
description: Total failure to end the war, but Indy!
tags: video, coding, rust, competition
---

{% youtube FHaqcTdU3nM %}

We tackle the card game War, which appears to have ambigguities in the instructions preventing us from solving all test cases. Then we do a quick Indiana Jones falling puzzle -- it has graphics, nice change. Then on to minesweeper, which is more difficult than the XP suggests. This required brushing up a lot on our Rust mutability concepts.

Subscribe to my [Twitch Channel](https://www.twitch.tv/mortoray) to watch live.
Understanding the React Source Code Series
Tags: javascript, react, sourcecode, frameworks
Published: 2018-01-21 16:19:28

---
title: "Understanding the React Source Code Series"
published: true
description: 
tags: ["javascript", "react", "source code", "frameworks"]
---

[Understanding the React Source Code Pt. 1](https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-i-80263fe46cf1) is the first of a series currently up to five parts at the time I'm writing this.

I'm not going to lie to you, I flipped through the second part of this and it was kind of heavy sledding. You are probably only interested in this if you've used React for quite a while already and had considered trying to go through the source yourself to try and understand it better.

In that case, this will simplify your task. However, if you're really looking for a higher level overview of how the internals of React work, this is probably not what you're after. In fact, if you find something like that, let me know about it and I'll link to it here. But if you want something that digs right in, you should check this out.
4 JavaScript Bundlers
Tags: javascript, bundling
Published: 2018-01-21 15:09:36

---
title: 4 JavaScript Bundlers
published: true
description: What are your options to bundle your code
tags: javascript, bundling
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cr9occ9vqewygb97pey4.jpg
---

After asking a few people what they want to know about JavaScript, it seemed to me that a major pain point is still the tooling. So todays article is about what options are out there to bundle up your code.

## [Webpack](https://webpack.js.org)

__The Classic__. Many people complain it's too complicated or slow, but I still think it's a good choice.

It's very flexible and has a huge amount of plugins for every use-case you could imagine. It has a big community and is even part of the [JS Foundation](https://js.foundation/community/projects)

On the other hand, I came from a very customized workflow with Gulp, which I could mostly replace by one Webpack config file.

## [Rollup.js](http://rollupjs.org/)

__The Alternative__. It focuses on the [ES2015 module format](http://2ality.com/2014/09/es6-modules-final.html) and tries to get really small builds with the help of dead code elimination.

I think the config format is a bit simpler and the focus on one module format probably removes many possible ways that could lead to bugs.

At the moment it's probably the best alternative to Webpack, but I read that it is sold as especially appleasing for library development.

## [Parcel](https://parceljs.org/)

__The Simple.__ For all people who aren't into the whole configuration thing anyway, Parcel tries to give you "blazing fast" bundling without the need of any config. 

In the fashion of the _new wave of configless development_, it is a good fit if you are new to JavaScript _or_ only doing JavaScript once in a while. 

I never tried it, but I guess I would for my next project, because, why spend time on stuff that simply works out of the box? Often I don't need to optimize my Webpack config anyway. 

## [Microbundle](https://github.com/developit/microbundle)

__The Joker.__ If you're a serial library creator like Microbundles maker [Jason](https://github.com/developit) you probably appreciate this gem. 

It's build on top of Rollup.js and is mainly geared to ease some of the pain points of npm package creation.

While it's probably not for your next app, it will certainly help some of the OSS folks out there.

## Conclusion

There are many more of these tools out there more or less often used by devs in the world, but I think if you just getting started, you'll probably be happy with one of those above.
SSH Login Notifications in Slack
Tags: slack, ssh, security
Published: 2018-11-16 18:42:23

---
title: SSH Login Notifications in Slack
published: true
description: In just 10 minutes, use this guide to set up an alert to know who is logging into your servers using SSH by pinging a Slack channel.
tags: slack,ssh,security
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wshl4x6rl32fd8i1jsyd.png
canonical_url: https://www.pullrequest.com/blog/ssh-login-notification-in-slack/
---

It's handy to know who's logging into servers around your projects. Slack offers a beautiful way to do this in combination with pam.d.

We're assuming you're using a CentOS-derived OS for locations, but this should work on any *nix-based OS with pam.d enabled.

##### 1. Add an incoming webhook in Slack -- navigate to:

```
https://YOUR_DOMAIN.slack.com/apps/manage/custom-integrations
```

We recommend naming the spot something that is recognizable; that way it won't get deleted in the future.

Make sure to copy the Webhook URL from the resulting page.

##### 2. Add an SSH script to your server

Add and make executable (chmod+x) file to `/etc/ssh/scripts/sshnotify.sh`

(*note* Make sure to replace `<YOUR SLACKWEBHOOK>` with the URL from step 1 and `#channel` with the channel you want notifications going to)

``` bash
if [ "$PAM_TYPE" != "close_session" ]; then
        url="<YOUR SLACK WEBHOOK>"
        channel="#channel"
        host="$(hostname)"
        content="\"attachments\": [ { \"mrkdwn_in\": [\"text\", \"fallback\"], \"fallback\": \"SSH login: $PAM_USER connected to \`$host\`\", \"text\": \"SSH login to \`$host\`\", \"fields\": [ { \"title\": \"User\", \"value\": \"$PAM_USER\", \"short\": true }, { \"title\": \"IP Address\", \"value\": \"$PAM_RHOST\", \"short\": true } ], \"color\": \"#F35A00\" } ]"
        curl -X POST --data-urlencode "payload={\"channel\": \"$channel\", \"mrkdwn\": true, \"username\": \"SSH Notifications\", $content, \"icon_emoji\": \":inbox-tray:\"}" "$url" &
fi
exit

```

##### 3. Add the script to your pam.d

``` bash
sudo echo "session optional pam_exec.so seteuid /etc/ssh/scripts/sshnotify.sh" >> /etc/pam.d/sshd
```

#### 4. Verify the installation

Log out and log back into your box to verify a notice hits your channel of choice.
positive side of personal project against social coding.
Tags: discuss, sideprojects
Published: 2018-01-21 10:24:38

---
title: positive side of personal project against social coding.
published: true
description: 
tags: #discuss #sideprojects
---

Today, social coding movement more spreading around GitHub, people arguing while develop proccess.
that's absolutely good trend, because software development is huge complexity human work.

but i think a personal project has some effective things to grow as a developer.
following 2 are my thought.

## full stack roles experience
All processes are become to your work.

whole product design, software feature, technology-stack, UI/UX design(if you create GUI app.), marketing, software architecture, code implementation etc...

yeah, your are completely full stack developer!

this fact useful to learn other role person's job overview, each process integration flow, approximately total implementation cost.

## free experimental implementation
All work isn't depends on colleague opinion or your boss approval, you can feel free design, implementation.

you can failure Unlimited on the environment and test any methodology pros/cons.


what do you think?
thanks a hundred for your comments! 😁