teleren/devto huggingface dataset:
How to eliminate dead links in your Next.js app
Tags: nextjs, typescript, tooling
Published: 2021-03-26 22:48:27

At my company, [Proper](https://helloproper.com/), we like pages. Like...a lot! Our platform is a fairly large Next.js application consisting of ~70 pages. And we link between pages ~200 places in the application.

We find that having pages make features easily discoverable by end-users and developers alike. And having pages (urls) for each of our features help us maintain a sane information architecture throughout our platform.

The [Next.js file-system based router](https://nextjs.org/docs/routing/introduction) help us stay consistent and organised around our pages. But we've had some incidents where our application was released with dead links. 

At one point, a file in the `/pages` folder was renamed and we simply overlooked (forgot to change) some of the links to that page. Another time, a bit of "clever" string concatenation caused an issue. In this case, we had moved a page, and failed to update all links to the page correctly due to the concatenated links.

# `next-type-safe-routes` to the rescue

To mitigate this issue, I created [`next-type-safe-routes`](https://github.com/ckastbjerg/next-type-safe-routes). A small Next.js plugin accompanied by a couple of utility methods.

`next-type-safe-routes` parses the `/pages` folder in your Next.js app and generates types for all the **pages** and **API routes** in the application. These types can then be used to ensure that you only link to pages (and only use API routes) that _actually_ exists in your application.

With the types generated, we can use the `getRoute` utility to retrieve a link that is **guaranteed to exist** in the application:

```ts
import { getRoute } from 'next-type-safe-routes';

getRoute("/users"); // for simple routes
getRoute({ route: "/users/[userId]", userId: "1" }); // for dynamic routes
```

And with a tiny abstraction on top of the `next/router` and `next/link`, our routing developer experience now looks something like this:

![Alt text of image](https://s4.gifyu.com/images/exampleb977337946e5e898.gif)

As an added benefit, we also get type-safe API routes!

Having type-safety for all our links gives us confidence when refactoring as well as a top notch developer experience with auto-completed routes. I'm hoping this library might help others who face the same challenges we did 🙂

https://github.com/ckastbjerg/next-type-safe-routes
Design thinking and teamwork
Tags: teamwork, designthinking, teambuilding
Published: 2021-03-26 22:24:30



This week we were required to think of the project, work on it and deliver the project in only one week. Today, I didn’t forget soft skills instead I would like to take this time and do a [retrospective](https://en.wikipedia.org/wiki/Retrospective). 

Talking about the project, I would like to talk about teamwork and how we started and delivered the project as a team of frontend and backend developers.

Teamwork is the collaborative effort of a group to achieve a common goal or to complete a task in the most effective and efficient way. Working in a team for the first time might be challenging if don’t handled seriously. In this project, I liked the collaboration we had and the way we brainstormed to choose the best project to build.

Even though we were working on the project we kept the flow of having the soft skills session as usual. Monday, we had a very fun, and educational session where we first played the game which helps us to know each other deeper.

Talking about team building I can’t forget the design thinking session, let me talk a little about it.

[Design thinking](https://www.ideou.com/pages/design-thinking) is a human-centered approach to innovation anchored in understanding customer’s needs, rapid prototyping, and generating creative ideas.

**Challenges**

A ton of work stressed me which led to panic instead of managing and prioritizing tasks and forgot to do deep research about design thinking.

**Lesson**

The best way to look back is to get feedback. Today’s feedback made me look back and see what could cause the stress and how I could mitigate that. I did find out that we should keep everything in control when we take it simple. Here is the method introduced by US NAVY in 1960 called [KISS](https://en.wikipedia.org/wiki/KISS_principle) an abbreviation for ‘Keep It Simple, Stupid!’. 

Thank you for reading!
Day 338 : Hardware
Tags: hiphop, code, coding, lifelongdev
Published: 2021-03-26 22:18:28

_liner notes_:
- Professional : Woooo.... Today was a blur. My laptop decided it wanted to take off for the weekend early. haha It was running super slow. Tried to get some coding done. Had a couple of meetings and then I worked the booth at a virtual conference. Thought I would get more done, but I didn't haha. Just got a little more to do, so I'll do it after the conference.

- Personal : Last night, I went through some tracks for the radio show. Don't remember doing any coding. I think I did some planning for building out my van.

![A stream going through a field with a couple of trees in Beverley Brook, United Kingdom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va3tveu2wucvdykqe0sx.jpg)

About to head to my folks place. When I get there, going to work on the radio show tomorrow. Maybe some coding. My packages got delivered, so I have another project to work on. haha Good thing I have the week off next week. I see many trips to the hardware store in my future. So no posts next week (not that anyone is reading this). If you are, I hope you have a great weekend and week!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube IhrUz8ILpHc %}
Preact: Optimize your Next.js build with 5 lines of code
Tags: nextjs, preact, react, frontend
Published: 2021-03-26 22:02:50

Hey hey👋 let's get started on this quickly, in this note you can find a way to optimize your build size by 38% with just a lib install and 5 lines of code.

## What is Preact?

According to his website, Preact is a Fast 3kB alternative to React with the same modern API. Basically overrides a lot of the methods that use React, like `render` for example, and optimize it at build-time.

## Optimize Next.js build with Preact

1. Install Preact
   `yarn add preact` or `npm i preact`

2. Create a `next.config.js` if you don't already have one in the root of your project
   `touch next.config.js`

3. Add the next code or adapt your previous config
   ```js
   module.exports = {
     webpack(config, { dev, isServer }) {
       // ${previousConfig...}

       // Replace React with Preact only in client production build
       if (!dev && !isServer) {
         Object.assign(config.resolve.alias, {
           react: "preact/compat",
           "react-dom/test-utils": "preact/test-utils",
           "react-dom": "preact/compat",
         })
       }

       return config
     },
   }
   ```
Ready 🎉
Underscores as number separators
Tags: javascript, webdev
Published: 2021-03-26 21:59:31

Making calculations with longer numbers? You can improve readability by using underscores (`_`) in numeric primitives:

```js
// Hard to read:
Math.floor(Math.random() * 1000000); // 337083

// Better
Math.floor(Math.random() * 1_000_000); // 337083

1_000_000 === 1000000 // true
```

The underscore doesn't have to be placed where a comma would go - it can be used anywhere in the number except at the very beginning or end. Just a small way to improve your code and prevent errors!

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!
Auto-build and dynamic deployment with IntelliJ and TomEE
Tags: java, tomee, intellij, todayisearched
Published: 2021-03-26 21:57:01

Hello :wave:

I would like to share a quick tip with you about how to configure a live reload and recompilation of your code changes in a Java project. 

This post could be helpful if you use:
* Java EE with the TomEE server and cannot (or do not want to) use third-party tools like JRebel
* IntelliJ IDEA as an IDE (my version is 2020.3.1)
* Maven as a build tool

To reload code changes immediately and see the corresponding effects in the browser without restarting the server, you should take the following steps.

## TomEE dynamic deployment configuration
Add the tomee-maven-plugin to your pom.xml file and configure it like this. The key properties are `extensions`, `reloadOnUpdate`and `openejb.system.apps`.
```xml
<plugin>
    <groupId>org.apache.tomee.maven</groupId>
    <artifactId>tomee-maven-plugin</artifactId>
    <version>${tomee.version}</version>
    <configuration>
        <tomeeClassifier>plus</tomeeClassifier>
<!-- adjust the context name according to your project -->
        <context>ROOT</context>
        <synchronization>
            <extensions>
<!-- used for detecting code changes in Java classes -->
<!-- if needed, add other extensions (like .properties)-->
                <extension>.class</extension> 
            </extensions>
        </synchronization>
        <reloadOnUpdate>true</reloadOnUpdate>
        <systemVariables>
            <openejb.system.apps>true</openejb.system.apps>
            <tomee.serialization.class.blacklist>-</tomee.serialization.class.blacklist>
        </systemVariables>
    </configuration>
</plugin>
```
Then, run your project with `clean package tomee:run`
## IntelliJ IDEA auto-build configuration
After a code change, the project should be recompiled. You can do this through:
 * `mvn compile` command -> in my project this takes around 10 seconds and must be done manually
 * auto-build functionality in IntelliJ IDEA -> takes around 3-4 seconds and is, well... automatic!

To be able to use the auto-build, do the following steps:
1.  `File > Settings > Build, Execution, Deployment > Compiler > "Build project automatically" > Apply`
2. Open the Action window with `Ctrl+Shift+A` and type in `Registry`
3. Search for `compiler.automake.allow.when.app.running` and `compiler.document.save.enabled` and check a checkbox
4. To speed up the auto-build, reduce the value of `compiler.automake.postpone.when.idle.less.than` (e.g. to 1500 ms)

As the last step, refresh your browser page and... voilà :blush:

*Please keep in mind:* if your project has several independent modules, the dynamic deployment will only work for the module, in which you have configured the tomee-maven-plugin.

By the way, this is my first post on Dev.to and I hope it could help someone :blush:
Generating a static dashboard
Tags: discuss
Published: 2021-03-26 21:52:23

---
title: Generating a static dashboard
published: true
tags: discuss
---


Hi everyone,

I'm thinking about improving the way I present results to my customers, but not software results; management results. Every month, I issue a Word file to each customer with:

1. Detail of the hours consumed from our contract
2. Detail of the tickets and their status, etc.

This is all part of my CRM software, so now I generate this Word automatically, and send it via email.

What I want to do is to publish a static web page, that can have the same or more information, and being able to present a dashboard, a filter-able table, etc.

Do you people know any simple CSS library intended to make this kind of stuff?

Saludos,
Read From One Prop, Write To (Filtered) Many
Tags: angular
Published: 2021-03-26 21:08:28

Something you often see in vector graphic editors are widgets that read a property from one object but write to a filtered list of them.

For example you might have a widget for editing the color of stroke lines.  It pulls the current stroke color from the last selected stroke but writes to all visible selected strokes.

Anyone have any clue how you would do this with Angular-style data bindings?
TOP 5 Node-Express Boilerplates For Building RESTful API's In 2021
Tags: node, javascript, webdev
Published: 2021-03-26 21:08:16

So a lot of developers working with nodejs might bump into the architectural issue of designing the backend architecture to be simple, robust, and consistent usually when dealing with building RESTful API's.

Sure there are many boilerplates available as public repo's on GitHub, but not everything is created equal.

Here is my compilation of the 5-best publically available node-express boilerplates to kick start your next groundbreaking project.
1. **[danielfsousa/express-rest-boilerplate](https://github.com/danielfsousa/express-rest-boilerplate)** 
This boilerplate top's the list. Well obviously it will be on the top when you get things like vanilla javascript with ES2017 latest features including Async/Await, enabled with CORS, Docker support, CI with TravisCI, Monitoring with pm2, Helmet, Passport, Git hooks with Husky, Morgan(for logging), Test support with mocha/chai/sinon, Joi validation, dotenv for a .env environment plus a lot more. However, for people that want a simple design, keep reading.

2. **[hagopj13/node-express-boilerplate](https://github.com/hagopj13/node-express-boilerplate)**
Based on the number 1 in this list. This repo includes all the features that its predecessor has but it packs a much more cleaner structure. Be sure to give it a try if you want to build an elegant and smooth API.

3. **[madhums/node-express-mongoose](https://github.com/madhums/node-express-mongoose)**
Focuses on the MVC pattern (like the 1 & 2 in this list). If you are someone that wants a well-organized structure based on MVC then be sure to check this one out.

4. **[maitraysuthar/rest-api-nodejs-mongodb](https://github.com/maitraysuthar/rest-api-nodejs-mongodb)**
Much similar to number 2 but it takes a simpler approach. Both are great however, you can play around and see what you like. For a small project, I would say go with this one.

5. **[kunalkapadia/express-mongoose-es6-rest-api](https://github.com/kunalkapadia/express-mongoose-es6-rest-api)**
Simple design but good for smaller projects with features like Microservice, ES6-syntax, code coverage, JsonWebToken Authentication, and more. If you want a simple, clean, and minimal solution then this might be your go.

---
So here it is guys, I hope you found this article useful and helpful. All of the above-mentioned repo's have an MIT license and so you are free to play around with them.

I would love to hear your thoughts on this comparison. Also, be sure to comment below about any other project that you think would make a spot on this list.
How I Passed my Solutions Architect Associate Exam
Tags: career, aws
Published: 2021-03-26 21:05:12

---
title: How I Passed my Solutions Architect Associate Exam
published: true
date: 2021-03-26 21:01:54 UTC
tags: Career,AWS
canonical_url: https://justwriteapps.com/how-i-passed-my-solutions-architect-associate-exam/
---

 ![How I Passed my Solutions Architect Associate Exam](https://justwriteapps.com/content/images/2021/03/aws-certified-solutions-architect-associate-1.png)

I've been using AWS professionally for about three years now, and I only actually needed to study for a couple weeks to pass once I really got started. I also had never created a VPC or an EC2 Scaling Group before a couple weeks ago. So it's not like I didn't have anything to learn.

I started my training with the [A Cloud Guru course on Udemy](https://www.udemy.com/share/101Wg6AEAed19aQXo=/). Their training is really top-notch, and they provide all of their associate level courses on Udemy--which you can pick up for $12 on sale. That's also how I studied for the Developer Associate exam, and it's how I'll be studying for the SysOps Administrator certification.

Next I purchased the [WhizLabs Practice Tests](https://shareasale.com/r.cfm?b=973924&u=2172084&m=43514&urllink=&afftrack=0) for the exam. I've tried several practice exam resources in the past (including from aws.training) and these seem to be the best value. After taking the exam, you can look at all of the questions that you got wrong and it provides detailed explanations for why each answer is correct/incorrect.

I would say my final step was to schedule the exam, but that was actually the most important. I've been "studying" for this exam for a few years and I just keep on putting it off. Once I scheduled the exam I was committed, and suddenly studying became a high priority. And now I've got another cool badge for linkedIn, and--more importantly--some new AWS skills.
3 tips for improving performance of a Laravel website
Tags: laravel, performance, mysql
Published: 2021-03-26 20:56:27

At the company I work for we tackled performance this last sprint. It had been noticed that the speed in production had become slow. There are of course many reasons for this and front-end also made some changes, but I'm just going to just write some things we did in the back-end. 

To find the bottlenecks, we used the excellent tool called Clockwork https://underground.works/clockwork/ It uses a composer component to collect the data and to easily view it, you use a browser extension that runs in the dev tools. You could also use Telescope, but Clockwork is more powerful for profiling. 

These are 3 of the things we did to improve performance:

##1. Eager Loading

Using 'with' for loading related data, one can reduce the number of database queries made. Clockwork is helpful in that it displays how many models are created for a request. This [article](https://laravel-news.com/eloquent-eager-loading) explains well how eager loading works.

##2. Use indexes

Indexes are used to find rows with specific column values quickly. Without an index, MySQL must begin with the first row and then read through the entire table to find the relevant rows. Use the EXPLAIN keyword in front of your sql statement to see how many rows are used for the query. Learn more here:
https://www.sitepoint.com/mysql-performance-indexes-explain/

##3. Caching

Do you use the same long executing query more than once for a request? In that case save the query result in a registry. I haven't been able to find a website for this, but the basic idea is to use the singleton pattern to make sure you only load the object once and then you check if the data is already in the registry using a key for looking it up.

We also wrote some benchmark tests which will allow us to test in the future if a change has a negative impact on performance.
Django rest framework writable nested serializer
Tags: django
Published: 2021-03-26 20:49:27

#### Prepare
* You have Django and Django rest framework
* You have `User` with `Profile` as `one-to-one`
* You have serializers:
```python
class UserProfileSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserProfile
        fields = [
            'experience',
            'rate',
        ]

class UserSerializer(serializers.ModelSerializer):
    avatar = ImageBase64Field(required=False)
    profile = UserProfileSerializer(required=False)
   
    class Meta:
        model = User
        fields = [
            'uid',
            'first_name',
            'last_name',
            'profile'
        ]

```

#### Problems
* You want to update `experience` field in user profile

#### Solution
Add `update` method in your `UserSerializer` class. 
```python
class UserSerializer(serializers.ModelSerializer):
    ...

    def update(self, instance, validated_data):
        if validated_data.get('profile'):
            profile_data = validated_data.get('profile')
            profile_serializer = UserProfileSerializer(data=profile_data)

            if profile_serializer.is_valid():
                profile = profile_serializer.update(instance=instance.profile,
                                                    validated_data=profile_serializer.validated_data)
                validated_data['profile'] = profile

        return super().update(instance, validated_data)

```
Now, with `user data` we may to send `profile` data and update our user `profile`.

#### Conclusion
* Now we may to update user profile easily in one request

**Thanks for reading**
Making Django's Signals Async with Celery

Tags: django, python
Published: 2021-03-26 20:42:16

#### Prepare
* Django project with _long-task logic_
* Celery with any backend

For example: send push after any event or auth user through sms code or email link.

**Mark:** to sign-in/sign-up users via SMS you may use [this library](https://github.com/a1k89/django-rest-sms-auth)

#### Problems
* Django signals _synchronous_ by default
* We must to wait when transaction completed
* Clients can to wait response for a long time

#### Short description
* Configure celery
* Create application (for example, `notifier`)
* Configure `post_save` signal through `celery` task
* Configure `AppConfig` to load function

#### Detail
1. Create `notifier` application
2. Add `tasks.py`
```python
tasks.py

import uuid
from collections import namedtuple
from django.db.models.signals import post_save
from run_celery import app

from some_apps.models import SomeModel1, SomeModel2, SomeModel3

Ctx = namedtuple('Ctx', 'class_name identifier')

models = [
  SomeModel1, 
  SomeModel2, 
  SomeModel3
]


def register_models():
    for model in models:
        post_save.connect(_post_save,
                          sender=model,
                          dispatch_uid=uuid.uuid4())


def _post_save(sender, instance, **kwargs):
    ctx = Ctx(class_name=instance.__class__.__name__,
                        identifier=instance.pk)
    _async_post_save_handler.delay(ctx)


@app.task
def _async_post_save_handler(ctx: Ctx):
    """
    Get model and instance from notifier object and then make
    some other logic
    """
  ...
```

Finally, add to `apps.py`:
```python

from django.apps import AppConfig


class NotifierConfig(AppConfig):
    name = 'notifier'

    def ready(self):
        from apps.notifier.tasks import register_models
        register_models() # here!
```

Save and run Django and run celery.

#### Conclusion
* `celery` help you create async handlers to your Django models
* Solution is great to separate `post_save` and async logic

**Thanks for reading**
I'm whitep4nth3r, and I help developers build stuff, learn things, and love what they do
Tags: webdev, womenintech, wecoded, programming
Published: 2021-03-26 20:32:50

I wrote my first programme on a Commodore64 at age 6. I built my first website at age 13 at the dawn of the home internet connection. I always wanted to be a software engineer.

However, during my teenage years, there were very few resources to learn from, even fewer role models to share my aspirations with, and even fewer ways to engage with people to guide me.

I was fortunate to be able to switch up my career from music teaching to software engineering in my late twenties - and I've never looked back. But I can't help wondering where I might be if I'd had opportunities, support and guidance from the tech industry when I was younger.

And because of this, I wholeheartedly believe that anyone from anywhere in the world deserves access to the resources, guidance and inspiration that I so deeply desired when I was younger.

I'm coding live, I'm building a community, and I'm offering a platform to build confidence, share ideas, and most importantly — learn.

Check out my OBS setup for live coding [here](https://whitep4nth3r.com/blog/twitch-live-coding-setup-obs).

I'd love for you to stop by [one of my streams](https://twitch.tv/whitep4nth3r) and say hey!

Build stuff, learn things, love what you do.