teleren/devto huggingface dataset:
100 Bytes Of Wisdom: Day 15
Tags: career, journey, advice
Published: 2021-02-28 21:32:19

---
title: 100 Bytes Of Wisdom: Day 15
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
---

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

When upskilling as a developer, a common trap (so common I got trapped too) is to just read tutorials or watch videos. You might find, and many do, that this doesn't help you retain any information. It's important to actually try the thing you're learning out. When you do this, you find edge cases, "gotchas" and so much more. So, next time you're learning something new, spend 15 minutes trying to put it into practice, see if it makes a difference for you.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

Credit to @sammio2 on twitter for sending in this great byte of wisdom!

You can catch up with all the other bytes at http://bytesofwisdom.com/
Animating Navigation Burger
Tags: beginners, codenewbie, devjournal
Published: 2021-02-28 20:30:10

I've spent some time looking at CSS this week, tryin to broaden my knowledge. Since my last [update] (https://dev.to/keenancodes/when-to-expand-118i) I've been building different apps, this week I'm trying out a weather app and one thing that took a lot of work was animating the burger menu. 

I took inspiration from [Dev Ed's] (https://www.youtube.com/watch?v=gXkqy0b4M5g) responsive navigation video, but reversed the animation.

I've included the [CodePen] (https://codepen.io/KeenanCodes/pen/JjbLLpG). Let me know what you think.

K
WPF WebView2
Published: 2021-02-28 20:24:54

The new Chrome based (Edge) browser wrapper named WebView2 (still not fully baked) is coming.

WebView2 will finally allow WPF and other applications to embed a fully functional WebBrowser. 

**Current State**
It looks to me as if the architecture is similar to the Chrome Extension Architecture. Why? There's currently no direct way to access the DOM.

This is true in building Chrome Extensions too. [The new Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/) introduced the use of [Service Workers](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#service-workers) which is middleware to the actual DOM. Direct DOM Access is gone for good. 

Shouldn't be a problem right? As it turns out, like all things new in the IT world, I just can't seem to figure out how to do something easy like issue a query to the DOM for parsing element ids, names, innerText etc. All this means is that it's either too new still or I need to try harder.

I tried WebView2 recently and found that it's even harder to understand how to do a DOM Query. I just couldn't get anything to fly despite loading the sample and trying many different approaches. 

This did make me think that this stuff is still too new and there doesn't seem to be enough examples yet. Or, they intentionally don't want DOM Queries to happen.

I don't think Electron will escape this either because they too embed Chrome.  

We'll see.

But maybe, this Version 3 Manifest change is the culprit...

```
chrome.scripting.executeScript({
  file: 'content-script.js'
});
```
We can no longer execute Javscript strings, we have to instead execute a file which is contained in the bundle.

They've also introduced a new 'function' property as show here in the file for the code above:

```
function showAlert() {
  alert("test!");
}

chrome.scripting.executeScript({
  function: showAlert
});
```
This appears to be the new normal.
My only question now is "Can the new Service Worker just use regular Document syntax for the query, or is there some other way. And how does the worker return the message?

Here's another link for [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/)

JWP2021 WPF WebView2
WPF XAML Code Snippets
Published: 2021-02-28 20:08:50

After having worked in HTML for past 4 years, returning to WPF is quite a contrast. XAML is probably too noisy, but there's a lot of power that goes along with it. 

It takes time to get a layout set up just right, so when we figure it out, maybe it's a good time to create a code snippet for XAML.

**Fast Path**
- Create a folder named Snippets in your current project.
- Add a new file named datagrid.snippet.
- Add code like this:

```html
<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>Instant DataGrid</Title>
      <Author>JWP</Author>
      <Description>XAML Markup for a data grid</Description>
      <Shortcut>DataGridSnippet</Shortcut>
    </Header>
    <Snippet>
      <Code Language="XAML">
        <![CDATA[
<DataGrid x:Name="processListDataGrid"
  EnableRowVirtualization="True"
  AutoGenerateColumns="False"
  RowDetailsVisibilityMode="VisibleWhenSelected">
  <DataGrid.Columns>
    <DataGridTemplateColumn Width="120">
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <Button Tag="{Binding id}" Click="OnKillProcess" HorizontalAlignment="Stretch">Stop Process</Button>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    <DataGridTemplateColumn>
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock Style="{DynamicResource gray}" Text="{Binding id}" />
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    <DataGridTemplateColumn>
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock Style="{DynamicResource gray}"  Text="{Binding windowtitle}"></TextBlock>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    <DataGridTemplateColumn>
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock  Style="{DynamicResource gray}" Text="{Binding processname}"></TextBlock>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
  </DataGrid.Columns>
</DataGrid>
        ]]>
      </Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>
```
For XAML snippets make sure the language is:
```html
 <Code Language="XAML">
```
**Tools Code Snippet Manager**
Go to Tools/Code Snippet Manager and click on import.

Find your folder and the snippet and click "Open".

It's ready to use!

**ShortCut**
This line in the snippet sets the shortcut.
```html
<Shortcut>DataGridSnippet</Shortcut>
```

**Editing**
Go back to a XAML file and type in the start of a tag, e.g. DataGrid

Intellisense kicks in and should show this:

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

Select the snippet and press tab twice!

Nice..

JWP2021 WPF Code Snippets
Authoring commits with different emails for work and personal projects
Published: 2021-03-16 17:31:02

---
title: Authoring commits with different emails for work and personal projects
published: true
date: 2021-02-28 19:35:00 UTC
tags: 
canonical_url: https://iliascreates.com/separate-git-config-work-personal-projects/
---

I like to store all my git repositories, of both work and personal projects, under a single directory at `~/dev`. I think I’ll change this to `~/code` soon, it sounds more appropriate. Anyway, back to the topic.

At the top of my `~/.gitconfig` file I have configured the git `user` (which represents the commit author) to use my personal email address:

```
[user]
  name = Ilias Trichopoulos
  email = ilias.personal@gmail.com
```

However, when I work in git repositories of projects for my work, I want the author of my commits to have my work email address. The simplest way I found to achieve this is to dedicate a directory for all my work-related git repositories and create a separate `.gitconfig` file there. Then, I can conditionally include this new file in my main `.gitconfig` depending on which project I am working on.

In my case, I have all my work-related projects under `~/dev/company-name`. I created a new `.gitconfig` file there where the only contents are:

```
[user]
  email = ilias.work@company-name.com
```

Git 2.13 introduced the feature of [Conditional includes](https://git-scm.com/docs/git-config#_conditional_includes) which allows you to include a dedicated `.gitconfig` file depending on where the git repository is located.

Adding the following configuration at the bottom of my main `~/.gitconfig` file ensures that when I work in a git repository located at `~/dev/company-name/project1`, the author of my commits will have the `ilias.work@company-name.com` email address.

```
[user]
  name = Ilias Trichopoulos
  email = ilias.personal@gmail.com

...

[includeIf "gitdir:~/dev/company-name/"]
  path = ~/dev/company-name/.gitconfig
```

Credits to [this StackOverflow answer](https://stackoverflow.com/a/43654115/1644591) that showed me the way.
I Made My First Simple Little API
Tags: learning, api, programming
Published: 2021-02-28 19:24:42

---
title: I Made My First Simple Little API
published: true
description: 
tags: learning, api, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h72h8hwznv65831ow2g.jpg
---
[Food Orders API](https://github.com/ryanhaber/food-orders-api)

This is a gross and horrible little API **that works**. You can run it on your machine pretty easily.

`You're not allowed to judge me because I'm not an engineer and I never claimed to be one.` 😬😄

I'm just hacking around to up my game. I'm gonna keep hacking away to make this better, clean up some of the horror, and maybe eventually host on Heroku, but for now, "Look, Mom! No hands!"

<span>Photo by <a href="https://unsplash.com/@henmankk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Keagan Henman</a> on <a href="https://unsplash.com/s/photos/stunt?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
How to add Tailwind CSS to Vite?
Tags: tailwindcss, vite, javascript
Published: 2021-02-28 19:09:40

[Tailwind CSS](https://tailwindcss.com) is a utility-first CSS framework which can help you fall in love with CSS again.

[Vite](https://vitejs.dev) is a modern webpack (I know, I know... I did a little simplification here).

In this article I'm gonna show you how to make them work together in three easy steps.

### 1. Add Tailwind CSS config file
Add a `tailwind.config.js` file to the root of your project.

```js
module.exports = {
  purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {},
  variants: {},
  plugins: [],
}
```

### 2. Add PostCSS config file
Add a `postcss.config.js` file to the root of your project.

```js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

### 3. Add required packages to your project
Add Tailwind CSS, PostCSS and Autoprefixer packages to your project's dev-depnendencies:
```bash
npm i tailwindcss postcss autoprefixer -D
```

That's all! You can enjoy using Vite with Tailwind CSS now!
Tip: How to avoid duplicating Gradle codes in Multi Android modules
Tags: android, gradle, tip
Published: 2021-02-28 19:07:42

Let's assume the following code is added in more than one Android Gradle module on a project which has multiple Gradle modules.
```
android {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 30
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }
}
```

To avoid duplicating this code in more than one module Gradle and avoid making mistakes, you could use the following solution:

Create a Gradle Script file in the root project, and for this code, you could create for example `android.gradle` and add the code common in it:
```
android {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 30
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }
}
```
and in `build.gradle` of each Gradle module you can include it using `apply from:'../android.gradle'`. For example, including it into `app/build.gradle`.
```
apply from:'../android.gradle'

android {
    defaultConfig {
        applicationId "com.my.application"
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}
```
JS: Finally discover how to Hide and Show elements
Tags: javascript, tutorial, webdev, codequality
Published: 2021-02-28 18:48:34

`Hello World!` New episode of the series - [A CSS/JS trick in 5 minutes](https://dev.to/devlorenzo/series/11185) - [Last Article](https://dev.to/devlorenzo/css-sky-background-for-websites-29po) was about a CSS background that can really change your websites. 
Today I want to explain you a Javascript trick: How to hide and show elements.

Check this!

{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

--- 

We have a special property to change visibility of an element. Set visibility. We just have to call `object.style.visibility`. The property is supported in all browsers. 

### Show

``` 
object.style.visibility = "visible"
```

Visible is the default property.

### Hide

``` 
object.style.visibility = "hidden"
```

### Other values

```
object.style.visibility = "visible|hidden|collapse|initial|inherit"
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vufa48focb6i3466ze40.png)
 
---

### Parentheses about Display property:

You might get confused about `visibility:hidden` and `display:none`.

> The visibility property allows the author to show or hide an element. It is similar to the display property. However, the difference is that if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size. [W3school](https://www.w3schools.com/jsref/prop_style_visibility.asp)

Display specifies how an element should be displayed, visibility makes an element hidden. Visibility will not affect the layout (so I recommend you to use it most of the time)

We have a lot of different display values, full list on [w3school](https://www.w3schools.com/cssref/pr_class_display.asp).

Also, I have to add, with "display: none" the element is still present in the DOM, with that  if you set a button or a href link to "display: none" is still clickable even if it is not visible.
Thanks to @Aspiiire 🔥 for telling me. 

---

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

--- 

{% collapsible Other articles %} 

{% link https://dev.to/devlorenzo/how-to-start-learning-coding-at-30-40-28m %}

{% link https://dev.to/devlorenzo/windows-or-mac-4f8k %}

{% link https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj %}

{% endcollapsible %}

{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

---

## **[Subscribe to my Newsletter!](https://chipper-motivator-3112.ck.page/05710ea3d3)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
LeetCode Two Sum
Tags: leetcode, algorithms, go, cpp
Published: 2021-02-28 18:39:22

---
title: LeetCode Two Sum
published: true
description: LeetCode Two Sum solution in C++ and Golang.
tags: leetcode, algorithms, golang, cpp
---

### Problem statement

Given an array of integers **nums** and an integer **target**, return indices of the two numbers such that they add up to **target**.

You may assume that each input would have exactly one solution, and you may not use the same element twice.
You can return the answer in any order.

Problem statement taken from: <a href="https://leetcode.com/problems/two-sum" target="_blank">https://leetcode.com/problems/two-sum</a>

**Example 1:**
```
Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Output: Because nums[0] + nums[1] == 9, we return [0, 1].
```

**Example 2:**
```
Input: nums = [3,2,4], target = 6
Output: [1,2]
```

**Example 3:**
```
Input: nums = [8,2,6,9,10], target = 7
Output: []
```


### Explanation

#### Brute force

A brute force solution is to use two nested loops.

We use an outer loop with iterator **i** to visit each element of the array and
inner loop with iterator **j** to check if there is any other element that adds up to the target.

A small code block in C++ will look like this.

```cpp
for (int i = 0; i < nums.length; i++){
    for (int j = i + 1; j < nums.length; j++){
        if (nums[i] + nums[j] == target){
            return new int[] { i, j };
        }
    }
}
```

The time complexity for the above code is **O(N²)** and hence the solution is
not efficient.

#### Hash Map

The problem can be solved in **O(N)** time, using extra space.

We can use a [Hash table / HashMap](https://en.wikipedia.org/wiki/Hash_table). The HashMap
will store the array element as a key and the value will be the index at which the element is stored.

##### Algorithm

```
- Create a new HashMap
- Iterate over the array
  - Subtract current array element from target
  - Check if the above difference exists in HashMap
    - If YES, then return the current index and the value of the difference in HashMap
    - If NO, then store the current element as HashMap key and current index as its value
- Return empty array as a result if nums array iteration is completed in the above step
```

##### C++ solution

```cpp
class Solution {
public:
    vector<int> twoSum(vector<int>& nums, int target) {
        map<int, int> umap;
        int difference;

        for(int i = 0; i < nums.size(); i++ ){
            difference = target - nums.at(i);
            if(umap.find(difference) != umap.end()) {
                vector<int> v{umap[difference], i};
                return v;
            } else {
                umap[nums.at(i)] = i;
            }
        }

        return vector<int> {};
    }
};
```

##### Golang solution

```go
func twoSum(nums []int, target int) []int {
    record := make(map[int]int)

    for index, num := range nums {
        difference := target - num
        if res, ok := record[difference]; ok {
            return []int{index, res}
        }
        record[num] = index
    }

    return []int{}
}
```

Originally published at https://alkeshghorpade.me.
Jenkins + Ubuntu Server: Change Default Port
Tags: uncategorized
Published: 2021-03-12 20:46:10

---
title: Jenkins + Ubuntu Server: Change Default Port
published: true
date: 2021-02-28 18:35:44 UTC
tags: Uncategorized
canonical_url: https://kylerconway.com/2021/02/28/jenkins-ubuntu-server-change-default-port/
---

Ubuntu server has a nice installation up-front that allows you to pre-select some tools and services at install you might want to have running on your new server.   
  
If you happen to select [Wekan](https://wekan.github.io/) it will default to port 8080.  
  
If you _then_ happen to want to [install Jenkins via their Debian/Ubuntu](https://www.jenkins.io/doc/book/installing/linux/#debianubuntu) method it will fail to fully install at the `sudo apt-get install jenkins` section due to the port 8080 already being occupied.

[![](https://kylerconway.com/wp-content/uploads/2021/02/Screenshot-from-2021-02-28-12-07-31-1024x257.png)](https://kylerconway.com/wp-content/uploads/2021/02/Screenshot-from-2021-02-28-12-07-31.png)

After running the above command you can edit port in the following file:

```
sudo nano /etc/default/jenkins
```

Edit the numbers of the identified port to something other than “8080”

```
# port for HTTP connector (default 8080; disable with -1)
HTTP_PORT=8090
```

You can see a video here: https://youtu.be/XVei-AeXLLo
JS-X-Ray 3.0
Tags: node, javascript, security, opensource
Published: 2021-02-28 18:28:54

Hello!

I have been working every night of the week on a new major version of my open-source JavaScript SAST [JS-X-Ray](https://github.com/fraxken/js-x-ray). I've been looking forward to making significant changes to the code for several months now...

# Why ?

Because I'm still learning every day and the project has grown quite large since 2.0.0. Also when I started the project I lacked a certain rigor in the way I documented the code (and also on some speculations).

It became necessary to make changes in order to continue to evolve the project.

# So what's new ?

## sec-literal

```bash
npm i sec-literal
```

I started to work on a [package](https://github.com/fraxken/sec-literal) to analyze ESTree Literals and JavaScript strings. This is a very important part that could be separated in its own package (which simplifies my documentation and testing).

Some of the features of this package:
- Detect Hexadecimal, Base64 and Unicode sequences.
- Detect patterns (prefix, suffix) on groups of identifiers.
- Detect suspicious string and return advanced metrics on it (with char diversity etc).

It's a start... I plan to extend the features of the package in the coming months (but also to re-invest some time in documentation and testing).

## new project structure

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/266m254j98n81l2tiofa.png)

Still very far from the perfection I imagine but it's a good start. The code had become messy and it was almost impossible to reason properly.

The new version is now much easier to maintain and evolve. I will surely continue to improve it for the next major release.

## More documentation, more tests

I took advantage of the refacto to reinsert a whole set of documentation and unit tests. It also allowed me to fix a number of issues that had not been resolved in version 2.3.

## Obfuscation detection is hard

I knew it! But I swear to you that it is much more complex than anyone can imagine. I had to rewind my steps several times.

But if there were no challenges it wouldn't be fun.

## ESM Import evaluation
Version 3 now throw an unsafe-import for import with javascript code evaluation.

```js
import 'data:text/javascript;base64,Y29uc29sZS5sb2coJ2hlbGxvIHdvcmxkJyk7Cg==';
```

For more info: https://2ality.com/2019/10/eval-via-import.html

# Conclusion

Nothing incredible for this new version. But the project continues to progress step by step and I hope to be able to add a whole bunch of new detections by the end of the year.

Best Regards,
Thomas
Pokémon + Dev ?
Tags: watercooler, discuss
Published: 2021-02-28 18:24:56

Any other devs out there celebrating the 25th anniversary of the Pokémon games? A little bit of childhood nostalgia is going a long way for me this weekend. 

**So what’s your favorite Pokémon-related dev tool?** Mine’s gotta be [this Node package **pokemon**](https://www.npmjs.com/package/pokemon). I like to use it to generate text when I get tired of lorem ipsum. No, it’s not coherent, but it makes me chuckle during those prototyping long hauls.