teleren/devto huggingface dataset:
Notifications for out-of-stock essentials during covId_19
Tags: shopping, ecommerce, amazon, chromextension
Published: 2020-05-23 17:46:29

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fc7r23tk3eeq9e8fpd9h.png 

title: Notifications for out-of-stock essentials during covId_19
published: true
description: a chrome extension to get alerts as the out-of-stock product is available back to purchase
tags: shopping, e-commerce, amazon, chromextension 
---
<h1>Upalabdh: A chrome extension - No more looking for "out-of-stock"​ essential products at E-commerce Stores during this peak time</h1>

<b>Are you tired waiting for the availability of your essential products at e-stores?</b>

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

If <b>YES</b>, then try <b>Upalabdh</b> (chrome Extension) : Utility to monitor the availability of products at E-Commerce Stores. Link to Download

This will let you know as soon as some product is available for purchase.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/422lr1w8cb1b8pdynts1.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9706lsaki0195xxa8d2u.png)
<b>Some of the features are as follows:</b>

<ul><li>Allows to save list of products.</li><li>
Receive push notifications when the product status changes.</li><li>
Coloured indicators to show status of product.</li><li>
Ability to add/delete products.</li><li>
Supports Amazon, Flipkart and BigBasket</li><li>
Download from Chrome Web Store</li></ul>

<b>For more details visit webpage: https://tarunmaini16.github.io/upalabdh.html</b>

<b>Download extension from Web Store
https://chrome.google.com/webstore/detail/upalabdh/lmddecfpppmaomiopmlgbeemkdpllhmh</b>

<b>*This was developed while experiencing the problem of placing orders for essentials during this peak time and for learning purpose. No more waiting now!</b>

If you want me to add support of moRe E-stores, then just let me know in comment section below

Feedbacks are welcome :)
I'm looking for a design job
Tags: jobsearch, ux, uxdesign
Published: 2020-05-23 17:39:52

---
title: I'm looking for a design job
published: true
description: I'm looking for a design job.
tags: jobsearch, ux, uxdesign
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dvqm47i5psm7hqlrhpzq.png
---
Hello folks!

I'm Carmen Wright and I'm actively job hunting at the moment.

My ideal role includes user experience and inclusive design for the web. I love to create wireframes and prototypes. I'm a fan of working with Figma, but have used InVision in the past.

I have a working knowledge of HTML/CSS, responsive web development, and visual design (improving those skills at the moment).

I've dabbled in JavaScript, Python, Ruby, and PHP. Yes, that's a lot of dabbling, but I like to dip my brain into new technologies.

🚫 I'm not looking for a UX Researcher or Front-End Developer role.

📍 Las Vegas or Remote (especially ones that plan to stay remove post-COVID 19)

My portfolio can be found at [my website](carmenwright.design).

*This would be my first formal design role, but I would be thrilled to work and learn from your company.
Is there an API endpoint to upload images to DEV.TO?
Tags: help, meta, projectbenatar, rstats
Published: 2020-05-23 17:24:47

 I'm continuing to work on [`dev.to.ol`](https://github.com/DaveParr/dev.to.ol). Some of the [future work](https://github.com/DaveParr/dev.to.ol/projects) is sort of clear to me, but I'm still missing a big piece of the puzzle. 

> How can I take the charts (images) generated by the rendering of the .Rmd, and submit them to dev.to?

I'm not spotting a `POST` or `PUT` method in the [api docs](https://docs.dev.to/api/). Have I overlooked something, or is it something that might be a future feature?
Kafkajs & NestJS with Typescript Simplified Example
Tags: javascript, kafkajs, nestjs, typescript
Published: 2020-05-23 17:18:17

This code example tried to simplify kafka integration with nestjs.

####Github location

```
https://github.com/rajeshkumarbehura/ts-nestjs-kafka
```

###How to integrate-
Kafka module is created as global module in this project. To integrate your project, copy app/common/kakfa module and inject KafkaModule as app module.

```
    KafkaModule.register({
      clientId: 'test-app-client',
      brokers: ['localhost:9092'],
      groupId: 'test-app-group',
    }
```
In my project, it is injected to top level in app.module.ts

