teleren/devto huggingface dataset:
Remix nested URLs without the layout nesting
Tags: react
Published: 2022-05-01 05:14:41

Yesterday we learned how to create [pathless layout routes](https://daily-dev-tips.com/posts/remix-pathless-layout-routes/), which means we can share a layout between routes without sharing the URL routes.

Let's look at how the opposite would work, nested URLs, but without the nested layout.

Let's take our new post, for example.
The current URL structure is like this: `admin/posts/new`.

This is great, but the layout is shared like this:

```txt
- root
-- admin
--- posts
---- new
```

What happens if we want this to be a page on its own without inheriting all the layout hierarchy?

```txt
- root
-- admin
--- new
```

## Segmented URLs in Remix

This is where segmented URLs come in super handy. We can segment a URL with dots to replicate the URL nesting but not take the styling.

In our case, we can move the `new.tsx` file to our admin folder and rename it to: `posts.new.tsx`

If we run our application, our URL will remain the same, but we don't see the `posts` layout stuff, only the admin layout.

![Remix segmented URL](https://cdn.hashnode.com/res/hashnode/image/upload/v1650519879555/9WEb4cb96.png)

You can even make this multi-level. Let's see what happens if we move the `posts.new.tsx` file one level up and rename it to `admin.posts.new.tsx`.

![Top level route](https://cdn.hashnode.com/res/hashnode/image/upload/v1650520046347/XXfoBSJyJ.png)

Amazing!

As you can see, Remix can support all kinds of use-cases.
You can even use dynamic parameters within these segmented URLs.

We can make all kinds of routes and layout hierarchies between this and the ability to use pathless routes.

You can find this article's code on [GitHub](https://github.com/rebelchris/remix-starter/tree/segment-url).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Project showcase: Country Currency Information Search
Tags: vue, javascript, html, showdev
Published: 2022-05-01 04:54:30

View live: [https://fig781.github.io/vue-country-currency-information/](https://fig781.github.io/vue-country-currency-information/)
GitHub Repo: [https://github.com/fig781/vue-country-currency-information](https://github.com/fig781/vue-country-currency-information)

I wanted to briefly show a project I made two years ago. This was the first project I built with Vue.js. It definitely helped me understand the basics of the framework. If you are just starting to learn a framework, then I recommend making a project like this. The project pretty much touches on all the basics of the framework (state, events, methods, computed properties, watchers, data fetching etc...). 

The site uses the forex api from [https://fcsapi.com/](https://fcsapi.com/). They have a good free tier that works great for a simple project.

Overall, I think the project looks good. I am a big fan of the button design and the box-shadow effect on all the buttons and cards. I would definitely improve the look of the information cards if I was to do it over again. They definitely look unfinished.

Leave a comment if you have any feedback or questions.

My Site: [https://www.aden-eilers.com/](https://www.aden-eilers.com/)
GitHub: [https://github.com/fig781](https://github.com/fig781)
What is Lodash?
Tags: javascript, node, programming, tutorial
Published: 2022-05-01 04:49:47

In the web, there are pretty much many libraries that can help us in software development/web development, we just need to find it. And in this series, we gonna hop in to learn about lodash. We will cover the famous and most used method.

Actually, I never knew about lodash until my colleague in my workplace introduce it to me, and I can proudly say that if you are using javascript, you must use lodash!

![Lodash Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5wdrx9opajbyt8vr4se.png)

## What is it?
Lodash is a modern JavaScript utility library with modularity, performance, and other features.
It will make your life easier to implement complex logic with only using the method in the library. 

It simplifies JavaScript by removing the tedium of dealing with arrays, numbers, objects, texts, and other data types.
The modular methods of Lodash are ideal for:

1. Arrays, objects, and strings when it is being iterated.
2. Changing and testing values
3. Putting together composite functions

## How to include lodash in your web app/node js app?

In the browser, include the script below

```
<script src="lodash.js"></script>
```

If you are using using npm, install it first by running script below

```
$ npm i -g npm
$ npm i --save lodash
```

Then include it in you node js application
```
const _ = require('lodash');
```
Usually, we will use underscore `_` to use lodash.

![Installing Lodash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w54q5zuc57jub66ilnez.gif)
 

And that's it! You're good to go!

---------------------------------------------------------
Thank you for reading :D

Psstt pstt :p
Do consider to love this article ❤️ and follow me! Why not right? It's FREE~ 
I would really appreciate it 👨🏻‍💻 
Will be posting more on things related to AWS, Javascript, Python, Serverless and more!
Issue with React Context
Tags: javascript, react, context, webdev
Published: 2022-05-01 03:28:15

**I am getting error - Uncaught TypeError: Cannot destructure property 'temperature' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined at Settings (Settings.js:12:1)**

**userSettingContext.js**
```
 import React , {useState} from 'react';
 import Settings from './Settings';

 const settingContext  = React.createContext();

 function UserSettingContext() {
    const [temperature ,setTemperature] = useState("Celsius");
    const [pressure , setPressure] = useState("HectoPascal");

    return (
        // the component that provides the value
        <settingContext.Provider value={{temperature : [temperature ,  setTemperature] , 
            pressure: [pressure, setPressure]}}>
           <Settings/>
        </settingContext.Provider>
    )
}

export {settingContext , UserSettingContext };
```



**Settings.js**

```
 import React , {useContext, useState} from 'react';
 import { Modal } from 'react-bootstrap';
 import {settingContext} from './UserSettingContext.js';
 import {FiSettings} from 'react-icons/fi';
 import './Settings.css';

function Settings() {

      const [show ,  setShow] = useState(false);
      const handleClose = () => setShow(false);
      const handleShow = () => setShow(true);

      const {temperature  , pressure } = useContext(settingContext);
      
      return (
               <>
                    <FiSettings onClick={handleShow} />
                               <Modal show={show} onHide ={handleClose}>
                               <Modal.Header closeButton>
                                         <Modal.Title>User Settings</Modal.Title>
                               </Modal.Header>
                               <Modal.Body>
                                         <label className='temperature'> Temperature
                                              Celsius <input type="checkbox" /> Fahrenheit
                                         </label>
                                         <label className='pressure'> Pressure
                                              <input type="checkbox" />
                                         </label>
                                 </Modal.Body>
                               </Modal>
               </>
             
      )
}

export default Settings;
```
Thanks in advance
Laravel Filament: How to fix 403 error on production environment
Tags: laravel, tall, todayilearned, filament
Published: 2022-05-01 03:31:10

After I installed the [Laravel Filament](https://filamentphp.com/) on my local env and very impress because It’s to easy to setup, nice UI and [document](https://filamentphp.com/docs/2.x/admin/installation).

And

then I push it on production server. The 403 page show 😄

I have no idea about it and search google. So, we miss one step which is not mention in the v2 document.

So, We need implements `Filament\Models\Contracts\FilamentUser` in the `app/Models/User.php` model and add method `canAccessFilament`.

```php
<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
use Filament\Models\Contracts\FilamentUser;

class User extends Authenticatable implements FilamentUser
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array<string, string>
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    public function canAccessFilament(): bool
    {
        return str_ends_with($this->email, '@xxx.com');
    }
}
```
Parameterising Logic App (Standard) connections.json with bicep - Part 1
Tags: azure, bicep, logicapps
Published: 2022-05-01 02:45:35

Yet another issue I found when dealing with Logic App in Azure. This time, I want to parameterise the connections.json with the values from appsettings. Specifically, it's the managedApiConnections section of connections.json as this requires a particularly new item: `connectionRuntimeUrl`.

```json
...
"managedApiConnections": {
  "azureblob_1": {
    "api": {
      "id": "/subscriptions/xxxxxxxxxx/providers/Microsoft.Web/locations/xxxxxxxxxx/managedApis/azureblob"
    },
      "authentication": {
        "type": "ManagedServiceIdentity"
      },
      "connection": {
        "id": "/subscriptions/xxxxxxxxxx/resourceGroups/xxxxxxxxxx/providers/Microsoft.Web/connections/azureblob"
      },
      "connectionRuntimeUrl": "https://xxxxxxxxxx.azure-apihub.net/apim/azureblob/xxxxxxxxxx"
    }
}
...
```

Looking around Microsoft's [documentation on Web Connections](https://docs.microsoft.com/en-us/azure/templates/microsoft.web/connections?tabs=bicep), there don't "seem" much useful info on the list of parameters that it requires to build the connections in bicep. However, if we go down further, there're quickstart templates that we can refer to for [storage](https://github.com/Azure/azure-quickstart-templates/tree/master/demos/arm-template-retrieve-azure-storage-access-keys) or [service bus queue](https://github.com/Azure/azure-quickstart-templates/blob/master/demos/alert-to-queue-with-logic-app).

As we'll be building in bicep, we start with decompiling (`az bicep decompile --file azuredeploy.json`) the ARM template into bicep and try to analyse what's required.

```
resource serviceBusConnectionName_resource 'Microsoft.Web/connections@2018-07-01-preview' = {
  location: location
  name: serviceBusConnectionName
  properties: {
    api: {
      id: subscriptionResourceId('Microsoft.Web/locations/managedApis', location, 'servicebus')
    }
    displayName: 'servicebus'
    parameterValues: {
      connectionString: serviceBusConnectionString
    }
  }
}
```
Of interest is the item under `parameterValues` as it's not documented. With this, we can retrieve the service bus connection string and put it into the bicep script. Do note that the above bicep is only for service bus. We can use the other quickstart template for other resources such as azure blob which will show us a different set of required `parameterValues` to build the bicep script.

Once we've the above, the next step is then to update the Logic App (Standard) `connections.json` to retrieve the necessary information from e.g. appsettings. This is another journey into the uncharted which I will cover in the next post.
What is the ONE language/framework you refuse to use? But...WHY???
Tags: discuss, beginners, programming, computerscience
Published: 2022-05-01 02:27:46

Why do developers **HATE** certain programming languages? 

You hear such things as "--- is slower and has bad performance" "I hate how --- manages data structure" or "--- can't do x, y, and z but --- can"

What are your reasons you refuse to use a particular language or framework? Are they _actually_ practical? 

Happy coding!
WSL2, Windows, Python and Node: resolving some conflicts
Published: 2022-05-01 01:33:25

Lately I've been working with Python and Node both on Windows on WSL (WSL2 specifically) and I noticed a certain number of inconveniences with WSL when having Python and Node installed on both systems. For example, some node packages were found when running node on WSL, even if I never installed them there. When that happened, the performances were horrible. 

The reason is that, by default, Windows injects Windows path environment variable into WSL path. 

For Node I was able to solve almost any problem using [nvm](https://github.com/nvm-sh/nvm), but with Python I had more challenges, so I decided to solve the problem right from at source.

First, tell WSL not to automatically add windows path to WSL. This can be done via `wsl.conf` file, as documented in the [Advanced settings configuration in WSL](https://docs.microsoft.com/en-us/windows/wsl/wsl-config#interop-settings).

Edit (or create if not already existing) the file:

```sh
sudo nano /etc/wsl.conf
```

and then add the interop setting:

```conf
[interop]
appendWindowsPath = false
```

Then close all WSL windows, open a Powershell or Command prompt and make sure WSL subsystem has shut down:

```powershell
wsl --shutdown 
```

Now you can re-open WSL session and check that the path doesn't automatically contain Windows paths:

```sh
echo $PATH | tr ":" "\n"
```

The second - and last - step is to manually add path to the Windows tools you want to use with WSL too, for example VS Code. I'm using ZSH so I needed to update the `.zshrc` file and add VS Code path:

```sh
export PATH="$PATH:/mnt/c/Users/damauri/AppData/Local/Programs/Microsoft VS Code/bin"
```

Done. No more conflicts or slow performances, but I can still use Windows tool on WSL. Perfect!
JavaScript is being a struggle for me as a beginner
Tags: javascript, webdev
Published: 2022-05-01 01:23:52

I am studying JavaScript functional programming right now, but I’m practicing HTML and CSS skills.I’ve been doing all JavaScript challenges on Freecodecamp, to honest I am struggling in my JavaScript challenges. Could you give some tips for me improve in JavaScript. HTML and CSS was quite easy but JS is a bit tougher.
JPA, Spring Data and Spring Data JPA
Published: 2022-04-28 01:23:38

# Spring Data
旨在提供一个一致的数据接入层（data access layer）
# JPA
java persistence API, 他是Java创造的一个标准（specification）。目的是为了给不同数据源的访问建立一个统一的标准。在JPA之前，连接关系型数据库需要使用JDBC API，那么就需要在代码里写SQL，在代码里写SQL是十分的繁琐而且容易出错的，并且，更换数据源类型后，SQL就变化了。举例说：生产是Oracle，但是测试是H2等轻量数据库，如果应用中有Oracle特殊的query的话，在开发环境就会报错了。所以JPA还是很有必要。
# Spring Data JPA
它是众多的Spring Data项目之一，旨在提供关系型数据库的一致的数据访问层。人们认为SPJ是JPA的一种实现，其实不然，SDJ是基于Hibernate (它是JPA的一种实现)。是否基于Hibernate是可配置的。
准确说，SPJ是JPA的一个插件。它提供了基于JPA标准的一个框架和基于DAL层之上的一个完整抽象。
SPJ引入了JPA Repositories的概念，这是定义了query方法的一组接口集合。在应用中，Repository和Entity这两个Bean即代表了DAO层。有了这些就不需要写原生SQL了，即便要写，也只是JQL查询，并非原生数据库查询。
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x1h9xm9ssc14bqzevqb.png)
# Spring Data JDBC
抽象少于SD-JPA，但相较于Spring JDBC它使用了Spring Data的概念使得CRUD操作更为简单。但它和DB更加接近，因为它在访问数据库的时候，没有那么多的Spring Data当中的“魔法”。使用JPA有个很重要的点，DB的schema要和应用里设计的model能很好地mapping（传说中的ORM）。
Super fast 🚀 windows search tool | Everything
Tags: tooling
Published: 2022-05-01 01:05:33



## Introduction

Most of the time during development we end up searching files other than our project files. Or Sometimes working on personal files. 

Searching 🧐 files becomes de facto standard for developers. 

We may also confused with multiple duplicate files. In this post we going to see a wonderful file name based search tool **`Everything`** . You can download [here](https://www.voidtools.com/downloads/). 

  
## About Everything

**`Everything`** is search engine that locates files and folders by filename instantly for Windows

When you type search,  **`Everything`** initially displays every file and folder on your computer

![Everything tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaq8uxk54im8cuad9bmg.png)
 

- 🏳️‍🌈 Clean and simple user interface.
- ⚡️ Quick file indexing.
- ⚡️ Quick searching.
- ⚡️ Quick startup. 
- 📉 Minimal resource usage.
- 🛢  Small database on disk.
- 🏎️ Real-time updating.


## Demo

On type **`Everything`** displays all the related files 

![Everything demo animation picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipxz5mjbdh02iw18h4w9.gif)
 
## Download 

https://www.voidtools.com/downloads/
Migration Readiness : Well Architected Framework for Landing Zone Assessment Part 2
Published: 2022-05-01 00:27:21

This blog post is around a deep down assessement around the Second Pillar for the assessment .

**Account Management , Structuring and Strategy** 

The output of this pillar should be around understanding the roadmap and maturit of the client around how the accounts are being provided for an end user , the ownership and the governance around.

Below are the objectives  and corresponding guidelines /questions that can be taken up or drive the workshop/assessment that you are leading with the client.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wobb8tcr1iarj797z60w.png)
Turtle study
Tags: firstpost, python, turtle, programming
Published: 2022-05-01 00:16:17


Choose the fill color by calling fillcolor() function and pass the color name or color in the #RRGGBB format. After step 1, you must call begin_fill() and then start drawing using Turtle functions. Once you are done with the drawing, call end_fill() function to fill the drawn figure with the selected color
1.begin_fill() in first time
2.end_fill() in last time
I know I'm wrong
Tags: learning, opinions, humility
Published: 2022-10-25 20:28:07

---
title: I know I'm wrong
published: true
cover_image: https://jhall.io/images/bn-bad-math.jpg
date: 2022-05-01 00:00:00 UTC
tags: learning,opinions,humility
canonical_url: https://jhall.io/archive/2022/05/01/i-know-im-wrong/
---

I’ve been forming opinions for more than 42 years now.

I’ve been changing my mind about my opinions for almost as long.

If the pattern holds, I can be very certain that I’m wrong about something—probably _many_ things—I believe today.

But what am I wrong about?

I don’t know. Obviously. If I knew which things I was wrong about, I wouldn’t believe them any more, and then I wouldn’t be wrong!

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to make a static field accessible only in its class and subclasses in TypeScript?
Tags: typescript
Published: 2022-05-01 00:00:00

---
  title: How to make a static field accessible only in its class and subclasses in TypeScript?
  published: true
  tags: TypeScript
  date: Sun May 01 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-static-fields-accessible-only-in-class-subclass-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-6c7936fd7e2f51f5e59cb9b9aec4c8fc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-static-fields-accessible-only-in-class-subclass-typescript)
  
To make a static field accessible only in its class and subclasses, you need to make the static field into a protected static field using the `protected` keyword before the static field in TypeScript.

### TL;DR

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // a protected static field
  protected static className = "Person";

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `className` static field
// cannot be accessed from outside the class
console.log(Person.className); // This is not allowed now ❌
```

For example, let's say we have a class called `Person` with 2 fields, a constructor and a static field like this,

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // static field
  static className = "Person";

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `className` static field
// can be accessed from outside the class
console.log(Person.className); // This is allowed now
```

Currently, in the above class, the `className` static field is public and can be accessed from outside the class.

To make it only accessible within the `Person` class and any other classes that extend the `Person` class (subclasses), we need to add the `protected` keyword before the static field like this,

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // a protected static field
  protected static className = "Person";

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `className` static field
// cannot be accessed from outside the class
console.log(Person.className); // This is not allowed now ❌
```

As you can see from the above code that when we try to access the `protected static field` called `className` from outside the class, the TypeScript compiler is showing an error saying `Property 'className' is protected and only accessible within class 'Person' and its subclasses.`, which is what we want to happen.

We have successfully made the static field to be accessible within its class and subclasses only in TypeScript. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/make-static-fields-accessible-only-in-class-subclass-typescript-1zwi5g?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Swift Basic: Constants and Variable
Tags: 100daysofswift, beginners, programming
Published: 2022-04-30 23:32:11

A moment will come where you will need to store data, irrespective of the programming of your choice.

In swift there are two ways to do this ,

1. Variable
2. Constants

## Whats a variable ?
Variable is a data store that can have its value changed anytime.

> variable have value that can vary - _Paul Hudson_
"_var_" keyword is used to denote variable

## Whats a Constant ?
Constant is a data store that cant have its value changed once it is set or specified.

> constant have value that are constant (cannot be changed).
"_let_" keyword is used to denote constant.
What's the point of programming contests?
Tags: discuss, programming
Published: 2022-04-30 22:17:41

These days there are a lot of contest in the programming world, but are they really helping?

## What's the cost?
I mean it is good to be fast but at what cost? as it said in [Clean Code by Robert C. Martin](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882) we are like authors and the code we write should be like well-written newspaper article;
writing code fast and dirty is not a good thing besides why should we write code in hurry? it makes me remember my math exams with all the stress.

## What's the point?
Having a course named 'Competitive programming' made me think what's the point? isn't coding more about being patient and find the best solutions then write it clean? **what is your opinion about programming contests?**