teleren/devto huggingface dataset:
What are some Browser plugins that you can't live without ?
Tags: discuss, productivity, devhelpers
Published: 2019-02-22 09:27:50

---
title: What are some Browser plugins that you can't live without ?
published: true
description: What are some of your essential browser extension/plugin that make your life easier ?
tags: discuss,productivity,devhelpers
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7lxqawldkxmjnwv7nz6t.png
---

We all need toolkit that makes our jobs a little bit easier. As a QE there are several chrome extensions that i use everyday that boosts my productivity and reduces chunk of extra workload Here are all of them


[BlazeMeter | The Continuous Testing Platform
](https://chrome.google.com/webstore/detail/blazemeter-the-continuous/mbopgmdnpcbohhpnfglgohlbhfongabi?hl=en)

Blazemeter plugin is easiest way to record your performance script in jmeter


[Bug Magnet](https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en) 

this is a handy tool for doing exploratory testing. it's [opensorce](https://github.com/gojko/bugmagnet) and provides you with range of test data to check edge cases of your app.


[Check My Links](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en)


its a  link checker that crawls through your webpage and looks for broken links.


[Exploratory Testing Chrome Extension](https://chrome.google.com/webstore/detail/exploratory-testing-chrom/khigmghadjljgjpamimgjjmpmlbgmekj?hl=en)


another must have plugin for Exploratory Testing. you can gp page by page take a screenshot and write bugs, ideas, notes etc.. 

[Note Anywhere](https://chrome.google.com/webstore/detail/note-anywhere/bohahkiiknkelflnjjlipnaeapefmjbh?hl=en)

How many time you have browse through a article had some thoughts and forgot after some time. Well no more.

with this extension, you can create notes on any web page and when you open that page again, the notes will get loaded automatically.


[Page load time](https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig?hl=en)

Quickly need to check the loading time for your webpage ? there is a extension for it.

[Screencastify - Screen Video Recorder](https://chrome.google.com/webstore/detail/screencastify-screen-vide/mmeijimgabbpbgpdklnllpncmdofkcpn?hl=en)


I use this plugin to record product workflows, bugs etc...

In Free tire it gives you 50 recordings per month with max 10 min. recording per session. you can download saved videos from Google drive or export it as gifs.

i have been using it for some time and never needed to upgrade to paid plan.


[WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)


easiest way to find what kind of font is being used on any portion of webpage without going into the details of devtools.



And of course our all time favorite

[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)  

___


So, What are plugins / extensions that you use which has become integrated part of your work ?
Short fire / Self-hosted shorten URL generator for Firebase hosting
Tags: firebase, shortenlink
Published: 2019-02-22 09:08:47

---
title: Short fire / Self-hosted shorten URL generator for Firebase hosting
published: true
description: Self-hosted shorten URL generator for Firebase hosting
tags: firebase, shorten-link
---

After I had using shorten link service such as Google, Bit.ly. I'd always struggle with a custom domain and slug feature. Some service provides custom domain but not a custom slug also you need to pay some fee for using a custom domain. I try to discover a feature in Firebase Hosting and I found that Firebase hosting is support redirect rules but you need to manual setup. I created a tool for generating redirect rules to make Firebase hosting become shorten link service. This is **Short fire**. You can try **Short fire** by `npm -g install short-fire` and follow instruction. https://github.com/thangman22/short-fire

![Screen Shot](https://thepracticaldev.s3.amazonaws.com/i/0q3kfb22e4q5gmorqeji.gif "Screen Shot")
LambdaTest Now Integrates With GitHub Integration In Just A Single Click
Tags: github, git, testing, webdev
Published: 2019-02-22 08:31:02

---
title: LambdaTest Now Integrates With GitHub Integration In Just A Single Click
published: true
description: Now, with a single click, you can push your bugs and create tasks in GitHub directly from LambdaTest.
tags: #github #git #testing #webdev
---

Now, with a single click, you can push your bugs and create tasks in [GitHub directly from LambdaTest](https://goo.gl/HPAKn3). 

You can choose details like GitHub repository, label, assignee, summary etc. and push your bugs directly into your desired repository. In addition, LambdaTest will automatically include testing environment information tasks as well as the link to screenshot and video taken.

Kick start your testing now: https://goo.gl/Gxi4KP
Sign Up for free now and get
+ Run Selenium automation tests on a scalable Selenium grid having 2000+ browser environments
+ 100 minutes of free automated testing
+ 6 Test session 10 Minutes of Each Free Live Interactive testing per month
+ 10 Responsive Testing (Test a page across 44 Device configurations with a single click)
+ 10 Screenshot Testing (Take instant screenshots across 2000+ browsers)
+ Smart Testing
+ Chrome Extension
+ WordPress Plugin
+ 3rd Party Integrations.

[![](https://www.lambdatest.com/blog/wp-content/uploads/2018/11/Adword-Cyber2.jpg)](https://goo.gl/Gxi4KP)
Visual GraphQL Programming
Tags: showdev, graphql, webdev, beginners
Published: 2019-02-22 08:24:26

---
title: Visual GraphQL Programming
published: true
description: A short video presenting the capabilities of GraphQL Editor
tags: showdev,graphql,webdev,beginners
cover_image: "https://thepracticaldev.s3.amazonaws.com/i/hwkwvyfgy0i77kbgwmwh.gif"
---
As GraphQL seems to enjoy interest of DEV.to community I want to share with you a video showing how easy is creating a GraphQL Schema with GraphQL Editor.
{% youtube EyLpwrhPEZI %}

You can play with the editor [here](https://app.graphqleditor.com) or check out Github repo:
 {% github slothking-online/graphql-editor %}

Hope you gonna enjoy! Cheers!

![Cheers](https://thepracticaldev.s3.amazonaws.com/i/7eumzgakmxt3yb9vpymr.gif)
Preview CSS for redmine-Textile in BBEdit
Tags: redmine, bbedit, textile
Published: 2019-02-22 08:16:34

---
title: Preview CSS for redmine-Textile in BBEdit
published: true
tags: redmine, bbedit, textile
canonical_url: https://zeitschlag.net/preview-css-for-redmine-textile-in-bbedit/
---

A few years ago, I bought a license for [BBEdit](https://www.barebones.com/products/bbedit/), a commercial text editor for macOS, that doesn't suck. But: I never read the [manual](https://s3.amazonaws.com/BBSW-download/BBEdit_12.5.2_User_Manual.pdf) and so I used it not very often. Until recently.

Because recently, I discovered, that BBEdit has a [Preview Mode](https://www.youtube.com/watch?v=4T673gfIP-s) for several Markup languages including [Textile](https://en.wikipedia.org/wiki/Textile_(markup_language)) and [Markdown](https://en.wikipedia.org/wiki/Markdown): Just open a Markdown/Textile-file and press `CTRL+CMD+P`:

![Screenshot-2019-02-22-at-08.28.45](https://zeitschlag.net/content/images/2019/02/Screenshot-2019-02-22-at-08.28.45.png)

If you like, you can [write some custom CSS](https://www.youtube.com/watch?v=_f_yG3ecaFM) to make the Preview look better. Since I've known about the BBEdit-Preview, I've used that feature (and BBEdit, of course) a lot, at least like once an hour.

At my workplace, we use [Redmine](https://www.redmine.org) as a project management tool. Redmine has built-in support for [Markdown](http://www.redmine.org/projects/redmine/wiki/RedmineTextFormattingMarkdown) and [Textile](http://www.redmine.org/projects/redmine/wiki/RedmineTextFormattingTextile), so you can add lists, or _italic text_ to your issues or wiki-pages, for example.

In the last days, I've used my trial version of BBEdit instead of Redmine to write my issues or wiki-texts, before I copy'n'pasted them back to Redmine. This morning, I spent half an hour to write [some (basic) CSS](https://gist.github.com/zeitschlag/7ea0b83469125e8425902e5eec8cc9e1), that makes the BBEdit-Preview of a Textile-file look like the rendered Redmine-text.

What I see now in BBEdit (and its Preview) is this:

![Screenshot-2019-02-22-at-08.44.52](https://zeitschlag.net/content/images/2019/02/Screenshot-2019-02-22-at-08.44.52.png)

Redmine's Preview for the exact same text looks like this:

![Screenshot-2019-02-22-at-08.45.26](https://zeitschlag.net/content/images/2019/02/Screenshot-2019-02-22-at-08.45.26.png)

I [uploaded the CSS to Github](https://gist.github.com/zeitschlag/7ea0b83469125e8425902e5eec8cc9e1), maybe it's helpful to some of you, too? Hopefully it doesn't suck, at least. If you're missing something, feel free to change it yourself or write a comment.

Thanks for reading.
☝️Redux dev tools are a thing and they're incredible
Tags: todayilearned, react, redux
Published: 2019-02-22 06:42:07

---
title: ☝️Redux dev tools are a thing and they're incredible
published: true
description: Redux dev tools are some life-changing shit
tags: todayilearned, react, redux
cover_image: https://media.giphy.com/media/d3mlE7uhX8KFgEmY/giphy.gif
canonical_url: https://ajsharp.com/redux-dev-tools-are-a-thing-and-theyre-incredible
---

Today I discovered -- in the spirit of the fantastic [React Dev Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -- there exists an equally if not more useful [Redux Dev Tools](https://github.com/reduxjs/redux-devtools).

![](https://user-images.githubusercontent.com/7957859/48663602-3aac4900-ea9b-11e8-921f-97059cbb599c.png)

A few of the things you get:

* An inspectable timeline of every action dispatched by the store
* A state diff for each action. e.g. How each action changed the state object
* A full state inspector
* A test generator

Wow. Just, wow.

---

☝️ _**Be sure to check out [Sharesecret](https://www.sharesecret.co), which makes it easy to securely share sensitive data.**_
Using Pointer to Members on STL Algorithms
Tags: programming, algorithms, cpp
Published: 2019-05-17 10:18:56

---
title: Using Pointer to Members on STL Algorithms
published: true
tags: programming,algorithms,CPP
canonical_url: https://thoughts-on-cpp.com/2019/02/22/cpp-using-pointer-to-members/
---
Postet on [thoughts-on-cpp.com](https://thoughts-on-cpp.com)

Sometimes I need to execute an operation, like std::sort or std::transform, on a container of structs or objects using a lambda or function pointers which should take type defined criteria. Another scenario might be a global minima search of an arbitrary brane which could be described by a vector of 3-dimensional vectors. In such cases, we often use [pointer to members](https://stackoverflow.com/questions/670734/pointer-to-class-data-member).

This topic might be a piece of cake for every experienced C++ veteran. But I remember back in the days when I was a novice, I was really irritated by a piece of code which was using pointer to members, to do a special operation. I didn’t get what that piece of sh\*t was doing and why it was written that wired. And even worse, it was neither easy to find documentation of that code, nor information of such “magic” it was doing on the internet.

So how might something like this look like? Let’s say we have a vector of complex numbers which we want to sort by either the real or the imaginary number. This is our complex type:

{% gist https://gist.github.com/Ben1980/66fe6922cc05d190dfb6a732fde9b4ce %}

For sorting vectors, we would use [std::sort](https://en.cppreference.com/w/cpp/algorithm/sort) of course and for vectors of primitive types, it’s rather simple to use. And indeed, it’s easy to use with complex types as well. Because std::sort is offering an interface which is taking a compare function object that has to fulfill the requirements of [Compare](https://en.cppreference.com/w/cpp/named_req/Compare):

{% gist https://gist.github.com/Ben1980/4203d03c19c7b3ae7b4a8db5f1a73a3c %}

Using std::sort for sorting according to real or imaginary numbers might then look like this:

{% gist https://gist.github.com/Ben1980/29aac691f67fc48deff8e62cfbb95588 %}

The interesting point in the code above is the declaration of double Complex::\*var (pointer to member of Complex of type double), in line 6, which is passed to the lambda over the captures clause. The lambda function is using the pointer by dereferencing it to a comparable type (in our case a double) in line 7. It’s then used by assigning it a concrete pointer in line 9 and 12 to steer the std::sort algorithm.

For me, such indirections are sometimes quite useful but not always. The biggest problem might be the readability for programming beginners. Also, there might be a better way to have the same functionality without pointers to members. I would be glad to hear any suggestions or feedback.

Did you like this post?

What are your thoughts on this post?

Feel free to comment and share the post.
Podcast with caption generator?
Tags: podcast, questions
Published: 2019-02-22 04:50:30

---
title: Podcast with caption generator?
published: true
description: 
tags: podcast, questions
---

Hi,
Do you guys know of any Podcast apps or service that could transcribe the talk?

As a podcast listener, I want to go quickly read certain parts of the talk that I miss. But I don't want to listen to it over again.
CODE EDITORS
Tags: devtool, beginners, editor
Published: 2019-02-22 04:33:22

---
title: CODE EDITORS
published: true
description: Code editor is the place where we write our scripts and programmers spend most of their time in code editors
tags: devtool, beginner, editor
---

This post was originally published on my blog, find original post [here](https://santhoshkumarr0.github.io/posts/code-editors/)


Code editor is fundamental prgramming tool. Code editor is the place where we write our scripts and programmers spend most of their time in the code editors

They are two types of code editor

 - IDE
 - lightweight editors

## IDE

IDE (Integrated Developement Environment) is a powerfull editor with lot of features like autocompletion, debugger, build automation, version control system (git) and many other. It operates on a _project level_.

Usually IDE is heavy software, because it loads much more data on start, analyzes the project structure. So it is not recommended for system with limited resources.

[Webstorm](https://www.jetbrains.com/webstorm/) is one of the famous IDEs for web  developement,  it is a paid one.

> For beginners, IDE is not recommended to use as code editor.

## Lightweight editors

Lightweight editors are simple but fast.

They are mainly used to open and edit a file instantly.

For a extra feature like autocompletion, debugging, you may need to install extra plugins.

**Lightweight Editors**

- [VSCode](https://code.visualstudio.com/) (MicroSoft, open source)
- [Atom](https://atom.io/) (Github, open source)
- [Brackets](http://brackets.io/)(Adobe, open source)
- [Sublime Text](https://www.sublimetext.com/)

The choice of an editor is individual,so choose the one you like the most.

> My favourite is VSCode, I usually use it for both projects and easy file editing.
The correct form for deploying a web application for your customers?
Tags: react, javascript
Published: 2019-02-22 03:08:09

---
title: The correct form for deploying a web application for your customers?
published: true
description: I have been questioning myself this last couple of days on how to properly deply a web application for a real customer, here are some of my thoughts.
tags: #react, #javascript
---

<h2> What are those things that we need to worry about? </h2>

<p> Typically in a MERN stack app or MEAN stack app, we need to worry about three things, the DNS (Domain name), the server that is going to be hosting our React/ANgular App (like herocku) and the database that we are going to be running on the cloud. </p>

<p> Those 3 things might be managed by completly different companies, for example you can have the domain name from Go-Daddy, the hosting from Herocku and the Database from MongoDB Atlas </p>

<h2> Is it free? </h3>

<p> Of course not, each of this companies are going to charge you for their services, each one of those with very different prices and of course you are not going to be paying for those services because at the end of the day, that app that you created it is not for you to use, hum, but how do i explain the customer how all of this works?, who is going to manage all of this companies accounts and due dates?, is it my job or the customer job? </p>

<h2> What do i think about all of this? </h2>

<p> I personally think that im the one who is in charge of managing all of this customers accounts and due dates in exchange of an extra fee, something like a...managament price. </p>

<p> Im just a junior developer so i havent really deploy an actual app for anyone just yet, im working on a very samll web app right now for a very small institution, but is not an actual work its just that i do social service there because my university forces me to </p>

<p> So even tho it is to early to deploy this app that im working on, as you can see i started worring about this deployment thing, i really dont know how to approach it like a real proffesional, what are your thoughts? </p>
Typescript Constructor Shorthand
Tags: typescript
Published: 2019-04-20 18:34:28

---
title: Typescript Constructor Shorthand
published: true
tags: typescript 
canonical_url: https://maksimivanov.com/posts/typescript-constructor-shorthand/
---

Here is a thing, in Typescript there is a shorthand to create and assign class properties from constructor params.

Imagine you have following code, let’s say you have class `User`:

```tsx
class User {
  private name: string;
  private surname: string;
  private age: number;

  constructor(name: string, surname: string, age: number) {
    this.name = name;
    this.surname = surname;
    this.age = age;
  }
}
```

You can write same class using shorter syntax:

```tsx
class User {
  constructor(
    private name: string,
    private surname: string,
    private age: number
  ) {}
}
```

In this case `Typescript` will automatically generate thore properties. And yes both definitions will produce same Javascript code:

```tsx
var User = /** @class */ (function() {
  function User(name, surname, age) {
    this.name = name;
    this.surname = surname;
    this.age = age;
  }
  return User;
})();
```

And it works not only for `private` access level modifier, you can use `public` or `protected` as well.

So you can use this constructor assignment technique to save some lines of code.
A Flexible Node Authentication Boilerplate With Email.
Tags: node, authentication, opensource, showdev
Published: 2019-02-22 01:30:49

---
title: A Flexible Node Authentication Boilerplate With Email.
published: true
description: A node auth boilerplate with email from sendgrid.
tags: node, authentication, open source, showdev
---

I recently completed a boilerplate for node authentication. I was tired of creating a new authentication for most of my node projects and decided that the community could use boilerplate that is lightweight(minimum amount of node modules) and ready for use for almost any scenario.


![How?](https://media.giphy.com/media/l4FGnHKwXZpdYu208/giphy.gif)

Firstly there are two options currently the pure node implementation and then the container version. 
Check it out from my [GitHub](https://github.com/perkinsjr/authentication_boilerplate/) choose docker branch if you want docker and master if you want the pure node.

Please note MongoDB is required for the storing of data. We also need sendgrid API for password resets [Sendgrid](https://www.sendgrid.com)

Once checked out make sure to make the following changes in the .env

    APP_SECRET=somekey
    SEND_GRID_EMAIL= your@email.com
    SEND_GRID_USER=[sendgriduser]
    SEND_GRID_PASS=[sendgridpass]

Node Implementation 

1. npm install
2. npm run dev

Docker implementation

1. docker build 
2. docker run image 

API Routes

All routes run through the following
/api/auth/

to run register you need to call a post:

    /api/auth/register 

     {
      "fullName":"aname",
      "email":"email@email.com",
      "companyName": "name",
      "password": "password"
     }

to run login you need to call a post:

    /api/auth/login 

    {
      "email":"email@email.com",
      "password": "password"
     }

to run forgot password you need to call a post:

    /api/auth/forgot-password 

    {
      "email":"email@email.com",
     }

to run reset Password you need to call a post:

    /api/auth/reset-password

    {
      "password":"newpassword",
      "confirmPassword":"newpassword",
      reset_password_token: "reset_token_from_email"
     }

So that's the basics, I tried to keep it as lightweight as possible and hopefully you can find use for it in your next app, idea to speed up your development. Also feel free to fork and make it your own. If you have a problem submit and issue and I will fix ASAP
I redid my portfolio site for the third time, this year alone!
Tags: showdev, beginners, portfolio, career
Published: 2019-02-22 00:32:09

The last quarter of 2018 was the year dev.to was most influential in my career. More so great because I was doing my last year in varsity. I was inspired to start a [project](https://github.com/sduduzog/slim-launcher) **and actually finish it** while following advice for projects to show off on my portfolio.

## From Vue.js to a Jekyll generated 'noscript' site

I entered a year with a portfolio that had some fun animations powered by Vue.js, but as part of my resolutions this year, I wanted to start blogging. I took down my site, recreated it now with Jekyll and its default theme. No javascript whatsoever.

## From default minima theme to more custom design

Ok, I think it is great that Jekyll provides minima as their entry theme, not too heavy and not too complicated to customize. I changed the home page to something I felt represented me the most. *At some point, my portfolio site was opened on one job interview that I was in on a projector*

# Now this!

I created a new branch just for the redesign. I deleted everything on my repo and started with a new index.html file and worked my way up from there. And being unemployed 🤣, I've been in front of my laptop for more than 10 hours updating my site, and now writing this post minutes after pushing the changes.

[View my incomplete portfolio here](https://sduduzog.github.io/) and tell me what you think. Of course, it's not complete yet, I need to add a section for my projects and a link to my resume. I also have to redesign pages for my blog posts. I would use any Jekyll theme but I feel that takes away my personality from the site.

What makes this even more fun is that I'm doing this while learning vim. People really need to check this article out, for beginners like me who were lowkey scared of taking that leap because of the "*Exiting vim*" jokes, exiting vim is actually wayyy easier than I thought 😳

{% link https://dev.to/vintharas/boost-your-coding-fu-with-visual-studio-code-and-vimboost-your-coding-fu-with-visual-studio-code-and-vim-502h %}

# I almost forgot to mention the logo!

I made it with gimp. using material colors of course. Do you guys know about this [material color picker?](https://github.com/harnerdesigns/material-color) I use it all the time! Even with my portfolio design and graphics. I then exported my logo as a big `.bmp` file to trace with Inkscape for a smaller SVG.

# Links

* I use [Forestry.io](http://forestry.io) to build my site automatically when I push to origin. I initially used it as my CMS but I needed more flexibility.

* I use [jekyll-manager](https://github.com/ashmaroli/jekyll-manager) as my GUI for creating and editing posts. The rest I edit in vscode.

* Badges on the bottom of the page, I got from [simpleicons.org](https://simpleicons.org/). They have EVERYTHING! OK maybe they don't but I didn't check.