teleren/devto huggingface dataset:
How to use Next.js @next/font with TailwindCSS
Tags: nextjs, tailwindcss, font, react
Published: 2023-01-04 01:19:31

I'll go straight to the point. [Next.js 13 will optimize your fonts out of the box](https://beta.nextjs.org/docs/optimizing/fonts). But... how to use them alongside with [TailwindCSS](https://tailwindcss.com/)?

## Working with the new layout.tsx

Under `app/layout.tsx`, import:

```typescript
import { Inter, Oswald } from "@next/font/google";
```

Then, initialize their instances:

```typescript
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const oswald = Oswald({ subsets: ["latin"], variable: "--font-oswald" });
```

Let's now add our font's variables as `classNames` inside our `<html>` tag:

```typescript
<html lang="en" className={`${inter.variable} ${oswald.variable}`}>
```

## Moving to tailwind.config.js

Add both fonts to the `fontFamily` TailwindCSS configuration:

```typescript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        inter: ["var(--font-inter)"],
        oswald: ["var(--font-oswald)"],
      },
    },
  },
  plugins: [],
};
```

## Finally, let's use them:

Under `app/page.tsx`:

```typescript
export default function Home() {
  return (
    <main className="font-inter font-extralight">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    </main>
  );
}
```

Replace `font-inter` with `font-oswald` and you'll see Oswald taking place. Isn't it beautiful? :sparkles:
How Does One Transition From Basic Front End Development to Intermediate?
Tags: beginners, html, css, javascript
Published: 2023-01-04 01:16:51

##Where Does One Begin...
I've heard many say that learning Front-End development is easy. Compared to Back-End development and Full-Stack development. However, I disagree. 
I have been working to learn HTML,CSS, and JavaScript for four months now. I began my coding journey after stumbling upon SheCodes.io, completing the Basic course, and finding that I was both intrigued and exhilarated by what I was able to create. 
However, in reaching my four-month milestone; tackling code every night after my workday... I am worried I am missing so much, and, even more terrifying, focusing on too little. 

##### Here are some of the challenges I've encountered and what actions I've taken to close the gap. 


####The Boilerplate? Why are we boiling anything!? 

