teleren/devto huggingface dataset:
referencing the paths in CSS and Font - in WordPress
Published: 2022-11-27 14:26:02



how are you adding the fonts? 

one of the most common methods for loading locally hosted fonts will be through a font-face declaration in the theme stylesheet, although there are other possibilities and methods.

**referencing** them could be done with the following path customization;

`/wp-content/themes/my_theme/assets/fonts/fontfile.ext`

this might be one typical file location and referencing approach: 

And besides this - the best/recommended practice is to create a child theme for making the theme.


so in any case of having a path issue for the font file, here some thoughts regarding the path/url in  the style/css.


If the css file and the fonts data are (residing) exactly in same folder;
`@font-face {
    font-family: "CustomFont";
    src: url('CustomFont.ttf');
}`

 If the fonts are (residing) just outside of the so called css folder:
`@font-face {
    font-family: "CustomFont";
    src: url('../CustomFont.ttf');
}`


...and additionally we have some more recommendations: 


a. a so called absolute static path of the so called fonts file*/ @font-face

here we have a so called absolute static path of the so called fonts file*/
`@font-face {
    font-family: "CustomFont";
    src: url('file:///C:/Users/Administrator/fonts/CustomFont.ttf');
}`

b. another so called absolute static path of the so called fonts file*/ @font-face

`/* Url path of fonts file*/
@font-face {
    font-family: "CustomFont";
    src: url('http://localhost/wordpress/Your-font-folder-path/CustomFont.ttf');
}`
Customization with Tailwindcss
Tags: webdev, javascript, beginners, programming
Published: 2022-11-27 14:23:16

{% embed https://www.youtube.com/watch?v=wzwHp9FCBKA %}

Without any doubt, Tailwindcss became famous because of its customization system. By the time, Bootstrap was dominating CSS libraries — was it the first ever by the way? — and we owe a lot to it, thanks to Twitter’s team. However, Javascript’s frameworks dominance oriented customization on the JS side instead of CSS/SASS/LESS… chosen by Bootstrap.

## Tailwind.config.js — a file to customize your theme
In my previous article, I explained how to setup Tailwindcss.

When you init Tailwind, at the root of your project, it creates a tailwind.config.js. This file is read by Tailwind to build your final css sheet.

Tailwindcss is building all its CSS classes based on this customization file. When your file is empty, Tailwind heritates from its basic styling (colors, sizes, spacing…). Here’s a quick code snippet to show an example:

```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontSize: {}, // overwrite tailwindcss sizes for yours...
    fontFamily: {},
    fontWeight: {},
    borderRadius: {},
    extend: { // extend existing classes
      colors: {},
      spacing: {}
    },
  },
  plugins: [],
}
```
Of course when you look for customization, you may not want to use Tailwindcss basic styling. However, I always do both.

## Do you need to always customize Tailwindcss?
The answer is… no. Tailwind is providing everything you need to start developing. Its initial stylesheet is enough — and I have to admit that I use this one 80% of the time.

What I like is to have the choice. I don’t necessarely have to customize; however I always do. On top of initial Tailwindcss. Because I don’t have time to rewrite an entire CSS library. But Tailwind is giving me the opportunity to do it on top of the work already done.

## Tailwindcss vs Boostrap?
This is the strength of Tailwind — you start with a CSS stylesheet really optimized for Front-End devs. In short, you won hours of course. But you’ll tell me: exactly like Bootstrap, right?

In short: Bootstrap is providing a CSS lib. Tailwind does too. Bootstrap is providing a component lib. Tailwind doesn’t.

In my opinion: I’d say that Tailwind went further way in the developers needs in comparison to Bootstrap. We don’t necessarely refuse to write CSS; however we want to be able to use an existing library that gives us the choice to customize.

Guillaume
Any help for a new project?
Tags: python, backand, frontend, help
Published: 2022-11-27 14:20:53

Hello world!
I'm developing a project but not the best way to build it. Briefly, I wanted to know how I make the backend take user information from the front end, modify it and deliver it to the user in the form of a "print", for example
I would be extremely grateful if someone could help me ;)
Nyan Profile: A simple and extensible scaffold for building personal profile website.
Tags: nextjs, javascript, reacct, webdev
Published: 2022-11-27 14:10:52

