teleren/devto huggingface dataset:
The importance of ordering when using Laravel pagination
Tags: laravel
Published: 2021-11-28 16:23:52

**TL;DR** when paginating it's best to always order your query using the primary key, a column with a `unique` constraint, or at very least a column which is reasonably likely to be different on each row, eg `created_at`.

Pagination uses `limit` and `offset` to return a subset of rows from a query, and that same query could be called multiple times if navigating between result pages. We must therefore ensure the rows are ordered consistently so upon each query call it moves through the result set as expected, otherwise rows may appear to the user to be missing or duplicated.

Remember that SQL can return rows in any order it likes, so even if we specified something like `->orderBy('name')` if the values in the `name` column are identical across several rows we could end up with things sorted in a random order.

This is mostly likely to be of concern if there's a large number of rows and/or many identical values being ordered by, as when navigating between the pages the rows will appear to "move" between page numbers. This problem will become more apparent if the pagination row count is a low number.
Planning for release 0.4..
Tags: opensource, javascript, html
Published: 2021-11-28 16:23:36

#Overview...
Hello everyone! Finally, after a long journey, we have finally reached Release 0.4, the final journey of the OSD course! The task was to select an open source project or a school open source project that had been done in the past release tasks, and perform tasks such as adding functions or fixing bugs. So, I tried to work on the telescope at first, but in the end I decided to make a number of new features and improvements to the Todo-list app that I was working on with continuous updates!
Repository: [Todo-list app](https://github.com/nirajacharyaa/todo-app)

##Why I decided this?
In fact, the reason I personally chose this project is very simple.. Because it is the project that has been updated and improved by investing the most time and effort while performing the OSD course on the open project, I wanted to continue to upgrade the project. Also, I wanted to spend more time on an existing one and make a definite improvement than wasting time looking for another project :)

##What will be added?
[Project Repo - issue](https://github.com/nirajacharyaa/todo-app/issues/39)
I actually thought a lot about this open project. Because, in fact, as a Todo-list, it has almost all the elements it should have, so I thought a lot about improvement or function. It seems that I have been thinking about what functions to add for almost 3 or 4 days.

So, in the end, I think there are four major improvements.
1. Display current time+weather(can utilize external api).
2. Based on the time automatically change the dark-light mode.
3. Insert more animations to good effect.
4. Progressive bar to check easily how many tasks have been done and need to do.

The reason for choosing the above improvement is first, the dark mode that I added is still inexperienced, so it adds more detail and naturalness, and secondly, most schedule APIs provide information about time and simple weather. I wanted to give them a level of perfection similar to them. Thirdly, because I thought it would be better to add a progress bar to show the progress and completion of the Todo-list more clearly.

#My schedule
In fact, because I was worried and doing assignments in other subjects, I sent an issue to the owner of the open source project from the end of November and got permission to work on the repo. My plan is to complete items 1 and 2 above within this week and items 3 and 4 next week. However, there seems to be a possibility that episodes 1 and 2 will be extended until next week. Because the most difficult parts are the 1st and 2nd. However, we will do our best to keep the progress on schedule.
A portfolio for developers with a blog powered by Notion
Tags: vue, nuxt, tailwindcss, notion
Published: 2021-11-28 16:22:24

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr3nnmfl6b7dz5tbc38l.jpeg)

Demo: https://aymaneMx.com (my portfolio)
Github: https://github.com/aymaneMx/nuxt-portfolio-dev

# Features:

- 🥰 minimal and clean portfolio
- 🌗 the dark/light mode (Auto detect the system color-mode)
- 📱 responsive (tablet & mobile friendly)
- ⚙️ render articles from Notion 🚀
- ⭐ fetches your Github pinned projects with most stars
- 💫 Eslint & Prettier configured
- 📈 google analytics integration
- ⚡ generate sitemap (visit /sitemap.xml)
- 🚀 one-click deployment to netlify

# Deploy your own version:

