teleren/devto huggingface dataset:
Responsive Landing Page Design using HTML CSS & JAVASCRIPT | Responsive FIFA Website
Tags: webdev, javascript, html, css
Published: 2022-12-04 06:31:44

{% youtube O-J1oVwLGeA %}

**You can learn how to create a responsive landing page design using HTML CSS & JAVASCIPT in this tutorial.**


HI 👋
I'm Daily Web Design
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇


📺 My Channel : https://www.youtube.com/@dailywebdesign
🔔 Subscribe: https://www.youtube.com/@dailywebdesign


🔗 Essential links
-----------------------------
✅ How TO Learn to Code: https://youtube.com/playlist?list=PLP1xU0duo6-jA8B-UCe-Cv5Vn0H-37CLZ
✅ CSS Project : https://youtube.com/playlist?list=PLP1xU0duo6-gSt54DxihbSzvxhISEbgJd
✅ JavaScript Project : https://youtube.com/playlist?list=PLP1xU0duo6-gFYT8Cn-8nJFklS4TkM8j2
✅ Completely Responsive Web Design : https://youtube.com/playlist?list=PLP1xU0duo6-jhNWX9geGXak3I_I22PL6C


⏱️ Timestamps
-----------------------------
10:42 CSS clip-path maker
11:57 Responsive


💜 Like & Subscribe
-----------------------------
  @dailywebdesign  


⚠️ Disclaimer
-----------------------------
video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
How To Create A Responsive Anime Website | How To Make Anime Website
Tags: webdev, javascript, html, css
Published: 2022-12-04 06:26:31

{% youtube 1CWw4SgcGbw  %}

**How To Create A Responsive Anime Website | How To Make Anime Website anime website | 
anime website source code**


HI 👋
I'm Daily Web Design
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇


📺 My Channel : https://www.youtube.com/@dailywebdesign
🔔 Subscribe: https://www.youtube.com/@dailywebdesign


🔗 Essential links
-----------------------------
✅ How TO Learn to Code: https://youtube.com/playlist?list=PLP1xU0duo6-jA8B-UCe-Cv5Vn0H-37CLZ
✅ CSS Project : https://youtube.com/playlist?list=PLP1xU0duo6-gSt54DxihbSzvxhISEbgJd
✅ JavaScript Project : https://youtube.com/playlist?list=PLP1xU0duo6-gFYT8Cn-8nJFklS4TkM8j2
✅ Completely Responsive Web Design : https://youtube.com/playlist?list=PLP1xU0duo6-jhNWX9geGXak3I_I22PL6C


⏱️ Timestamps
-----------------------------
0:00 How To Create A Responsive Anime Website
1:24  header html css responsive
18:59  home page in html css
24:30  anime html css
29:05  action section
32:05  child section
33:39  family section
36:00  copyright footer html css
38:00  download css
39:00  video header html css
40:00  about us page in html and css responsive
42:36  screenshot 


💜 Like & Subscribe
-----------------------------
  @dailywebdesign   


⚠️ Disclaimer
-----------------------------
video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
I Created My Own Portfolio Using Nextjs
Tags: showdev, portfolio, nextjs, javascript
Published: 2022-12-04 06:23:00

## Introduction

Hello! 👋 I started working on my own portfolio site so I thought I'd show you what I have created so far.

There are still some parts missing, such as the contact form not doing anything yet, but I'm planning on implementing it soon. 🥲

Also I don't have much experience with front end development yet so if you have any advice I would really appreciate it. 👀

I also decided to keep it simple as I don't really like flashy animations etc. 😅

---

## Index Page

The first page is obviously the index page:

