If you're a frequent visitor of our website, you might have noticed that we've switched over to an all-new design. Our previous website used WordPress to both manage and display the content on our website, but performance wise, WordPress is quite heavy and slow...

## Information

![Gatsby + React](https://buttercms.com/static/images/tech_banners/webp/GatsbyJS.07de237c5d92.webp)

If you're a frequent visitor of our website, you might have noticed that we've switched over to an all-new design.

The previous version used WordPress to both manage and display the content on and off our website, but performance wise,
WordPress is quite heavy and slow.

In fact, we had a very low score on Google PageSpeed Insight for both mobile and desktop devices and as such, we decided to rework the entire site using
[GatsbyJS](https://gatsbyjs.com), [React](https://reactjs.org) and [Material-UI](https://material-ui.com/).

One thing to note is the increased performance: Our site will load approximately 3 times faster!
In addition, the entire website is completely open-source, meaning you can edit, build and even host your own
instance!

You can find the source code of this very website here: [GitHub](https://github.com/CodeDead/codedead.com)

## Other

Some functionalities might still be missing at the time of this post, but bear with us while we update and improve the site and our server even further!

Feel free to let us know your thoughts on [Twitter](https://twitter.com/C0DEDEAD), [GitHub](https://github.com/CodeDead)
or via [e-mail](/contact).


New website layout

Information AniView 1.6 has just been released. This release focuses on performance improvements and dependency updates. For a full list of changes, please take a look at the change log below. Change log Added a confirmation dialog when resetting settings AniView will...

## Information

AniView 1.6 has just been released. This release focuses on performance improvements and dependency updates. For a full list of changes, please take a look at the change log below.

## Changelog

* Added a confirmation dialog when resetting settings
* AniView will no longer reload the same image
* Improved update process
* Included latest theme version

## Download

You can download the latest version of AniView by clicking on the following link:
<a href="/software/aniview">AniView</a>

## Other

Feel free to contact us if you have any questions or if you need help.


AniView 1.6 - Release

Information DeadHash 2.0.4 has just been released. This release mostly focuses on performance improvements and general bug fixes. As such, we have drastically increased the speed of hash calculations. For a full list of changes, please take a look at the change log...

## Information

DeadHash 2.0.4 has just been released. This release mostly focuses on performance improvements and general bug fixes. As such, we have drastically increased the speed of hash calculations.

For a full list of changes, please take a look at the change log below.

## Changelog

* Allow hash calculation of large files
* Improved the speed of hash calculations
* Minor design changes
* Fixed an issue with the auto updater
* Removed duplicate assets
* Removed Axios library

## Download

You can download the latest version of DeadHash by clicking on the following link:
<a href="/software/DeadHash">DeadHash</a>

## Other

Feel free to contact us if you have any questions or if you need help.


DeadHash 2.0.4 - Release

Information DeadHash 2.0.3 has just been released. It includes several bug fixes and translation fixes. In addition, Portuguese was added and users are now prompted to confirm that they want to reset their settings. For a full list of changes, please take a look at...

## Information

DeadHash 2.0.3 has just been released. It includes several bug fixes and translation fixes. In addition, Portuguese was added and users are now prompted to confirm that they want to reset their settings.

For a full list of changes, please take a look at the change log:

## Changelog

* Added a confirmation dialog when resetting the settings
* Added Portuguese translations
* Added an icon when the window is maximized
* Added update button on about window
* Simplified views
* Translation fixes
* Dependency upgrades

## Download

You can download the latest version of DeadHash by clicking on the following link:
<a href="/software/DeadHash">DeadHash</a>

## Other

Feel free to contact us if you have any questions or if you need help.


DeadHash 2.0.3 - Release

Information DeadHash 2.0.2 has just been released. This release is mainly intended to fix security issues and in order to perform dependency upgrades. Additionally, the drawer bar will now automatically close when clicking outside of its scope. For a full list of...

## Information

DeadHash 2.0.2 has just been released. This release is mainly intended to fix security issues and in order to perform dependency upgrades. Additionally, the drawer bar will now automatically close when clicking outside of its scope. For a full list of changes, please take a look at the change log below.

## Changelog

* Automatically close the drawer bar when clicking outside of its scope
* Dependency upgrades
* Refactoring

## Download

You can download the latest version of DeadHash by clicking on the following link:
<a href="/software/DeadHash">DeadHash</a>

## Other

Feel free to contact us if you have any questions or if you need help.


DeadHash 2.0.2 - Release

This short but informative tutorial, will cover the very basics of looping through arrays in JavaScript using a couple of different techniques. There are some requirements that you should be aware of before starting this tutorial, so be sure that your skill level is...

## Information

This short but informative tutorial, will cover the very basics of looping through arrays in JavaScript using a couple of different techniques. There are some requirements that you should be aware of before starting this tutorial, so be sure that your skill level is adequate.
This will not be an extensive tutorial, but very basic and hopefully you can learn some things here that you didn’t know before. As always, if you’re in need of help, you can always leave a comment. Feedback is also welcome. If you’d like to see something corrected or added to this particular tutorial, feel free to let us know.

### Requirements

* Basic understanding of what an array is in JavaScript
* Basic understanding about the var, let and const keywords in JavaScript
* Basic understanding of HTML
* Basic understanding of CSS is optional but always nice
* Basic understanding of arrow functions

### Useful resources

* [vscode](https://code.visualstudio.com/)
* [WebStorm](http://jetbrains.com/webstorm)
* [var, let const – what’s the difference](https://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e)
* [Arrow functions in JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
* [JSFiddle](https://jsfiddle.net/)

## JavaScript Arrays:

JavaScript arrays are high-level, list-like objects that have the ability to contain multiple elements. Since JavaScript is such a versatile language, arrays can contain anything from strings to complete objects and even functions.
For a more well-defined definition:

`Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array’s length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.`

https://developer.mozilla.org/en-US/docs…ects/Array

You can declare arrays in JavaScript, like so:
```
const array = ["Jack", "John", "Arthur"];
const array = new Array("Jack", "John", "Arthur");
```

Be wary, there is a difference between using new Array and the contained array declaration ( [] ). The Array method can be used to pass an argument to indicate the length of the array. This will set the length property of the array to whatever value you pass to the constructor.
```
console.log(new Array(200).length); // Will output '200'
console.log([].length); // Will output '0'
console.log(new Array(200)[0] === undefined); // Will output 'true'
console.log([][0] === undefined); // Will output 'true'
```
https://jsfiddle.net/rhdjowtv/

As explained above, arrays are not limited in containing only a single data type. Here’s an example of an array that contains both strings and numbers:

```
const array = ["Jack", "John", "Arthur", 666];
console.log(array[0]); // Will output 'Jack'
console.log(array[3]); // Will output '666'
array[3] += 1;
console.log(array[3]); // Will output '667'
```
https://jsfiddle.net/tka96530/

Do note that you should avoid situations in which mixed content in arrays are involved. They are confusing and can break the programmer’s flow of thought.

You can retrieve an element inside an array by utilizing the index of the element that you want to retrieve on the array object, like so:
```
const array = ["Jack", "John", "Arthur"];
console.log(array[0]); // Will output 'Jack'
console.log(array[1]); // Will output 'John'
```
https://jsfiddle.net/cf4hqa05/

You can also change array elements like you would with any other variable (using the equals operator ‘=‘):
```
const array = ["Jack", "John", "Arthur"];
array[0] = "Micah";
console.log(array[0]); // Will output 'Micah'
console.log(array[1]); // Will output 'John'
```
https://jsfiddle.net/uL2fvj69/

Adding items to an existing array can be done by utilizing the push() function:
```
const array = ["Jack", "John", "Arthur"];
array.push("Abigail");
console.log(array[3]); // Will output 'Abigail'
```
https://jsfiddle.net/nqtgdk1r/

As is obvious by the example above, the push() function will add an element to the array and will append it to the end of said array. In case you want to add elements to the front of an array, you can use the unshift() function:
```
const array = ["Jack", "John", "Arthur"];
array.unshift("Abigail");
console.log(array[0]); // Will output 'Abigail'
console.log(array[3]); // Will output 'Arthur'
```
https://jsfiddle.net/xpjtczmo/

Removing and at the same time retrieving elements from an array can be as simple as using either a pop() or a shift():
```
const array = ["Jack", "John", "Arthur"];
const lastElement = array.pop();
console.log(array[2]); // Will output 'undefined'
console.log(lastElement); // Will output 'Arthur'
const firstElement = array.shift();
console.log(array[0]); // Will output 'John'
console.log(firstElement); // Will output 'Jack';
```
https://jsfiddle.net/8arw4g7L/

Arrays can also be sliced in the sense that we can grab a portion of the array and create a new one in the process. The slice() method offers this functionality:
```
const names = ['Jack', 'Abigail', 'John', 'Arthur', 'Micah'];
console.log(names.slice(3));
// Arthur, Micah
console.log(names.slice(3, 5));
// Arthur, Micah
console.log(names.slice(0, 4));
// Jack, Abigail, John, Arhur
```
https://jsfiddle.net/25h6ktew/

Later, we’ll look into the filter() method which is similar in nature.

This concludes the short introduction into JavaScript arrays and some of their functionality. If you want more information about them, there are some great resources that you can check out. For example, I recommend that you check out the Mozilla developer docs. These include more in depth examples an explanations about the functions used above and more.

## Array traversal

There are various ways in which you can loop through the elements of an array. The one most people are familiar with and the one that looks similar to other programming languages, is the traditional for-loop. We will be looking at that shortly, along with the forEach loop, for-of loop, for-in loop, map, reduce and of course the filter methods, what they’re used for and how you can use them to achieve your goals.

### For-loops

For-loops are the traditional looping mechanic when it comes to array traversal techniques. There’s nothing special about them. For-loops have been available since the early days of JavaScript and offers precise control over the loop itself.
```
const array = ["Jack", "John", "Arthur"];
for (let x = 0; x < array.length; x++) {
console.log(array[x]);
}
// Output iteration 0: 'Jack'
// Output iteration 1: 'John'
// Output iteration 2: 'Arthur'
```
https://jsfiddle.net/sv9e5L31/

This works, in essence, by incrementing the counter variable (in this case x) that is used to select an element at a certain index in the array. Since we start the loop at index 0 and only stop when the iterator has reached the end of the line (e.g. when the iterator is equal to the size of the array), we can safely print out any values that the array contains.
There are a couple of advantages and of course disadvantages linked to this methodology.

#### Advantages

* Precise control over the looping mechanics (return, break, continue)
* You can safely use this in IE3+ (if of course you change the let keyword to var because IE is extremely old and outdated at this point)

##### Disadvantages

* Extremely verbose, requiring multiple lines of code.
* The same applies to while loops and do-while loops (available in IE4+). I highly recommend that you avoid do-while loops in JavaScript. While they are a valid way to traverse through arrays or iterate/loop, they should not be used because they have a tendency to look extremely bad to programmers and might break the flow of thoughts.

For demonstration purposes, the example above can be re-written using while loops using the following code fragment:
```
const array = ["Jack", "John", "Arthur"];
let counter = 0;
while (counter < array.length) {
console.log(array[counter]);
counter++;
}
// Jack
// John
// Arthur
```
https://jsfiddle.net/ye71dhzt/

As you can tell, you are required to manually increment the counter variable that is used to select an element from the array.

### forEach loop
The forEach method is simple, yet elegant, in the way that it executes a single function for each element inside an array. Said function, called the callback function, can receive the element and index of the element as parameters. An example of this would be:

```
const array = ["Jack", "John", "Arthur"];
array.forEach((item, index) => console.log(item + " at position " + index ));
// Jack at position 0
// John at position 1
// Arthur at position 2
```
https://jsfiddle.net/daLfp2b1/

This example uses a reusable function as the callback parameter, instead of an anonymous arrow function:
```
const array = ["Jack", "John", "Arthur"];
array.forEach(printElement);
function printElement(item, index) {
console.log(item + " at position " + index );
}
// Jack at position 0
// John at position 1
// Arthur at position 2
```
https://jsfiddle.net/qyxm39p8/

#### Advantages

* Simple, clean and elegant
* Easier to read than for loops
* Less chance of making increment (e.g. i++) errors when compared to for-loops

#### Disadvantages

* Harder to break out of the loop
* They skip empty elements

Example of empty element skipping:
```
const arr = ['Jack',,'John'];
for (let x = 0; x < arr.length; x++) {
console.log(arr[x]);
}
// Jack
// Undefined
// John
arr.forEach(v => console.log(v));
// Jack
// John
```
https://jsfiddle.net/naxhe3b8/

### for-of loop

Not to be confused with the for-in loop, the for-of loop is similar to the for-loop in syntax and declaration. The difference being that the for-of loop can iterate over items (not the properties of the items like for in loops) in arrays, without the need of declaring an iterator. In addition to that, the for-of loop can be used to iterate over strings, maps, sets and other data types.
```
const names = ['Jack', 'John', 'Arthur'];
for (let name of names) {
console.log(`The person's name is ${name}`);
}
// Jack
// John
// Arthur
```
https://jsfiddle.net/mwfy59ba/

#### Advantages

* Simple, clean and elegant
* Easier to read than for loops
* Precise control over the looping mechanics (return, break, continue)
* No chance of making increment (e.g. i++) errors when compared to for loops

#### Disadvantages

* Harder to break out of the loop
* They skip empty elements
* If, for some reason, you want to keep track of the index of the item you’re looping over, you will need to create and increment a variable for each iteration

### for-in loop

The for-in loop is similar to to the for-of loop in syntax and workings, except for one large detail. The for-in loop will loop through the properties of an object and not the values.
```
const person = {
firstName: 'John',
lastName: 'Marston'
};
for (const prop in person) {
console.log(prop);
}
// firstName
// lastName
```
https://jsfiddle.net/75wsx63j/

### map

The map() function is used to create a new array, populated with the elements of the calling array, with said elements having been calculated or modified by the result of a calling function. While this is not a traditional looping mechanic, it can be used to perform powerful calculations.

Let’s use the following scenario to demonstrate what this all means:

Imagine having an array that is populated with a couple of names. You’d like to retrieve a new array that contains all the elements of the original array with something extra added to it as well. Map() would be a great way to do this:
```
const array = ['Jack', 'John', 'Arthur', 'Marcus'];
const aurelified = array.map(item => item += ' Aurelius');
console.log(aurelified);
// Jack Aurelius
// John Aurelius
// Arthur Aurelius
// Marcus Aurelius
```
https://jsfiddle.net/okcg4nt0/

### filter

The filter() method can be used to, as the name indicates, filter certain values out of an array. Do note that this will not change the original array. Just like the map() method, this will return a new array with the result of the filter operation, which is calculated by a calling function.

Consider the following scenario:
You’d like to retrieve an array of elements in which the length of the elements is greater than 10:
```
const array = ['Jack', 'John', 'Arthur', 'Marcus Aurelius'];
const aurelified = array.filter(item => item.length > 10);
console.log(aurelified);
// Marcus Aurelius
```
https://jsfiddle.net/m54yjdnq/

### reduce

The reduce() function can execute a reducer function on each element in an array. To explain this with an example, think of calculating the sum of all the elements in an array and outputting only a single value (e.g. the sum of the elements 1,2 and 3 is equal to 6). To translate this to code:
```
const array = [1, 2, 3];
console.log(
array.reduce(
(accumulator, currentValue) => accumulator + currentValue
)
);
// 6
```
https://jsfiddle.net/udj8m6nr/

The reducer function can take up to four arguments and the reduce() function can also be provided with an initial value. The arguments for the reducer are as follows:

* Accumulator
* Current value
* The current index
* The source array

This example utilizes all four arguments, and will provide the reduce() function with an initial value to perform calculations on:
```
const array = [1, 2, 3];
const result = array.reduce((accumulator, currentValue, index, source) => {
console.log('Index: ' + index);
console.log(source);
return (accumulator + currentValue);
}, 20);
console.log(result);
// Index will start at 0 because an initial value is provided. Without an initial value, the index will start at 1
// result = 26 | This is because we set the initial value to be equal to 20
```
https://jsfiddle.net/Lqwea2b7/

## Extra

That concludes this short tutorial. It is by no means a complete overview of all the available techniques and the demonstrations are rather short, but will hopefully help you along the way on your journey as a webdeveloper / JavaScript developer. Again, if you have any questions, suggestions, comments or feedback, feel free to leave them in the comment section below.


JavaScript Array Traversal techniques

Information DeadHash 2.0.1 has just been released. A drag-and-drop feature has been introduced, as well as a new dark theme that should be extremely easy on the eyes. We’ve also been hard at work to bring you the ability to once again export data. For a full...

## Information

DeadHash 2.0.1 has just been released. A drag-and-drop feature has been introduced, as well as a new dark theme that should be extremely easy on the eyes. We’ve also been hard at work to bring you the ability to once again export data. For a full list of changes, please take a look at the change log below.

## Changelog

* Added a drag-and-drop feature
* Added the ability to export hashes
* Added Spanish translations
* Added dialogs instead of modals
* Added an exit button to the drawer bar
* Minor design changes
* Minor code improvements

## Download

You can download the latest version of DeadHash by clicking on the following link:
<a href="/software/DeadHash">DeadHash</a>

## Other

Feel free to contact us if you have any questions or if you need help.


DeadHash 2.0.1 - Release

Information DeadHash 2.0 has just been released. DeadHash hasn’t been updated in quite a while and it was long overdue for some love. We’re happy to say that DeadHash has received an entire overhaul. This version was remade from the ground up using popular...

## Information

DeadHash 2.0 has just been released. DeadHash hasn’t been updated in quite a while and it was long overdue for some love. We’re happy to say that DeadHash has received an entire overhaul. This version was remade from the ground up using popular frameworks such as Electron and React.

In addition to that, DeadHash is currently available in multiple languages and supports multiple platforms such as:

* Android
* Linux
* Windows
* macOS builds are possible from source as well although we will not provide such builds. The source code can be found on our GitHub page.

For a full list of changes, please take a look at the changelog below.

## Changelog

* Added support for Linux
* Added multiple UI options
* Added multiple UI themes
* Added Dutch translations
* Added French translations
* Added Italian translations
* Added Japanese translations
* Added German translations
* Added Russian translations
* Added Turkish translations
* Complete user-interface redesign
* Removed unused features

## Download

You can download the latest version of DeadHash by clicking on the following link:
<a href="/software/DeadHash">DeadHash</a>

## Other

Feel free to contact us if you have any questions or if you need help.


DeadHash 2.0 - Release

Information Advanced PassGen 1.7.1 has just been released. This is mostly a maintenance release with some minor new functionality that has been added to the export capabilities of this application. For a full list of changes, please take a look at the change log...

## Information

Advanced PassGen 1.7.1 has just been released. This is mostly a maintenance release with some minor new functionality that has been added to the export capabilities of this application.

For a full list of changes, please take a look at the change log posted below.

## Changelog

* Added the ability to export data as a JSON file
* Fixed copying multiple items to the clipboard not working
* Fixed a possible crash to desktop when copying text to the clipboard
* Included latest theme version
* Included latest UpdateManager version

## Download

You can download the latest version of Advanced PassGen by clicking on the following link:
<a href="/software/advanced-passgen">Advanced PassGen</a>

## Other

Feel free to contact us if you have any questions or if you need help.


Advanced PassGen 1.7.1 - Release

Information DeadPix 1.2 has just been released. It’s been a couple of years since this application has received some love, so we figured it was time to rebuild this application from scratch using the WPF framework and .NET 4.8 to keep everything running better...

## Information

DeadPix 1.2 has just been released. It’s been a couple of years since this application has received some love, so we figured it was time to rebuild this application from scratch using the WPF framework and .NET 4.8 to keep everything running better than ever! DeadPix now has multi-monitor support and has been simplified so that you can get to fixing your monitor faster.

For a full list of changes, please take a look at the change log posted below.

## Changelog

* Rebuilt using the WPF framework
* Upgraded to .NET Framework 4.8
* Added a setting to stop the pixel fixer after a set amount of time
* Added ability to check for updates
* Added help documentation
* Improved multimonitor support
* Improved DPI awareness
* Included latest Syncfusion theme library

## Download

You can download the latest version of DeadPix by clicking on the following link:
<a href="/software/deadpix">DeadPix</a>

## Other

Feel free to contact us if you have any questions or if you need help.


DeadPix 1.2 - Release

Information AniView 1.5.3 has just been released! This release uses the latest and greatest version of the .NET Framework (4.8). Because of this, AniView should work better with multiple monitors and different DPI settings! If you get prompted to install this version...

## Information

AniView 1.5.3 has just been released! This release uses the latest and greatest version of the .NET Framework (4.8). Because of this, AniView should work better with multiple monitors and different DPI settings!

If you get prompted to install this version of the .NET Framework when opening AniView, you might get redirected to a previous release (most notably .NET Framework 4.7.2). This appears to be a bug in Windows which will probably get fixed in a Windows update. In case you’re looking for the download link: you can install .NET Framework 4.8 here. Microsoft will (or already does by the time you’re reading this) offer the .NET Framework 4.8 in a Windows update.

We’ve also used a new installer setup which comes with a lot more options. We do recommend that you manually uninstall the previous version before installing version 1.7 or higher. This can be done in the Windows control panel.

## Changelog

* Upgraded to .NET Framework 4.8
* Fixed an issue with exporting multiple times
* Improved multimonitor DPI support
* Updated documentation
* Included latest theme version
* Included latest UpdateManager version

## Download

You can download the latest version of AniView by clicking on the following link:
<a href="/software/aniview">AniView</a>

## Other

Feel free to contact us if you have any questions or if you need help.


AniView 1.5.3 - Release

Information Advanced PassGen 1.7 has just been released! This release uses the latest and greatest version of the .NET Framework (4.8). Because of this, Advanced PassGen should work better with multiple monitors and different DPI settings! If you get prompted to...

## Information

Advanced PassGen 1.7 has just been released! This release uses the latest and greatest version of the .NET Framework (4.8). Because of this, Advanced PassGen should work better with multiple monitors and different DPI settings!

If you get prompted to install this version of the .NET Framework when opening Advanced PassGen, you might get redirected to a previous release (most notably .NET Framework 4.7.2). This appears to be a bug in Windows which will probably get fixed in a Windows update. In case you’re looking for the download link: you can install .NET Framework 4.8 here. Microsoft will (or already does by the time you’re reading this) offer the .NET Framework 4.8 in a Windows update.

We’ve also used a new installer setup which comes with a lot more options. We do recommend that you manually uninstall the previous version before installing version 1.7 or higher. This can be done in the Windows control panel.

## Changelog

* Upgraded to .NET Framework 4.8
* Added help documentation
* Added window dragging setting
* Added a setting for window opacity
* Added a setting for resize border
* Added a menu to the main window
* Added an about window
* Added ability to export to Excel
* Added ability to sort password list
* Added export capabilities to menu and context menu
* Added ability to retain options that are selected by the user
* Added a setting to allow or prevent duplicate passwords
* Added more tooltips
* Updated password advisor to be more accurate
* Design changes
* Included latest theme version
* Included latest UpdateManager version

## Download

You can download the latest version of Advanced PassGen by clicking on the following link:
<a href="/software/advanced-passgen">Advanced PassGen</a>

## Other

Feel free to contact us if you have any questions or if you need help.


Blog