teleren/devto huggingface dataset:
I created a minimal, responsive, open-source developer portfolio template with React!
Tags: webdev, react, showdev, opensource
Published: 2022-07-03 03:19:58


![screenshot of portfolio template live site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hysu4hk0zqwjmgfomal7.png)

Hey there! 👋🏻 I recently updated and published a template that I built for developers to use for their portfolios! I based it on my personal portfolio, which got enough compliments on the design that I figured I should share it ☺
- fully responsive
- includes dark-mode toggle
- clean, minimal design
- fun "terminal" effect on About page

[Github Repo](https://github.com/paytonjewell/ReactPortfolioTemplate) | [Live Demo](https://reactportfoliotemplate.paytonpierce.dev/) | [Live Implementation](https://paytonpierce.dev/)

All of the instructions for installation and use are included in the README file of the repo. Most of the personalization is just editing a single file, and switching out some image files! If you use it, let me know, I would love to see some fun new implementations of it 💜
23K Backlink SEO Web/Blog Youtube DA PA Moz 80+
Tags: teknologi, komputer, pemrograman, jaringan
Published: 2022-07-21 21:31:02

---
title: 23K Backlink SEO Web/Blog   Youtube DA PA Moz 80+
published: true
date: 2022-07-03 03:15:33 UTC
tags: Teknologi,Komputer,Pemrograman,Jaringan
canonical_url: https://mycoding.id/item/125/23k-backlink-seo-webblog-youtube-da-pa-moz-80
---

Backlink Dofollow Permanen Index DA PA 80+ berdasarkan MOZ. Proses pembuatan backlink atribut dofollow dari Domain authority dan Page authority diatas 80. Backlink SEO redirect untuk website, blog, dan backlink youtube... Selengkapnya https://mycoding.id/item/125/23k-backlink-seo-webblog-youtube-da-pa-moz-80 23K Backlink SEO Web/Blog Youtube DA PA Moz 80+ - by MC Project - Produk Digital dan Jasa Freelance
Only using the iPad as my main machine, here's a review of software development experience
Tags: ipad, webdev, programming, cloud
Published: 2022-07-03 03:14:02

# Motivation 

I’ve been using the iPad exclusively as my main computing machine since June 2022. (This post is, of course, written on my iPad.)

Before then, I relied heavily on a Macbook Pro 13-inch at my previous office and didn’t have my home computer for the last two years after I gave my one to my friend’s son who aspired to study online.

I do serious software development with Python, Typescript, Kotlin, Golang, and Rust. And thus, I was wondering if I could do serious web development with the iPad.

After a quick online research, I found that even programming seems possible on the iPad with its keyboard as well as well-known touch-screen creative activities. So, I bought and tried using the iPad for light development and learning experience.

## Spec Details
- 11-inch iPad Pro Wi-Fi 128G
- Magic Keyboard (Not Smart keyboard)

The 13-inch screen was a bit too heavy to carry, and Smart Keyboard was too thin for a heavy typing workload. 

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

## What happened in the first month? 

1st week: programming seems impossible!! Just watch  Youtube!
2nd week: a code fix is possible, but serious devevelopment is not.
3rd week: entire software development works with cloud IDEs and cloud services! AWS, GCP, Gitpot! 

### Pros

- Stateless! No dependency and data are left in the local computer!
- It is so lightweight that I can be anywhere with it! I flew to a couple of vacation places and enjoyed coding at hotels and cafes.
- The touch screen is terrific when I want subtle and interactive maneuvers. For instance, I showed my journey map to my friends.
 
### Cons
Need to know alternative tricks to local machine development.
- No terminal (use virtual machine such as ec2 and gce)
- No local Git (use cloud machine or Working Copy)
- Limited local IDEs (Gitpod, Stackblitz, Code Server)

## Overall
- Coding is definitely possible
- Serious software development is limited due to the heavy reliance on cloud IDEs and cloud services. You need to bear with its inconvenience in exchange for lightweight device benefits.
- This setup is not recommended for beginners. It is better to learn computer basics with standard computers. 

## Cloud IDE articles

[A guide to writing code on an iPad](https://coder.com/blog/a-guide-to-writing-code-on-an-ipad)
[We tried 10 online code editors](https://www.partech.nl/nl/publicaties/2020/05/we-tried-10-online-code-editors#)
6 tips for refactoring code
Tags: refactorit, programming, codequality, codenewbie
Published: 2022-07-03 03:11:54

### ⁣⁣What is code refactoring?
Refactoring is the process of **restructuring existing code** (changing the factoring) without changing its external behavior.

**_Here are 6 tips for refactoring code:_**

### Tip 1: Remove duplication
Follow the D.R.Y. principle and **Don’t Repeat Yourself**.
— If you see code, functions, and/or logic being repeated, rewrite the code to remove the duplication.

### Tip 2: Improve responsibility
Follow the **Single Responsibility Principle**. Variables/classes/functions should have a single responsibility and thus only a single reason to change. Ensure a separation of concerns by having separating things into sections that handle a certain ‘concern’.
— avoid coupling of different logical entities

### Tip 3: Remove unneeded code and over-complexity
— Remove anything that is unneeded to simplify the code and reduce confusion or “why is this here?”
— **Y.A.G.N.I “You aren’t gonna need it”**: avoid trying to cover every possible extra case and future scenario if the likelihood is low or very unknown

### Tip 4: Be consistent and follow standards
Sometimes it’s better to **stay consistent** with the current project, even if there might be a better way.
— Follow standards where you can to make your code more predictable to others

### Tip 5: Adopt a design pattern when needed
A **design pattern** is a general, reusable solution to a commonly occurring problem in software design.
— Always keep things simple first; only adopt a design pattern when the code begins to show it

### Tip 6: Pull-up Push-down
Determine if methods, objects, and/or logic need to **be consolidated** at a ‘higher’ level, or need to be **pushed down** to a ‘lower’ one
— in the case that logic is duplicated in two places, pull up toe a higher level
— in the case that logic is shared between multiple places, but only utilized in one; push down to the one that uses it

⁉️ What tips so you have for refactoring code?
React, AntD and Tailwind: fix CSS conflicts
Tags: tailwindcss, antd, react, uikit
Published: 2022-07-03 02:15:26

---
title: React, AntD and Tailwind: fix CSS conflicts
published: true
description: 
tags: tailwind, antd, react, uikit
cover_image: https://res.cloudinary.com/my-notes-demo/image/upload/v1656814290/tutorial-content/dev.to/2022-07-antd-tailwind-conflicts/carbon.png
# Use a ratio of 100:42 for best results.
---

If you're using React, [Tailwind](https://tailwindcss.com/) and [Ant Design](https://ant.design) (and probably most of the others UIKIT available in the market) you may encounter some CSS conflicts.

For example, the AntD `Modal` component shows the "OK" and "Cancel" buttons by default in its footer:


```ts
 <Modal title="Add city" onOk={} onCancel={} />
```

As you can see in the screenshot below, the OK button is not displayed as it should (I mean it should be _blue_):

![AntD and Tailwind conflict](https://res.cloudinary.com/my-notes-demo/image/upload/v1656813412/tutorial-content/dev.to/2022-07-antd-tailwind-conflicts/2022-07-03_03-55-26.png)


In fact Tailwind applies a transparent background color, while AntD should apply a blue background:

![](https://res.cloudinary.com/my-notes-demo/image/upload/v1656813786/tutorial-content/dev.to/2022-07-antd-tailwind-conflicts/2022-07-03_04-02-21.png)

To solve the issue we can disable Tailwind [Preflight](https://tailwindcss.com/docs/preflight), a set of base styles that are designed to smooth over cross-browser inconsistencies.

```ts
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    // ...
  ],
  corePlugins: {
    preflight: false // <== disable this!
  },
}
```

And the problem is magically solved:

![fix](https://res.cloudinary.com/my-notes-demo/image/upload/v1656814066/tutorial-content/dev.to/2022-07-antd-tailwind-conflicts/2022-07-03_04-07-28.png)
Relocation: yes or no?
Tags: career, discuss, beginners
Published: 2022-07-03 02:07:38

As the younger generation of developers are now graduates and looking for their full-time jobs, the question of relocation is coming up in conversation quite a bit. Where are you willing to relocate to, if it's even a possibility you leave on the table? Maybe you are set on staying in your hometown and that's perfectly fine. But what are the job limitations in doing so? Are there limitations since you're refining your job search to only one area?

What goes through your head as you search for a new job? We all look for job security, great benefits, the company's culture possibly, etc. But what about where it's located, the weather during the four seasons. Maybe you hate the snow but get a job offer where you will barely see the sun throughout the year and have to shovel snow for the first time in your life! What then?

Let me know what you would do as I venture on to find somewhere to relocate to.

Happy coding!
The difference between CSR, SSR and SSG
Tags: nextjs, ssr, ssg, react
Published: 2022-07-03 01:13:32


[Click here for the Japanese article](https://zenn.dev/takuyakikuchi/articles/2f7e54bdafce52)

# Difference between CSR, SSR, and SSG
## CSR
Client-side rendering.<br />
** A method of executing JavaScript on the browser to generate the DOM and display the content after it is mounted. **<br />
Initial loading of the page does not display any content, it will be displayed after hydration.<br />
React applications created with Create React App are rendered this way.

![no-pre-rendering.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnu2jsyjckb16abmh09a.png)
(Image source: https://nextjs.org/learn/basics/data-fetching/pre-rendering)

## SSR
Server-side rendering.<br />
A method of evaluating and executing components on the server side and delivering the results in HTML and minimal JavaScript.<br />
**Each time a request is made to the server, the HTML is processed and generated on the server side. **<br />
Nuxt.js, Next.js, etc. are rendered this way.<br />
The content is displayed from the initial load, and then becomes interactive by Hydration. (e.g., `<Link />` makes it jumpable)<br />
It is considered better performance and SEO friendly than CSR.


![pre-rendering.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v09mp8ty25pen0xpqe9z.png)
(Image source: https://nextjs.org/learn/basics/data-fetching/pre-rendering)


![server-side-rendering.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4pcp088wm6246n59v1f.png)
(Image source: https://nextjs.org/learn/basics/data-fetching/two-forms)

## SSG
Server-side generator.<br />
Like SSR, HTML is generated on the server side first.<br />
The difference between SSG and SSR is that **HTML is generated at build time, and content is delivered from the CDN each time a request is made. **<br />
This is used for static pages such as blogs, help sites, and e-commerce product lists.
Better performance than SSR because HTML is generated at build time.


![static-generation.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8iamhiwt6egsgqwlrrl7.png)
(Image source: https://nextjs.org/learn/basics/data-fetching/two-forms)

# Regarding the difference in use.

**"Is it ok to pre-render a page prior to the user's request?" **<br />
If yes, use SSG.<br />
If no, use SSR or CSR.<br />
Next.js can set SSG or SSR for each page.

# References
- [Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js](https://nextjs.org/learn/basics/data-fetching/pre-rendering)
- [Two Forms of Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js](https://nextjs.org/learn/basics/data-fetching/two-forms)
- (Japanese article) [SSR、SSG、Client Side Renderingの違いをまとめた - Qiita](https://qiita.com/akashixi/items/84cd79e090a283bb8c67)
[Solved]: Eclipse JUnit Error: Class not found java. java.lang.ClassNotFoundException...
Published: 2022-07-03 00:53:19


### Problem:

Running into the following error when trying to run some `Junit` tests via `Run As -> JUnit Test` on Eclipse Enterprise Edition.

```
Class not found com.codinginformer.test.SeleniumTest
java.lang.ClassNotFoundException: com.codinginformer.test.SeleniumTest
	at java.net.URLClassLoader.findClass(URLClassLoader.java:382)
	at java.lang.ClassLoader.loadClass(ClassLoader.java:418)
	at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:355)
	at java.lang.ClassLoader.loadClass(ClassLoader.java:351)
	at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.loadClass(RemoteTestRunner.java:766)
	at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.loadClasses(RemoteTestRunner.java:490)
	at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.runTests(RemoteTestRunner.java:513)
	at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.runTests(RemoteTestRunner.java:756)
	at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.run(RemoteTestRunner.java:452)
	at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.main(RemoteTestRunner.java:210)
```

### Solution:

This error could be due to not activating seperate output folders for each folder in your build path.

Try this potential solution and see if it works:

1. Right click on your project -> Select `Properties` -> Select `Java Build Path` -> Select the `Sources` tab
2. If you don't see the `Output folder` option in the dropdown list below your build folder make sure to enable the checkbox `Allow output folder for source folders`. Then double click `Output folder`
3. In the following modal select `Specific output folder`. Then, enter the following output path for the enabled field: `target/classes`. Note: The specific output path name doesn't matter as much as you defining an explicit output path instead of using the default output path
4. Select `Ok` -> `Apply and Close`. Finally Run the JUnit tests via `Run As -> JUnit Test`

## Conclusion

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you when I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter](https://twitter.com/SeanAtukorala) and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).
The Magic of a Todo List
Tags: productivity
Published: 2022-07-03 00:36:54

TLDR
Planning takes extra time, but it also helps you get the job done faster overall.

It seems to be true in any industry, not just Tech. I myself have learned it long before switching to software development -- it was a part of my academic writing course as a political science student. These were my takeaways from it:

1. A study has been conducted among students and the resulting data backed the theory that planned work is faster overall.
1. The process of how to actually do the planning academic writing looks pretty much to something we all do -- identify the scope and break them down to smaller tasks.

But to me planning also has a magical 🧙‍♂️ effect -- it makes things doable despite seeming too hard or tedious in the beginning. Time and again have I caught myself on the thought that I would never get done with learning some framework or completing a personal project if I hadn't added it to my todo list. It's just magic, I cant explain how it works exactly, but it does for me.

So just go ahead and try it for yourself -- pick a todo list software, break down a goal you have into a checklist and see if that works for you as well.

_P.S. I myself keep my tasks and projects in [Google Keep](https://keep.google.com), while all learning objectives are tracked in [Zealoq](https://zealoq.com)._
Underestimated PHP
Tags: php, webdev, laravel, symfony
Published: 2022-07-02 23:50:04

After browsing Reddit and Twitter I`ve noticed that the majority of developers underestimate PHP as a language. 

As with any programming language or technology, PHP comes to us with its pros and cons, however, it doesn't change the fact that PHP is widely used. 

PHP was changing over the years, but the last year provided a new breath to the language, seeing such effort from different people, I highly disagree with the opinion that "PHP is dying".

Just a recent finding shows that with each release, PHP as a language involves and brings new features to the community. 
With combination with such great tools as: 
1. [Static analysis](https://github.com/phpstan/phpstan) or [Laravel-lovers](https://github.com/nunomaduro/larastan)
2. [Coding Standards Fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer)
3. [Mess detector](https://github.com/phpmd/phpmd)
4. [Analysis violations of a defined coding standard](https://github.com/squizlabs/PHP_CodeSniffer)


Some of the references:
https://github.com/php/web-php/pull/602 - redesign the PHP home page, to make it look more up-to-date with UI/UX trends. 
https://wiki.php.net/rfc/auto-capture-closure - Short Closures 2.0
https://thephp.foundation/blog/2022/06/30/php-core-roundup-3/ - Detailed report on progress from PHP-foundation collective

If you find have such post interesting, please share it with me.
Make Github Copilot Work in Wsl With Zscaler
Tags: githubcopilot, zscaler, wsl
Published: 2022-07-02 23:45:09

---
title: Make Github Copilot Work in Wsl With Zscaler
published: true
description: 
tags: copilot, zscaler, wsl
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
--- 

TLDR: replace every occurence of `rejectUnauthorized: x` to `rejectUnauthorized: false` in `~/.vscode-server/extensions/github.copilot-xxx/dist/extension.js` and restart vscode

There is an ongoing issue with copilot in vscode in that it doesn't pick up the system chain of certificates and instead uses a [hardcoded list](https://github.com/nodejs/node/issues/4175) of certificates. This causes problems with zscaler and similar man in the middle apps that causes it to fail to activate because it doesn't trust the certificate and gives the error `Extension activation failed: "unable to get local issuer certificate"`.

There are several ways to fix this proposed on the internet:

- use [win-ca](https://github.com/ukoloff/win-ca) or [mac-ca](https://github.com/jfromaniello/mac-ca) vscode extension to make available the additional certificates
- add zscaler self-signed certificate in Chrome by going to `chrome://settings/privacy` [more](https://stackoverflow.com/a/60476625)
- run `code --ignore-certificate-errors`

The only way that worked for me though and unfortunately the most hacky is to change in the extension bundle `rejectUnauthorized` to `false`

- open `~/.vscode-server/extensions/github.copilot-xxx/dist/extension.js`
- search every occurrence of `rejectUnauthorized:[a-z]` regex find and change to `rejectUnauthorized: false`
- Important!! In some cases `rejectUnauthorized` will be as part of an destructured object. For example when having

```js
const {
  h1: r,
  options: { h1: i, rejectUnauthorized: s },
} = e;
```

change it to

```js
const {
  h1: r,
  options: { h1: i, rejectUnauthorized: s },
} = { ...e, options: { ...e.options, rejectUnauthorized: false } };
```

- restart vscode

Based on https://github.com/github-community/community/discussions/8866 and https://stackoverflow.com/questions/36506539/how-do-i-get-visual-studio-code-to-trust-our-self-signed-proxy-certificate
How to shrink the EBS Volume
Published: 2022-07-02 22:54:54

**## TL;DR**

1. Stop the target  EC2 instance (Target machine is Windows server 2019)
2. Snapshot the root EBS volume.
3. Create a brand new EBS volume and make sure it is at the same AZ. 
4. Detach the source volume from the EC2 and attach it as non-root volume to the worker EC2 below
5. Launch a new EC2 worker instance in the same availability zone as the target instance. Here I launched  a small Amazon Linux 2 box to do this demo

 

## **Main steps**

Fetch the epel to install ntfsprogs

`amazon-linux-extras install epel -y`

`yum install ntfsprogs`
 

 
List the attached volume

`fdisk -l`
Note down the target volume device name

source volume - /dev/xvdf (The original volume)

target volume - /dev/xvdg (The smaller size of the EBS volume)

 

Dump current source disk partition info to a file

`sfdisk -d /dev/xvdf > xvdf.info`


Find out the minimum size the filesystem can be reduced to

`ntfsresize --info /dev/xvdf
`
`ntfsresize --info /dev/xvdf1
`

Resize the filesystem to the suggested number. Enter ‘y’ when prompted to proceed.

In this example it is 30Gb
`ntfsresize -s 30000M /dev/xvdf
`


Install pv, which is a tool for monitoring the progress of data through a pipeline.

`yum install pv
`

Find out the total MB we need to copy from the source disk to the new smaller disk. Here we need to cover the reserved sectors (2048 sectors, or 1MB, from step 6 above) at the front of the disk, to the end of the filesystem.

`echo $((30000*2048))`

alway + 1 of the total of your drive

Block copy from xvdf to xvdg, with 1MB block size and total count
`dd bs=1M if=/dev/xvdf count=30001 | pv -s 30001m | dd of=/dev/xvdg bs=1M
`


Dump the new target disk xvdg partition info to a file. Edit the file by updating the xvdg1 size to the new size in sector

`sfdisk -d /dev/xvdg > sfdisk-d.xvdg
`

Detach the xvdg and attach it as root back to the original instance

Wait for few mins and check!
Paracetamol.js💊| #160: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-07-02 22:53:44

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
console.log({...undefined})
console.log({...null})
console.log({...NaN})
```

A. `{}, {}, SyntaxisError`
B. `SyntaxisError, SyntaxisError, SyntaxisError`
C. `{0:"u", 1:"n", 2:"d", 3:"e", 4:"f", 5:"i", 6:"n", 7:"e", 8: "d"}, {0: "n", 1:"u", "l", "l"}, {0:"N", 1:"a", 2:"N"}`
D. `{}, {}, {}`

Respuesta en el primer comentario.

---
Trying to find new os <non win,lin,app,ect.> c based.
Tags: step, blame, cc, c
Published: 2022-07-02 22:37:51


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eikm0ypu8t7wa7fnc1t3.jpg)**WTB** 
Looking for c based OS c++ c and non win,lin,app that can be booted through USB stick

Please email or whatever you can, will buy .... need to run basic// internet yt [(<e]x)t>ra command prompt/equivalent 

..

![corvax](https://c.tenor.com/pKXqom144e8AAAAM/clever-muzzy.gif)

Hostile kidz
Day 85: Tomorrow will be a long one
Published: 2022-07-02 22:08:20

Hi!
So today was a typical Saturday and I didn't do much just walking around and watching videos on YouTube until the Night where I actually tried to continue on the unfinished task and was bombarded with bugs and I'm too tired to be debugging so everything is pushed down for tomorrow (yeah! classic procrastination 😀) but I think it can be done it will just require more effort but I will see what I can do about it 
I think during the past two days I was able to relax a bit so I think I will be able to start flesh on Monday 
see you tomorrow!
Signing off...