### Create A Kafka Payload
Before sending message, create a custom payload to send message
```
    const payload: KafkaPayload = {
      messageId: '' + new Date().valueOf(), // uuid
      body: message,
      messageType: 'Say.Hello',  
      topicName: 'hello.topic', 
    };
```

###Send message to KafkaTopic
Inject KafkaService to your service or controller and call sendMessage.
```
const value = await this.kafkaService.sendMessage('hello.topic', payload);
```

###Consumer Implementation
Extend AbstractKafkaConsumer class and implement registerTopic method.
Inside registerTopic, you only need to add topic names.
No need to inject any service, as its implemented globally.
```
@Injectable()
export class ConsumerService extends AbstractKafkaConsumer {
    protected registerTopic() {
        this.addTopic('hello.topic');  
        this.addTopic('hello.fixed.topic');
    }
}
```

###Subscribe to Topic when GroupId is not fixed
Add annotation to the method and define topic name as its parameter
```
 @SubscribeTo('hello.topic')
 helloSubscriber(payload: KafkaPayload) {
        console.log('Print message after receiving', payload);
 }
```

###Subscribe to Topic when GroupId is fixed
When multiple containers or apps are running during horizontal scaling and your only one container/application required to listen to topic.
```
 @SubscribeToFixedGroup('hello.fixed.topic')
 helloSubscriber(payload: KafkaPayload) {
        console.log('Print message after receiving', payload);
 }
```
Use @nuxt/components to automatically import components!
Tags: nuxt, vue
Published: 2020-05-23 17:02:55

## What's @nuxt/components

This is a module that automatically imports components in Nuxt.js development.
You can omit the definition of the `import` statement and the `components` field.
https://github.com/nuxt/component

##  Examples
Follow the USAGE in the README.
https://github.com/nuxt/components#usage

Normally, you need to import a component to use it.

```index.vue
<template>
  <div>
    <ComponentFoo />
  </div>
</template>
<script>
import ComponentFoo from '~/components/ComponentFoo.vue'

export default {
  components: {
    ComponentFoo
  }
}
</script>
```

but with @nuxt/components, you don't need to specify the import in `<script>`.

```index.vue
<template>
  <div>
    <ComponentFoo />
  </div>
</template>
```

## In the case of dynamic components
Put `Lazy` at the beginning of a component.

```index.vue
<template>
  <div>
    <LazyComponentFoo v-if='foo' />
    <button @click='loadFoo'>Load Foo</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      foo: null
    }
  },
  methods: {
    async loadFoo () {
      this.foo = await this.getFoo()
    },
    getFoo () {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve('foo');
        }, 2000);
      });
    }
  }
}
</script>

```

## In the case of a nested the same name component
For example, if there is the same name component `Bar.vue`in a different directory, such as the following.

```
components/
  Bar.vue
  foo/
    Bar.vue
```

Add the following to `nuxt.config.js`.

```nuxt.config.js
components: {
    dirs: [
      '~/components/',
      {
        path: '~/components/foo/',
        prefix: 'foo'
      }
    ]
  },
```

Components under `foo/` are prefixed with `Foo`.

```index.vue
<template>
  <div>
    // components/Bar.vue
    <Bar />
    // components/foo/Bar.vue
    <FooBar />
  </div>
</template>
```

## reference
https://github.com/nuxt/components
75/100 100daysofcode Flutter
Tags: 100daysofcode
Published: 2020-05-23 16:58:19

day 75/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn about imagepicker, path provider, and how to implements
https://github.com/triyono777/100-days-of-code/blob/master/log.md
Short: The biggest mistake of juniors
Tags: beginners, productivity, career
Published: 2020-05-23 16:57:24

In my approximately five years of professional IT experience (a weird mix of QA, Dev, DevOps) I had the honour of looking at CVs, reviewing candidates and teaching or guiding more junior team members. Let's say my "mentoring" started three years ago. 

In these three years, I have seen a lot of people, both my teammates, colleagues and others, like open-source participants, make the same fundamental mistake. This mistake is something which even the wise **Vesemir** told us not to do. He said: **"Don't train alone; it only embeds your errors."**

