teleren/devto huggingface dataset:
Day 46: Learning Progressive Web App Fundamentals
Tags: 100daysofcode, pwa
Published: 2020-08-31 15:00:12

Spent the day reviewing concepts on PWA. Progressive Web Apps (PWA) are apps built with web technologies. My key Takeaways:

The nine attributes of PWA.
* Responsive
* Connectivity Independent, progressive web apps work both offline an online.
* Fresh: Always upto date
* Safe, this is attributed to the fact that they are served by transport layer or secure https.
* Discoverable 
* Re-engageable attributed to push notifications
* Install-able
* Linkable
* have Applike interactions

Browser Capabilities available to PWA
* Network Proxy available to change sniff and cache.
* App packaging install-able with W3C
* Background Syncing
* Local storage
* Game pad API
* Page visibility API : lets us know if the user is physically looking at your browser.
* Ability to capture audios and videos, ability to play back media.
* Vibration function on receiving notifications.
* Check battery status function.
* Integrated payments

A manifest File
It is a Json file containing properties describing a progressive web app. I generated a favicon manifest with [realfavicongenerator](https://realfavicongenerator.net/)
```javascript
{
    "name": "campReemerge",
    "short_name": "campReemerge",
    "icons": [
        {
            "src": "/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        }
    ],
    "theme_color": "#000000",
    "background_color": "#000000",
    "start_url": "/",
    "display": "standalone",
    "orientation": "any"
}
```
Note to myself: There's a lot to learn, don't skip the fundamentals.
_A few minutes into learning fundamentals_
Also Me : Can i build something already.

Looking forward to the practical bit. I am done for today.
_Day 46_
What podcasts do you listen to?
Tags: webdev, discuss, podcast
Published: 2020-08-31 14:47:54

---
title: What podcasts do you listen to?
published: true
description: 
tags: webdev, discuss, podcast
cover_image: https://i.pinimg.com/564x/96/0e/bf/960ebf77c0b2cc300d12f5c54c19da02.jpg
---
Having some truly inspiring web development podcasts in your bookmarks is a great way to learn. DEV.to has an [awesome list](https://dev.to/pod) of DEV podcasts, too.

Some of my favorites include [Syntax](https://syntax.fm/), [Full Stack Radio](https://fullstackradio.com/), [Coding Blocks](https://www.codingblocks.net/category/podcast/), [Merge Conflict](https://www.mergeconflict.fm/), [Developer Tea](https://spec.fm/podcasts/developer-tea) and [DevDiscuss](https://dev.to/devdiscuss).

What are your favorites to listen to?
7 reasons to apply storytelling in our posts and jobs
Tags: career, leadership, beginners, writing
Published: 2020-08-31 14:46:52

Recently I'm studying a lot about how improve my communication skills because is something exclude to be a great leader, get more likes and entertaining to your audience.

1. The quality of your story is equal to the impact that can generate.

2. To improve your communication skills and to be heard.

3. Actually the organisations need more influent leaders and a truly leader need know how tell good stories.

4. All the scientific texts, the developers' ideas, the presentation, call it what you want, are so boring. Storytelling can help you to be more readable.

5. Is more easier remember stories than ideas or boring texts.

6. The power of the influent is so useful and you can apply this into your stories through different methods.

7. So that your proposals are put into action in the work teams.


Carlos Salas - Storytelling [La escritura magica](https://www.amazon.com/Storytelling-escritura-m%C3%A1gica-T%C3%A9cnicas-facilidad-ebook/dp/B078P2CBSN)
Are you taking care of your health? 💆‍♀️💆‍♂️
Tags: watercooler, discuss
Published: 2020-08-31 14:39:40

*Working from home* is slowly becoming *living with work*. There are no boundaries anymore - sometimes you're working 12 hours and sometimes you're dozing off for 12 hours.

Neither is healthy for you!


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


So let me ask you, have you been taking care of yourself? And your health? Are you giving time to your family? How do you handle distractions? 

Let's discuss below 👇

But more importantly, let this post be a *healthy* reminder to you. A reminder to think good and do good 🌻
Safe eval() alternative in Javascript
Tags: javascript, webdev, beginners
Published: 2020-08-31 14:35:07

A problem I encountered while creating [Discord Bot Studio](https://discordbotstudio.org), was allowing users to enter variables which could be evaluated at runtime. Discord Bot Studio is a visual programming tool, so I felt it was important to offer a familiar variable syntax. Ideally, I wanted a user to be able to type a variable using the following notation, and have it be replaced with that variable's value at runtime: 

An example would be if I have an object as follows:
```javascript
variableObject {
    variableName: {
        fieldName: "Austin"
    }
}
```

The user should be able to retrieve that value "Austin" with the following syntax:
```javascript
${variableObject.variableName.fieldName}
```

Rmember, this is a visual programming tool, so there could be any number of variables in an input string, or there could be none at all. The input is being evaluated at runtime, as it can be dynamic.


The seemingly obvious solution is to use Javascript's eval()
function, to evaluate the variables at runtime. Since DBS creates bots which will eventually be taking untrusted user input, this is not safe to do. Rather than trying to clean any incoming input, I settled on another solution which still allows variables with the dot (.) syntax to be evaluated.

## The solution
First I match variables in the input string using regex by looking for the ${} notation I mentioned above. 
```javascript
varRegex = /\${(.*?)}/g;
```
I trim the excess ${} from the match, and pass the resultant string to the following function, along with the object containing any variables that may be referenced by the user. 
```javascript
// desc = variableObject.variableName.fieldName
/* obj = userVariables {
    variableObject {
        variableName: {
            fieldName: "Austin"
        }
    }
}
*/
function getDescendantProp(obj, desc) {
    var arr = desc.split(".");

    while (arr.length) {
        obj = obj[arr.shift()];
    }
    return obj;
}
```

Here obj is the object containing any variables the user input should have access to. Desc is the trimmed match string. Continuing the example from above, desc would equal ***variableObject.variableName.fieldName***. The string is split into an array on the periods.  ***variableObject.variableName.fieldName*** would be split into 
***[variableObject, variableName, fieldName]***. These array values are then shifted out in order, and used as keys to access the variable-containing object. This function will return just the string "Austin" using the example object from above. 

By doing this, I can limit the variables that are available to the user, and also give them access to those variables using normal Javascript syntax. This can be extended if you would like to support ***variableObject[variableName]*** as well. This is not a true alternative to ***eval()*** for all scenarios, but it works well for indexing into objects at runtime.
JAMstack-Ready CMS: The Roadblocks
Tags: jamstack, javascript, cms, webdev
Published: 2020-08-31 14:28:49

In my experience, developers find JAMstack development easy to understand and implement. JAMstack sites are faster than most traditional server-rendered sites because they’re static and delivered from a CDN. They’re also more secure because there’s nothing to compromise and development can be optimized. 

The JAMstack also enables developers to stay nimble. In the JAMstack ecosystem, each tool, framework, and API works in sync with the other, which means that you don’t have to focus on juggling multiple technologies when building a site. Also, JAMstack bridges the gap between static and dynamic websites while keeping the advantages of static websites.

However, it seems that despite the advantages JAMstack brings, some CMS platforms, whether they be traditional, hybrid, or headless, still aren’t ready to adopt the JAMstack way.

Let’s see the roadblocks CMS platforms face when it comes to implementing JAMstack.

Keep reading over at the Agility CMS blog: https://agilitycms.com/resources/posts/jamstack-ready-cms
Neat way to handle array and individual inputs in same function
Tags: javascript
Published: 2020-08-31 14:27:08

Lets say we need to make a function `doSomething`. we need to do it in a way so that it can handle both arguments: (1) a string and (2) an array of strings.

To achieve that previously I used to do something like this:
```javascript
function doSomething(strs) {
  function _doSomething(str) {
    // some mysterious stuff happening here
    console.log(str)
  }

  if (Array.isArray(strs)) {
      return strs.map(str => _doSomething(str))
  } else {
      return _doSomething(strs)
  }
}

doSomething(["hello", "world"])
doSomething("hello")
```  

now since I learned recursion I do this:
```javascript
function doSomething(strs) {
  if (Array.isArray(strs)) {
      return strs.map(str => doSomething(str))
  } else {
      console.log(strs);
  }
}

doSomething(["hello", "world"])
doSomething("hello")
```

cover Photo by [pepe nero](https://unsplash.com/@pepe_nero?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/mirrors?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
Extract mobile number using regex
Tags: beginners, webdev, codenewbie, regex
Published: 2020-08-31 14:24:19

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

**Note: It would be useful only when there are a fixed number of digits in a valid mobile number. (Some countries have a variable number of digits I guess)**

**Please modify the country code based on the needs.** 

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**
How to Center Align Content In Div – CSS Guide
Tags: css, html, tutorials
Published: 2020-09-04 19:49:31

---
title: How to Center Align Content In Div – CSS Guide
published: true
date: 2020-08-31 14:19:59 UTC
tags: CSS,css,html,tutorials
canonical_url: https://codesquery.com/how-to-center-align-in-div/
---

In CSS, centring an item in div is one of the most difficult aspects because there are lots of ways to center align item inside a div. Although all the methods are very easy to understand but for most of the people, it is a tough task. In this tutorial, we will be going to [...]

The post [How to Center Align Content In Div – CSS Guide](https://codesquery.com/how-to-center-align-in-div/) appeared first on [CodesQuery](https://codesquery.com).
GitHub or Personal Portfolio ?
Tags: github
Published: 2020-08-31 14:14:03

Hello everyone !

Yesterday I received a sales email from a website host company and I got really excited about the ideia of having my own space on the Internet. 
But a few minutes later I started thinking if it's worth having a website to put my projects on it, since we have GitHub for it (And I personally think that is a great platform). 

If I got my own website, I wouldn't stop posting my projects on GitHub since a lot of companies use it to evaluate candidates.

I just wanted to know from you guys if it's worth buying a host to my projects on and have my own platform.
Comparing package-lock Changes
Tags: node
Published: 2020-08-31 14:12:55

I recently updated some dependencies in a node project and some things broke. I wanted to get a list of every dependency (and dependencies of dependencies) that changed, so I came up with this little one-liner.

You'll see that I'm passing two "files" into `diff` via I/O redirection. I'm using `git` to retrieve the two files - the commit that updated the dependencies had a `git` hash of `735e8cd3c`. So, the first file is `735e8cd3c^:package-lock.json` (notice the caret - that means the parent commit of `735e8cd3c` - ie, the version before I updated dependencies). The second file is `735e8cd3c:package-lock.json` (no caret - ie, the version where I updated dependencies).

I then pipe each file into `jq` (`jq '.dependencies | map_values(.version)'`) to extract the name and version of every package my project depends on (that includes dependencies of dependencies).

Finally, `diff` will tell me what changed.

```bash
diff <(git show 735e8cd3c^:package-lock.json | jq '.dependencies | map_values(.version)') <(git show 735e8cd3c:package-lock.json | jq '.dependencies | map_values(.version)')
```
VBA 32-bit/64-bit
Tags: msaccess, vba, functions
Published: 2020-08-31 13:59:24

In the last few years, I built a good number of applications using MSAccess and all the useful tools it has. 
Ok, the title of this post may be a little strange because sincerely, who are still using an old 32-bit version? We are in 2020! In my case, I have some small clients that have for example old warehouse machinery that they need to integrate into the management system linking them to a server. So what happens is that we can have a system with, for example, 10 pc with a 64-bit version and 1 with a 32-bit version. This is a problem especially if you have built an auto-update system. So, I searched for a solution that could help me to fix this issue. The problem for me was that the declaration statement of a function in a module is different for the 2 versions, or rather in the 64-bit version, you have to add the keyword PtrSafe to the declaration statement. Microsoft ensures that adding the PtrSafe keyword, the declaration statement will work in both versions but at some conditions. So, when I built the first version in 32-bit, I had this declaration statement:
```
Declare Function aht_apiGetOpenFileName Lib "comdlg32.dll" _
    Alias "GetOpenFileNameA" (OFN As tagOPENFILENAME) As Boolean
```
And now I must change it with:
```
Declare PtrSafe Function aht_apiGetOpenFileName Lib "comdlg32.dll" _
    Alias "GetOpenFileNameA" (OFN As tagOPENFILENAME) As Boolean
```
Pretty simple. But as Microsoft said in [this article](https://docs.microsoft.com/en-us/office/vba/language/reference/user-interface-help/ptrsafe-keyword), if I want to continue to use the rest of the 32-bit code, it has to respect some conditions. So I decide to use the If statement of the Microsoft Article as I haven't a large number of Functions declared in that way. This is the final result:

```
#If VBA7 Then
Declare PtrSafe Function aht_apiGetOpenFileName Lib "comdlg32.dll" _
    Alias "GetOpenFileNameA" (OFN As tagOPENFILENAME) As Boolean

#Else

Declare Function aht_apiGetOpenFileName Lib "comdlg32.dll" _
    Alias "GetOpenFileNameA" (OFN As tagOPENFILENAME) As Boolean

#End If
```

Thank you for reading.
WiFi Boost?
Tags: wifi
Published: 2020-08-31 13:55:20

I'm having a bad time with my WiFi connection when I'm attending to video calls.

I'm not sure the main issue, I have two laptops (Windows and Mac) and the problem seems to happen mostly on Windows, where I constantly have lags when I start to speak (not so much when I'm just listening).

I did some changes on Windows, but it still crap. Now I'm doing some changes on my modem:

- Disable: Enable Energy Saving (System Tools > Advanced Power Management)

- Change from Automatic Channel to 1, 6 or 11. [Why Channels 1, 6 and 11?](https://www.metageek.com/training/resources/why-channels-1-6-11.html)

Let's see what will happen.

--

### Test Speed

- https://fast.com
- https://speedtest.att.com
- https://www.speedtest.net
- https://beta.simet.nic.br
#30DaysOfCJS: How to Succeed with Inclusion Initiatives
Tags: community, inclusion, diversity, leadership
Published: 2020-08-31 13:53:35

---
title: #30DaysOfCJS: How to Succeed with Inclusion Initiatives
published: true
description: #30DaysOfCJS Day 30,How to Succeed with Inclusion Initiatives
tags: community, inclusion, diversity, leadership  
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vumz50i3kib7l54phulw.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 30 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**How to Succeed with Inclusion Initiatives | Ginger Chien | CascadiaJS 2019**

If you'd like to watch the talk, here is the Youtube link.
{% youtube Ug9k8J_5wvs%}
#30DaysOfCJS: N-API - The new native in node.js
Tags: community, javascript, native, node
Published: 2020-08-31 13:53:15

---
title: #30DaysOfCJS: N-API - The new native in node.js
published: true
description: #30DaysOfCJS Day 29, N-API - The new native in node.js
tags: community, javascript, native, nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6b4pftkqlvm9ryxsxkn8.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 29 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**N-API - The new native in node.js // Atishay Jain // CascadiaJS 2018**

If you'd like to watch the talk, here is the Youtube link.
{% youtube E0w7Tc0f2fA %}

Further readings:
- [Code](https://github.com/atishay/napi)
- [website](https://atishay.me/)
Papertown - GitHub Actions Submission
Tags: actionshackathon
Published: 2020-08-31 13:50:46

### My Workflow

The Papertown GitHub Action takes your personal markdown blog and syncs it with platforms like dev.to.

Setup is simple and straight-forward. It only needs a master-id in the frontmatter and then automatically creates and updates you blog articles. 

I use it on my personal blog: https://github.com/ChristianKohler/Homepage

For more about Papertown read my blogpost linked below.

### Submission Category: 

Maintainer Must-Haves


### Yaml File or Link to Code

```yaml
 - name: Papertown Sync
        uses: ChristianKohler/papertown-github-action@v1.0.5
        with:
          devto-api-key: ${{ secrets.DEVTO_API_KEY }}
```

{% github https://github.com/ChristianKohler/papertown-github-action %}


### Additional Resources / Info

This GitHub actions uses the Papertown API.

Repo: https://github.com/ChristianKohler/papertown

Blog post: https://dev.to/christiankohler/introducing-papertown-1lb7
Get Waifu on terminal
Tags: linux, bash
Published: 2020-08-31 13:35:25

# Introduction
I see a lot of programmers interested in having a waifu in terminal.
So here how I do it.

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

## first

go to any search engine and search for `Anime black and white png`

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

then open any photo editor , I use [photopea online](https://www.photopea.com/) create a new transparent image with same dimension of your screen . In my case it's `1920x1080` . Drag and drop your waifu into the corner and save it as png.

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

final result should look like this

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

## second
move your image to any location you like mine is `$HOME/.config/kitty/` in same folder with kitty configuration.
first I am using the [kitty](https://sw.kovidgoyal.net/kitty/) terminal.after install it go to the config files
```bash
vim ~/.config/kitty/kitty.conf
```
then add those lines to the end of the files , also you can delete the config file and make new one with those lines only because all the file is just comments.

```bash
foreground white                                                                                                                     
background black                                                                                                                     
background_opacity 0.989
background_image $HOME/.config/kitty/waifu.png                                                                                                                                                                                                                     
background_image_layout scaled
```
Thinking about expo ( React native) versioning.
Tags: javascript, reactnative, expo
Published: 2020-08-31 13:28:55

In expo, we need publish new version when build binary.
This behavior is a bit of a problem when enabling OTA.

We can disabling OTA, but it's useful in case of emergency

I think expo versioning for OTA friendly.
This based semantic versioning.

- x(major) - Breaking Change. 
- y(minor) - Update when upload to apple store or google play store.
- z(patch) - For OTA. Update without store upload.

`minor` is difference for semantic versioning. 

We can this versioning with [semver-extract](https://www.npmjs.com/package/semver-extract).

```jon
$ semver-extract --pjson --minor -x
1.2.x
```
and `package.json` like this

```json
"scripts": {
	"release-channel": "echo v$(semver-extract --pjson --minor -x)",
	"build:ios": "expo build:ios --release-channel=production-$(npm run release-channel --silent)"
}
```

If we upgrade store, version like `1.2.0` -> `1.3.0` and release channel change to `production-v1.2` -> `production-v1.3` (different release channel).
The other hand, we publish with OTA, version like `1.2.0` -> `1.2.1` and both version use release channel `production-v1.2`
The Maintainers: Nicholas Blumhardt, Autofac and Serilog
Tags: themaintainers, opensource, video
Published: 2020-09-03 12:17:07

---
title: The Maintainers: Nicholas Blumhardt, Autofac and Serilog
published: true
date: 2020-08-31 13:18:39 UTC
tags: TheMaintainers,OpenSource,Video
canonical_url: http://wildermuth.com/2020/08/31/The-Maintainers-Nicholas-Blumhardt-Autofac-and-Serilog
---

[![Nicolas Blumhardt](https://wilderminds.blob.core.windows.net/img/Cover.jpg)](https://youtube.com/z2itsGL4P3c)Last week I released a new episode of my "The Maintainers" video series. This time I talk with Nicholas Blumhardt of Autofac and Serilog fame.

His experience developing these libraries to explore new ideas is an interesting take. The video also talks about how he helps manage projects with so many sub-projects (e.g. Serilog's support for so many syncs).

I hope you enjoy it!

<iframe src="https://www.youtube.com/embed/z2itsGL4P3c" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

If you did enjoy the video, please like and subscribe to my channel. Every subscription helps!

Do you have any of your favorite open source projects you'd like me to highlight? If so, just leave a comment and I'll see if I can shine a light on the maintainers!

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

          This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
          Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/Inyc83WMjUg)