teleren/devto huggingface dataset:
Reference Vs Value in JavaScript?
Tags: javascript, tutorial, webdev, beginners
Published: 2023-05-13 13:13:30

In JavaScript, you can pass by value and by reference. The main difference between the two is that passing by value happens when assigning primitives while passing by reference when assigning objects.
When you pass a primitive type variable like a string or a number into a function, you are passing it by value. This means that any changes to that variable within the function have no effect on the data outside of the function.
On the other hand, when you pass an object into a function, you are passing it by reference. This means that if you change a property of that object within the function, that change will be reflected outside of the function as well.
```
let myNumber = 10;
let myObject = {value: 20};

function change(number, object) {
    number = number * 2;
    object.value = object.value * 2;
}

change(myNumber, myObject);
console.log(myNumber); // 10
console.log(myObject); // 40

```
In this example, myNumber is a primitive type and is passed by value into the change function. This means that any changes to the number parameter within the function have no effect on myNumber outside of the function.
On the other hand, myObject is an object and is passed by reference into the change function. This means that when we change the value property of the object parameter within the function, that change is reflected in myObject.value outside of the function.

###### Follow me on [Github](https://github.com/billalsiddiqi) &  [Twitter](https://twitter.com/Siddiqi47)
What you learning about this weekend?
Tags: codenewbie, discuss, learning, beginners
Published: 2023-05-13 13:00:00

Heyo 👋

What ya learning on this weekend?

Whether you're sharpening your [JS](https://dev.to/t/javascript) skills, making PRs to [your OSS repo of choice](https://github.com/forem/forem) 😉, sprucing up your portfolio, or [writing a new post](https://dev.to/new) here on DEV, we'd like to hear about it.

Wishing ya the best on your work... remember to take breaks and enjoy yourself!


![A clip from the Matrix of Neo saying "I know Kung Fu" after having the skills uploaded into his brain.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m272f9u1q14ef36gswrw.gif)
Animated Portfolio Website using HTML CSS and Javascript | STEP BY STEP
Tags: html, css, javascript, portfolio
Published: 2023-05-13 12:55:31

{% youtube McAlDSKTMLI %}
Hi guys, today we want to show How To Create a Animated Portfolio Website Using HTML & CSS

Creating a personal portfolio using HTML and CSS is a great way to showcase your skills, experience, and accomplishments to potential employers or clients. With the help of these two programming languages, you can design a professional and visually appealing website that sets you apart from the competition.

Here’s a step-by-step guide on how to create your own personal portfolio using HTML and CSS:

Step 1: Plan your website
Before you start designing your website, it’s important to plan out its structure and content. This includes deciding on the number of pages, the layout, and what information you want to include.

Step 2: Code the basic structure using HTML
Once you have a clear idea of what you want your website to look like, it’s time to start coding. Begin by creating the basic structure using HTML tags such as html, head, body, etc. You should also add links to any external files (CSS, images, etc.) that you’ll be using.

Step 3: Style your website using CSS
Now that the basic structure is in place, it’s time to style your website using CSS. Start with the background colour, font size, and font family. Then move on to styling individual elements such as headings, paragraphs, and buttons.

Step 4: Add your content
With the structure and style in place, it’s time to add your content. This includes your name, a brief introduction, your work experience, your education, and any other relevant information.

Step 5: Test and adjust
Before launching your website, it’s important to test it thoroughly to make sure everything works as expected. Check for broken links, spelling errors, and any other issues that might arise. Make adjustments as needed until you’re happy with the final result.

Step 6: Launch your website
Once you’ve completed all the necessary steps, it’s time to launch your website. Publish it on a web hosting platform or your own server and start sharing it with potential employers, clients, and colleagues.

In conclusion, creating a personal portfolio using HTML and CSS is a great way to showcase your skills and experience. With the help of these two programming languages, you can design a professional-looking website that sets you apart from the competition. So, take some time to plan out your website, code the basic structure using HTML, style it using CSS, add your content, test and adjust, and finally launch it for the world to see. Good luck!
Please, if you love it, support us with Like & Subscribe.🙏🙏❤️❤️
What's your biggest flex in programming? 💪
Tags: discuss, beginners, programming
Published: 2023-05-13 12:47:09

For me, it's when I finally got the hang of object-oriented programming. I had been struggling with it for a while, but when it finally clicked, I felt unstoppable! 🚀

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

Maybe your biggest flex is something bigger, like landing your dream programming job or building a successful app used by thousands. Or maybe it's something smaller, like finally fixing a bug that's been driving you insane. 🐛

So, what's your biggest flex in programming? Let's hear it!
Getting masked secrets out of CircleCI
Tags: circleci, cicd, security, devops
Published: 2023-05-13 12:34:16

