teleren/devto huggingface dataset:
Three JS Examples : 2. Three js rocket animation
Tags: threejs, javascript, css, design
Published: 2023-04-02 15:25:06

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.  

[Three js docs](https://threejs.org/docs/)

---
{% link https://dev.to/flagrede/making-a-2d-rpg-game-with-react-tree-fiber-4af1 %}

---

## Three js rocket animation
---

{% youtube 8dIXp-eEUtM %}


 ---
### [Source code](https://democoding.netlify.app/threejs/three-js-rocket-animation)

---

{% gist https://gist.github.com/amitSharma7741/febf0d9ce1fbb143c3f6b290eb031182 %}
 
---
---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Subscribe my Youtube Channel 
[https://www.youtube.com/@democode](https://www.youtube.com/@democode) 

3. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

4. Follow me on Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

5. Check out my Facebook Page 
[Programming memes by Coder](https://www.facebook.com/programmingmemesbycoders)

6. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

 

---
---

{% instagram CoukQjbuwW3 %}
Unconventional Toggling Functionality in JS
Tags: webdev, javascript, programming, tutorial
Published: 2023-04-02 15:15:43


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

As we all know that JavaScript has a toggle function to toggle a class status but from a functional point of view this is really doesn't perform well in many cases so and after some stackoverflowing I created this perfect and unconventional Toggling Way to toggle the status of a button between on and off (in case of a dark mode app such as this <a href="https://codepen.io/alishata/pen/OJoeKjw">dark mode app</a>) and I alse implemented it in a <a href="https://alishata128.github.io/js-stopwatch/js-stopwatch.html">Stopwatch App</a>

- We define a Let variable call it whatever you like e.g. click_count and assign its value to 1

```
let click_count = 1
```

- Select the element you want to apply the toggling function for it e.g. button element and add a click event listener to it
```
document.querySelector("button").addEventListener("click", e => {

})
```

- Third, Increment the `click_count` variable
```
click_count++
```

- Add a condition to check for the Parity of `click_count` variable
```
if(click_count % 2 == 0){

}else{

}
```

- Consider the first condition as a mode 1 and the second condition (which is else) as mode 2

<small>This is the actual modes for the dark mode I built</small>

```
if(click_count % 2 == 0){
e.target.textContent = "On";              e.target.parentElement.parentElement.classList.add("dark")
 }
else{
    e.target.textContent = "Off"
    e.target.parentElement.parentElement.classList.remove("dark")
  }
})
```


Finally I wish this could helped you in your projects or work
---
<br>
For more Info Follow me in:

Twitter: <a href="https://www.twitter.com/alishata128 ">alishata128</a>
Facebook: <a href="https://www.facebook.com/alishata122">alishata122</a>
Linkedin: <a href="https://www.linkedin.com/in/alishata">alishata</a>
Understanding Data Types in JavaScript ( Part - 2 )
Tags: javascript, beginners, programming, makstyle119
Published: 2023-04-02 14:41:05

In addition to [**string, number, bigint, and boolean**](https://dev.to/makstyle119/understanding-data-types-in-javascript-part-1--2957), **JavaScript** has four other built-in data types: **undefined, null, symbol, and object**. In this blog post, we will discuss each of these data types in detail and provide examples of how to work with them in JavaScript.

**Undefined:**

The undefined data type represents a value that is not defined. When a variable is declared but not assigned a value, its value is undefined. For example:

```javascript
let x;
console.log(x); // logs undefined
```

In this example, the variable ``x`` is declared but not assigned a value, so its value is ``undefined``. The ``console.log`` statement logs the value of ``x``, which is undefined.

**Null:**

The null data type represents a deliberate non-value. It is often used to indicate the absence of an object or value. For example:

```javascript
let y = null;
console.log(y); // logs null
```

In this example, the variable ``y`` is assigned the value ``null``, which represents a deliberate non-value. The ``console.log`` statement logs the value of ``y``, which is null.

**Symbol:**

The symbol data type represents a unique identifier. Symbols are often used to create private object properties and to avoid naming collisions. Symbols are created using the ``Symbol()`` function. For example:

```javascript
const mySymbol = Symbol('My symbol');
console.log(mySymbol); // logs Symbol(My symbol)
```

In this example, the ``Symbol()`` function is used to create a new symbol with the description "My symbol". The ``console.log`` statement logs the value of ``mySymbol``, which is the newly created symbol.

**Object:**

The object data type represents a collection of properties. Objects are used to store and manipulate complex data. Objects are created using the ``{}`` or ``new Object()`` syntax. For example:

```javascript
const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};
console.log(person); // logs {firstName: "John", lastName: "Doe", age: 30}
```

In this example, the ``person`` object is created with three properties: ``firstName``, ``lastName``, and ``age``. The ``console.log`` statement logs the value of ``person``, which is the entire object.

**Conclusion:**

Understanding the different **data types** in **JavaScript** is crucial for building robust and efficient programs. **Undefined, null, symbol, and object** are four additional built-in data types in JavaScript. By understanding how to work with these data types, you can write more effective and efficient code in your JavaScript programs.
Different Ways to Access Object Properties in JavaScript
Tags: javascript, dotnotation, programming, discuss
Published: 2023-04-02 14:28:08

There are different ways to access object properties in JavaScript

**1. Dot notation** - One common way to access object properties in JavaScript is through dot notation. This involves specifying the property name after the object name, with both separated by a dot.


```js
const name = {
  firstName: "Surbhi",
  lastName: "Dighe
};
console.log(name.firstName);  // Output: "Surbhi"
console.log(name.lastName);   // Output: "Dighe"
```

---

**2. Bracket notation** - Another way to access object properties is through bracket notation, which involves specifying the property name as a string inside square brackets. 


```js
const name = {
  firstName: "Surbhi",
  lastName: "Dighe
};
console.log(name["firstName"]);  // Output: "Surbhi"
console.log(name["lastName"]);   // Output: "Dighe"
```

---

**3. Object destructuring** - It allows you to create variables that correspond to the properties of an object. By using object destructuring, you can easily extract specific values from an object and use them in your code.


```js
const name = {
  firstName: "Surbhi",
  lastName: "Dighe
};
const { firstName, lastName } = name;
console.log(firstName);  // Output: "Surbhi"
console.log(lastName);   // Output: "Dighe"
```

---

Although there are various ways to access object properties in JavaScript, the **dot notation** and **bracket notation** are the most frequently used. 

Object destructuring is useful when you need to create variables from object properties.
My Top 5 Social Media Platforms for Personal Use
Tags: social, media, beginners
Published: 2023-04-02 14:25:30


![My Top 5 Social Media Platforms for Personal Use](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f172rwu7ggbk6k176pqv.png)
In today's digital age, social media platforms have become a ubiquitous part of our lives. They offer us a way to connect with people, share our thoughts and experiences, and keep up with the latest trends and news. With so many [social media platforms](In today's digital age, social media platforms have become a ubiquitous part of our lives. They offer us a way to connect with people, share our thoughts and experiences, and keep up with the latest trends and news. With so many [social media platforms](https://gobookmart.com/impact-of-social-media-on-our-relationships/) out there, it can be difficult to choose which ones to use for personal purposes. In this blog post, I will share my top five social media platforms for personal use and explain why they are my favorites.

## Instagram

Instagram is a photo and video-sharing social networking platform that has gained immense popularity in recent years. It has over a billion active users who post, share and engage with content regularly. What I love about Instagram is its visual appeal, ease of use and the ability to curate a personal brand. It is an excellent platform for sharing pictures and videos with friends, family, and followers, and a great way to discover new interests and people.

## Twitter

Twitter is a microblogging social media platform that allows users to share their thoughts, ideas, and opinions in 280 characters or less. With its real-time updates and hashtag feature, it is an excellent platform for keeping up with the latest news, trends, and events. What I like about Twitter is its fast-paced nature and the ability to follow influencers, celebrities, and thought leaders.

## YouTube

YouTube is a video-sharing platform that has become the go-to destination for online video content. It has over two billion active users who watch and upload videos regularly. What I love about YouTube is its vast library of videos, including tutorials, music, documentaries, and entertainment. It is an excellent platform for learning, discovering new interests, and connecting with like-minded people.

## LinkedIn

LinkedIn is a professional networking platform that allows users to create profiles, connect with colleagues, and network with industry professionals. It has over 740 million members who use it for job searching, recruitment, and networking. What I like about LinkedIn is its focus on professional development and the ability to connect with industry experts and leaders.

## Facebook

Facebook is the largest social networking platform with over 2.8 billion active users. It offers a range of features, including text and video messaging, newsfeeds, and groups. What I love about Facebook is its versatility and the ability to connect with friends, family, and acquaintances. It is also an excellent platform for discovering new interests and joining groups and communities.
npm install fails, ng serve works
Tags: webdev, node, angular
Published: 2023-04-02 13:31:21

I have been tasked with fixing and updating a complex Angular Cli project that is basically ancient. Everything for me is new here; javascript, typescript, node JS (npm), and of course, Angular itself.
After a week or two I have obtained some familiarity thanks to many excellent tutorial videos on You Tube.

But I have come across a perplexing problem I do not understand and cannot fix. I have the following for versions:

```
Angular CLI: 14.2.0
Node: 14.18.1
Package Manager: npm 6.14.18
OS: win32 x64

Angular: 7.2.16
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.10.7
@angular-devkit/build-angular   0.10.7
@angular-devkit/core            0.3.2
@angular-devkit/schematics      14.2.0
@angular/cdk                    7.3.7
@angular/cli                    14.2.0
@angular/flex-layout            7.0.0-beta.19
@angular/material               7.3.7
@schematics/angular             14.2.0
rxjs                            6.5.5
typescript                      3.1.6
```
When I run `npm install` I get the following errors:

```
gyp ERR! UNCAUGHT EXCEPTION
gyp ERR! stack Error: spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools\MSBuild\15.0\Bin\MSBuild.exe ENOENT
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:274:19)
gyp ERR! stack     at onErrorNT (internal/child_process.js:469:16)
gyp ERR! stack     at processTicksAndRejections (internal/process/task_queues.js:82:21)
gyp ERR! System Windows_NT 10.0.19045
gyp ERR! command "C:\\Users\\brian\\AppData\\Local\\nvs\\node\\14.18.1\\x64\\node.exe" "E:\\projects\\exchangex\\node_modules\\@angular-devkit\\build-angular\\node_modules\\node-gyp\\bin\\node-gyp
.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd E:\projects\exchangex\node_modules\@angular-devkit\build-angular\node_modules\node-sass
gyp ERR! node -v v14.18.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! This is a bug in `node-gyp`.
gyp ERR! Try to update node-gyp and file an Issue if it does not help:
gyp ERR!     <https://github.com/nodejs/node-gyp/issues>
Build failed with error code: 7
```
However, `ng serve` works!

I spent a week trying to get another version of node-gyp to be used, always failing and never tried `ng serve` because I assumed it would not work.

The goal is to update this project to the current versions of Angular cli / nodeJs but I am at a loss to understand the failure of 'npm install' and the success of 'ng serve'

What am I missing?
Java async thread pool size
Tags: java
Published: 2023-04-02 13:50:06

Hi All,
Anybody any advice for working out the max queue size for a java thread pool using async. I have a request coming in 2 per second and a max response time of 11ms and min response time of 2ms. There are 10 threads and queue size of 2000 and it handled it fine during a 1 hour soak test but want to refine the numbers if possible. I initially had a thread count of 5 and queue size of 500 but this resulted in a large number of 503 errors from the microservice.
Thanks
WordPress Core contributions by (tickets) numbers – 2023 edition
Tags: wordpress, opensource, php
Published: 2023-04-05 14:03:00

---
title: WordPress Core contributions by (tickets) numbers – 2023 edition
published: true
date: 2023-04-02 13:31:50 UTC
tags: wordpress,OpenSource,PHP
canonical_url: https://daniele.tech/2023/04/wordpress-core-contributions-by-tickets-numbers-2023-edition/
---

After a year, something is changed? Not so much, the numbers after all stay the same.

The post [WordPress Core contributions by (tickets) numbers – 2023 edition](https://daniele.tech/2023/04/wordpress-core-contributions-by-tickets-numbers-2023-edition/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Deploy a Highly Available Group of EC2 Instances Using Terraform
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-04-02 13:02:55

[92/100] #100DaysOfCloud Today, I deployed a highly available group of EC2 Instances with load balancer and autoscaling group using Terraform.

<u>High Availability:</u>
High availability (HA) refers to the continuous availability of your application and data regardless of any downtime. For example, if your web application is available 24/7 to serve your customers or clients without any downtime, it’s called a highly available web app.

<u>High Scalability:</u>
High Scalability refers to the ability of an application or a system to handle a huge volume of workload or expand in response to an increased demand for an application. For example, suppose you have an online shopping website running on a fleet of ten web servers and you plan for a discount sale. This sale will be going to increase the workload on your servers. So you anticipate the network traffic and you add 5 more servers to host your shopping website and avoid any downtime. Which means you have scaled your infrastructure. This ability of your application to scale is called high scalability. So the more scalable your application the more available it’s. So high scalability and high availability are correlated but not the same.

<u>Terraform:
</u>Terraform is an infrastructure as a code (IaC) tool. We can provision the cloud infrastructure using Terraform. It’s similar to AWS cloud-formation but it can work with almost any cloud platform. Usually, if you want to create some cloud infrastructure for example an EC2, you will go to the AWS console using your browser and then click on the launch instance button. This sounds easy and quick, but at some point, as the infrastructure gets larger and larger, it becomes difficult and tedious to manage such a large infrastructure manually by using only the AWS console. To solve this problem we can use Terraform.

You can try do it by yourself by following the steps from the link below: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/092/Readme.md)
Freecodecamp Markdown
Tags: codepen
Published: 2023-04-02 12:36:27

{% codepen https://codepen.io/alimalim77/pen/XWPLpyv %}

In this project, I used codepen to avoid the setup and it was mandatory by freecodecamp to share the link in order to proceed and obtain the front end libraries certification. So lets get started to how we can build this up. 

We start by creating the text area used by the user and the output preview area that will reflect the changes. React was used with respective dependencies installed on settings page except some that I imported. Class component was used to complete the project. 

End result obtained was a visually attractive page that lets you convert text into markdown format. Here is a glimpse of the same:- 

https://gist.github.com/alimalim77/20a9195d44cf48bf890453e27bc28533


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsbef719dytu8rzc0bcz.png)
Morilog Jalali laravel persian
Published: 2023-04-02 12:28:38

```
<?php
require_once 'vendor/autoload.php';
 
use Morilog\Jalali\Jalalian;
 
// تاریخ شروع
$start_date = Jalalian::fromFormat('Y/m/d', '1402/01/01')->toCarbon();
// تاریخ پایان
$end_date = Jalalian::fromFormat('Y/m/d', '1402/01/31')->toCarbon();
 
// ساخت جدول
$table = "<table><thead><tr><th>روز هفته</th><th>تاریخ</th><th>نام روز</th></tr></thead><tbody>";
 
// حلقه برای گرفتن تاریخ‌های بین دو تاریخ شمسی
while ($start_date <= $end_date) {
    // تبدیل تاریخ میلادی به شمسی
    $jdate = Jalalian::fromCarbon($start_date);
    // اضافه کردن سطر به جدول
    $table .= "<tr><td>" . $jdate->getDayOfWeek() . "</td><td>" . $jdate->format('Y/m/d') . "</td><td>" . getDayName($jdate->getDayOfWeek()) . "</td></tr>";
    // افزایش تاریخ به روز بعدی
    $start_date->addDay();
}
 
// بستن جدول
$table .= "</tbody></table>";
 
echo $table;
 
function getDayName($day_of_week){
    switch ($day_of_week){
        case 0:
            return 'شنبه';
        case 1:
            return 'یک‌شنبه';
        case 2:
            return 'دوشنبه';
        case 3:
            return 'سه‌شنبه';
        case 4:
            return 'چهارشنبه';
        case 5:
            return 'پنج‌شنبه';
        case 6:
            return 'جمعه';
    }
}
?>
```
[منبع](http://noorgram.rozblog.com/post/232)
What's Pure Function in JavaScript
Tags: javascript, beginners, programming, tutorial
Published: 2023-04-02 12:23:48

Hello World,

One of the most known questions, especially in interviews, is about pure functions and what they are… so we will talk about pure functions in this article.

## what are pure functions?

It’s the atomic building block of functional programming. they are very simple and easy to test.

The function can be called a pure function if these conditions are applied:

- The same inputs always return the same outputs
- No side effects

Let’s focus on each of them:

### The same inputs always return the same outputs

This means that we always get the same output whenever we use the function and pass the same input.

for example, we have this function.

```jsx
function sum(x, y) {
	return x + y;
}

sum(2, 3); // will return always 5
```

whenever we pass the same input `2, 3`, we get the same output `5`.

But in the following example.

```jsx
let num = 5;
function sum(x) {
	return num+= x;
}

sum(2); // will return 7
sum(2); // will return 9
```

we have a shared state here, which is a bad practice (we don’t use it unless we need to do things that way) because we can’t predict the return value of the function now, and became not a pure function.

So in summary, a pure function is a function that returns the same output always whenever we call it and pass the same input.

### No side effects

the side effects of a function are one of the following:

- Mutating your input
- use `console.log`
- HTTP calls (AJAX/fetch)
- Changing the filesystem
- Querying the DOM

In general, the function implementation should be only about calculating the final output and nothing else.

Note: we should not always use pure function and it’s not the best solution as may you think, because we might need to call HTTP requests, change the file system, or query the DOM tree.

That’s it for today’s article, if you have any suggestions, then don’t hesitate to contact me anytime.
A NICE MUSIC CARD
Tags: webdev, css, opensource, html
Published: 2023-04-02 12:11:20

Hello GUYS! I am here with another FrontEnd Mentor challenge!


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

Here is the SOLUTION which you can access the code: https://www.frontendmentor.io/solutions/order-summary-component-1A0xd72ff3

My **GITHUB**: https://github.com/MCKH03

My **TWITTER**: https://twitter.com/ytmehrshad

My **CODENEWBIE**: https://community.codenewbie.org/mckh03

This was the first time that I used svg as background and I had a hard time understanding how that works but I finally figured it out!

How was your first experience using svg as background? Or have you ever done that?!