The term itself can throw you for a loop. If you are unaware of what it means, and why its needed. Zaveri offers a wonderful definition of boilerplates in his article > What is a boilerplate and why do we use it? Necessity of coding style guide [Check it Out!](https://medium.com/free-code-camp/whats-boilerplate-and-why-do-we-use-it-let-s-check-out-the-coding-style-guide-ac2b6c814ee7). I found that one this aspect of coding was explained, I was better able to focus on all that comes after the head tag. 

####Attributes, Properties, Functions! Oh My! 

There is a lot to learn and a lot to keep track of when learning something new. It takes time and being able to recall everything early in your learning journey is great. But sometimes additional readings from sources outside your coding bootcamp/programming can prove to be the most enlightening! And we need all the lights on when coding! I found the [HTML and CSS: Design and Build Websites 1st Edition](https://a.co/d/eqV5Rf5) to be extremely helpful in better understanding these skills. 

####JavaScript & Its Logic

Although HTML has its attributes and CSS has its properties, I find myself working to best understand JavaScript. Working through human communication and computer logic the need to be both understood and exact creates a plethora of unique challenges. Learning functions take time and working to document what works and when is helpful for future reference. Most recently, I've given into notebooks and even bought them in Bulk. Wiring down what you are learning seems archaic but pen and paper, I've found, is better than forgetfulness and 11:59pm submission deadline. 

####I'm Sure There is So Much More! 
These only outline a few of the recent challenges I've faced. I'm sure there are many more. But with diligence, persistence, and sometimes a snack break in between, all things are possible. 

**I am curious about what others experienced in the first month's of learning to code and what solutions worked best for you! Please share in the comments!**
MVC Architecture in NodeJS explained in details
Published: 2023-01-04 00:39:49

**Let's take a look at the concept behind nodejs Model–view–controller (MVC) software design pattern. 
Model-View-Controller (MVC) is a software architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application.**

The MVC pattern is often used in the development of web applications.

Here's a high-level overview of how the MVC pattern works in a Node.js application:

- Model: The model component represents the data of the application and the business rules that govern access to and updates of this data. It is the core of the application and is responsible for maintaining the data. In a Node.js application, the model is often implemented as a JavaScript object that represents the data of the application.

- View: The view component is responsible for displaying the data to the user. It is the user interface of the application and is responsible for presenting the data to the user in a way that is easy to understand and interact with. In a Node.js application, the view is often implemented using a template engine such as EJS, Jade, or Handlebars.

- Controller: The controller component is responsible for handling user input and interacting with the model and the view. It is the middleman between the model and the view, and is responsible for updating the view when the model changes and updating the model when the user interacts with the view. In a Node.js application, the controller is often implemented as a JavaScript function that handles HTTP requests and sends responses.

Here's an example of an MVC application in Node.js that demonstrates how these components work together:

```
const express = require('express');
const app = express();

// Model
const fruits = ['apple', 'banana', 'orange'];

// View
app.get('/', (req, res) => {
  res.render('fruits', { fruits: fruits });
});

// Controller
app.post('/addfruit', (req, res) => {
  fruits.push(req.body.fruit);
  res.redirect('/');
});

app.listen(5500, () => {
  console.log('MVC app listening on port 5500!');
});

```
In this example, the 'fruits' array is the model, the view is a template that displays the list of fruits, and the controller is the route handler that adds a new fruit to the list when the user submits a form.

I hope this article is enjoyable to read and helpful. As a technical writer, it brings me joy to share my knowledge and assist others in learning and growing. Thank you for taking the time to read it.
CentOS 7 裝 PHP 7
Tags: centos, php
Published: 2023-01-04 00:26:03

參考 CentOS wiki 文章〈[Using PHP 7.x on CentOS 7.4](https://wiki.centos.org/HowTos/php7)〉的前半部份。

預設的軟體庫只有 PHP 5，要啟用 CentOS Software Collections 這個庫才會有 PHP 7。

設定 Software Collections 庫：

```sh
> sudo yum install centos-release-scl
```

然後就可以裝 PHP 7 了：

```sh
> sudo yum install rh-php72
```

一些有依賴到的套件也都會一併裝上。

裝上是裝上，是裝到那去呢？看這篇：〈[What Files Are In a RPM Package?](https://www.cyberciti.biz/faq/howto-list-find-files-in-rpm-package/)〉。

路徑在 /opt/rh/rh-php72/ 內。[用 scl 把 PHP 啟用](https://www.softwarecollections.org/en/scls/rhscl/rh-php71/)：

```sh
> sudo scl enable rh-php72 bash
```

這樣會執行一個新的 bash session，並且把那 PHP 7 引入 path 內，可是重開機就失效了…。

再參考一下〈[PHP 7.0 or 7.1 on RHEL or CentOS](https://www.reddit.com/r/PHP/comments/8p1i0l/php_70_or_71_on_rhel_or_centos/)〉這篇的作法，在 /etc/profile.d/rh-php72.sh 建一個小 shell script 讓它在登入時自動執行，把那 PHP 7 自動加入 path 內：

```sh
#!/bin/bash
source scl_source enable rh-php72
```

把這支 script 設為可執行以便日後手動使用：

```sh
> sudo chmod a+x /etc/profile.d/scl.sh
```

設定 nginx * PHP 見下篇。
Quickiebase: a pure-Python NoSQL database
Tags: python, nosql, mongodb, database
Published: 2023-01-04 00:16:48

I'm working on [**Quickiebase**](https://github.com/cabalamat/quickiebase) my pure-Python NoSQL database which stores documents as JSON objects.


## Why Quickiebase?

Python is renowned for being batteries-included. It also has access to sqlite as part of the standard library. I think it would make sense to have an NoSQL document database as part of the standard library; something that can you can set up and start using with a simple `import` statement.

(If not as part of the standard library, then it should be available as a package on the [Python Package Index](https://pypi.org/).)

According to the [2022 Stack Overflow developer survey](https://survey.stackoverflow.co/2022/#technology-most-popular-technologies), MongoDB is the most popular NoSQL database (and the 4th most popular database overall), and the  most wanted NoSQL database which 17% of developers wanting to use it.

Because of this, the NoSQL database library should be based on MongoDB, that is its functionality should be a subset of MongoDB's, so that if a project using it grows to something big it can easily move up to a bigger database.  

I'm also mindful that MongoDB stopped being open source with its Server Side Public License (SSPL).
Docker pull credentials error
Tags: docker, softwaredev, programming
Published: 2023-01-03 23:58:47

Hello! I hope you are doing well.

I want to tell you a little story about an error that I encountered a while ago with Docker Hub. I was trying to pull from Docker Hub and, to my surprise, an error appeared 😡 saying that my credentials were incorrect.

```
docker: Error response from daemon: Get https://<<image link>>: unauthorized: incorrect username or password. See 'docker run --help'.
```

I wondered what had caused this error. It took me over 15 minutes of struggle before I found the solution. It was actually quite simple once I found it - I just needed to Google the error log and follow the instructions that I found. Here's the solution that worked for me:

```
docker logout
```
 

```
docker login
```

Enter your credentials and the problem is solved 😀.

But the most interesting part of this story is understanding the cause of the error. I believe that every programmer should do the same - that way, you won't lose time if a similar situation arises again.

For me, the problem was that I had changed my password a few days earlier, but the old credentials were still in the cache. The `docker logout` command deletes old credentials, which solved the problem for me.

Isn't that interesting? Until next time 👋.
Automate LinkedIn Invites To Be Withdrawn
Tags: javascript, beginners, productivity, sales
Published: 2023-01-03 23:43:54

## All sales begin with Social selling

It's true. Most prospects you interact with nowadays will probably have seen your posts or posts from someone else from your company on LinkedIn. Now, similar to me, I'm guessing you are mass connecting with everyone and their mother from the company you are prospecting... eventually these connection requests begin adding up, and the next thing you know, you have over 2000 pending requests.

Luckily, you can automate the cleanup of these requests.

1. Navigate to https://www.linkedin.com/mynetwork/invitation-manager/sent/

2. Open the developer console (right-click and inspect and then choose the console tab)

3. Enter this snippet of code into the console and wait

```
var firstButton = document.getElementsByClassName("invitation-card__action-btn artdeco-button artdeco-button--muted artdeco-button--3 artdeco-button--tertiary ember-view")

var secondButton = document.getElementsByClassName("artdeco-modal__confirm-dialog-btn artdeco-button artdeco-button--2 artdeco-button--primary ember-view")

setInterval(()=>{
    for(var i=0;i<firstButton.length;i++){
        firstButton[i].click()
        secondButton[0].click()
    }},1500)

```
It should look something similar to this. 

![Console on LinkedIn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uok6jqez4727pamkgh5.png)

If you plan to continue your tasks, this code can run in the background. This code has helped me, whether I am mass-adding recruiters, prospects, or people at companies I would like to work for.

Good luck, and thank you for reading.
Become an XRP Ledger Campus Ambassador
Tags: xrpl, xrp
Published: 2023-01-03 22:51:14

Ready to make a difference in the world of Web3? Applications are now open for the[ Spring 2023 XRP Ledger Campus Ambassador program](https://xrpl.org/ambassadors.html), which runs from February to May. 
 
The XRP Ledger Campus Ambassador program—founded via an XRP Ledger Foundation and Ripple partnership—aims to support, connect and empower a group of students to further advance engagement and development on the XRP Ledger. In their role, ambassadors help educate their campus blockchain communities about how to build on the XRPL through workshops, events, hackathons and more.
 
Campus Ambassadors will be mentored by active members of the community on use cases ranging from NFTs, to metaverse, gaming, and beyond. Ambassadors will also have the opportunity to participate in group learning and training sessions, receive a stipend to support on-campus events related to building on the XRPL, participate in Ambassador-only events, and travel to conferences to gain hands-on experience building communities and growing their professional network in the blockchain industry. 
 
During the fall semester, 100 Ambassadors from around the world were selected to share their blockchain knowledge and grow the XRPL community across their respective campuses. To date, they have hosted dozens of events, workshops and meetups; attended global conferences; planned hackathons across multiple universities; and partnered with sponsors to attend crypto events around the globe. 
 
“I got the chance to learn more about blockchain technology, network, and connect with other students passionate about the XRP Ledger. Not only did I get to meet new people, but also different people from different parts of the world,” says a Lead Ambassador from Toronto Metropolitan University. He adds, “This program has allowed me to learn about other cultures and customs in addition to learning about blockchain technology and its applications in real life scenarios. I am extremely grateful for this program.” 
 
All students are welcome to [apply to be a part of the Spring 2023 Ambassador Program](https://xrpl.org/ambassadors.html) cohort. Applications are open now through January 12th.
ResumeBlaze - Build beautiful resumes quickly
Tags: resume
Published: 2023-01-03 23:31:41

ResumeBlaze was built to solve a simple problem: create a clean and professional resume in PDF format. 

Writing a resume in a word processor often distracts writers from focusing on their experiences, education, and core skills. Most resume writers get hung up on indentations, layout, and general formatting, which discourages them from generating a clean resume. Our resume and CV builder allows users to focus on the core building blocks of a resume and skip the formatting. 

Founded in 2019, we have helped numerous job seekers land interviews with professional resumes built with our proprietary application.

[https://www.resumeblaze.com](https://www.resumeblaze.com)
Streaming logs of all pods at once
Tags: kubernetes, cloudskills, containers, tutorial
Published: 2023-01-03 22:56:56

If you're like me who likes to see all of the log events in a single terminal then you're at right place. In this article we see how to view logs of single container pod with multiple replicas, logs of a particular container of a multi containers pod and logs of all containers of a multi containers pod. Here are the list of commands:

### 1. Stream logs of single container pod with multiple replicas

In Kubernetes it's all about labels and selectors. And I'm going to demonstrate commands using labels. In case you are not familiar with how to get label details from a pod or how to add label on a pod then jump to the end of this post.

> Note: I prefer using alias, here 'k' is alias for kubectl. set it as `alias k=kubectl`

```
k logs -f -l <pod-label-value> --prefix
```
> Note: `--prefix` Prefix each log line with log source (pod and container names)

E.g.

```
k logs -f -l app-name=example-app --prefix
```
> Note: here `app-name=example-app` label is on the pod. If you would like to stream logs from multiple pods from different application deployments within a namespace, then use a common label that’s present across all pods, or add a such label. 

### 2. Stream logs of a particular container of a multi-containers pod with multiple replicas

```
k logs -f -l <pod-label-value> --prefix -c <container-name>
```

E.g.
```
k logs -f -l app-name=example-app --prefix -c example-conn
```
> Note: here `app-name=example-app` label is on the pod, and `example-conn` is the container name.

### 3. Stream logs of all containers of a multi-containers pod with multiple replicas

#### a. Using label
```
k logs -f -l <pod-label-value> --prefix -all-containers
```

E.g.
```
k logs -f -l app-name=example-app --prefix -all-containers
```

#### b. Using deployment name

```
k logs -f deploy/<deployment-name> --prefix -all-containers
```

E.g.
```
k logs -f deply/example-deployment --prefix -all-containers
```

### 4. Show labels associated with a pod

```
k get po <pod-name> --show-labels
```

### 5. Add label on running pod

```
k label po <pod-name> app-name=example-app
```

If you have reached here, then I made a satisfactory effort to keep you reading. Please be kind enough to leave any comments or ask for any corrections. Happy Kuberneting!

#### Other Blogs:
- [Containers Vs Virtual Machines, which is better and why?](https://dev.to/akdevcraft/containers-vs-virtual-machines-45m1)
- [Private Cloud Vs Public Cloud Computing](https://dev.to/akdevcraft/private-vs-public-cloud-computing-5b74)
- [Micro-Frontend Decision Framework](https://dev.to/akdevcraft/micro-frontend-decision-framework-26hf)
- [Web component - learnings and limitations](https://dev.to/akdevcraft/my-firsthand-experience-with-web-component-learnings-and-limitations-4dd8)
- [GitHub Repository Readme Template](https://dev.to/akdevcraft/github-repository-readme-template-6h2)
Day 665 : Happy New Year
Tags: hiphop, code, coding, lifelongdev
Published: 2023-01-03 22:46:56

_liner notes_:
- Professional : Whew... felt pretty good to get back to work. Got to see some folks. Worked on some Web Components. Filled out some forms. Not a bad day.

- Personal : Had a good couple of weeks break. Rested up. Watched some anime. Did the radio show. Worked on a proof of concept for a new side project. Rest, anime, HIPHOP, and code. Some of my favorite things. Pretty good.

![Looking into a valley surrounded by tall orange rock formations in Del Muerto, AZ, United States](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mjrw7490wu4jfbiutua.jpg)

Going to work on my side project proof of concept. I want to get it done this week so I can show a friend so they can get an idea of what I want to build. May end the night watching some anime. Keeping it short.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube AjmOOBDIWXA %}
Golang encapsulation for protected fields – quick insight
Tags: go, programming
Published: 2023-01-03 22:45:38

> My personal insight (**TL;DR**) :

"_A struct encapsulation within dedicated module with structs' un-exported fields, but exported setter-like and getter-like method(s) within such dedicated module yields similar practice of protected class behaviour in such languages as e.g. – PHP_"
HFDP(2) - Observer Pattern
Published: 2023-01-03 22:36:11

In this post we introduce the observer pattern. 

You may have subscribed some newspaper or podcasts. Whenever they have new releases, you get notified, and you go and see what's happening. This, could be further abstracted to Observer Pattern. You are the observer, and the newspaper is the subject/observable. 

Observer Pattern involves a subject/observable (e.g. newspaper) and an observer (e.g. you, the loyal reader). The subject should be able to add or remove observers, and whenever something changes in the subject, the observer should be notified and do something accordingly (e.g. update display). The Observer should be able to subscribe the subject. 

## Formal Definition 

> The **Observer Pattern** defines a one-to-many dependency between objects so that when one object changes state, all of its dependents are notified and updated automatically. 


![one-to-many-relationship](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r83c176zs8jrtxu8n5ho.png)


![the class diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmzu6nnfksh81pd6hno5.png)

Of course, the Subject may be a superclass instead of an interface. 

## Design Principle 
- Strive for loosely coupled designs between objects that interact. 

The Subject and the Observer are loosely coupled, because both of them don't have to know the nitty-gritty details of each other. All they know is the other implements a certain interface. 

## Implementation

We can implement the observer pattern by ourselves or use java.util.Observer/Observable. 



## Example

Consider the front-end UI button. We usually add `actionListener` to it. So the button is the Subject/Observable and the `actionListener` is the Observer.