This might sound funny. Taking quotes from fictional characters, but it is something that I think is crucial. I have many times seen starting programmers learn something wrongly and burn it into their mind and then spread the harmful code like a disease everywhere in the codebase. 

I want to emphasize that I don't think this is their mistake. Internet is big, dark and full of errors. They are trying, they are learning alone, and they should be praised and encouraged. But they should also start with peer reviewing as soon as possible. This is the "cure" of sorts. Internet is also full of beginning programmers, and not everyone is lucky enough to get a mentor. What I am saying is do things together as soon as possible. Work together but try to learn separately. This will allow all of you to learn new things, share knowledge and discuss better ways, not allowing you to get comfortable with what you know and lowering the risk of embedding wrong ideas into your daily routine.

Now how to find a place where you could code and someone will review your code for free? Github is a start. You can explore repositories; there is a button for it on the main page. You can filter by topics and languages. Pick a smaller project, look through the issues, play with it a bit. Smaller projects tend to be more open to newcomers. Not only do you learn, build meaningful things, but it will also show on your CV.

Good luck and Happy Coding!
Sitemaps for (Small) Static Sites
Tags: web, git
Published: 2020-05-25 09:46:02

---
title: Sitemaps for (Small) Static Sites
date: 2020-05-23 16:57:05 UTC
tags: web, git
published: true
canonical_url: https://blog.philipp-trommler.me/posts/2020/05/23/tb-sitemaps-for-static-sites/
---

You may know that I run a [small CV site](https://cv.philipp-trommler.me) and since I'd like our precious observers to regularly scan my toy sites, I tend to provide a sitemap for them. I've implemented the updates of those sitemaps with a git commit hook I'd like to share with you here.

First of all, I've created a standard sitemap within the root of the repository that feeds my CV website. It goes like the following and should contain no surprises if you're used to them:

```xml
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://cv.philipp-trommler.me/</loc>
        <lastmod>2020-05-21</lastmod>
        <changefreq>monthly</changefreq>
        <priority>1.0</priority>
    </url>
</urlset>
```

Updating this file whenever I change something on my site seems like a cumbersome and error prone task, thus I've written a really small shell script that I use as a pre-commit hook by moving it to `.git/hooks/pre-commit`:

```sh
#!/bin/sh
sed -i "s#<lastmod>.\*</lastmod>#<lastmod>$(date --rfc-3339=date)</lastmod>#g" sitemap.xml
git add sitemap.xml
```

This script simply exchanges everything inside of `<lastmod></lastmod>` with the output of `date --rfc-3339=date` which is the current date in the format expected by the search engines and adds the resulting changes to the index. Therefore, the commit I'm currently editing automatically contains the current date within the sitemap.

Of course this solution doesn't scale well onto bigger sites, there you'd probably go better with a full fledged static site generator. But maybe you also have some kind of one-pager, portfolio site or online CV, that you want to upgrade with an automatic sitemap.

This was a rather short blog entry, but since I haven't written anything in quite some time I thought I share it with you nonetheless. If you have any improvements or found an error, please let me know!
Iterative Binary Tree Traversal, Solving Microsoft Interview Question.
Tags: javscript, career, computerscience, tutorial
Published: 2020-05-23 16:40:21

Question:  Traverse a Binary Tree Iteratively(Inorder). 

<h3>Traditional Method</h3>

The Traditional Method is to traverse a binary tree using Depth First Traversal Method. 

```javascript
    var inorderTraversal = function(root) {
        let res = [];
        dfs(root,res);
        return res;
    };

    function dfs(root,res){
        if(root == null) return null;
        if(root.left) dfs(root.left,res);
        res.push(root.val);
        if(root.right) dfs(root.right,res);
    }
```

The interviewer specially asked for Iterative Traversal. It becomes a bit tricky. 

To understand how to convert from recursive to iterative, first let's understand how inorder traversal works.

<h3> Inorder Travesal </h3>

It's a two-step process,
1> If there's a left node, go to the left node. 
2> After visited the left node, if there's a right node, go towards the right node.

So to traverse it iteratively, we need a data structure that will store all the nodes. But nodes need to be stored in a particular order of starting from root node to its left-most child node. And then when we reach the lest-most child node, we want left-most child node, the first to be evaluated. 

So a data structure where we can keep on push node in the order they were accessed, and then pop the recently accessed node. 

This naturally leads to a stack data structure. 

<h3> Iterative Appraoch </h3>

Then one we remove pop a node from the stack, we look if it has the right node? If it has a right node we push that node stack and again we go on the journey to find the leftmost child for that node because of the inorder traversal rule.

So the process are : 
1 > Push a node on stack and move left.
2 > If there are no more left child node, pop the latest pushed node. 
3 > For the popped node, evaluated it and then check if it has right chid node.
4 > If it has the right child node, then push the right node and find it's leftmost child node.

I know that's too much so here's a gif I fond:

<img src = "https://i2.wp.com/algorithms.tutorialhorizon.com/files/2015/12/Inorder1.gif" /> 


```javascript
    var inorderTraversal = function(root) {
        let stack = [], res = [];
        if (root === null) {
            return res;
        }

        let curr = root;
        while(curr !== null || stack.length) {
            while (curr !== null) {
                stack.push(curr);
                curr = curr.left;
            }

            curr = stack.pop();
            res.push(curr.val);
            curr = curr.right;        
        }
        return res;
    };
```

I hope you understood my explanation :) 