## Nyan Profile

![Nyan Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0evri8jq2xemvh9kvzh.png)

### About

Nyan Profile is a simple and extensible scaffold for building personal profile website.

### Demo

https://memochou1993.github.io/nyan-profile/

### Repository

https://github.com/memochou1993/nyan-profile

### Features

- Static Generation with Next.js
- Styling with Tailwind CSS
- Configurable Components
  - Profile
  - Header
    - Theme Switch
  - Sidebar
  - Footer
  - About
  - Google Fonts
  - Google Analytics
  - Project List
  - Article List
- Deploying to GitHub Pages with GitHub Actions

### Getting Started

#### Automatic Setup

Create a new project by running the following command.

```bash
npm init @memochou1993/nyan-profile my-profile
```

Change directory into project.

```bash
cd my-profile
```

Start the development server.

```bash
npm run dev
```

#### Manual Setup

Clone the project.

```bash
git clone git@github.com:memochou1993/nyan-profile.git
```

Change directory into project.

```bash
cd nyan-profile
```

Initialize a new Git repository.

```bash
rm -rf .git
git init
git add .
git commit -m "Initial commit"
```

Install dependencies.

```bash
npm ci
```

Start the development server.

```bash
npm run dev
```

### Learn More

https://github.com/memochou1993/nyan-profile#readme
setting up code editors on my machine
Tags: vscode, intellij, beginners, java
Published: 2022-11-27 14:09:15

- for java
```
sdk list java // to check which java version you want
sdk install java 19-open
```
- install vscode // intellij
```
sudo snap install intellij-idea-community --classic
sudo snap install code --classic
```
vscode 
// enable File>Autosave
// add gitlens

intellij community
// add sonarlint // for java

- check and make a sample commit in a repo and push // check the push is as desired
- checkout a sample repo
setting gitconfig
Tags: github, beginners
Published: 2022-11-27 13:54:25

- setting up my github username as name
```
git config --global user.name "nameorusername"
```
- setting up my private no reply email as my email
```
git config --global user.email "youremail/noreplygithubemail"
```
- telling git to use my gpg key, present on this computer and which is already added to my github account (check part 2 of this series) and always sign by default
```
git config --global user.signingkey {{keyidinlongformat}}
git config --global commit.gpgsign true
``` 
- do a commit // check git log // check the latest commit // name and email is what you want, right?
- push on github // check commit is verified green
Dual Boot Windows and PopOs by using Systemd-Boot
Tags: linux
Published: 2022-11-27 13:52:52

This guide is for those who already have windows installed but want to get it to dual boot.

#### 1. Add Timeout 10s Upon Boot
`sudo nano /boot/efi/loader/loader.conf`

Now, you should see `default Pop_Os-current` in the current file.

Simply write `timeout 10` on the new line and press `Ctrl-O` to save and `Ctrl-x` to exit.

Try restart your computer, you should see PopOs as option to boot but no windows yet.

#### 2. Find your Windows EFI Partition
Run `lsblk`

![lsblk-command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usttlf2fn0nfjoexe952.png)

Usually Windows EFI partition size is around 100MB and it is the first partition in the drive.

The one with `/boot/efi` label is your PopOs EFI partition.

So, in the above image, my windows EFI partition is at `sda1`.

#### 3. Make Windows Boot Directory
Run `mkdir /mnt/windows_boot`

#### 4. Mount Windows Boot Directory
`sudo mount /dev/yourWindowsEFIparition /mnt/windows_boot`

#### 5. Copy Your Directory to Boot Directory
`sudo cp -r /mnt/windows_boot/EFI/Microsoft /boot/efi/EFI/Microsoft`

#### 6. Create Windows Config File
Head over to `/boot/efi/loader/entries` by using this command
`sudo su` [Enter root privileges]
`cd /boot/efi/loader/entries`

Now create windows file with `touch windows.conf`
Edit with `nano windows.conf` and write this 2 line