If you've used environment variables in **CircleCI** you'll know the pain of a **horrible UI**. Once a variable is added you can _"never"_ see it again (you can't even edit it blindly - you need to delete the entire entry and re-add it - key & value).

CircleCI also has no differentiation between a variable and a secret. A basic public var like `SUPPORT_CONTACT=sendspam@public-email.com` will only be seen again by in CircleCI Settings UI as `SUPPORT_CONTACT= xxxx.com` or worse `**************` if you attempt to echo it in your build logs. This makes it über hard to know what's being used in your builds and is a "great" [sic] form of lock-in when you attempt to move away from CircleCI. Here's a little script I devised for this very purpose which hasn't been blocked... _yet_.

```yaml
version: 2.1
jobs:
  getout:
    steps:
      - run:
          command: |
            mkdir -p /tmp/
            env >> /tmp/circleci.env
      - store_artifacts:
          path: /tmp/circleci.env
          destination: artifact-file
workflows:
  workflow:
    jobs:
      - wantout:
          name: getout
          context:
            - org-global
            - my-context
```

The script above will dump all the env vars exposed to the running job into a file which will be added as an artifact. You can then download the text file from the CircleCI webUI (Pipeline > Workflow > Job).

You will need to list the name(s) of your [contexts](https://circleci.com/docs/contexts/) to expose their variables to the job. If you don't use contexts you can remove the last 3 lines of this snippet.

Ensure you rotate your secrets as this leaves a nice dump of secure items in what's likely a very insecure file storage location, on the infrastructure of a company that's been [proven to be insecure in the past](https://techcrunch.com/2023/01/14/circleci-hackers-stole-customer-source-code/) :wink: Also your personal computer is also not a good place to leave secrets (this is how CircleCI got themselves exposed).

PS: for a vastly superior "envvar" UX, checkout how GitHub Actions do it - much more control and visibility.

Cover image by [Dan Schiumarini](https://unsplash.com/photos/dcL8ESbsGis)
Note down these top 10 websites , which would help you to land your Summer Internship.
Tags: internship, webdev, beginners, programming
Published: 2023-05-13 12:06:34

Are you looking to land an internship this summer? Look no further! Check out these top 10 websites that can help you find the perfect internship opportunity.


![Magic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83dvdli5enxjvo10kov4.gif)

1. LetsIntern: This platform offers a wide range of internships in various fields, including computer science, from startups to big companies.

2. Twenty19: Connect with internships, online courses, and projects in different fields, including computer science, all in one place.

3. HelloIntern: Discover various internship opportunities in India across different fields, including computer science.

4. Cuvette: College students and early graduates can find internships and jobs in software, management, media, and more on this platform.

5. Angel.co: This popular platform not only connects startups with investors but also offers internship opportunities across various fields, including computer science.

6. LinkedIn: This professional networking platform also offers numerous internship opportunities in India, including computer science. Simply use the search feature to find your perfect match.

7. Indeed: Search for internships across different fields, including computer science, on this popular job search engine.

8. Glassdoor: Discover company reviews, salary reports, job listings, and internship opportunities, including computer science, all in one place.

9. Naukri: This popular job search engine in India offers internship opportunities to students across different fields, including computer science.

10. SimplyHired: Find your dream internship in computer science and other fields with the search feature on this job search engine.

Don't forget to also check out the career pages of the companies you're interested in for even more opportunities! With these websites at your fingertips, you'll be one step closer to landing your dream internship this summer.
What inspired you to become a web developer?
Tags: beginners, discuss, jokes, codenewbie
Published: 2023-05-13 11:58:08

What inspired you to pursue this career path? Was it a love of coding or just a knack for debugging? Maybe you were drawn in by the allure of programming languages - who can resist the siren call of Python or Java? Or perhaps it was the promise of a steady stream of bugs to squash that had you hooked.

Whatever your reason, I'm sure you've encountered your fair share of errors along the way. But remember, as a developer, you have the power to turn those bugs into features! So keep calm and code on, and don't forget to share your favorite programming puns in the comments below. After all, who doesn't love a good play on words?
Rails default port
Tags: rails, port
Published: 2023-05-13 11:46:01

There might be cases where you need to utilize more than one port for an application in your local. For example web-server might be utilizing port 3000 and if you start rails engine by using the command `rails server` or `rails s` you will get an error `Address already in use - bind(2) for "127.0.0.1" port 3000`. So manually you need to specify rails to use a different port like `rails s -p 3001`

Actually there is a way you can specify the rails engine to use a specific port to use by default.

Just locate the rb file with the engine name under `/config` directory. In my case puma is the engine so lets open `config/puma.rb`.

The below line is responsible for using the port 3000 by default.

```
port ENV.fetch("PORT") { 3000 }
```

Replace the 3000 with port whichever you want to use. In my case it is 3001
```
port ENV.fetch("PORT") { 3001 }
```
That's it. Now start the server by default port 3001 will be used by rails.
Apache AGE: Accelerate Query Performance by Adding Multiple Edges in a Single Query
Tags: apacheage, graphdatabase, beginners, programming
Published: 2023-05-13 11:39:50

## Introduction:
Apache AGE (A Graph Extension) is inspired by Bitnine’s fork of PostgreSQL 10, AgensGraph, which is a multi-model database.  By combining the power of graph data models with the versatility of SQL, Apache AGE provides a seamless and efficient approach to working with complex interconnected data.



In this blog post, we will explore one of the key features of Apache AGE: the ability to add multiple edges in a single query. We'll discuss the benefits of this feature and how it can significantly improve query performance when dealing with large-scale graph data.

## Understanding Graph Data Modeling:
Before diving into Apache AGE's capabilities, it's essential to understand the basics of graph data modeling. In a graph database, data is represented as nodes and edges. Nodes represent entities (such as users, products, or locations), while edges define the relationships between these entities.


The power of graph databases lies in their ability to efficiently traverse these relationships and uncover patterns and insights that are otherwise challenging to discover using traditional relational databases. Graph databases excel at handling complex interconnections, making them ideal for use cases like social networks, recommendation engines, fraud detection, and more.

## Adding Multiple Edges in a Single Query:

We can add multiple edges in single query by defining rule on between both node types

## for example:

we have graph named `demo_graph`

### Person Nodes
_we have Person Nodes with fields mentioned in query_

`SELECT * FROM cypher('demo_graph', $$ CREATE (n:Person {name : "imran", bornIn : "Pakistan"}) $$) AS (a agtype);`

**Fields**
- name
- bornIn

### Country Nodes
_and we have Country Nodes with fields mentioned in following query_

`SELECT * FROM cypher('demo_graph', $$ CREATE (n:Country{name : "Pakistan"}) $$) AS (a agtype);`

**Fields**
- name

### Creating relationship between both Node Types
to create relationship between Person and Country run the following Query:

`SELECT * FROM cypher('demo_graph', $$ MATCH (a:Person), (b:Country) WHERE a.bornIn = b.name CREATE (a)-[r:BORNIN]->(b) RETURN r $$) as (r agtype);`

The relationship is based on the Country where the Person lives in now no matter how many nodes are this query will create relationship between all Person and Country Nodes

### visualize the Graph
to visualize the graph run following query:

`SELECT * from cypher('demo_graph', $$ MATCH (a:Person)-[r]-(b:Country) WHERE a.bornIn = b.name RETURN a, r, b $$) as (a agtype, r agtype, b agtype);`

### Output Graph would look something like this:


![Image showing nodes and Edges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ywlqicy1zhgr25hpfnk.png)



## Visit Apache AGE:
- [Official Website](https://age.apache.org)
- [GitHub - Apache AGE](https://github.com/apache/age)
DevOps Online Support From India
Published: 2023-05-13 11:10:29

[](https://onlinejobsupport.net/job-support/devops-online-job-support/)
[DevOps online job support from India](url) is provided by team of consultants who are certified professionals with more than 8+ years of project experience. Are you a fresher or experienced professional new to DevOps and struggling with your daily project assignment ,then Online Job Support is the right place for your needs. Online Job Support provides both DevOps online training and DevOps online job support from India.
If you need immediate assistance you can call or whatsapp us on 9176533433…
We also support DevOps Full Time,Task Based and monthly Support
How to pass exceptions in Electron.js from main process to renderer and other way around
Published: 2023-05-13 10:51:21


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


If you struggled as well with "bubbling" exceptions between IpcMain and IpcRenderer in electron.js here is a self-exploratory, and simple solution that I created to solve this issue: 

```
import {ipcMain, IpcMainInvokeEvent, ipcRenderer} from 'electron';

export interface channelMessage<T> {
  message?: T;
  error?: any;
}

export function handleMessageFromRenderer<T>(channel: string, listener: (event: IpcMainInvokeEvent, ...args: any[]) => Promise<void> | any) {
  ipcMain.handle(channel, async (event, args) => {
    const response: channelMessage<T> = {};

    try {
      response.message = await listener(event, args);
    } catch (e) {
      response.error = e;
    }

    return response;
  });
}

export async function sendMessageToMain(channel: string, ...args: any[]): Promise<any> {
  const {message, error} = await ipcRenderer.invoke(channel, ...args);
  if (error) {
    throw error;
  }

  return message;
}
```

now instead of passing a message using `ipcRenderer.invoke` and `icpMain.handle` you can just use `sendMessageToMain` and `sendMessageToMain`

as in the following example:

```
xport const settingChannels = {
  openLogFile: 'open-log-file',
  updateApplication: 'update-application',
};

export const settingsApi = {
  openLogFile: async () => {
    await sendMessageToMain(settingChannels.openLogFile);
  },
  updateApplication: async (version) => {
    await sendMessageToMain(settingChannels.updateApplication, {version});
  },
 };

export function registerSettingsApi() {
  log.debug('registering settings apis');

  handleMessageFromRenderer(settingChannels.openLogFile, async (event): Promise<void> => {
    log.trace('handling open log');
    await settingsHandler.openLogFile();
  });

  handleMessageFromRenderer(settingChannels.updateApplication, async (event, args): Promise<void> => {
    log.trace('handling start app update');
    await settingsHandler.updateApplication(args.version);
  });
}
```
New Venture..
Tags: webdev, programming, career, startup
Published: 2023-05-13 10:24:22

I've worked as a software software engineer for the past 9 years in very esteemed organizations, namely Amazon and Google. Over the years, I found my calling to setup my software solutions firm and bridge the gap of undue advantage being taken by the MNCs with respect to prolonged project delivery, being charged more than what a project requires, or the lack of transparency. I'm facing my main challenge in finding a stable source of business that can help the company float. Any suggestions, referrals, background checks, etc. are most welcome.. looking forward to forging some meaningful connections.. (:
FREE: Quiz.RubyOnRails.BA The Most Complete Ruby Quiz Site of 2023
Tags: ruby, quiz, job, testing
Published: 2023-05-13 10:05:22

Ruby on Rails is a popular web application framework that has been widely adopted by developers around the world. However, keeping up with the latest trends and updates can be a challenge for even the most experienced Ruby on Rails developers. Fortunately, there's a new site that makes it easy to test your knowledge and stay up to date with the latest developments in this field.

[Quiz.rubyonrails.ba](https://quiz.rubyonrails.ba) is a website dedicated to helping Ruby on Rails developers improve their knowledge of this popular web application framework. The site offers 16 different levels of games, each with various questions that cover a wide range of topics related to Ruby on Rails.
[![quiz ruby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pm1u24dh8ryymumtuzv.png)﻿](https://quiz.rubyonrails.ba)
What makes **Quiz.rubyonrails.ba** different from other quiz sites is that the questions and answers are AI-generated. This means that the site is able to offer a constantly evolving and up-to-date set of questions that reflect the latest trends and developments in the Ruby on Rails community. With over **600 questions** available, it's the most complete Ruby quiz available today.
[![ruby interview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vhntpvum9wdfq6nu14c.png)](https://quiz.rubyonrails.ba)
At the end of each game, players receive an official **certificate of completion** and have the option to share their high score on social media. They can also **invite friends** to play the same set of questions and compare their results. This feature makes **Quiz.rubyonrails.ba** the perfect platform for knowledge battles with friends or colleagues, allowing developers to test their skills and learn from each other.
﻿
In 2023, Quiz.rubyonrails.ba is the best place to play, learn, and test your actual Ruby on Rails knowledge. Whether you're a seasoned developer or just starting out, the site offers a fun and interactive way to stay up-to-date with the latest developments in this popular web application framework.
[![quiz ruby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4qhcf5jgtppwltvzv6a.png)﻿](https://quiz.rubyonrails.ba)
So, if you're looking to improve your Ruby on Rails skills and stay up-to-date with the latest trends, head over to Quiz.rubyonrails.ba today and start playing! With its AI-generated questions and constantly evolving set of challenges, it's the most complete Ruby quiz available today.
Raiding.Zone: GUI Overhaul
Tags: gamedev, devjournal
Published: 2023-05-13 09:23:31


![The new equipment GUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2zilpditrd26n3kq7ao.png)

I’ve spent the last two weeks implementing a new GUI concept.
The old design felt confusing and cluttered.
I added more space and hopefully made it more intuitive.
{% embed https://youtu.be/GxICxjcPQYA %}

The new interface should conform to the immersion I want to create. The whole game places you in the simulation of a giant corporation named “Raiding.Zone”. This cooperation bought your conscious self. You only live in a simulated environment.
That’s the reason the game places you in a virtual cell. You can meet other players in the Training Area.
Besides this, your only purpose is to fight in Raids for the amusement of the public.


![Your virtual cell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrv378hrmqqu438rh7w5.png)

In future updates, I will use this cell to provide visual feedback on your raiding progress.
My plan is to further extend this cell as you progress in Raiding.Zone. I plan to extend this cell the further you progress in Raiding.Zone. There will also be additional rooms to visit in the prison.

I also added a loading screen picture to make it less boring. 
![The new loading screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzrxv5v1xfq9rwrs0nij.png)