teleren/devto huggingface dataset:
Fixing DNS for Wireguard on MacOS
Tags: macos, vpn, wireguard
Published: 2021-11-09 23:28:55

---
title: Fixing DNS for Wireguard on MacOS
published: true
date: 2021-04-13 23:55:00 UTC
tags: macos,vpn,wireguard
canonical_url: https://ivans.io/wireguard-on-macos/
---

If you are using the [Wireguard MacOS App](https://apps.apple.com/us/app/wireguard/id1451685025?ls=1&mt=12) with your VPN's, you will notice that your custom DNS entries are not getting set at the system level.

You can manually edit Network Preferences -> Wi-Fi -> Advanced -> DNS and add your DNS server, but that will cause DNS errors if your VPN drops and your system DNS still points to the wireguard DNS instance.

![](https://ivans.io/content/images/2021/04/Screen-Shot-2021-04-09-at-3.10.25-PM.png)

A workaround is to add a `PostUp` and `PostDown` option to your wireguard config:

```
[Interface]
Address = 10.200.200.1/24
ListenPort = 51820
PrivateKey = SERVER_PRIVATE_KEY

# DNS server
DNS = 10.66.66.1

# Commands to set and clear DNS
PostUp = sudo /usr/sbin/networksetup -setdnsservers Wi-Fi 10.66.66.1
PostDown = sudo /usr/sbin/networksetup -setdnsservers Wi-Fi "Empty"

[Peer]
# foo
PublicKey = PEER_FOO_PUBLIC_KEY
PresharedKey = PRE-SHARED_KEY
AllowedIPs = 10.200.200.2/32
```

_Wireguard Sample Configuration_

The wireguard GUI [will not read](https://www.reddit.com/r/WireGuard/comments/bea47m/wireguard_macos_application_postuppostdown/) the PostUp and PostDown, so you will have to run your wireguard commands from the command line.

## Solution: Use the CLI

First, install the tools:

```
brew install wireguard-tools wireguard-go
```

Then, save your config to the folder:

```
vim /usr/local/etc/wireguard/myvpn.conf
```

Finally, launch your VPN - using the same name as the `conf` file.

```
sudo wg-quick up myvpn
```

## Bonus: Alias/Visudo

You can set up an alias with `alias vpnup='sudo wg-quick up myvpn'`

If you don't want to enter your password each time, simply run `sudo visudo -f /private/etc/sudoers.d/wireguard` and paste the following contents, replacing `myuser` with your username.

```
myuser ALL = (root) NOPASSWD: /usr/local/bin/wg-quick
```
Are IDE Extensions Hurting Young Devs?
Tags: beginners, webdev, javascript, codenewbie
Published: 2021-04-13 23:50:30

There is no doubt that the shortcut/extensions contained within your favorite code editor allows for faster code production.  Recently I installed a particular AI based extension inside of VSCODE and after a few days I uninstalled it.  I found that it was not making me think.  It was as it typed generating suggestions that I could just tab and accept

This got me thinking, is this the best thing for a young developer like myself? What if there was an apocalypse and we needed to build a site to inform the rest of the world but only had notepad, would a young dev know what to do without, VSCODE, Visual Studio, ATOM etc?

Learning code is technical and you will not be able to remember it all, however, I am of the belief that just like learning the fundamentals of a language, young devs should learn the fundamentals without the help of all these fancy tools. 

What are your thoughts? Comment below and lets talk.


Thanks for the taking the time out to read my post. It is truly appreciated. If you want to know more about my journey follow me at:

Twitter: @fikra_dev

Github: https://github.com/FikraDev
Knowing when your writing sucks 
Tags: writing
Published: 2021-04-13 09:03:11

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

I recently started a series I called the Bullet Point Series. 

https://dev.to/granthair5/bullet-point-series-intro-2hpo

This series was awful. 

The topics of conversation were too vague. 

The bullet point lists were far too long. 

Part 1 came before the intro. 

The whole thing was a mess. 

But I thought I was being really clever. Oh yeah short sharp blog posts is what people want that will really take off I thought. 

I could not have been more wrong. My implementation sucked. My writing style was lazy. It felt robotic and un-personal. That makes it very difficult for people to relate. 

I gave this series a few weeks, no one read it and it fell into the abyss so at that point I had 2 options: 

1: Continue writing in the hope that maybe I'll get lucky and this idea will really take off. 

2: Call it quits and know when to back out and try something new. 

I chose option 2 due to my programming background. Sometimes instead of following Alice down the rabbit hole the best option is to say "Nah forget that" and walk away to the pub. I usually choose this approach when tackling "impossible" bugs in a technique I like to call "next day programming" 

![https://miro.medium.com/max/785/1*7LzhJXDIubcYIOzWKBRaMA.jpeg](https://miro.medium.com/max/785/1*7LzhJXDIubcYIOzWKBRaMA.jpeg)

Usually, the next day that "impossible" bug doesn't seem all that impossible but if you continue to bash your head off the wall chances are you won't break down the wall you'll just end up with a headache. 

So, to the handful of people that read the bullet point series I thank you but I am more grateful to those of you who chose not to read it because I feel we learn more from the stuff that doesn't work or the mistakes we make than the glory we can easily become accustomed to. 

Stay tuned for more non bullet point series posts and I hope you all enjoy what is to come. 

Thanks, :wave:
Introduction to SOLID Principles
Tags: codequality, agile, beginners, codenewbie
Published: 2021-04-13 23:41:07

The code is the main source of truth of what developers are really made of. Writing clean and maintainable code is something everybody should aim for. Personally, I've been on both ends: being the one who *writes* smelly code and being the one who *refactors* smelly code. Along the way, I've learned many principles that have really improved my code. A set of those principles are the **SOLID Principles**.

#What is SOLID?

SOLID is an acronym for five software development principles stated by Robert C. Martin, also known as Uncle Bob, for object-oriented programming. Applying these principles will make your code become easier to scale and maintain. It will also make your project development more productive through decomposition and decoupling by removing code smells and reducing time spent on refactoring.

The acronym stands for:
* *S* - Single-responsibility Principle
* *O* - Open-closed Principle
* *L* - Liskov Substitution Principle
* *I* - Interface Segregation Principle
* *D* - Dependency Inversion Principle

SOLID tends to improve code **rigidity**, **fragility**, **reusability**, and remove **needless complexity**.

#Common misconceptions about SOLID

###Is SOLID made for programming languages, frameworks, or what?

SOLID is neither a framework, nor a library, nor a pattern. It is also not bound to any particular technology. You can apply these principles to your favorite programming language such as ***TypeScript*** or ***Java***, or to your favorite framework such as ***React*** or ***Express***.

###Is there an order to apply the principles?

Not really. They have only been arranged this way to spell SOLID and make it catchy. I read once that the acronym came to life because a friend of Robert C. Martin told him that if he swapped the order of the letters, they would spell SOLID.

###Do I have to apply the 5 principles to my project?

The number of principles you will apply to your project will depend on the smells your code has. Each principle addresses a specific problem, and if your code does not have that problem, there's no reason to apply the principle. 

###How SOLID is my code?

SOLID principles are not something you can measure. There isn't something like saying *"My code is 100% SOLID"*. 

#Closing words
I'll create a series explaining every SOLID principle. The explanation will be beginner-friendly and with code examples. I'm always open to suggestions and comments since I'm still a newbie at writing blogs 😋
@nuxt/content: How to Keep createdAt and updatedAt Valid After Cloning
Tags: nuxt, vue, webdev, frontend
Published: 2021-04-13 22:53:46

I recently tried out [@nuxt/content](https://github.com/nuxt/content), a Git-based CMS for Nuxt projects. And I really like it! It allows me to write markdown files and host them right in my existing project.

One thing I noticed when deploying the project to my server was that the `createdAt` and `updatedAt` fields were always reset and didn't reflect the actual dates. The reason for this is that Git does not keep file metadata. This means that the timestamps that `@nuxt/content` relies on are of no use.

## Git to the rescue!

One way to fix this is not to use the file stats, but instead use the Git history for this. Special thanks to [Andrew Kreuzer](http://andrewkreuzer.ca) for the initial idea. We check the history for each file and take the earliest commit date as `createdAt` and the latest as `updatedAt`.

Requirement for this is that Git is installed on the build system and that the history is actually checked out. There will be problems if a shallow clone is made on CI, in this case the cloning has to be configured accordingly.

## Using the nuxt-content-git module to make things easy

I created the Nuxt module [nuxt-content-git](https://github.com/dword-design/nuxt-content-git) to make the setup plug-and-play. You probably do not want to reinvent the wheel in each project.

Install the module with `npm install nuxt-content-git` and add it to your `nuxt.config.js` like this:

```js
export default {
  modules: [
    'nuxt-content-git',
    '@nuxt/content',
  ],
}
```

Note that it is important to add it **before** `@nuxt/content`, so `@nuxt/content` knows about the hooks that our helper module installs.

## Conclusion

That was basically it! The rest works behind the scenes. Your dates should be up to *date* 😊.

Let me know if you like this module and leave a [star at GitHub](https://github.com/dword-design/nuxt-content-git) 🌟.

**If you like what I'm doing, follow me on [Twitter](https://twitter.com/seblandwehr) or check out my [website](https://sebastianlandwehr.com). Also consider donating at [Buy Me a Coffee](https://www.buymeacoffee.com/dword), [PayPal](https://www.paypal.com/paypalme/SebastianLandwehr) or [Patreon](https://www.patreon.com/dworddesign). Thank you so much! ❤️**
All You Need to Know about Webpack
Tags: react, javascript, typescript, node
Published: 2021-04-13 22:37:29

This article will cover all main ideas behind the webpack — module bundler. You will know how to configure webpack, add assets, add css files, bundle your js file, starting a server, prod and dev build and more…

https://medium.com/litslink-frontend-development/webpack-v4-in-examples-all-you-need-to-know-73831915b314
React DnD in Examples
Tags: react, javascript, typescript, node
Published: 2021-04-13 22:34:50

React DnD is a set of React utilities to help you build complex drag and drop interfaces. Let's take a look at it’s basic capabilities with implementing our own kanban board with different interactions.

https://medium.com/litslink-frontend-development/react-dnd-in-examples-ce509b25839d
Mi experiencia trabajando en equipo.
Tags: webdev, html, css, javascript
Published: 2021-04-13 22:31:02

Trabajar como desarrollador es un proceso hermoso, tedioso y complicado, una mezcla entre lo dulce y lo amargo, pero trabajar con otros desarrolladores es una realidad completamente distinta.

Para mi hace unos meses no podía ni imaginar los desafío que me esperaba, hoy ya trabajo en diversos proyectos/comunidades sin fines de lucro para practicar y mejorar mis conocimientos.

Trabajar en equipo no es difícil, ya que tenemos compañeros de equipo que estarán dispuestos a ayudarnos y apoyarnos en cualquier problema, conoceremos nuevas herramientas que son necesarias para trabajar en cualquier equipo.

Las herramientas fundamentales son Git y Github, estas te acompañaran durante el trabajo en equipo, y en tu vida cotidiana como desarrollador.

Te invito a cuando fracasar, no ponerte triste, sino feliz, ya que recuerda que de los errores se aprende.

Hasta la vista y recuerda, ¡Sigue Aprendiendo!



*Redactado por FrancisCode*
Express.js With Typescript Decorators in Examples
Tags: node, typescript, backend, webdev
Published: 2021-04-13 22:28:21

Let’s take a look at how we can make our Express.js Server code cleaner with using Typescript Decorators.

# What will be covered in this story:
* Prerequisites. Creating Express Typescript project
* Wrapping Express API Route with Typescript Method Decorator
* Async Method Decorator
* Adding Logging Decorator
* Adding Authentication Decorator
* Codesandbox Playground

https://medium.com/geekculture/express-js-with-typescript-decorators-in-examples-5f82223159c1
Fullstack Developer @ Outlier (All Levels)
Tags: hiring, reactnative, fullstack
Published: 2021-04-13 22:27:49

## About Us
Outlier is a seed-stage startup founded by a 2x-YC Alum, with ~$2.5M in funding raised. We are building a Watch Party product for users to watch, discuss, and commentate over livestreams/video content with friends and strangers alike. Our entry point is Esports, but we plan to expand rapidly beyond that into other verticals.

## About The Opportunity
We are looking for two talented full-stack engineers to fill a recently churned position. **This is a chance to have full ownership of your work/product decisions, learn from a 10-year startup veteran, and get in at the ground level of an exciting consumer tech startup without having to sacrifice salary or secure funding.**

Compensation will be $120K-$150K, depending on experience, with a competitive equity package reflective of the company's early stage.

## Skill & Qualifications
Bachelor's in CS or higher. Any years of full-time experience (0+) encouraged to apply.

## How To Apply
Email me at ryan@outlier.co


_Please feel free to leave questions in the comments section._
Unreal Engine. Character Interaction With an Object and Animation
Tags: gamedev, unreal
Published: 2021-04-13 22:26:09

Let’s find out how we can implement a simple character interaction with a door mesh with some simple animation using Unreal engine 4.


https://medium.com/geekculture/unreal-engine-character-interaction-with-an-object-and-animation-314041f565f2
Using Mailgun to Send Emails from your Website
Tags: quicktips, beginners
Published: 2021-05-12 12:43:45

---
title: Using Mailgun to Send Emails from your Website
published: true
date: 2021-04-13 22:26:00 UTC
tags: QuickTips,Beginner
canonical_url: https://u.expressionengine.com//article/using-mailgun-to-send-emails-from-your-website
cover_image: https://u.expressionengine.com/asset/article-images/google-smtp-emails.png
---

[Mailgun’s](https://www.mailgun.com) [SMTP Relay service](https://www.mailgun.com/smtp/) is a quick an easy way to have ExpressionEngine transactional emails handled through a dedicated email provider. There’s just one tiny glitch you need to be aware of. The line ending setting needs to be changed from the default \n to \r\n. That’s it. Everything else is self-evident. But in case it’s not…

In your Mailgun account, go to the Overview for your domain. In my case, I just have their default sandbox domain. You’re going to select ‘SMTP’ as your mail option and the required settings, including username and password, will be revealed.

![](https://u.expressionengine.com/asset/article-images/mailgun-settings.png)

Go to your ‘[Settings- Outgoing Email](https://docs.expressionengine.com/latest/control-panel/settings/email.html#settings)’ settings in your ExpressionEngine control panel and enter your Mailgun settings

| Setting | Value |
| --- | --- |
| Protocal | SMTP |
| Newline Character | \r\n |
| Server Address | smtp.mailgun.org |
| Server Port | 587 |
| Connection Type | STARTTLS |

Save your settings and send a few test emails from the [Communicate page](https://docs.expressionengine.com/latest/control-panel/utilities.html#communicate).

 -- 

Originally published by [Robin Sowell](https://u.expressionengine.com/author/robin-sowell) at [u.expressionengine.com](https://u.expressionengine.com//article/using-mailgun-to-send-emails-from-your-website)
Fullstack Developer @ Outlier (All Levels)
Tags: reactnative, fullstack, hiring
Published: 2021-04-13 22:24:57

Outlier is a seed-stage startup founded by a 2x-YC Alum, with ~$2.5M in funding raised. We are building a Watch Party product for users to watch, discuss, and commentate over livestreams/video content with friends and strangers alike. Our entry point is Esports, but we plan to expand rapidly beyond that into other verticals.

We are looking for two talented full-stack engineers to fill a recently churned position. **This is a chance to have full ownership of your work/product decisions, learn from a 10-year startup veteran, and get in at the ground level of an exciting consumer tech startup without having to sacrifice salary or secure funding.**

Compensation will be $120K-$150K, depending on experience, with a competitive equity package reflective of the company's early stage. DM or email me (ryan@outlier.co) to apply!
Send email on Form Submission using Serverless Functions and SendGrid (NO Formspree) HTML/JS [React Vue Angular] 
Tags: serverless, react, lambda, html
Published: 2021-04-13 22:21:46

{% youtube mazw6Umo5v4 %}


Write a Serverless function from scratch using the SendGrid V3 API to send emails containing the user's form submission data. 
This can be used with any host & framework (React, Angular, Vue, etc.), however this tutorial is done in vanilla HTML/Javascript using Netlify as a static web host.

Bring your brand to life with AZmotion. Get custom web, motion or graphic design and solidify your brand identity.
Contact me: https://azmotion.com/contact​
Portfolio: https://azmotion.com/portfolio​

GitHub Repository: https://link.azmotion.com/sendgrid-netlify-functions

####Needed downloads/websites:
Yarn: https://classic.yarnpkg.com/en/docs/install
Node (& npm): https://nodejs.org/en/download/​
Netlify: https://www.netlify.com/​
SendGrid: https://sendgrid.com/​
SendGrid npm package: https://www.npmjs.com/package/@sendgrid/mail
Axios: https://github.com/axios/axios​ (CDN preferred and needed in some cases)

####Liked this tutorial? Feel free to contribute:
https://azmotion.com/contribute​
60 WebStorm/IntelliJ IDE Tips, Tricks, and Features That Will Make Your Life Easier
Tags: webdev, programming, javascript, react
Published: 2021-04-13 22:20:58

In this article we will talk about capabilities, tip and features of JetBrains IDEs like Webstorm and Intellij that you get out of the box but 90% chance that you don’t use it.

https://medium.com/geekculture/webstorm-intellij-ide-tips-tricks-and-features-that-will-make-your-life-easier-6d0c38ff3d4b
Day 344 : Bunch
Tags: hiphop, code, coding, lifelongdev
Published: 2021-04-13 22:20:37

_liner notes_:
- Professional : Well, I thought I was going to get a lot done. haha I was going to get a bunch done on an upcoming blog post. Normally, I'll check the community section to see if there's anything I can help answer. There was a question, I answered it and the original poster said it would work for them. Awesome, went to start my blog post. Then I had a meeting with a team member. Had a really good chat. Then I saw a mention on the community board, where the original poster wanted to see if they can achieve it only on the server. Basically spent quite a bit of time trying to come up with a solution. Good news is that I think I may have come up with something. Hopefully I'll hear if it works for them tomorrow.

- Personal : I've been getting emails about possibly saving some money on my insurance because of the pandemic. They made it seem like it would be just a couple of clicks. Nope. Started the process and it seemed like I was applying all over again. Even the front page where it said that my application was "complete" changed to "in progress". I kind of freaked out and called the hotline number and had them walk me through the rest of the process to make sure I didn't do anything to cause me to lose coverage. haha. I did save $49 in the end. $49 is $49. haha I was so wiped after the call, I pretty much just looked over some code but didn't do much.

![View into a valley in Tombstone Park, YT, Canada with mountains on both sides going into the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jiky1j4prkjnh9szkh4o.jpg)

Going to try and get more coding done. Also, I should be able to start building out the inside of my van this weekend, so I'm thinking of what needs to get done and prep things. I aslo want to go through some tracks for this week's radio show. And maybe watch an episode of "Dr. Stone".

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 9036L0TBHLA %}
React Redux: Memory Game
Published: 2021-04-13 22:08:29

I knew for my final project at Flatiron I wanted to make a game. I have always loved playing memory games and thought it would be an exciting challenge. This was my chance to have fun with React and see how much of it I could explore.

First thing I needed to do was make sure I met requirements. I needed the a Rails API to handle the data persistence to a database. I used fetch in my front-end to GET and POST data to the API. By now I was pretty familiar with making a Rails API but looking back I would have set up the game first then decided what should persist. It got tricky at some points trying to make things work when they would not save. Below is my schema which has my user and game's tables. I structured the project so a game belongs to a user and a user has many games. This way I could set it up in the front-end to have a user sign in and the game they play would save with the user nested.

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

I used Redux middleware (Thunk) to respond and modify state change. Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store's dispatch method, which is then used to dispatch regular synchronous actions inside the function's body once the asynchronous operations have been completed.

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

Another requirement was to have at least three routes. I was able to implement five routes in my project. In order to get my routes working I needed to import react-router. I used proper RESTful routing which means the names of my routes matched up properly with their functions.

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

Something that initially tripped me up was including five stateless components. This meant that the information rendered from these components needed to not include "state". A basic example would be a welcome page or a navigation bar. After I worked through my game I actually came up with six.

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

As for styling I used mostly my own CSS and it was nice to explore all of the things you are able to do with it. There are so many components so it was easy to give the div a className and then style how I wanted that component to work. I would like to go back and implement some bootstrap so I can make it more visually appealing but I learned so much by making it this way and I am happy to have challenged myself.

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