teleren/devto huggingface dataset:
Become a better developer (and person) by helping others.
Tags: helping, teaching
Published: 2019-04-23 14:40:50

---
title: Become a better developer (and person) by helping others.
published: true
description: A quick reminder to where we all began as developers, how we got where we are and how we can go further by helping others.
tags: helping, teaching
cover_image: https://thepracticaldev.s3.amazonaws.com/i/776en26h9slpucojz4p1.jpg
---


Developing is hard. We all began our journeys somewhere, and regardless of how smart you are, there is probably someone whose shoulders you standed upon to be able to be where you are right now.

With that said, we should always remember to help the others behind us (and sometimes those aside us or even beyond us) in this journey climb the most difficult steps, or at least the steps you know how to climb. It makes us greater as a community, and in a practical way that I will try to explain, makes us greater as developers, but better yet, makes us greater as persons.


Learning is about solving problems
--

Solving problems is an essential step in learning any skill. That means that the most problems you solve using a skill, the better you will become at it. And I think it's fair to say that solving problems is probably 90% of what we do daily, so we all get better as developers just by developing. Not a groundbreaking realization, I agree, but the amount of problems we encounter in our "daily struggles" is limited to our own pace. If we want to get better faster, we must find a lot more problems to solve!

Thankfully, there is an endless source of coding problems: the community!

Join a community. Or several.
--

Participate in them, stop being an observer in Stack Overflow and start answering questions you know, get into Facebook groups about your favorite language or framework and help the newbies get started, help the already prominent find elegant solutions to their sophisticated software requirements, join Whatsapp groups and help people with their coding difficulties, contribute on an opensource project on Github. Expose yourself to other people's problems, and the solutions will eventually help you in your own journey.


By helping them with a single problem you could change their lives forever, and that feeling will definitely change your's. Be charitable with knowledge, it always pays off; you will have grateful friends, become a better developer and feel better as a person. No cons, I promise. :)
Working with webhooks using ngrok
Tags: tunnel, webhook, portforwarding, ngrok
Published: 2019-04-23 14:38:04


When working with external API's, testing application with mock request was one way. So when I want to test with a live API I was forced to host it on public (Not really!). One easy solution to this is using [ngrok](https://ngrok.com/) which basically is a Tunneling/Port forwarding software which has such an humble setup.