![Index](https://i.ibb.co/HtjpzNz/index.png)

Pretty basic I know, I'm probably going to change the "Portfolio" bit into an icon, I also have my instagram/github profile in the navigation bar. 👀

---

## Experience Page

The next page is my experience page:

![Experience](https://i.ibb.co/mSbDkGN/experience.png)

This page basically lists my work experience, the majority of my work is with Japanese companies. I also sometimes do a little bit of freelancing on the side.

I'm thinking of changing the list into cards. 😸

---

## About Page

The about page contains simple information about me:

![About](https://i.ibb.co/zHVjQXw/about.png)

I still need to change the avatar but it's basically a simple card layout. The background image was taken during my travels around Japan.

---

## Contact Page

Finally the contact page:

![Contact](https://i.ibb.co/8s8PVhk/contact.png)

This is probably my favorite page as I love the color scheme. ☺️
However I still haven't implemented the logic for sending so that will be my next biggest priority.

---

## Conclusion

Here I have showcased my own portfolio site. I think every developer should create their own portfolio site as it's an amazing learning experience. 😎

I know using nextjs for something simple like this is a bit overkill, but I'm currently learning nextjs and tailwind so it was a great learning experience. 

I'm thinking of supporting multiple languages once I implement the contact form.

Also if you have any advice etc. Please let me know. 🤗

The source for this project can be found at:
https://github.com/ethand91/next-portfolio

The site is live at https://ethan-dev.com, you can view it just don't try to use the contact form. 😂

For hosting I use a service called netlify, I strongly recommend it they even provide free SSL.

If you already have your own portfolio site, let me know and I'll give it a view. 👀

Happy Coding! 💪

---

Like me work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee. 

[![“Buy Me A Coffee”](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/ethand9999)
2256. Leetcode Solution in cpp
Published: 2022-12-04 06:15:02

```
class Solution {
public:
    int minimumAverageDifference(vector<int>& nums) {
         long long total_sum = 0;
         for(int  ele : nums) {
             total_sum = total_sum + (long long) (ele);
         }
         
         long long ans = LLONG_MAX;
         long long j = 0;
         long long cur_sum = 0;
         for(int i = 0; i < nums.size(); i++){
             cur_sum = cur_sum + (long long) nums[i];
             long long left = 0, right = 0;
              left = (cur_sum) / (i + 1);
             if(i < nums.size() - 1)
             right = (total_sum - cur_s#um) / (nums.size() - i - 1);
             int diff = abs(left - right);
             if(diff < ans) {
                 ans = diff;
                 j = i;
             }
         }
        return j;
         
    }
};
```
#leetcode
#challenge
Here is the link for the Problem:
https://leetcode.com/problems/minimum-average-difference/
Submit button outside the form
Tags: html, webdev, beginners
Published: 2022-12-04 06:13:01

The other day I had quite a weird scenario where we had a form inside a specific section, but the submit button was at the bottom.

At first, I tried to re-configure the HTML so that the button would be part of the form element. However, that quickly became an HTML soup.

So I decided to research other options and learned (after many years of being a developer) that you can place submit buttons outside a form!

Let's take a look at that.

## Submit button outside a form

To achieve this, we should use the following markup.

```html
<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />
</form>

<button type="submit" form="newsletterForm">Submit!</button>
```

As you can see, the button is not part of the form, yet this will work.

This is because we used the `form` attribute on our button. In it, we define which form this button belongs to.

You can also try it out in [this CodePen](https://codepen.io/rebelchris/pen/MWXGoGj).

> Note: You will see a "Not Found" page, as our form doesn't go anywhere.

### 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)
Building multi-release jars (easily) with Gradle and Maven
Published: 2022-12-04 05:41:51

# Gradle
Use Cédric Champeau's [mrjar plugin](https://github.com/melix/mrjar-gradle-plugin)
```kotlin
plugins {
    id("me.champeau.mrjar") version "0.1.1"
}
```
```kotlin
multiRelease {
    targetVersions(8, 9)
}
```
See https://melix.github.io/mrjar-gradle-plugin/0.1/index.html for more details.

# Maven
Use at least maven-compiler-plugin 3.7.1 which adds [multiReleaseOutput](https://maven.apache.org/plugins/maven-compiler-plugin/compile-mojo.html#multiReleaseOutput)
```xml
<configuration> 
    <release>9</release> 
    <compileSourceRoots> 
        <compileSourceRoot>${project.basedir}/src/main/java9</compileSourceRoot> 
    </compileSourceRoots> 
    <multiReleaseOutput>true</multiReleaseOutput>
</configuration>
```
Then set `Multi-Release: true` in the maven-jar-plugin
```xml
<configuration>
    <archive>
        <manifestEntries>
            <Multi-Release>true</Multi-Release>
        </manifestEntries>
    </archive>
</configuration>
```

# How to add a `module-info.java`
todo
[JS]forではなくmapを使う
Tags: javascript, map, for, 佐渡
Published: 2022-12-04 05:23:01

## ドキュメント
[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
## `for`と`map`コード例
`cartItems`に商品の税込み価格(`includeTax`)を追加する.
- `before`
```js
const cartItems = [
  {
   name: '掃除機',
   price: 10000
  },
  {
    name: '電子レンジ',
    price: 8000
  },
  {
    name: '冷蔵庫',
    price: 30000
  }
]
```
- `after` 税込価格である`includeTax`を追加する
```js
const cartItems = [
  {
   name: '掃除機',
   price: 10000,
   includeTax: 11000
  },
  {
    name: '電子レンジ',
    price: 8000,
    includeTax: 8800
  },
  {
    name: '冷蔵庫',
    price: 30000,
    includeTax: 33000
  }
]
```
## `for`と`map`比較
- `for`
```js
const cartItems = [...] // 長いので省略
for(let index = 0; index < cartItems.length; index++){
  const taxRate = 10  
  const tax = cartItems[index].price * (taxRate/100)
  cartItems[index].includeTax = cartItems[index].price + tax
}
```
- `for`のイケてない点

`for`では、下記のように`index`を指定する必要があります.
助長になりますし、可読性も良いとは思えません.
```js
const tax = cartItems[index].price * (taxRate/100)
cartItems[index].includeTax = cartItems[index].price + tax
```

- `map`
```js
const cartItems = [...] // 長いので省略
cartItems.map((item)=>{
  const taxRate = 10
  const tax = item.price * (taxRate/100)
  return item.includeTax = item.price + tax
})
```
- `for`と比べてイケている点

それに比べて`map`はどうでしょうか？
`map`では下記のように複数の要素を順番に取り出します.
```js
cartItems.map((item)=>{...}
```
順番に取り出したオブジェクトは`item`という変数に渡され下記のように各パラメーターにアクセスできます.※名前は自由に決められます.
`for`のように`index`を指定する必要はありません.
```js
const tax = item.price * (taxRate/100)
item.includeTax = item.price + tax
```
可読性も`for`よりかなりよいかと個人的には感じます.
ケースバイケースですが、積極的に`map`を使っていきましょう！
## 最後に
2022年4月から新潟県佐渡島でwebエンジニアとして働いています！
普段は、幹事が得するグルメ予約サイト[リザくる](https://rizakuru.com/)の開発しています！
お店によりますが還元される金額の単位は`万〜`です!
開発や、個人学習していくなかで「おっ」と思ったことを記事として発信しています.
Deploy a smart contract to an arbitrary address
Tags: smartcontracts, blockchain, devops, foundry
Published: 2022-12-04 05:00:56

This is one of the beauties of foundry framework, the ability to deploy a smart contract on any address. web3 developers gain alot from this because it aids you in experimenting with address with smart contract without having to go through hassle of getting an address deployed on the testnet or mainnet with code.

getCode

Signature

```
function getCode(string calldata) external returns (bytes memory);

```
Description

Returns the creation bytecode for a contract in the project given the path to the contract.

```
The calldata parameter can either be in the form ContractFile.sol (if the filename and contract name are the same),ContractFile.sol:ContractName, or the path to an artifact, relative to the root of your project.

```
ℹ️ Note

getCode requires read permission for the output directory, see file cheatcodes.

```
To grant read access set fs_permissions = [{ access = "read", path = "./out"}] in your foundry.toml.

```
Examples

```
MyContract myContract = new MyContract(arg1, arg2);

// Let's do the same thing with `getCode`
bytes memory args = abi.encode(arg1, arg2);
bytes memory bytecode = abi.encodePacked(vm.getCode("MyContract.sol:MyContract"), args);
address anotherAddress;
assembly {
    anotherAddress := create(0, add(bytecode, 0x20), mload(bytecode))
}

assertEq0(address(myContract).code, anotherAddress.code); // [PASS]

```
Deploy a contract to an arbitrary address by combining getCode and etch

// Deploy

```
bytes memory args = abi.encode(arg1, arg2);
bytes memory bytecode = abi.encodePacked(vm.getCode("MyContract.sol:MyContract"), args);
address deployed;
assembly {
deployed := create(0, add(bytecode, 0x20), mload(bytecode))
}
```

```
// Set the bytecode of an arbitrary address
vm.etch(targetAddr, deployed.code);
```

_for more info check https://book.getfoundry.sh/cheatcodes/get-code?highlight=etch#examples_
Install & Upload WordPress Plugin
Tags: wordpress, plugin, install, upload
Published: 2022-12-04 04:57:19

The first thing every beginner needs to learn is how to install and upload a WordPress plugin. To enhance your WordPress website, you will need to install plugins. Plugins are like apps for WordPress and allow you to add things like a contact form, slideshow, shopping cart, and more. There are thousands of free and paid plugins available in WordPress.

WordPress plugins can help you enhance your website’s functionality and features. With a few clicks, you can install, activate, and begin using these plugins. This step-by-step guide will show you how to install a plugin on your website.

**Install WordPress Plugins from the Official Plugins Directory**

There are two ways to install WordPress plugins. The easiest way is by accessing the official [plugins directory](https://wordpress.org/plugins/user-meta/) through your WordPress admin area. However, this directory only includes free plugin options.

- Find a Plugin: Log in to your WordPress dashboard. Then, navigate to **[Plugins -> Add New](https://user-meta.com/)**. Search for the name of the plugin in the search bar. You can also browse the featured, famous, or recommended plugins by clicking on the provided tabs on the left.
how to upload wordpress plugin

- [Install Plugin](https://user-meta.com/): Click the Install Now button to start the plugin installation.

- Activate Plugin: Wait for the process to finish and click the Activate button to start using the WordPress plugin.

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

**Install WordPress Plugins Manually**

Another way to install WordPress plugins is to Manually Upload the plugin files to your WordPress site. There may be a more current version of a plugin on the developer’s website or when you install a premium plugin directly from the developer’s website.

Premium plugins can be excluded from the WordPress repository so you have to download them from the developer’s site.

Select the plugin ZIP file from your computer that you want to upload, then click Install Now.

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

Wait for the plugin installation to finish and press Activate Plugin.


**Adding Plugins in cPanel**

You can even upload the plugin’s ZIP file from cPanel. In cPanel, find the File Manager under the Files section.Once in, click on the public_html folder as before.

There, you will see a series of folders. Then look for the wp-content. In this folder, you will see another folder called plugins.

In the top menu bar, you will see an Upload button at the top of your screen.

Click on upload, select the plugin file, and upload.

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

Once done, head over to your WordPress dashboard, and Activate the plugins.
How to interview a frontend developer?
Tags: programming, devjournal, developerlife, interview
Published: 2022-12-04 04:07:32

The KISS Principle for interviewing a frontend developer.

Ask him the following questions: 
1. What is HTML?
2. What is CSS?
3. What is Javascript?
4. What is frontend development? (Optional for interns and juniors, must for mid to senior developers)

Let him speak for at least 10 minutes on each of these. What he tells you about these technologies will help you understand the depth of his understanding. For the same above questions, the answer of a junior developer will vary significantly from a senior developer. You can cross-question him on any of his statements if you think he has memorized the answers for the above.

After the above questions are answered, you can ask  (if required) that which is more relevant to your product/company.
"REACT" is dying
Tags: react, javascript, webdev, programming
Published: 2022-12-04 03:51:11

So.. In my some blogs. I have been discussing how react is getting bad. Like react is not fast as solid. not easy as svelte. or not reliable as Vue. **react is just popular**. It has been 10 years for react. soo there too much problems. Like I have been using react for just 2 years and ohh my god the problem for just update a hook frick!!.

soo decided to create this blog.

see.

too create most simple clicker game in react. you have to write this:

```
import {useState} from 'react';

const app = () =>{

const [count, setCount] = useState(0)

return(
<h1>{count}</h1>
<button onClick={() =>setCount(count+1)}></button>

)
}
```
And svelte

```
<script>
let count = 0;
</script>
<h1>{count}</h1>
<button on:click={count=count+1}></button>
```



![Image](https://pbs.twimg.com/media/FYp7GsMWQAETCvO.jpg)

Like most of the syntax is confusing. thing image on top is best. it explains most things about react. like how much time did take to learn react. like I took around 1 month for learning hooks, functions, props. and svelte this thing took just an hour, to master it. not because now I am familiar with learning new frameworks because svelte is easy.

also react is too slow. like I have been talking too new startups. and they are saying.
> "we are not using react because its just too slow. to kill competition we need blazingly fast reload time and speed." like imagine best websites are made from react. but speed of them is just a*s .like most of the speed you can earn is from svelte.


react have a big advantage of being popular. more jobs in react, more answers for question for react and more libraries in react.
svelte is less popular. but it gaining popularity.

just try svelte. look at the chart below

![img](https://res.cloudinary.com/practicaldev/image/fetch/s--3b6j97pI--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/pdsu71bu3emrq3vjixbx.png)


so react is currently dying. react is getting bad Instead for getting better.
The future of cloud engineering and devops in Africa
Tags: remotework, devops, aws, africa
Published: 2022-12-03 19:24:44

Cloud engineers are a vital part of the technology industry, responsible for designing, building, and maintaining the vast networks of servers that make up the cloud. With the rise of cloud computing, the demand for skilled cloud engineers has never been higher.  

In the coming years, the role of the cloud engineer will continue to evolve and expand. As more businesses move their operations to the cloud, the need for for engineers who are well-versed in cloud technologies will only increase. Cloud engineers will be responsible for ensuring that the cloud infrastructure is reliable, secure, and scalable, while also making sure that it is cost-effective.  

In Africa, the growth of the tech industry has been explosive in recent years. As more and more businesses in Africa adopt cloud technologies, the need for skilled DevOps professionals will only increase. 

DevOps is a rapidly growing field that focuses on the intersection of software development and IT operations.  In the future, African DevOps professionals will play a crucial role in helping businesses in the region to capitalize on the benefits of cloud computing. They will be responsible for designing and implementing cloud-based solutions that are tailored to the unique needs of African businesses.  

One of the key challenges facing African DevOps professionals is the lack of access to the latest technologies and tools. 

Many businesses in the region still rely on outdated systems and infrastructure, which can make it difficult to adopt new technologies. However, as more and more businesses in Africa invest in modern cloud technologies, the demand for skilled DevOps professionals will only continue to grow.  In conclusion, the future looks bright for both cloud engineers and African DevOps professionals.

As businesses in Africa continue to embrace cloud technologies, the need for skilled professionals who can design, build, and maintain cloud-based solutions will only increase. With the right training and experience, there are countless opportunities for individuals to thrive in these exciting and rapidly-growing fields.
Retesting vs Regression Testing : When We Do Retesting in Software Development?(With Example)
Tags: webdev, beginners, programming, tutorial
Published: 2022-12-04 03:05:37

In this video of Retesting vs Regression Testing, We are going to learn about the What is the main difference between two retesting and regression. 

What is Retesting?

{% embed https://youtu.be/PcDARwhFqb4 %}

In the retesting in software testing, It basically means testing a bug that has been fixed.
Most of the Time Tester finds a bug in the Application(Web or mobile), It logs it in the JIRA and Assign it to Dev, after dev fixes it, Dev assign back to Tester to verification.
Now Tester verify the bug, This is known the
Retesting.

Benefits of retesting
1. Test the cases that are failed only
2. Fast execution.
3. Only have to perform the important or failed cases

When, ReTesting is Done?
I
n retesting those test cases are included which were failed earlier.
Retesting ensures that the issue has been fixed and is working as expected.
Retesting is done by replicating the same scenario with same data in new build.
It is a planned testing with proper steps of verification
In some cases the entire module is required to be re-tested to ensure the quality of the module.

Example of Retesting
- Suppose Save button is not working
- Dev fixed it
- Now Tester have to Check the Functionality again. 
This is Retesting


I have added retesting testing example and please note that 
Defect verification is the part of re-testing
Re-testing is a planned testing
Retesting is done only for failed test cases
Re-testing makes sure that the original fault has been corrected

Retesting vs Regression

Retesting : 
To confirm the test cases that failed in the final execution are passing after the defects are fixed.
Retest are not automated.
Only bug fixes related test-cases are checked.

Regression : 
To confirm whether a recent program or code change has not adversely affected existing features.
Check the bug fixes.
Regression can be automated.
Nearly all the testcases are checked in Regression.
New code changes should not have any side effects to existing functionalities

retesting definition

🚀 Tools and services I recommend:
Some of the courses that I recommend to become better Automation Tester 🙌🙌

✅Selenium Training and Certification -
https://scrolltest.com/go/edureka


✅Learn Jenkins for QA -
https://bit.ly/learnjenkins-p1


✅Programming Java -
https://bit.ly/learnjava2020-p1


✅Test Automation - 
https://bit.ly/learnautomation2020


✅API Testing - 
https://www.learnapitesting.com


✅Cypress Tutorial with LIVE Projects -
http://cypresstutorial.com