teleren/devto huggingface dataset:
SEO PowerSuite - Vier SEO Tools für Seitenbetreiber und Blogger
Tags: seothemen, seo, seopowersuite, tools
Published: 2020-08-19 13:53:34

---
title: SEO PowerSuite - Vier SEO Tools für Seitenbetreiber und Blogger
published: true
date: 2020-07-03 15:38:51 UTC
tags: SEOThemen,seo,seopowersuite,tools
canonical_url: https://j0e.org/seo-powersuite/
---

![SEO PowerSuite](https://j0e.org/wp-content/uploads/2019/10/seo-powersuite-twitter.png)

Die SEO PowerSuite von Link-Assistant ist eine mehrfach ausgezeichnete SEO Toolbox. Bestehend aus den vier …

Der Beitrag [SEO PowerSuite - Vier SEO Tools für Seitenbetreiber und Blogger](https://j0e.org/seo-powersuite/) erschien zuerst auf [WordPress und Marketing](https://j0e.org).
NPM Config ls -l
Tags: angular, typescript
Published: 2020-07-03 15:38:50

Did you know there are cli configs, user configs, built in configs, default values, global configs, node bin location, node version value, current working directory, HOME path, editor configuration, force configs, funding configs, global ignore files, initial author configs, and many more things to help you with NPM?


**npm config ls -l**


Shows all the information we need! 

For example when we set a new config value and want to know where it was saved, this command shows us the locations. 

Or Npm install behavior can't be explained. Could it be one of the three configs? 

Node configs have a root default set of values, anytime we use **npm set keyName=value** the default value is overridden which is shown in the default values section. 

What folder is the userconfig found? On Windows its C:Users/username/.npmrc. Do you know where the global npm config is located? 

Just use npm config ls -l to find out.

JWP 2020
Software architecture diagrams - which tool should we use?
Tags: architecture, c4model, plantuml, productivity
Published: 2020-07-03 15:21:29

---
title: Software architecture diagrams - which tool should we use?
published: true
description: 
series: Software architecture diagrams as text
tags: #architecture #c4model #plantuml #productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y93unc26r0m2wwpajksn.png
---

In [Modelling software architecture with PlantUML](https://dev.to/simonbrown/modelling-software-architecture-with-plantuml-56fc), I showed you a way to generate multiple software architecture diagrams in PlantUML format, all from a single definition of a model and views. That definition was written using the open source [Structurizr DSL](https://github.com/structurizr/dsl), which itself is independent of any diagramming tool.

## Static structure diagrams

"Which diagramming tool should we use?" - I hear this question on a regular basis, with teams debating the pros and cons of tools such as PlantUML vs Mermaid, for example. Rather than argue over which diagramming tool you're going to use, why not use them all? Although we only saw PlantUML support in the previous blog post, the open source [Structurizr CLI](https://github.com/structurizr/cli) actually allows you to use a number of tools to render your software architecture diagrams. For example, here are four versions of the same view (a C4 model [Container diagram](https://c4model.com/#ContainerDiagram)), each created from the same DSL file, and rendered in different diagramming tools.

### PlantUML

![PlantUML](https://dev-to-uploads.s3.amazonaws.com/i/fymyhk9ttibl9ase1s1n.png)

### Mermaid

![Mermaid](https://dev-to-uploads.s3.amazonaws.com/i/xroehlkewd3io6rqxus0.jpg)

### Structurizr (traditional diagram)

![Structurizr - traditional diagram](https://dev-to-uploads.s3.amazonaws.com/i/5u7aqfiv3dk7zq297wcp.png)

### Structurizr (graph view)

![Structurizr - graph view](https://dev-to-uploads.s3.amazonaws.com/i/gtkbuiq0951qdq6g8hz5.png)

## Dynamic/behavioural diagrams

The Structurizr DSL and CLI also support [Dynamic diagrams](https://c4model.com/#DynamicDiagram) for showing collaboration/behaviour, and interactions at runtime. For example, here are four versions of a Dynamic view, again created from the same DSL file, and rendered in different diagramming tools.

### PlantUML

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

### Mermaid

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8q8mo2gm91lmmztmp4cd.jpg)

### WebSequenceDiagrams

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

### Structurizr

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

## Summary

Each diagramming tool has its own pros and cons, so using a tool agnostic format to define your model and views provides an easy way to try them all out, and reduce lock-in.
#AzureFunBytes Episode 4 - Linux with @bketelsen
Tags: beginners, azure, linux, cloud
Published: 2020-07-03 15:14:51

Brian Ketelsen joins me to solve three problems!

{% youtube LNIENVIZcX0%}

How do I create a Linux VM?
How can I use this VM to host an app?
How do I mount SMB share?
Brian and I will discuss his tenure in technology with me and even answer some questions.

AzureFunBytes! - Byte-sized content with a live Twitch show! Learn about
Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes

Join me, ask questions, and learn about Azure!

Microsoft Learn: Azure Fundamentals - https://cda.ms/1nx
Microsoft Learn: Create a Linux virtual machine in Azure -  https://cda.ms/1ny
Microsoft Azure: $200 Free Credit - https://aka.ms/funbyte04
What to do when rebase goes wrong?
Tags: git, rebase
Published: 2020-07-03 15:02:09

Git (and other DVCS such as Mercurial) makes branches *much* easier than the previous, non-distributed versions. It is also very powerful, but sometimes things can go really wrong. One common issue is using `git rebase` when a branch is outdated and points to an old commit from master. Older branches can lead to a *lot* of conflicts, making rebase a nightmare. The purpose of this blog post is to show you some ways you can save time and probably your sanity using rebase. This is a specific to a simple branch rebase that's often needed when the branch is based on a commit that's just too old. 

The simplest solution is to just use `git merge`, but there are some reasons why you may not want to do that:

* It pollutes the tree with merge commits. Depending on the number of commits, it can look quite messy. In my case, the repository constantly receives hundreds of commits in a single day. 
* If you're using Pull Requests or Phabricator diffs, using `git merge` is not recommended.

Suppose we have a `feature` branch. First, you need to the commit at `master` that started your branch. In the following image, it's `C2`

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

You can find it by using the `git merge-base` command:

```
$ git merge-base master feature
c2ff9421e78bd5e8f5d9c72702439f989e3f10e0
```

Now that we have the base commit for the branch, let's generate a patch for your branch:

```
$ git diff --patch c2ff9421e78..feature > feature.patch
```

Now that you have your patch for the whole branch, switch to master, retrieve the latest changes and create a new branch

```
$ git switch master
$ git pull
$ git checkout -b feature-rebase-temp
```

What we do now is just apply the patch. What difference does it make? Well, it will expose absolutely all conflicts right away, instead of complaining about at conflicts at each single commit of the `feature` branch:

```
$ patch -p1 --merge < feature.patch
... resolve all conflicts
$ git commit -m "Your message"
```

This branch is now corresponding to the post-rebase state of your `feature` branch. If you are okay with not having the commit history of your feature branch, you can just make the `feature-temp` branch your `feature` branch:

```
$ git branch -m feature feature-outdated
$ git branch -m feature-temp feature
```

You lose the previous history, but in my experience this is the safest route when your branch and master differ way too much, you don't risk losing changes and have all the conflicts at once.
NPM View, Update Search and Info
Tags: angular, typescript
Published: 2020-07-03 14:57:16

Want to know a fast way to determine current long term support versions of NPM Modules?


**NPM View**

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

Type in the name of the package and under the dist-tags section we see the latest packages for multiple versions!

**NPM Update**

When running this command your package.json file will automatically be updated to the proper version within the dist-tags section. The is a great way to get in line with the latest release for your version!

It also handles dependencies of each package. So, for the package above under the dependencies, we get the latest versions within the scope of your package.json versions!

**NPM Search**

Uses the keywords sections to find anything matching those keywords!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/opr7uxqcm443dx1ly1vu.png)

All told, this is one step closer to getting in-tune with the ridiculous world of NPM Package hunting.

**NPM info (the best one)**

Due to each dependency version being listed, this is the best one. 

Thanks to Anjan's reminder in comment below..

```typescript
npm info @angular/cli

@angular/cli@10.0.1 | MIT | deps: 20 | versions: 370
CLI tool for Angular
https://github.com/angular/angular-cli

keywords: angular, Angular CLI, devkit, sdk, Angular DevKit, angular-cli

bin: ng

dist
.tarball: https://registry.npmjs.org/@angular/cli/-/cli-10.0.1.tgz
.shasum: 23fd9e6495a89d7fe1bc756fdfb5af9c71bcaf26
.integrity: sha512-6Ht3022UcaWTBDnQKgcvTHbOP4ITjzn1DcZWKN0+zKk4PNqOwWtOEF2CBokOG79gTQVdrp2p5YQo5uX6UG7KMQ==
.unpackedSize: 408.2 kB

dependencies:
@angular-devkit/architect: 0.1000.1 npm-package-arg: 8.0.1
@angular-devkit/core: 10.0.1        npm-pick-manifest: 6.1.0
@angular-devkit/schematics: 10.0.1  open: 7.0.4
@schematics/angular: 10.0.1         pacote: 9.5.12
@schematics/update: 0.1000.1        read-package-tree: 5.3.1
@yarnpkg/lockfile: 1.1.0            rimraf: 3.0.2
ansi-colors: 4.1.1                  semver: 7.3.2
debug: 4.1.1                        symbol-observable: 1.2.0
ini: 1.3.5                          universal-analytics: 0.4.20
inquirer: 7.1.0                     uuid: 8.1.0

maintainers:
- angular <devops+npm@angular.io>
- angular-cli <hansl@google.com>
- google-wombot <node-team-npm+wombot@google.com>

dist-tags:
latest: 10.0.1  next: 10.0.0    v6-lts: 6.2.9   v7-lts: 7.3.10  v8-lts: 8.3.28  v9-lts: 9.1.10

published 2 days ago by google-wombot <node-team-npm+wombot@google.com>
```

JWP 2020
The Dilemma of a Computer Science Student, Grade or Experience?
Published: 2020-07-03 14:42:37

**What do I need?
*A first-class result with low programming skills?
*Or a stack of programming experience and completed project then a low or average grade?**

So first off, I don’t mean you can’t have high grade and learn a new technology but in my case I can’t.

**Because if you deep into coding you will realise that learning a new framework means countless practices to get familiar with the syntax and the structure and if you get excited in the process of learning and encounter a bug then it a week of sleepless night and bloodshot eyes if you can’t find a solution on Stack-overflow or Google **

**But even though that may not your case**

Attending lectures and understanding it, and other extra-curricular activity can be a troll, like it requires a lot dedication to get high grade.

![sigh](https://dev-to-uploads.s3.amazonaws.com/i/39hdfxh5odlizowz18yf.png)

And in my university am mostly taught obsolete technology, nothing really current or in trends or framework which I Like or prefer
  
Am not saying that what am being taught is a total waste but I get this view that this makes me inexperience to the current Job market and other stuff.

>**He who hesitates is lost …** 

 that the motto I use 

So, I mostly keep to trend trying to learn, test and implement new feature 
 I once tried coding in school and had series of burn-out my grade fell and then I panic. I dismiss the thought of building actual project in school and just sticking with my routine 

**But**
I been thinking and wondering what is best for me that’s why am seeking advice?

Very good grades?
Or 
A ton of completed project to show my employer 

Am in my second year At Veritas University, Abuja.
Deploy with GitHub Pages
Published: 2020-07-03 14:52:37

GitHub is a great tool to deploy your projects. Using GitHub Pages you can easily share your projects on the World Wide Web.

GitHub Pages are very easy to set up and it's live updating with your GitHub flow. 

To start I will assume you have your project set up with GitHub repo. If you don't here is [GitHub documentation](https://docs.github.com/en/enterprise/2.13/user/articles/creating-a-new-repository) to follow. 

In GitHub navigate to your repository and in the right corner, you will click on the **Settings**.

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

Within Settings, navigate to the Source section within the Github Pages section. From the dropdown menu, select  master branch and then click Save.

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

You will get a notification that your site is ready to be published. When you first navigate to your newly deployed site it is possible that you will receive a 404 error. Sometimes it takes a few minutes to be deployed if you still having an issue try to follow steps again to make sure everything is set up correctly. 

Now, all of your repositories can be found at `http://<username>.github.io/<repository-name>`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cf5ph4don01z31gszwrx.png)
Kotlin Collections - withIndex
Tags: kotlin, collections, algorithms
Published: 2020-07-03 14:46:17

To retrieve elements with an index from an iterable type use withIndex function. 
The method iterates over an iterable type and creates another iterable type with indexed values. 
It is going to take O(n) time and O(n) space.

Documentation:
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/with-index.html
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/-indexed-value/

```kotlin

val listOfFruits : List<String> = listOf("pineapple", "apple", "orange") 
// ["pineapple", "apple", "orange"]

val fruitsWithIndex : Iterable<IndexedValue<String>> = listOfFruits.withIndex() 
//[IndexedValue(0,"pineapple"),IndexedValue(1,"apple"),IndexedValue(0,"orange"]

val firstFruit = fruitsWithIndex.elementAt(0)
println("Index: ${firstFruit.index}, Value: ${firstFruit.value}") 
//Index: 0, Value: pineapple

```
Didi - Help me choose a logo
Tags: help, deno
Published: 2020-07-03 14:44:35

I am working on a project related to deno called didi, you can use it for frontend and deno.
I have created 2 logos and I would love your opinion on which you prefer, the project is for the community after all?

~~Afterwards I will have this horrid feeling that I could be sued?~~

**Edit: Deno approved 🥳**
![Deno aproves logo](https://dev-to-uploads.s3.amazonaws.com/i/hxnw0yb4g228e4nv7ca8.png)

See the comments for both choices.
Search Microsoft Store from PowerShell
Tags: powershell
Published: 2020-07-03 14:39:03

This is an old version, I can't find the latest one I wrote before I moved on to other things...



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0donzode9bxswplmrxt0.PNG)

Leaving out deviceFamilyVersion and userSegments.
I believe device family version tells the site what category of content to search, e.g. kids, adults, and i'm not sure what usersegments does, i think it might be unique to each user but both are not mandatory parameters.
oemid and scmid, while not mandatory are important if you want to search for apps that are only for your make of computer, e.g. you will not see the lenovo vantage program in a search if you don't inlclude those fields.


Function Search-MSStore ($query) {

    $base = "https://storeedgefd.dsx.mp.microsoft.com/v8.0/search?"; $market = "US"; $locale = "en-US"

    $paramstring = [ordered]@{
    market = "US"
    locale = "en-US"
    query = "microsoft"
    mediaType = "apps"
    category = "all"
    moId = "Public"
    oemId = "LENOVO"
    scmId="Lenovo3_Idea"
    deviceFamily="windows.desktop"
    appVersion="12006.1001.0.0"
    catalogLocales="en-US"
    availableOn="windows.desktop"
    maturityRating="all"
    cardsEnabled="true"
    pzn="0"
    pageSize="25"
    skipItems="0"}

    $paramobject = New-Object -TypeName PSObject
    $paramobject | Add-Member -NotePropertyMembers $paramstring
    $paramobject.query=$query

    [string]$param = (-join ($paramobject.psobject.Properties.name | foreach {$_ + "=" + $paramobject.$_ + "&"})).trimend("&")

    $response = Invoke-WebRequest -UseBasicParsing -Uri ($base+$param)
    $cards = ($response.content | ConvertFrom-Json -ashashtable).Payload.Cards
    $cards | select Title,Price,ProductId
}
Home automation system
Tags: iot
Published: 2020-07-03 14:28:03

I am currently done with the IoT home automation system, the hardware I used are raspberry Pi , nodemcu, 8 channel relay board and the power supply for the them.
The service I used for the system are goole flirebase database real-time and mqtt protocol for transferring data from machine to machine, and real time database for the ui updates in native Android application, I have the same application in flutter
Idea Validation: Reduce Your Slack Notifications Hell
Tags: startup, help, showdev, productivity
Published: 2020-07-03 14:19:28

Hi friends!

Over the past few months my co-founder and I have been working on [Lowdown](getlowdown.com/), with the somewhat humble aim of making peoples working lives a little more peaceful (free of Slack notifications) - allowing them to focus on the work in front of them.

**The gist of Lowdown (as it currently stands) is this**: Lowdown creates auto generated digests by analysing your Slack content, based on several criteria (which you pick). You then ask your members to subscribe and pick a schedule to deliver the digest via email.

However, one of the main issues with this is that someone else is setting the digest schedule and selecting channels that may not relevant to you.

Our ultimate aim is to allow people to mute channels without fear of missing out. Today, we want to validate demand for the next version of Lowdown, which is **Personal Digests**.

Personal digests will be much like the first version of Lowdown except each member will be able to create their own digest, pick their own channels to target and set their own schedule. This is a subtle difference but (we think) a much more useful product.

With each Slack member having their own, personalized digest - it allows them to **mute channels** or even **close Slack**, knowing that they’ll get a digest with the most relevant posts delivered to them via email. You can sign up to [Lowdown Personal Digests](https://getlowdown.com/slack-digests) for early access.

So, I have two main questions:

1. Does this seem like something that would be useful to you?
2. Is it something that you think your company would be willing to pay for?

Any other feedback welcome and appreciated.
What type of position (job) is best for me?
Tags: discuss, career
Published: 2020-07-03 14:00:45

So I've always wanted to know more about computers, as I have come to realize that personally I like to know more about a wide variety of things i.e. have a broad understanding of how things work and how they work together. Some people love to be an *expert* in a particular domain. 

Anyone out there has a general idea of what job position one shall aim for if they are in the former category?
JavaScript Change Background Color
Published: 2020-07-03 13:58:58

JavaScript Change Background Color:-  We have to show you how to change the background with the example. And together we also show you how to do it in different ways.

So You can change the background color using javascript function. Below we have defined some point about it go and see your code with example more in details example <a href="https://wlearnsmart.com/javascript-change-background-color/">JavaScript Change Background Color</a>

document.body.style.backgroundColor = "yellow";
How to Handle sessoions in an angular app
Tags: help, webdev, angular
Published: 2020-07-03 13:50:56

As the title says, i want to know what is the "best practice" or guideline to handle user sessions in Angular. Currently i work on a SPA where i use jwt-tokens to handle the session. My token has an expiration date which indicates the beginning and the expiration of the validity of my token. But as far as my research goes i get to assume that using jwt-tokens to maintain a session is a bad practice. Any recommendations?

Thanks for the answers!
🚀10 Trending projects on GitHub for web developers - 3rd July 2020
Tags: javascript, webdev, typescript, react
Published: 2020-07-03 13:45:35

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. SheetJS

Parser and writer for various spreadsheet formats. Pure-JS cleanroom implementation from official specifications, related documents, and test files. Emphasis on parsing and writing robustness, cross-format feature compatibility with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.

{% github SheetJS/sheetjs %}

---

### 2. Elevator.js

Finally, a "back to top" button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.

{% github tholman/elevator.js %}

---

### 3. jExcel

jExcel CE is a lightweight Vanilla JavaScript plugin to create amazing web-based interactive HTML tables and spreadsheets compatible with Excel or any other spreadsheet software.

{% github paulhodel/jexcel %}

---

### 4. keen-slider

keen-slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, typescript support, multitouch support and is compatible with all common browsers including IE 10.

{% github rcbyr/keen-slider %}

---

### 5. Backstage 

Backstage is an open platform for building developer portals. It’s based on the developer portal we’ve been using internally at Spotify for over four years. Backstage can be as simple as a services catalog or as powerful as the UX layer for your entire tech infrastructure.

{% github spotify/backstage %}

---

### 6. pdf-lib

pdf-lib was created to address the JavaScript ecosystem's lack of robust support for PDF manipulation (especially for PDF modification).

{% github Hopding/pdf-lib %}

---

### 7. Snabbdom 

A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

{% github snabbdom/snabbdom %}

---

### 8. Formily

Alibaba Group Unified Form Solution.

{% github alibaba/formily %}

---

### 9. react-admin

A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design.

{% github marmelab/react-admin %}

---

### 10. Streamlit 

Streamlit lets you create apps for your machine learning projects with deceptively simple Python scripts. It supports hot-reloading, so your app updates live as you edit and save your file. No need to mess with HTTP requests, HTML, JavaScript, etc. All you need is your favorite editor and a browser.

{% github streamlit/streamlit %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.