All we have to do is [Download](https://ngrok.com/download)-->run `ngrok http 5000`. That's it!!

All we did was exposed port `5000` over `http` to the outside. Once you run the command it would create an endpoint for the outside world (internet) which would look something like this

`http://9e844545.ngrok.io`

It can do more than that. To find out more probably you can dig through these [docs](https://ngrok.com/docs) to start with.


Now that you have an endpoint to share to the outside world, we can use this URL and set webhooks so that external apps can post data to this endpoint.

-Photo by Burak K from Pexels
-Originally posted on [Bitsmonkey](http://bitsmonkey.in/blog/2019/04/23/ngrok)
Extend the *ngIf Syntax to Create a Custom Permission Directive
Tags: angular, javascript, webdev, tutorial
Published: 2019-04-23 14:33:55

---
title: Extend the *ngIf Syntax to Create a Custom Permission Directive
published: true
description: Learn how to create a custom structural directive in Angular that checks against user permissions
tags: angular, javascript, webdev, tutorial
cover_image: https://juristr.com/blog/assets/imgs/angular-permission-directive-bg.png
canonical_url: https://juristr.com/blog/2018/02/angular-permission-directive
---

_So our use case is to create a directive, which shows/hides elements on the page based on our currently authenticated user's permissions. In this article we will go over a very simple use case, but which could easily be extended and used in a real production application. By creating such directive we'll also take a deeper look at the syntax that Angular's `ngIf` and `ngFor` directives use._

Consider we're having a user object structure that looks like this:

```javascript
const aUser = {
    username: 'juristr',
    permissions: [
        'permission1',
        'permission2',
        'permission3'
    ]
}
```

This is what we get when the user authenticates. What we want to achieve now is to have a more **advanced `*ngIf` directive** that automatically retrieves information about the authenticated user and hides/shows blocks of our app based on the permissions we define.

For instance, such a custom `*hasPermission` directive could work like this:

```html
<div *hasPermission="['can_write', 'can_read']">
    Only users with "can_write AND "can_read" permissions can see this.
</div>
```

By defining such block in our component template, it will automatically be hidden if the user does not have the permissions `can_write` and `can_read`.

Neat, isn't it :smiley:. Read the full blog post & how to create such custom directive [here &raquo;](https://juristr.com/blog/2018/02/angular-permission-directive/?utm_source=devto&utm_medium=crosspost)
Pushing Database Versioning to its Limits
Tags: json, xml, versioning, diffing
Published: 2019-04-23 14:32:56

---
title: Pushing Database Versioning to its Limits
published: true
description: 
tags: JSON, XML, versioning, diffing
---

https://hackernoon.com/why-and-how-we-built-a-temporal-database-system-called-sirixdb-open-source-from-scratch-a7446f56f201
Redux Devtools: Actions Stack Trace
Tags: react, redux, javascript
Published: 2019-04-23 14:22:10

---
title: Redux Devtools: Actions Stack Trace
published: true
description: New feature added to Redux devtools, it helps you track where a particular redux action was dispatched from. 
tags: react, redux, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/howo3qny5etzu7vwffwo.png
---

I recently watched on Youtube Mark Erikson's talk 'The State of Redux' in Reacthaton 2019. Apart from talking about the current state of redux(Yes!! Redux is not dead) he also spoke about a new feature added to the Redux developer tools. This is called the action stack trace, it helps you track where a particular Redux action was dispatched from. This feature is disabled by default when enabled a Trace tab is added to your Redux devtools and when you click on a particular action it shows you the stack trace of where that action was dispatched from.

I think this is a big addition to the Redux devtools because not long ago I had to deal with a bug where an action was dispatched in my application but I didn't know where or what dispatched that action.

![Action stack trace demo](https://user-images.githubusercontent.com/7957859/50161148-a1639300-02e3-11e9-80e7-18d3215a0bf8.gif)

> The above image was gotten from [Redux Devtools Extension Docs](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Features/Trace.md)

To enable this feature set the `trace` option to `true` when you are setting up the redux devtools. Examples are below on are to enable this feature.

```js
// Without middleware

//import { composeWithDevTools } from "redux-devtools-extension";
//import * as actionCreators from "./actions/index";

const composeEnhancers = composeWithDevTools({
  actionCreators,
  trace: true,
  traceLimit: 25,
})
const store = createStore(reducer, composeEnhancers())
```

```js
// With thunk middleware 

//import { composeWithDevTools } from "redux-devtools-extension";
 
const composeEnhancers = composeWithDevTools({ 
    actionCreators, 
    trace: true, 
    traceLimit: 25 
}); 
const store = createStore(reducer, preloadedState, composeEnhancers(
    applyMiddleware(invariant(), thunk) 
));
```

```js
// With redux-saga middleware 
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&

    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ 
    trace: true, 
    traceLimit: 25 
}) || compose; 
const store = createStore( reducer, composeEnhancers(applyMiddleware(sagaMiddleware))
```

You can check out the docs for [examples](https://github.com/zalmoxisus/redux-devtools-extension/commit/64717bb9b3534ff616d9db56c2be680627c7b09d)

I use create react app for most of my React application so I don't need any additional setup but if you setup your own application using webpack configuration you will need to set the `devtool` in your webpack config to `source-map` for development. This helps Redux devtools provide a mapping between the original code and the transformed source code.
Automating Microsoft Edge with Puppeteer-Sharp
Tags: csharp, puppeteersharp
Published: 2019-04-23 14:13:14

---
title: Automating Microsoft Edge with Puppeteer-Sharp
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lh43u519brh0u4vgidkb.jpg
tags: csharp, puppeteer-sharp
canonical_url: http://www.hardkoded.com/blog/automating-microsoft-edge-puppteer-sharp
---

As you may have heard, Microsoft made available to the public its [Chromium-powered Edge browser](https://www.microsoftedgeinsider.com/en-us/).  Maybe this question won't qualify as technical interview question but:

>If Puppeteer-Sharp automates Chromium, and Microsoft Edge (insider) is powered by chromium, that would mean that...

![Idea](https://media.giphy.com/media/B5AVgxf0OzlyE/giphy.gif)

When you call `Puppeteer.LaunchAsync`, one of the values you can set in the `LaunchOptions` is the [ExecutablePath](https://www.puppeteersharp.com/api/PuppeteerSharp.LaunchOptions.html#PuppeteerSharp_LaunchOptions_ExecutablePath).

So, what would happen if we launch Puppeteer passing our Microsoft Edge browser path?

```cs
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = true,
    ExecutablePath = "C:\\Program Files (x86)\\Microsoft\\Edge Dev\\Application\\msedge.exe"
});
```

Let's write a super simple example:

```cs
var browserOptions = new LaunchOptions
{
    Headless = false,
    ExecutablePath = "C:\\Program Files (x86)\\Microsoft\\Edge Dev\\Application\\msedge.exe"
};

var browser = await Puppeteer.LaunchAsync(browserOptions);
var page = await browser.NewPageAsync();

await page.SetContentAsync("<div>Testing</div>");
```

Voilà!

![demo running](https://github.com/kblok/kblok.github.io/raw/master/img/microsoft-edge-puppeteer/demo-running.png)

And after a [few tweaks](https://github.com/kblok/puppeteer-sharp/pull/1074) in puppeteer-sharp, and [one similar change](https://github.com/GoogleChrome/puppeteer/pull/4314) in puppeteer, we managed to get all tests running using Microsoft Edge!

![tests running](https://github.com/kblok/kblok.github.io/raw/master/img/microsoft-edge-puppeteer/tests-running.png)

So we can say that Puppeteer-Sharp v1.14 is fully compatible with Microsoft Edge Insider version 75.0.131.0.

![Yeah](https://media1.giphy.com/media/TdfyKrN7HGTIY/giphy.gif?cid=790b76115cbda5016531733341f0d371)

Don't stop coding!


Originally posted on [harkoded.com](http://www.hardkoded.com/blog/automating-microsoft-edge-puppteer-sharp)
How it used to be
Tags: java, javascript, badolddays
Published: 2019-02-20 19:40:06

---
title: How it used to be
published: true
description: Anecdotes from earlier in my career
tags: #java #javascript #badolddays
---

I want to make one thing clear from the start. I am not an old-timer... yet. I've been a professional software engineer since 2006, and plan to stick with it for the long haul. I've seen things. I've done things. Horrible, cringe-worthy things. And I love to laugh about them now, so I thought I'd share a few of my stories.

I was working at a small software shop that made CRM software that integrated with Novell products, Groupwise in particular. I was on a team of 2 developers: a Delphi programmer who was in charge of a desktop client, and me, in charge of the Java web application. (Back in these days, "desktop" still meant an application running locally on your own operating system, not just a web app in full screen mode.)

Just to be clear on the architecture, we had a thick client that ran on each persons desktop that communicated directly with the database. No middle tier. Let me say that again.... No... middle.. tier. The java web application came along much later in the development of this product, so it wasn't exposing APIs for that desktop client to use.

It was just as well, because we didn't do server-side integration with Groupwise anyway. They hadn't exposed a server side api at all. The desktop app accessed things like your email and calendar from COM objects that were installed with Groupwise. That was pretty standard back then.

Here's the fun part. I had to do that same type of integration with the web application. So I wrote javascript (and some vbscript) that would access COM objects on your machine (special permissions required) to read your email, contacts, and calendar, send that information up to the java web application for processing, then shove it into a JSP page for rendering, then ship it back down to the browser.

That year, at Novell's BrainShare conference, they announced a server-side integration option, using the best web api available, with a SOAP interface, and we were thrilled, to have that as an option. THRILLED!

Needless to say, things these days are drastically different than they used to be, not very long ago. I'm lucky enough to work with newer technologies most of the time, but I'm also very aware of the large number of people that still work with this type of technology, and much, much older. To those poor souls stuck in the past, you have my thanks. You keep the world turning.
Android app to scan QR and update data in firebase and display it
Tags: android, qr, firebase
Published: 2019-04-23 14:08:40

---
title: Android app to scan QR and update data in firebase and display it
published: true
description: This is a basic app interacting with firebase realtime database and QR scanning.
tags: Android, QR, firebase
series: Building formiQR
---

Before we start, here are some pics of the UI of the app we are building, this may help you to understand what is going on.

Default(No Internet)             |  Scanner          |  Details Loaded        |
:-------------------------:|:-------------------------:|:-------------------------:
![](https://thepracticaldev.s3.amazonaws.com/i/78s7am6q9iiy7cxrqeh4.png)  |  ![](https://thepracticaldev.s3.amazonaws.com/i/unpksl68sso03a6azswi.png)|  ![](https://thepracticaldev.s3.amazonaws.com/i/qh5vbq04qo3dv6qitmtq.png) |

To implement the QR Scanner I used the zxing library, which is the best way to do it,as per me. 

The code to this is at {% github Club-DevBytes/formiQR %}

You should have a look at the structure of Realtime Database, this may be helpful 

![](https://thepracticaldev.s3.amazonaws.com/i/mkw6ykisl8ojkdneydh2.png)

If you are new to firebase and android, you can lookup how to connect them both, there is already more than enough content regarding this topic.

If you need any help then feel free to ask in the comments.
Sending personalized email with dynamic QR from cloud function
Tags: chartsapi, email, firebase
Published: 2019-04-23 14:07:17

---
title: Sending personalized email with dynamic QR from cloud function
published: true
description: This works with realtime database to send personalized emails with dynamic QR with google charts api
tags: charts api, email, firebase
series: Building formiQR
---
This is the second part of the series named Building formiQR. 

By following the previous article, you may have a similar structure of Realtime Database,as 

![Firebase structure](https://thepracticaldev.s3.amazonaws.com/i/6fc17b5u5bxluk4ug7i6.png)

Note: You would not be having the atEvent and count node, as we would be writing code for them in other sections of the blog series.

So looking at our maker node or let say registered users, we have their name and email id. Now we need to set a cloud function, which would be able to get the name and email, at on create trigger on the node and send personalized email to them.

A small brief about firebase cloud function, if you are new to it, Cloud Functions for Firebase lets you automatically run backend code in response to events triggered by Firebase features. 

Here is a [post to get started](https://firebase.google.com/docs/functions/get-started) with firebase cloud functions, you can follow it upto step 4 and then we need to add the following code to the index.js

{% gist https://gist.github.com/Akshay090/ba5c76c1befb78a891a16f64cedf95df %}


You can go through the code, its very straightforward to understand, and the important details are in the comment section. 

Before we proceed further, we need to make an email template, which we would be using to send personalized emails to our event attendees. 

To generate an awesome email template, you can use https://stripo.email this is by far the best website I found to make email templates. PS: I am not sponsored by stripo, it's just that they are really awesome.

After designing your email template, export it as HTML and add it under functions/templates/makerEmail.html 

Don't forget to add tags, which we would be replacing dynamically, like ##UNIQUE_NAME or ##UNIQUE_QR.

This method of using data.replace(/##UNIQUE_NAME/g, "MyNameHere"); is the most easiest method I found to generate personalized emails.

Finally we can deploy this cloud function, for that run ```firebase deploy --only functions:mailFxn ```

Now when ever a node is created, the cloud function would automatically send them the personalized emails. Wait, how to send email to the ones already present in firebase realtime database,before we added this cloud function. 

For that delete the nodes for the one already present, before adding the cloud function and press the SYNC button in the google sheet which we added at the end of previous article. That would recreate the onCreate Trigger and the cloud function would do the work.

So finally its over, see you in the [next post](https://dev.to/akshay090/a-cloud-function-to-implement-a-counter-4i24).
What does team collaboration mean in 2019?
Tags: collaboration, teamcollaboration
Published: 2019-04-23 13:31:26

Getting your team to collaborate without stepping on each others' toes is hard. What are you doing about it?

Is it just about communicating over Slack and assigning tasks?

I'm pretty sure everyone here has wondered how to get your team to work together and not have any miscommunication.

It is common to think that the only benefit from a successful collaborative team is shipping features faster and making more money. But that used to be the case when people still worked out of cubicles.

So, what does team collaboration in 2019 look like? What are the challenges of the modern workplace? How do you get your team to collaborate effortlessly? 🤔

At [Zepel.io](https://zepel.io//?utm_source=devto&utm_medium=successfulteamcollaboration), after multiple trial and errors, talking to CEOs, and studying several researches, [here's what we learned](https://blog.zepel.io/successful-team-collaboration/?utm_source=devto&utm_medium=successfulteamcollaboration).

Drop in the comments the processes you've tried in the past and use in your organization to get your team to work together.
The Building an Indie Business Podcast- How to Build a Product in Public
Tags: podcast, productivity, startup
Published: 2019-04-23 13:08:25

---
title: The Building an Indie Business Podcast- How to Build a Product in Public 
published: true
description: 
tags: podcast, productivity, startup
---

https://overcast.fm/+RG5gYYsZ0

[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
Radix: DAG Scaling Issues & Aims of Radix
Tags: opensource, blockchain, dlt, dag
Published: 2019-04-23 12:19:46

---
title: Radix: DAG Scaling Issues & Aims of Radix
published: true
description: 
tags: #opensource #blockchain #dlt #DAG
---

In the next video of the series, we will dive into DAGs - directed acyclic graphs. What are those? Are they better at scaling than blockchain? Let's dive into these issues with, once again, Dan!

{% youtube 36DRDd8mh0o %}

If you have any questions - join The Radix Community!

[Telegram] (https://t.me/radix_dlt) for general chat
[​Discord] (https://discord.gg/7Q7HSZZ) for developers chat
[​Reddit] (https://reddit.com/r/radix) for general discussion
[Forum] (https://forum.radixdlt.com/) for technical discussion
​[Twitter] (https://twitter.com/radixdlt) for announcements
[​Email] (https://radixdlt.typeform.com/to/nyKvMV) newsletter for weekly updates
Mail to [hello@radixdlt.com] (hello@radixdlt.com) for general enquiries
Day 16 - Log execution time with oneliner - 100 days 100 python scripts
Tags: python, productivity, beginners, career
Published: 2019-04-23 11:01:55

---
title: Day 16 - Log execution time with oneliner - 100 days 100 python scripts
published: true
description: Day 16 - Log execution time with a one-liner
tags: python, productivity, beginners, career
cover_image: https://cdn-images-1.medium.com/max/1600/0*GEsDQGQ1BucUNW1g
series: 100 days 100 python scripts
---

##Day 16: exection_time_log_decorator 

This is a decorator script in Python, When you use @log as a decorator for the function it can automatically log the function name and the execution time it took.

```python
import logging
import functools,time
from os.path import expanduser,join

def log(fun):
    functools.wraps(fun)
    def wrapper(*args,**kwargs):
        logger=logging.getLogger("execution_time_log")
        if not logger.hasHandlers():
            logger.setLevel(logging.INFO)
            filehandler=logging.FileHandler(join(expanduser("~"),"execution_time.log"))
            formatter=logging.Formatter('%(asctime)s - %(function_name)s - %(exec_time)f')
            filehandler.setFormatter(formatter)
            logger.addHandler(filehandler)
        start_time=time.time()
        called_return=fun(*args,**kwargs)
        end_time=time.time()
        logger.info(None,extra={'exec_time':end_time-start_time,'function_name':fun.__name__})
        return called_return
    return wrapper


# Examples

@log
def test1():
    time.sleep(10)

@log
def test2():
    time.sleep(20)
@log
def test3():
    time.sleep(15)


test1()
test2()
test3()

```

Please Visit my Git Repo to check out all the previous day challenges.

[https://github.com/ganeshraja10/automated-python-scripts](https://github.com/ganeshraja10/automated-python-scripts)

###OutPut 

![Output](https://thepracticaldev.s3.amazonaws.com/i/65g1vim3pefz3tx10lff.png)
Best Library to start with
Tags: developer, language, project, react
Published: 2019-04-23 10:07:34

---
title: Best Library to start with
published: true
description: From small to big projects with the right way of coding
tags: developer, language, project, react
---

What is the right way to start a small project and grow it up. For example I will code a online portal. I store some user data to work with for example to make offers. 

What is the best way to make a online portal and build a desktop application for my team to analyse data from people we get. 

Make two seperate projects sense or only one project with a backend?