teleren/devto huggingface dataset:
GitHub Action for Updating All NPM Dependencies at Once
Tags: actionshackathon
Published: 2020-08-24 02:06:19


### My Workflow

I recently created a [JavaScript GitHub Action that allows anyone to search Stack Overflow via an issue or pull request comment](https://dev.to/neverendingqs/stack-overflow-search-4j9n). To keep its dependencies up-to-date, I could turn to Dependabot, but [they currently do not support grouped updates](https://github.com/dependabot/dependabot-core/issues/1190), which means if multiple dependencies require an update, I have to review each one individually.

Instead, I turned to an existing GitHub Action I've built, [Update Node Dependencies](https://github.com/neverendingqs/gh-action-node-update-deps). This action:

* Uses [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to update all dependencies to their latest version
* Runs `npm audit --fix` to fix any remaining security issues (if any)
* Does a package version bump (`patch`)
* Uses [hub](https://github.com/github/hub) to create a new pull request with these changes

Since I am using [@zeit/ncc](https://github.com/vercel/ncc) to build my JavaScript action, I also configured a pre-commit script to run to ensure all dependency updates make it into the code GitHub Actions runs (in `dist/`).

The workflow is scheduled to run weekly, but can also be manually triggered. I leave Dependabot security alerts turned on so that I am alerted of severe security issues and can respond to them immediately by manually triggering the workflow outside of its schedule.

All this put together means I can keep my dependencies up-to-date with only one pull request a week while still having the ability to respond to security issues immediately!

### Submission Category: 

Maintainer Must-Haves

### Yaml File or Link to Code

```yaml
name: Scheduled Node Dependencies Update (npm)
on:
  schedule:
    - cron:  '0 15 * * 2'
  workflow_dispatch:
jobs:
  update-deps:
    name: Update Node dependencies using npm
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: neverendingqs/gh-action-node-update-deps@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          bump-version: patch
          pre-commit-script: npm run build
```

{% github https://github.com/neverendingqs/gh-action-ask-stackoverflow %}

### Additional Resources / Info

* [Update Node Dependencies GitHub Action](https://github.com/neverendingqs/gh-action-node-update-deps)
* [Workflow using that action](https://github.com/neverendingqs/gh-action-ask-stackoverflow/blob/master/.github/workflows/scheduled-node-dependency-updates.yml)
Adding Environment Variables to Svelte + TypScript Project
Tags: svelte, typescript, tutorial
Published: 2020-08-24 01:55:17

I'm doing projects using Svelte with TypeScript for a few weeks. And I got myself in a simple issue that made me to spend a long time to figure out how to fix properly.

If you are looking for adding environment variables at your Svelte Typescript project. There are few steps to do that without break anything in your project.

In order to archive this, follow the steps below:

1. Install [`@rollup/plugin-replace`](https://github.com/rollup/plugins/tree/master/packages/replace#readme)
2. Also, install [`dotenv`](https://github.com/motdotla/dotenv) or [`dotenv-safe`](https://github.com/rolodato/dotenv-safe) as your prefer.
3. Create a `global.d.ts` file in the root of `src` folder and add the following script there:

```typescript
// at global.d.ts
export {}

declare global {
  var __MY_ENV_VARIABLE__: string
  var __ANOTHER_ENV_VAR__: string
}
```

5. Update `rollup.config.js`, adding replace plugin

```js
// import it first
import replace from "@rollup/plugin-replace";

// then, add replace function before svelte plugin

...
plugins: [
  replace({
    globalThis: JSON.stringify({
      __MY_ENV_VARIABLE__: "my env variable value",
      __ANOTHER_ENV_VAR__: "another env var value",
    }),
  }),
  svelte({
...
```

Finally, you can access those variables using `globalThis` from TypeScript:

```js
const MY_ENV_VARIABLE = globalThis.__MY_ENV_VARIABLE__;
const ANOTHER_ENV_VAR = globalThis.__ANOTHER_ENV_VAR__;
```

When Rollup built the bundle, the Replace Plugin will replace `globalThis.__MY_ENV_VARIABLE__` by `"my env variable value"` and `globalThis.__ANOTHER_ENV_VAR__` by `"another env var value"`.

That's it. I hope it could help someone :)

Happy coding.
Change Navbar Style on Scroll Using React and CSS
Tags: react, javascript, css
Published: 2020-08-24 01:44:52

Recently, I've been working on improving the UI of a previous project. One cool thing I've learned is changing the style of the navbar when the user scrolls.

My project had a navbar with a white background on top of a website that already had a white background, so when users scrolled, the logo and navbar items looked like they were floating. To remove the 'floating' items and make the navbar more obvious, I changed the navbar's background color on scroll.

In the navbar component, I added

```javascript
  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = () => {
    if (window.scrollY > 20) {
      document.querySelector(".navbar").className = "navbar 
      scroll";
    } else {
      document.querySelector(".navbar").className = "navbar";
    }
  };
```

* Added an event listener to the `window` object to watch for when a user scrolls down from the top of the website. 
* The event listener is in the React lifecycle method `componentDidMount` so that it is only created once (when this component is created). 
* Also have `componentWillUnmount` to remove the event listener when the component is going to be removed from the DOM.
* The `handleScroll` method will be called when a user scrolls. This method will add an additional `className` to the nav element, which I can then select in CSS to override the background-color.
  * `window.scrollY` is a property of the Window object that returns the number of pixels that the document is currently scrolled vertically. I used this property to detect when the user has scrolled past 20 pixels. When a user does so, the HTML will look like this

```javascript
// scrollY > 20
<nav className="navbar scroll">


// VS
// scrollY = 0
<nav className="navbar">
```

Now that I have the `scroll` class, I can select it in the CSS file using the class name.

```css
.navbar {
  background-color: #fff;
}

.scroll {
  background-color: #f1f1f1;
}
```

The `scroll` background-color will override the default background-color as long as `scroll` is under `navbar` in the CSS file. 

Thanks for reading! :)
TOP 5 Reasons to Learn Python Programming Language
Tags: python, ddsry, codenewbie, beginners
Published: 2020-08-24 01:29:49

Top Five Reasons to Learn Python in 2020:


1. Easy to Learn😀

2. Versatility

3. High Salary💰

4. Scalability

5. Job Market


▪ You can use it for, 🌐Web Development, 📊Data Science, 💻Machine Learning, Computer 🔎Vision, 📈Data Analysis and Visualization, Scripting, 💻Gaming, and in Robotics.


▪ It is extremely 👊powerful that you can build real-world🌐 applications.

▪ High📈 Demand and 📉Low Supply of Python🐍 Developer.💻


▪ Python is the number 1 Programming language for ML and AI.

▪ By Learning Python you are actually investing💰 in your future.
Try the new Dev.to Node.js SDK
Tags: showdev, javascript, node
Published: 2020-08-24 01:27:20

As a writer and a JS developer, I always wanted to integrate the way I wrote into my code. I wanted to post articles on dev.to as soon as I finished writing them in Markdown on my editor, I wanted to integrate.

The problem is that we have a pretty good Dev.to API! But I'd need to reimplement it every time. So, I won't be writing much more on this, but I decided to create my own SDK which mirrors the spec of the API into easily usable functions.

So I'm disclosing it here! It's been a while now, a few people have been using it so it's pretty stable. But, if you ever find any bugs, feel free to send me an issue or open a PR <3

{% github khaosdoctor/devto-nodejs-sdk %}

I hope you all like it! Give it a star if you do! All feedbacks are much appreciated!
How to develop an App with an App Agency? 
Tags: development, ios, application, mobile
Published: 2020-08-24 01:23:04

#How to develop an App with an App Agency? 
 
Start with what you know. 
 
It's easy to learn the basics in an app development workshop when you have an existing app in front of you. The process is simple. You can start with the app you originally made and move up to the next app. 
 
The most important thing to remember when you are working on something new is to just do it. It's not about what you want to do. It's about how you can do it. 
 
You have to get out of the way and let the app develop. It's only when you are low on time that it's time to do a quick exam, and it's time to go back to the drawing board. 
 
You need to be flexible. 
 
The goal of an app development workshop is to get you to do something that you haven't done before, so you can learn what you can about developing apps. Your learning curve will be fast, but you will learn something that you could not have learned otherwise. 

If you've decided to [hire mobile app developers](https://underlabs.ca), you will learn how to use technologies, and the features of users hardware devices, to come up with ideas to start a new project. This will help you to recognize potential problems and potential problems that need to be solved. 
 
You will learn to quickly create a prototype of your app. Get the product to a point where it works on the devices you need it on. 
 
1. You will learn how to test your app on real users. 
2.You will learn to build a prototype. 
3. You will learn to test your app on real users and see if it works. 
4. You will learn to setup and tear down your prototype. 
5. You will learn how to build your app and install it on a device. 
6. You will learn how to write code for your app. 
7. You will learn how to test your app. 
8. You will learn how to write your app's user interface. 
9. You will learn how to write your app's documentation. 
10. You will learn how to setup and tear down your app. 
11. You will learn how to communicate with your users and get them to pay for your app. 
12. You will learn how to provide a user experience that is convenient and easy to understand.
The Typescript "as const" trick
Tags: typescript, javascript, webdev
Published: 2020-08-24 01:17:55

Some time ago when I was first learning Typescript, I came across a snippet in a tutorial somewhere that looked something like this:

```ts
const myArray = ['hello','world',10] as const;
```

Weird, right? Obviously it's a `const`, so what's the point of the `as const`?

If you use a Typescript-aware editor like VSCode, you'll see that the hover-text types for these two cases are completely different:

```ts
// shows up as: `const myArray: (string | number)[]`
const myArray = ['hello','world',10];

// shows up as: `const myArray: readonly ["hello", "world", 10]`
const myArray = ['hello','world',10] as const;
```

In the first case we're treating the *array* as the `const`, and Typescript helpfully infers what kinds of things can go into that array.

In the second case the whole thing becomes constant, so it gets that `readonly` flag and we see the *exact* stuff that we put into that array, in the exact order, as the type!

So why is this useful?

Unfortunately, this doesn't prevent you from using mutators on your `as const` array in typescript (e.g. if you try to `.push()` something onto it, Typescript won't get upset). So it's a lie unless you wrap it in an `Object.freeze`.

One thing I've found it to be extremely useful for, however, is iterating over a defined subset of object keys:

```ts
const myObject = {
  hello: 'world',
  number: 10,
  anArray: [1,2,3],
  nested: {something: 'else'}
}

// Without using `as const`:
for(const field of ['hello','world']){
  // The type of `field` is just 'string'
}

// With `as const`:
for(const field of ['hello','world'] as const){
  // The type of `field` is 'hello'|'world'
}
```

That difference between having exact versus general type information can make all the difference between something being difficult or easy in Typescript.

Unfortunately, JSDocs don't have support for this, so using this trick in vanilla JavaScript requires a workaround:

```js
/** Thanks to {@link https://github.com/microsoft/TypeScript/issues/30445#issuecomment-671042498} */

/**
 * Identity function. Coerces string/number literals to value-as-type.
 * @template {string|number} T
 * @param {T} v
 * @return {T}
 */
function toConst(v) {
  return v;
}

const five = toConst(5);
// --> Type shows up as 5 instead of "number"

/**
 * Creates an array from the given arguments, type as a constant tuple.
 * @template {(string|number)[]} T
 * @param {T} v
 * @return {T}
 */
function toConstTuple(...v) {
  return v;
}

const tuple = toConstTuple("Hello","World",10);
// --> Type shows up as ["Hello","World",10] instead of (string|number)[]
```

It's a little weird to wrap your values in a function that does nothing but let the Typescript language server give you a readonly type. But it works, at least for these limited cases.
Intro to Loops Part 1 
Tags: beginners, javascript
Published: 2020-08-24 01:12:24

### **Introduction**
As you dive more into Javascript you may notice there are instances where the same code needs to be run over and over again. This is where loops are very useful. With a loop we can just write a simple block of code and have it run repeatedly until a certain condition is met. There are multiple types of loops so lets look at a few examples.

### **for loop**

This is the most common loop you will see in Javascript.  The syntax for a for loop is as follows:

```
for ([initialExpression]; [condition]; [iteration]) {
  [loop body]
}

```
*initialExpression 
Is used to start a counter variable. 

*condition
An expression is tested each pass through the loop. If the expression tests as true the loop body is run if false the loop exits

*iteration
A statement that is executed at the end of each iteration. Usually this will involve increasing or decreasing the counter. 

*loop body
The loop body is the set of statements that we want to run when the condition evaluates as true.


**Example**
```
for (let i=1; i < 5; i++){
console.log("hello");
console.log(`I have said hello ${i} times in this loop`);
}

/* Output
'hello'
'I have said hello 1 times in this loop'
'hello'
'I have said hello 2 times in this loop'
'hello'
'I have said hello 3 times in this loop'
'hello'
'I have said hello 4 times in this loop'
*/
```

**Another example**
You can also use a for loop to iterate over data structures such as arrays.

```
const myFoodArr = ["tacos","pizzas","hamburgers","fries"]

for(let i=0;i<myFoodArr.length; i++){
  console.log(`I love ${myFoodArr[i]} for dinner!`)
}

/* Output
'I love tacos for dinner!'
'I love pizzas for dinner!'
'I love hamburgers for dinner!'
'I love fries for dinner!'

*/
```
#### **Infinite Loop**
An infinite loop is a condition in which your code will continue to run forever because you wrote a condition in your for loop that can never be satisfied. Lets look at an example:

```
for (let i = 1; i !== 40; i += 2){
  console.log(i);
}

/* Output
1
3
5
7
9
11
13 
15
17
19
21
... Continues on to infinity 

*/
```

### **while loop**
Similar to a for loop, the while loop will keep repeating an action while the condition is being met. The syntax for a while loop is:

```
while ([condition]) {
  [loop body]
}
```

**Example**
```
let num = 10;
while(num < 20){
  console.log(num++) // don't forget the iteration or you will get an infinite loop
}

/* Output
10
11
12
13
14
15
16
17
18
19
*/
```

### **Conclusion**
If you have made it to this part of the blog that means you know how to code the two most commonly used loops: for and while loops. In Part 2 I will go over some newer loop types the for of and for in loop.
You don't need to be a master...
Tags: codenewbie, beginners, careerchange
Published: 2020-08-24 00:48:14

I began my journey of learning to code and making a career change about a year and a half ago. I had recently moved to a new city and was working a job that I didn't care for or saw myself doing in the future. I have always been somewhat interested in computers and had dabbled in some Codecademy courses before, but I never really dedicated the time to learn how to code. I knew some people who had make the transition into the code world, and so I began my journey of exploring of what my transition into coding might look like. Over the last year and a half, I have failed a lot. I have been so frustrated because I had no idea what I was doing at times. I wanted to give up. Only recently have I taken the time to look back and realize how much I have actually learned and grown since I started learning to code. I consistently struggle with Imposter Syndrome, but I have come to terms that I do not think it will ever truly go away. While I acknowledge that I do not know a lot about coding, I do want to share a few things I find helpful to remind myself of in the hopes that it might help you.

1. You don't have to be a master of everything. You don't have to master Python, web development, the terminal, the latest JS framework, or whatever it is that you're told you need to master. No one can truly master any given topic. It may seem that someone that comes across your Dev/GitHub/Twitter feed knows everything about JS or [insert technology here]. I promise you that they too need to look things up each and every day.

2. Put yourself out there and contribute. I'm preaching this to myself at this very moment. This is my first real article or contribution to any tech related site. It's okay if you haven't worked in software for 20+ years. Share what you know. Try to teach and explain something, even if it the basics of programming. You can help someone out there.

3. Always be open to learning. I am always looking for people to follow on Twitter or Youtube channels that I can learn from. Tech is always evolving so your learning will never be complete. 

I hope this has helped someone out there. Please feel free to reach out with advice you wish you someone had told you when you were first starting out!
Struggling between Web Development and Android Development
Tags: webdev, mobiledev, android, web
Published: 2020-08-24 00:43:10

---
title: Struggling between Web Development and Android Development
published: true
description: 
tags: webdev,mobiledev,android, web
//cover_image: https://direct_url_to_image.jpg
---

  To be clear I don't hate Web Dev but I'm struggling between going down the path of a Web Developer or an Android Developer, but everywhere I look, everyone is a web developer. When looking for a job all the requirements describe skills that are commonly associated with a web developer role despite the title saying Software Developer, all the developer communities I visit are filled with web developers and web dev topics, anything else is non-existent, and when I go looking into resources for learning the Web Development courses and paths are much more well-supported than other fields. 

  I want to be a mobile app developer but I feel like I should be a web developer first than branch out to other fields. It would be much easier to ingratiate myself into the community, find resources and I could even use the web dev skills to make mobile apps or apps outside of the web. Should I stick with becoming an Android Developer or should I go down the Web Development Path?
AWS Route 53 Crash Course: Hands-on
Tags: aws, tutorial, codenewbie
Published: 2020-08-24 00:36:20

{% youtube e1MPBnOMFg0 %}
In this video, We will learn what is DNS, different terms like Top Level Domain, Domain Registrar and SOA with Route 53 hands-on. I will show you, how to set up different routing policies in route 53 with example.


CONTENT:
--------------------------------------
00:00 Welcome
00:21 What is Route53?
01:14 DNS 101
06:07 Register a Domain in Amazon Route53
08:26 Create Simple Routing Policy
11:05 Create Weighted Routing Policy
16:33 Create Geolocation Routing Policy
21.25 Create Latency Routing Policy
24:31 Create Failover Routing Policy
28:03 Create Multivalue Routing Policy
31:30 Create Geoproximity Routing Policy


------------------------------SOCIAL------------------------------
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Clean Code – Part 1
Tags: csharp, beginners, productivity, webdev
Published: 2020-08-24 00:25:55

Clean code is akin to keeping your home/workspace tidy. Cleaning requires effort, whereas leaving garbage doesn’t.

While I’d love to mention some examples of poor code I’ve seen over the years, I too have fallen foul in the past.

Clean code isn't about vanity! Large messy un-refactored code only adds to technical debt. When another developer works with the same code you’ll have to double the time for them to complete the task due to messy code. Bear in mind time and effort can quickly grow exponentially as each developer hacks and contributes to the same messy code.

Below are suggestions to help keep our code clean.

##Move hard-coded values to the database
>Instead of this…
>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/190de71awtrnm92cscsp.png)
>do this...
>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q6jjcpog11w5dmale5p2.png)
>It’s very easy to write constants such as tax rates and bool switches directly into your code without thinking about the long term repercussions. I’m referring to changing values.

>In cases like these it is far better to move these values into a database table, or at the very least the application configuration file. This way it will be much quicker and safer to make changes as opposed to opening up the code many years later and making changes, compiling and then praying its works while you upload… you get the idea.

##Guard Clauses
>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v29di9kbfl398ud8q1xq.png)

>Guard clauses follow the fail-fast principle. In the example above I’m performing a null check on the injected `IEmailService` reference supplied to the constructor (assume I’m using DI). If the reference is null, a related exception will be thrown during runtime.

>Dealing with null references is an act of life for any developer. Using guard clauses throughout your code promotes error checking and is a good habit to develop.

>Eagle eyed developers may have noticed I’ve compacted an IF statement to one line. You don’t have to do this, but I find it creates less noise and is more succinct.

##Choosing appropriate class names
>Poor class names…
>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5rxbd8kmgcr8b6ufzoow.png)
>Class names typically work best when they are nouns. However in more complex scenarios as shown above it is easy to fall foul of this when you need to describe two related classes.

>Here’s one solution to fix this:

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

>This is much cleaner and concise. I’ve used inheritance by creating a base class of `Customer` and then deriving two subclasses from it. In this instance, it allows for shorter class names since there is some context through the inheritance.

>As a final note, I’m not a fan of using inheritance-based models everywhere throughout a solution unless there is a valid case as illustrated above. It can add to unnecessary complexity.


Thanks for reading! 🙂


Part 2 is available here:

{% link https://dev.to/dalbirburhm/clean-code-part-2-56o %}