Github: https://github.com/AKHILP96/Data-Structures-and-Algorithms/blob/master/Algorithm/IterativeBinaryTreeTravesal.js
World of WoqlCraft - Ep.9 Graph visualisation of Game of Thrones Character Relations
Tags: database, tutorial, visualization, graph
Published: 2020-05-23 16:39:03

---
title: World of WoqlCraft - Ep.9 Graph visualisation of Game of Thrones Character Relations
published: true
description: Continue with what we have done last week, we will do some graph visualisations with TerminusDB console to create a knowledge graph of the characters relations in the Game of Thrones.
tags: database, tutorial, visualization, graph
---
Continue with what we have done last week, we will do some graph visualisations with TerminusDB console to create a knowledge graph of the characters relations in the Game of Thrones.

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).

Join the TerminusDB community at [Discord](https://discord.gg/Gvdqw97)
🛑 HTTP Status Codes Explained in 7 Minutes
Tags: testing, tutorial, beginners, webdev
Published: 2020-05-23 16:36:57

🚀 Mastering API Testing -  https://www.learnapitesting.com

In this video of 30 Days of API Testing Challenge, I am going to discuss the HTTP Status Codes Explained, What are they with resources.

🚀 Day 23 Task:  Discuss the HTTP Status Codes

🚀 Resource. : https://apitesting.fyi.to/day23/

[![30 Days of API Testing](https://i.imgur.com/9QGzi9m.png)](https://youtu.be/lzh1yEhX60Y "30 Days of API Testing")


🚀 Thread:  https://scrolltest.com/api/day23

![](https://i.imgur.com/DDELSn6.png)


🚀 All Task List: https://scrolltest.com/api/task

🚀 Watch Full Playlist: https://apitesting.co/30days

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Too funny to pass up on
Tags: jokes
Published: 2020-05-23 16:28:11

So here I am working on a project. Pleasant day, sunny Saturday afternoon BST. Trying to remember how I got to this web page. And then I remember...

I have a new follower @hhkp12. Thanks for following me. And thanks for this https://twitter.com/i/status/1202335980939689984. As I watched I thought I recognise those two guys. The really funny guys from America.... Enjoy!
What should you know before learning React?
Tags: react, javascript, starter, guide
Published: 2020-05-23 16:24:24

React is currently "The most popular" frontend JavaScript library to develop single page applications. You can assume it to be the king of all JS libraries in the entire world 👑

 

​​​​​​Thus, learning React in 2020 can be one of the most valuable skillset that one can develop. If you're a full-stack or even a frontend developer then you SHOULD learn React.

 

But learning React can be a little daunting if you're just getting started with it. There are a few prerequisites that you must have before you jump into learning React ⚛️

 

I have shortlisted almost all the prerequisites that will get you started with React in no time once you master them:-

 

👉 Using of 'let' and 'const' keywords.

👉 Arrow functions (i.e assigning functions to variables).

👉 Callback functions.

👉 Higher order functions.

👉 Use of forEach(), map(), filter (), reduce (), bind() and other built-in handy functions.

👉 Creating objects using classes.

👉 Spread  syntax and destructuring.

 

By this moment you'll feel confident enough to work with larger code bases and you can definitely start learning React. But I'll recommend you to learn these few more concepts and then you'll be 💯% ready to learn React:-​

👉 Asynchronousnous coding with promises and async-await keywords.

👉 Fetching data from API with fetch().

 

And that's all you need to get started with React 🤗
Making git log prettier
Tags: git, workflow, versioncontrol
Published: 2020-04-06 08:09:45

---
title: Making git log prettier
published: true
description: A git command for prettier logs
tags: git, workflow, version-control
---
Git without saying is a fantastic tool; but `git log` by default is a little ugly and actually sometimes can be a little difficult to read branches and merges quickly and accurately.

Here is an example output of basic `git log`:

![git log output basic](https://dev-to-uploads.s3.amazonaws.com/i/n0wzktjts8xxqcoffezf.png)

Hmm, well we have a list of commits that's useful. But what about when we want to see a log of two branches or where a branch starts and ends. It's a little confusing.


Lets see if we can improve git log by writing a new alias `git graph`.

```
git config --global alias.graph "log --pretty --color --decorate --graph"
```

Command break down:
* `git config` - the git config command
* `--global` - this is going to be a global config change. You will be able to access this command in all projects.
* `alias.graph` - we are going to be adding to the alias section an alias called graph. If you look in `~/.gitconfig` later you will see the command.
* `"log --pretty --color --decorate --graph"` - the git command we will run when the alias is called.

To run the new alias we now run the command:

```
git graph
```
From the screen shot below you now see clearly see the points where merges and branches take place.
![Full git graph view](https://dev-to-uploads.s3.amazonaws.com/i/5uwyx5ymzmzbregcc0a1.png)
Css Tips 
Tags: webdev, css, beginners, codenewbie
Published: 2020-05-23 16:19:15

Few things as a developer we should always keep in our mind in order to save time. Lot of things can be done with css. 

#1.Short-hand property.

Instead of writing css like this, 
```
.header {
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left; 
    }

```
We can write css like this, 
```
.header {
    background: #fff url(image.gif) no-repeat top left; 
    }
```
#2.Avoid superfluous Selectors

Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following:
```
ul li { ... }
 
ol li { ... }
 
table tr td { ... }
```
They can be shorten down to just 

```
li { ... }
 
td { ... }
```
#3.Knowing !important

Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.

```
.page { background-color:blue !important; 
```In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it.

!important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.

#4.Centering 

This one is always tricky in css. 

##Text
It can be aligned by using text-align:center. 
Whereas for div can be centered by adding block property to it. Here's an example, 
```
#div1{
 display: block; 
 margin: auto; 
 Width: anything under 100%;
}
```
#5.Vertical Alignment 

You will use css navigation menu, I can almost guarantee that. The key is to make the height and line-height the same. 
Here's an example, 
```
.nav li {
 line-height:50px;
 height: 50px;
}
```

I hope you guys enjoyed the above post ❤️
Using GitHub Actions as a Makeshift Uptime Monitor (Video Tutorial // 3 min)
Tags: tutorial, github, webdev, cicd
Published: 2020-05-23 16:06:11

{% youtube o5ZLWpvus50 %}

With just 15 lines of `yaml` we can configure GitHub Actions as a simple uptime monitor for a website:

```yaml
name: Uptime Monitor
on:
  schedule:
    # Run every 10 minutes
    - cron: '*/10 * * * *'
jobs:
  ping_site:
    runs-on: ubuntu-latest
    name: Uptime Check
    steps:
    - name: Ping Site
      uses: srt32/uptime@v0.2
      with:
        url-to-hit: "https://devopsdirective.com/"
        expected-statuses: "200"
```

Watch the video for the full explanation and walkthrough!

---

What other non-standard use cases can you think of to do within GitHub actions (or other CI tool)? Leave a comment and let me know!