```
title Windows 10
efi /EFI/Microsoft/Boot/bootmgfw.efi
```
Press `Ctrl-O` to save and `Ctrl-x` to exit.

### Done!
And thats it, you should see windows 10 as option now. Congrats! Please comment down below or contact me if you need any help.
Split Shares by Mining Syndicate
Tags: webdev, crypto, bitcoin
Published: 2022-11-27 13:42:17

Mining Syndicate's Split Shares program fractionalizes a miner into 100 parts or shares so you can earn without buying the whole miner. Split shares is ACTUAL ownership of a real miner and NOT cloud mining. You will have access to the serial number and data of the miner and you will also receive complimentary access to your very own dashboard! Watch your miner work in real time!
6 Killer JavaScript One-Liners — for beginners
Tags: webdev, javascript, beginners, programming
Published: 2022-11-27 13:33:46

JavaScript is by far one of the best programming languages for web development. It is the only language that is used by almost 98% of websites. So, learning JavaScript during the journey of web development is very important for many beginners.

This article contains the most important JavaScript first-liners that every developer must know. Let’s get started.

## Shuffle Array

```
`const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);// Testing
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr));`
```

This one-liner will help you to shuffle the entire elements into an array of elements.

## Copy To Clipboard

```
`const copyToClipboard = (text) =>
  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);// Testing
copyToClipboard("Hello World!");`
```

In web apps, copy to clipboard is rising in huge popularity as it makes web development super fun and easy to use.

## Get Unique elements from an array

```
const getUnique = (arr) => [...new Set(arr)];// Testing
const arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5];
console.log(getUnique(arr));
```

With this code, you can easily get unique elements from an array using the Set Data Structure.

## Switch to Dark Mode

```
const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;// Testing
console.log(isDarkMode());
```
With this code, you can check whether the web application has the dark mode activated or not.

## Scroll To Top

```
const scrollToTop = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "start" });
```
This code will take the page scroll to the top. This is very useful when the website’s content is long and you have to scroll instantly to the top.

## Scroll to bottom

```
const scrollToBottom = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "end" });
```

Simple as scrolling to the top, but gives the reverse functionality by scrolling to the bottom.

---

That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech. You can subscribe to my free Newsletter.

Want to see what I am working on? Check out my [Personal Website]( https://piyush-webdev.netlify.app/), [Twitter](https://twitter.com/Hy_piyush), and [GitHub](https://github.com/piyushkesarwani  ).

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/piyush-kesarwani-809a30219/).
Install Lombok
Tags: lombok
Published: 2022-11-27 13:28:01

https://ozenero.com/how-to-install-lombok

What is Lombok
Lombok is a great way to have boiler-plate code, especially getters and setters generated on the fly for you. The result is a clean and pithy bean definition.
​

Download the Lombok

Download the Lombok jar from Project Lombok’s home page: ProjectLombok
Navigate (cd) to the downloaded location.
Find and Execute the Lombok Jar as follows from the command line/terminal.
An introductory view of Data Analysis
Tags: datascience, machinelearning, bigdata, sql
Published: 2022-11-27 12:00:41

What is Data analysis?
Data analysis is a process of inspecting, cleansing, transforming, and modeling data with the goal of discovering useful information, informing conclusions, and supporting decision-making.
Tools used in Data Analysis :
Auto-managed closed tools->
Qwiklabs, Tableau,Looker, Zoho Analytics
The programming language used: Python,R,Julia
Why Python for Data Analysis?
*-very simple and intuitive to learn.
-correct language
-powerful libraries

-free and open source
-Amazing community,docs, and conferences
**When to choose R language?
*- When R studio is needed
-When dealing with advanced statistical methods.
-When extreme performance is needed.
**Data analysis Process:
1:Data extraction->
SQL,Scrapping ,File format(CSV,JSON,XML),Consulting APIs,Buying Data,Distributed database
2:Data cleaning ->
• Missing values and
empty data
• Data imputation
• Incorrect types
Incorrect or invalid
values
• Outliers and non
relevant data
● Statistical sanitization