1. clone the projects from Github, setup [Netlify](https://www.netlify.com/) to deploy on each merge to the main branch, I highly recommend this method!

2. for the lazy people out there, you can use [Netlify](https://www.netlify.com/) deploy button

but first, check out the prerequisites.

**Prerequisites**

1. create [Notion](https://www.notion.so/) account 
2. duplicate [this template](https://aymanemx.notion.site/aymanemx/ceef6f1a895a46b2a0e4a87b41405547?v=8427738adccd4b2a8c28156be3757156) by clicking on `duplicate` button located at the top of the page.
3. make your notion table public (by clicking on `share` button located at the top of the page)
4. grab the table id from the table link:
eg: 
```
link: https://aymanemx.notion.site/aymanemx/ceef6f1a895a46b2a0e4a87b41405547?v=8427738adccd4b2a8c28156be3757156
id: ceef6f1a895a46b2a0e4a87b41405547
```
5. do the same thing for about page id (we gonna use it as an env variable `NOTION_ABOUT_PAGE_ID`)
5. get your Google analytics id (this one is optional)
6. now you can click to the deploy button and fill the Netlify form

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc1jk7vj0ynhveh87ps5.png)

**Credits:**

- :moon: The dark mode : [eggsy](https://github.com/eggsy/website)
- :art: the minimal design : [Monotone](https://github.com/dev-ggaurav/Monotone)
- :star: The open source section : [mouadziani](https://github.com/MouadZIANI/mouadziani.com) and [smakosh](https://github.com/smakosh/smakosh.com)
Best Way To Create Config Files
Tags: webdev, javascript, python, productivity
Published: 2021-11-28 16:09:51

Hello folks! I made a config language 3 days ago to solve other language's problems. Now i wanted to share with you.

## Problems
### JSON
JSON is the most popular language to create configs. But JSON is not modern for 2021.
- No Comment Support
- Bad Syntax

### TOML
TOML is another new config language and used by rust's cargo today. TOML solves some problems that JSON has but its still not simple to write.

### YAML
YAML has same problems that TOML gives, not simple and fast to write.

### XML
Everyone knows XML sucks for 2021.

## Snug
And snug... Snug is created for write fast and simple configs with flexible syntax. For example:
```snug
num 1 str "Hello, World!"
```
Lets convert this to the JSON:
```json
{"num": 1, "str": "Hello, World!"}
```
This is a valid snug file but it looks bad right? Let's fix the syntax:
```snug
# This is a simple comment, comments are starting with a hashtag and continues until next hashtag. #

num 1
str "Hello, World!"
```
Say goodbye to indentation syntax, semicolons and if you want to write worst syntax, new lines.

Snug also supports object and arrays. Time to give a complex example:
```snug
# This is a comment! #
title "Hello World"
views 4826
is-public yes
owners ["User1" "User2"] # This is an array. #

(content # This is an object. #
text "Hello everyone, how are you?"
sha256-hash "0cfb86e2b382029d9c7ee32e98f855c1e870b688766da19caee32122894db03b"
color 12648430)

allow-edit no
```

## Learning
- [GitLab README](https://gitlab.com/aiocat/snug)
- [GitHub README (Mirror)](https://github.com/aiocat/snug)

## Libraries
Snug has language support problem right now. Only supports Vanilla JavaScript and Python3 (28/11/2021) for now. For contributing to this project, You can create snug libraries for other languages. Also after publishing your library, You can create merge request on GitLab repository to add your library to libraries list.
 
[Click](https://gitlab.com/aiocat/snug#libraries) for snug libraries.
Getting started with GraphQL in .NET 6 - Part 4 (Extra - Deploy to Azure Web App)
Tags: graphql, azure, azurewebapp, dotnet
Published: 2021-11-28 16:08:29

This post will be last part. I will give you videos about how I deploy it to Azure Web App (for Backend) and Azure Static Web App (for Frontend). I will give you some notes that you need to give more attention into it.

## Video

{% youtube sy7eJZKwp6g %}

## Notes

### BE Codes

* I install the EF In Memory, since I don't want to deploy SQL Server at Azure yet. I have plan to post it to single article not in this series.

```xml
<ItemGroup>
    <!-- other dependencies... -->
    <PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="6.0.0" />
    <!-- other codes ... -->
</ItemGroup>
```

* I update the `Program.cs` to use in memory.

```csharp
// Add services to the container.
builder.Services.AddDbContext<NotesContext>(options =>
{
    // options.UseSqlServer(builder.Configuration.GetConnectionString("Default"));
    options.UseInMemoryDatabase("NotesTest");
});
```

### FE Codes

* I update the backend (GraphQL) URL at `index.tsx`. You can update it to use environment instead of hardcoded, so you can setup the URL at build stage.

```jsx
// other codes

const client = new ApolloClient({
  uri: 'https://graph-api-demo.azurewebsites.net/graphql',
  cache: new InMemoryCache()
});

// other codes
```

## Thank you

![Great job gif](https://media.giphy.com/media/xT9DPrC1YWXBO1coyQ/giphy.gif)
Redux: Use a Switch Statement to Handle Multiple Actions
Tags: redux, devops, beginners, javascript
Published: 2021-11-28 16:01:47

* With Redux store you can tell it how to handle multiple action types. Like FreeCodeCamp is providing for us, let's say we're managing user authentication in our Redux store. You want to have a state representation for when users are logged in and when they are logged out. You represent this with a single state object with the property authenticated. You also need action creators that create actions corresponding to user login and user logout, along with the action objects themselves.
* Code:
```React
const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {
  // Change code below this line

  // Change code above this line
};

const store = Redux.createStore(authReducer);

const loginUser = () => {
  return {
    type: 'LOGIN'
  }
};

const logoutUser = () => {
  return {
    type: 'LOGOUT'
  }
};
```
* Here we have a store, actions, and action creators set up for us. We just have to fill in the reducer function to handle multiple authentication actions. We need to use JavaScript `switch` statement in the `reducer` to respond to different action events. The switch statement should switch over `action.type` and return the appropriate authentication state. Also, don't forget to write a `default` case in your switch statement that returns the current state.
* Answer:
```React
const authReducer = (state = defaultState, action) => {
  switch(action.type) {
    case 'LOGIN':
    return {authenticated: true}
    case 'LOGOUT':
    return {authenticated: false}
    default:
    return defaultState
  }

};

const store = Redux.createStore(authReducer);
```
High demand for devs, Grueling hiring process.
Tags: webdev, programming, beginners, hiring
Published: 2021-11-28 16:00:07

Given the latest data on the demand for software Developers, I'm curious why companies don't fast track the interview/hiring process.
Or even offer on the job training for entry level/junior Developers who show potential

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kys73p2x2rllq7ebrewf.jpg)
20th weekly post, reserved workers. Also, AL2022.
Tags: javascript, aws
Published: 2021-11-28 15:58:10

## Items of the week

- **Jest** - in single run mode, the maximum number of workers is set to be the number of CPU core available minus one for main thread, we can customise using the CLI option `--maxWorkers`, as stated on the [official documentation page](https://jestjs.io/docs/cli#--maxworkersnumstring).

- **JavaScript** - `undefined`, `NaN`, and `Infinity` are actually not reserved words, got this from chapter 2 of [JavaScript: The Good Parts](https://www.goodreads.com/book/show/2998152-javascript).

- **On the week 47 of 2021**, we saw the public preview of Amazon Linux 2022 which is now based on Fedora. Also, there will be a new major version of Amazon Linux every two years from now on and each will be supported for five years. More information available on the [official announcement page](https://aws.amazon.com/about-aws/whats-new/2021/11/preview-amazon-linux-2022/).

This is a weekly bite-sized post on web app development from JavaScript to UX and technology in general. Thank you for reading and have a nice day!
Keyoxide proof
Published: 2021-11-28 15:49:47

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/d0654ab99d5016af7c4e06bff72b2e4be8d06a87) to [this dev.to account](https://dev.to/svoop). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:d0654ab99d5016af7c4e06bff72b2e4be8d06a87]
Creating characters and scripting dialouge in RenPy
Tags: gamedev, python, tutorial, renpy
Published: 2021-11-28 15:42:53

After getting an idea for a visual novel, time to start developing the game. RenPy is a popular choice to make a visual novel. The RenPy language takes python expressions. Python code can be also added to the project. This article is going to cover how to create a basic dialogue. 

## 1. Create a Project
Open up the RenPy launcher and click create new project where your name and choose options for your project. After that setup, things are ready to go!

## 2. Adding characters to your project
When opening the project in your text editor of choice look for the script.rpy file or create a separate file for adding characters. Let's define two characters: protagonist and Jane. In the Character() function the characters name and who_color is the text color for that character's name. 

```
# Defines the characters in the story
define p = Character("[p]", who_color = "#fff")
define j = Character("Jane", who_color = "#333")

```

Note for the protagonist we have [p], the player character is nameable. Here is how we define the player's name. 

```
    $p = renpy.input("What is your name?", "Max", length=15)
    $p = p.strip()
```
Now the player character can be named , the input is limited to 15 characters. If the input is empty then it will be the default name Max. 

## 3. Dialogue
Let's start the game by adding a short introduction and dialogue.
To end the game add the return statement.

```
label start:

p "Hey Jane, how was the test last week?"
j "It was rough. I struggled through it, can't believe we have another test next week."
p "How about we get together and study for it."
j "That sounds great!"

return

```
## 4. Adding Menus
Adding a menu gives the players options in the game. There other options such a a menu set or menu arguments. Let's add a choice over which location to go to study at. 

```
menu study_locations:
"Where should we go to study?"

"The library":
  p "We can go to the library."

"Jane's House":
  p "How about we study at your place?"

"My House":
p "Let's go to my place and study for the quiz."
```

## What's next?
This article covers some of the basics when developing a game using RenPy. Images can be added when doing scenes and other advanced customization for menus. The choices are endless when adding menus in game. 

### Resource
  * [Menu documentation](https://www.renpy.org/doc/html/menus.html)
"element" from v5 vs "render" from v6
Tags: react, webdev, discuss, showdev
Published: 2021-11-28 15:12:43

In version 5 , I can easily use "render" attribute for <Route /> , but in version 6 , if I use "render" instead of "element" , it shows a blank page and throws a warning. I have googled a lot but i didn't got proper documentation
Redux: Create a Redux Store
Tags: redux, devops, beginners, javascript
Published: 2021-11-28 15:05:04

* Hello Everyone, and welcome back to more lessons, and challenges provided by FreeCodeCamp! Today we'll be learning about Redux. 

###What is Redux?
* Redux is a state management framework that can be used with a number of different web technologies, including React.
* In Redux, there is a single state object that's responsible for the entire state of your application. This means if you had a React app with ten components, and each component had its own local state, the entire state of your app would be defined by a single state object housed in the Redux store.
* This means that any time your apps wants to update state, it has to go through the Redux store. It honestly just makes it easier to track the state management in your app.
app.
* FreeCodeCamp wants us to create a Redux store with the provided code. We have a method called `createStore()` on the Redux object, which we use to create the Redux store. This method takes a `reducer` function as a required argument. We will definitely talk more about reducer function in later posts.
* Let's declare a store variable and assign it to the `createStore()` method, passing in the `reducer` as an argument. 
* Code:
```React
const reducer = (state = 10) => {
  return state;
}
```

* Answer:
```React
 const store = Redux.createStore(reducer)
```


###Get State from the Redux Store
* * You can also retrieve the current `state` held in the Redux object with the `getState()` method. The code from the above example is re-written more clear in the code editor. Use `store.getState()` to retrieve the `state` from the `store`, and assign this to a new variable `currentState.`
* Code:
```React
const store = Redux.createStore(
  (state = 10) => state
);

```

* Answer:
```React
let currentState = store.getState()
```
擴充 AWS 主機硬碟空間
Tags: aws, ebs
Published: 2021-11-28 15:04:42

過往我曾經在〈[各家 Serverless 短評](https://editor.leonh.space/2021/short-comparison-to-serverless-vendors/)〉談到主機雲端化帶給我們的便利，剛好最近碰到要擴充 AWS 上某台機器的硬碟，很適合讓人更具體地感受到雲端化對 IT 維運上的優勢，要擴充硬碟只需要進入 AWS 主控台調整一下設定即可，當然自建虛擬機也可以做到同樣的便利性，但自建虛擬機的 host 還是會有硬碟被瓜分光的一天，你各位終究還是要自己去機櫃抽插硬碟的。

---

想要擴充硬碟空間，第一步是到 AWS 的 EBS 頁面，對目標硬碟做修改設定，在這邊我們是把原本一個 8G 的卷加成 16G：

![AWS EBS 修改卷](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlau3pdscux8bqwakgmv.png)
卷修改完了，但卷內的分割區還是原本的 8G，所以我們登入 shell 去修改分割區。

在修改前，先確認目前的分割區配置：

```sh
$ lsblk
```

```
NAME      MAJ:MIN RM  SIZE  RO  TYPE  MOUNTPOINT
xvda      202:0   0   16G   0   disk
  -xvda1  202:1   0    8G   0   part  /
```

可以看到 disk 是 16G，但分割區 xvda1 還是只有原本配置的 8G，而剩下的 8G 目前是真空未配置的狀態。

用指令讓分割區 xvda1 吃滿未配置的空間：

```sh
$ sudo growpart /dev/xvda 1
```

再次用 `lsblk` 驗證結果：

```
NAME      MAJ:MIN RM  SIZE  RO  TYPE  MOUNTPOINT
xvda      202:0   0   16G   0   disk
  -xvda1  202:1   0   16G   0   part  /
```

確認分割區已經擴充，但…檔案系統還沒，看 xvda1 的 ext4 還是只擁有約 8G 的空間：

```sh
$ df --human-readable --print-type
```

```
Filesystem  Type  Size  Used  Avail Use%  Mounted on
/dev/xvda1  ext4  7.7G  7.0G  734M  91%   /
```

所以還要再一步修改檔案系統：

```sh
$ sudo resize2fs /dev/xvda1
```

再次確認：

```
Filesystem  Type  Size  Used  Avail Use%  Mounted on
/dev/xvda1  ext4  16G   7.0G  8.5G  46%   /
```

確認變為 16G，至此大功告成。

注意到了嗎，我們擴充硬碟空間的整個程序中，是沒有重新開機的，也不需要什麼高深的熱抽換技術，就兩三個一望即知的指令，隨便拉一個三十年前用過 DOS 的小朋友都會做。

本文是 AWS 文件〈[調整磁碟區大小後擴展 Linux 檔案系統](https://docs.aws.amazon.com/zh_tw/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html)〉的 human readable 版。
Baloonza Front-End weekly digest #1
Tags: javascript, css, webdev, baloonza
Published: 2021-11-28 14:52:00

Interesting Front-End topics and trends of the past week:

***

### React

- [5 things I struggled with when learning React with a Vue background](https://dev.to/jeremyling/5-things-i-struggled-with-when-learning-react-with-a-vue-background-1fed)

- [Creating a React Custom Hook using TDD](https://dev.to/mbarzeev/creating-a-react-custom-hook-using-tdd-2o)

### WebDev

- [Responsive Side Navigation Bar in HTML CSS and JavaScript](https://dev.to/shantanu_jana/responsive-side-navigation-bar-in-html-css-and-javascript-3mgm)

- [How to use Web Storage API?](https://dev.to/j471n/how-to-use-web-storage-api-3o28)

### CSS

- [When is it “Right” to Reach for contain and will-change in CSS?](https://css-tricks.com/when-is-it-right-to-reach-for-contain-and-will-change-in-css/)

- [Responsive Layouts, Fewer Media Queries](https://css-tricks.com/responsive-layouts-fewer-media-queries/)

- [Writing conditionals in CSS: when/else](https://www.wisdomgeek.com/development/web-development/writing-conditionals-in-css-when-else/)

- [CSS Animation Weekly #276](https://app.baloonza.com/issues/9744)

- [CSS-Tricks 278: Variable Fonts and accent-color](https://app.baloonza.com/issues/9762)

- [Frontend Focus #​518: Handling colors in CSS](https://app.baloonza.com/issues/9821)

### Node.js

- [JWT: Ultimate How-To Guide With Best Practices In JavaScript](https://betterprogramming.pub/jwt-ultimate-how-to-guide-with-best-practices-in-javascript-f7ba4c48dfbd)

### Career

- [Architect's Technology Roadmap: Path to a Software Architect](https://golangexample.com/architects-technology-roadmap-path-to-a-software-architect/)

***

Keep yourself updated with the latest Front-End topics and trends.
How to Overcome a Slow Laptop
Published: 2021-11-28 14:51:38

How to Overcome Slow Lattice - For those of you who are trained to work using a laptop, comfort as long as using the device should be your main focus and desire. So that your best laptop still has a reliable еrform аn long thаt аrе used t work.
 
Proper use and regular maintenance are things that need to be considered. If the 2 main points are rarely a concern, because it is not impossible that a laptop will experience various types of symptoms.
https://www.rogger.eu.org/2021/11/Cara%20Mengatasi%20Laptop%20Lemot.html