Data Wrangling->
Hierarchical Data
Handling categorical
data
Reshaping and
transforming
structures
Indexing data for
quick access
Merging,combining
and joining data
4:Analysis->
• Exploration
• Building statistical
models
• Visualization and
representations
. Correlation vs
Causation analysis
• Hypothesis testing
● Statistical analysis
• Reporting
5:Actions->
• Building Machine
Learning Models
Feature Engineering
• Moving ML into
production
• Building ETL
pipelines
• Live dashboard and
reporting
• Decision making
and real-life tests
**PYTHON ECOSYSTEM:
**The libraries we can use ...
pandas: The cornerstone of our Data Analysis job with Python
matplotlib:The foundational library for visualizations.Other libraries we'll use will be
built on top of matplotlib.
numpy:The numeric library that serves as the foundation of all calculations in Python.
seaborn:A statistical visualization tool built on top of matplotlib.
statsmodels:A library with many advanced statistical functions.
scipy:Advanced scientific computing, including functions for optimization,linear
algebra, image processing and much more.
scikit-learn:The most popular machine learning library for Python (not deep learning)
100+ JavaScript concepts, same app using 7 frameworks & CSS flex explained the right way
Tags: webdev, javascript, react, programming
Published: 2022-11-27 11:00:45

Hey there, fellow visual learner! 🙌🏾

> This is the post for the last week of November. Black friday is here and it’s a great time to buy some of those development courses that you have been eyeing for a long time. Some lifetime deals on creator tools at the end of this newsletter.

Let’s get started ⏳

![Let's get started](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yhowa9fm4dmycinzrnj.gif)

❶ **100+ JS concepts** in less than 13 minutes

The Fireship YouTube channel put out a fantastic [video](https://www.youtube.com/watch?v=lkIFF4maKMU) explaining 100+ JavaScript concepts. How many of these concepts do you have a grip on?

❷ Learn **CSS Flex** interactively

Josh Comeau released this excellent interactive CSS Flex tutorial on his [blog](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox). You can actually play around with the controls to tweak the flex parameters. Have fun!

❸ **Compare 7 frameworks** by building the same app

Builder.io published an [article](https://www.builder.io/blog/movies-app-in-7-frameworks-which-is-fastest-and-why) (extending some original work by Dan Shappir) where they compared the performance of 7 frameworks by building the same app. They test out React, Vue, Angular, Preact, and Svelte and compare them with Qwik's performance.

🐥 **FREE web development** courses

In this week’s Twitter thread, we have Madza sharing some courses you could take to level up your web development. Click on the tweet below to check out the full thread. 👇🏾

{% twitter https://twitter.com/madzadev/status/1594709712267640832 %}

🎁 Extra:

As this is the Black Friday/Cyber Monday weekend, here are some lifetime deals on creator tools that you might like:

① An **AI image** generator [tool](https://appsumo.8odi.net/ZdOGa1) (similar to DALL-E).

② A **social media scheduler** [tool](https://appsumo.8odi.net/0JW6qV) (similar to Buffer, Feedhive)

③ An **AI-based writer** [tool](https://appsumo.8odi.net/WDne5M) for generating blog articles, product descriptions, and more.

That's it for today's edition. See you in the next one.

Cheers! 🙌🏾
Why do you prefer using a scripting language?
Tags: javascript, python, perl, php
Published: 2022-11-27 10:46:57

Scripting languages have seen tremendous growth in recent years. CodingNomads ran some stats on job postings on Linkedin (see cover image) and found that from the top-10 programming languages in highest demand in 2022, six of them are scripting languages.

Why do ***you*** choose to program in a scripting language rather than in a real programming language? 

Please tell us your reasons.

To help you get started, here are some ready-made options:

- It is easier to learn.
- It is easier to be productive.
- It gives fewer errors.
- I do not want to have to wait for it to compile.
- It does not require an IDE, I can just use a text editor.
- I do not need type safety, because I do testing.
- There exist lots of libraries for it.
- I can modify my program as it is running.
- It is the only option on the browser.
- It is easy to find a job doing it.
- I have not learned any real programming language.
Spring Security JWT Authentication example – RestAPIs SpringBoot + Spring MVC + Spring JPA + MySQL
Tags: spring, security, jwt, jpa
Published: 2022-11-27 10:04:19

https://ozenero.com/spring-security-jwt-authentication-restapis-springboot-spring-mvc-spring-security-spring-jpa-mysql

Spring Security JWT Authentication architecture
This is diagram for Spring Security/JWT classes that are separated into 3 layers:
– HTTP
– Spring Security
– REST API

Related:

https://ozenero.com/angular-spring-boot-jwt-authentication-example-angular-6-spring-security-mysql-full-stack-part-2-build-backend
MicroService iCommerce APIs – MVP (SpringBoot + Java 11)
Tags: java, springboot, restapi, icommerce
Published: 2022-11-27 10:02:15

https://ozenero.com/microservice-icommerce-apis-design-springboot-java-11

API Details
We have 2 main groups of APIs:
– Authentication-API: Sign-in/Sign-Up APIs
– Functional APIs: Filter Products API / Card-Items APIs
Others API:
– Initial Data API for Demo
– ElasticSearch API for retrieve data

https://ozenero.com/wp-content/uploads/2022/08/Screenshot-2022-08-14-at-14.38.13.png
best free video editing software
Tags: webdev, javascript, beginners, socialmedia
Published: 2022-11-27 09:17:52

Its a well known fact that incredible video altering programming can assist you with creating proficient grade recordings for stages like Instagram, TikTok, Vimeo, or YouTube.

Assuming that you're a substance advertiser you'll realize that very much created item recordings are a more captivating type of media than photos alone and can diminish a client's faltering in making a buy.

Underneath, we've incorporated a rundown of the best free video altering programming from around the web, as well as a couple with reasonable paid renditions. Each videographer has their own particular necessities, so we've run down probably the most helpful highlights as well as advantages and disadvantages of each device.
best free video editing software

HitFilm Express
Lightworks
iMovie
VideoPad
DaVinci Resolve
VSDC Free Video Editor
OpenShot
Shotcut
Windows Video Editor
Vimeo Create
KineMaster
Movie Maker Online
Check out how to creat Eye-catching videos in three simple steps and sell those videos for profit to know more click the link below to fined out how you can make money selling your videos to big companies 
https://bit.ly/3Vd8QuF
Next.js Boilerplate
Tags: showdev, opensource, nextjs, jamstack
Published: 2022-11-27 09:07:24

Introducing **Kaminari**, a Next.js and TailwindCSS boilerplate that gets you up to speed with new projects. No need to go through all the setups and configurations. 

It is configured with:

- Next.js 13 (with the new `app` directory 🤯)
- TailwindCSS 3 ✨
- TypeScript 👍
- Prettier 🦋
- Eslint 👌
- Commitlint 🔗
- LintStaged ➡️
- Husky 🐶
- Seo 🌐
 
This is a work in progress and I'd like to get feedback from the community. Please do well star and spread the word. Thanks ✨✅

[GitHub Repo](https://github.com/lucky-chap/kaminari)
[Live Demo](https://kaminari.vercel.app)
GPG keys to display your commits with green tick!
Tags: github, beginners
Published: 2022-11-27 08:01:32

Ref : https://docs.github.com/en/authentication/managing-commit-signature-verification

Managing commit signature verification
GitHub will verify GPG, SSH, or S/MIME signatures so other people will know that your commits come from a trusted source. GitHub will automatically sign commits you make using the GitHub web interface.


considering setup is from scratch
- $ gpg --full-generate-key
- 4096 length // 0 for no expiry // some passphrase    
- add your github account email only // use the no reply email if you are keeping email private
- once generated, test if key is present // gpg --list-secret-keys --keyid-format=long
- get the actual key using key id (from the above listing)
// gpg --armor --export thekeyid(look for sec rsa4096/{id})
- Copy your GPG key, beginning with -----BEGIN PGP PUBLIC KEY BLOCK----- and ending with -----END PGP PUBLIC KEY BLOCK-----.
- add to github>settings>access>GPG key
- tell git on local machine to sign commits using the gpg key created above // follow in 3rd part of this series i.e. next article