Let's wander around the lake and chat about tech &amp; life! Come rain or shine, and we'll be walking at 7pm! Bring a dog, your significant others, kids, a friend and your face! Join our friendly group for some healthy activities! Our current walk is Whitlingham Lake, a 2.5-mile walk at an all-inclusive pace!

Norfolk Developers - nor(DEV):

nor(DEV): Wander

**FREE FOOD** Let's gather at the Junkyard Market again. nor(DEV): will pay for your meal and first drink. All are welcome, significant other, dog, child!

Food & Drinks at the Junkyard Market


Today is going to be a quick look at some of the more popular array methods in JavaScript.

Each example will use the same set of data, an array of pet objects with different types of animal, their breed and their name.

So lets dive in.

### Array.prototype.map()
`.map()` Creates a new array which is populated with the results of calling a provided function on every element in the calling array.

This is helpful for many reasons but in our example below, we have used `.map()` to create a new array to store all of our pet names in and we have stored them in a new variable `names`.

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const names = pets.map((pet) => pet.name);

console.log(names); // ['Bruno', 'Bruce', 'Tyson', 'Bobby', 'Paulie']
```

### Array.prototype.filter()
`.filter()` Creates a [shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy) of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

If we imagine that we have just fetched all of our pets from our database. `.filter()` is useful because in the scenerio where we only want to read the data of dogs, as in our example, it allows us to do exactly that. We can also store that data in a new variable such as `dogs` just as we have below.

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const dogs = pets.filter((pet) => pet.type === 'dog');

console.log(dogs); // [{type: 'dog', name: 'Bruno', breed: 'Border Collie'}, {type: 'dog', name: 'Tyson', breed: 'Bulldog'}, {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'}]
```

### Array.prototype.forEach()
`.forEach` Executes a provided function once for each array element.

In our example below, our provided function is a rather trivial one that simply logs out a string to the console. However in a more real world situation (still using our pets), our function might return the last time a pet received a checkup (not currently in our data).

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

function introducePet(pet) {
  console.log(`${pet.name} is a ${pet.breed} (${pet.type})`)
}

pets.forEach((pet) => introducePet(pet)); // Bruno is a Border Collie (dog)...
```

### Array.prototype.slice()
`.slice()` Also returns a [shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy) of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. **The original array will not be modified**.

In our example we are using `.slice()` to simply return the first element of array and store it in a new variable `firstPet`. We could also use it to return the first 3 or the last 3. The world is our oyster here.

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const firstPet = pets.slice(0, 1);

console.log(tyson); // [{type: 'dog', name: 'Bruno', breed: 'Border Collie'}]
```

### Array.prototype.sort()
`.sort()` As the name suggests, sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

We may want to sort our data for various reasons, in our example we simply want to order our pets data alphabetically by their name.

It is worth noting that whilst the majority of array methods with create a new array or a shallow copy, `.sort()` will actually change the order of the array (mutation) so a handy trick if you want to prevent this from happening, is to use slice beforehand to create a copy of the original array order.

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

pets.sort((a, b) => a.name.localeCompare(b.name)) // mutated array
pets.slice().sort((a, b) => a.name.localeCompare(b.name)) // copied array

console.log(pets); // [{ type: 'dog', name: 'Bobby', breed: 'English Bull Terrier' }, { type: 'cat', name: 'Bruce', breed: 'Maine Coon' }, { type: 'dog', name: 'Bruno', breed: 'Border Collie' }, { type: 'parrot', name: 'Paulie', breed: 'Macaw' }, { type: 'dog', name: 'Tyson', breed: 'Bulldog' }]
```
That is it for this article and JavaScript array methods. I would highly recommend taking a look at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) as there is a mountain of knowledge there, waiting to be digested. It is also where I got my array method descriptions from.

A Quick Look At Some Popular Array Methods In JavaScript


We’ve all seen the dire BBC [headlines](https://www.bbc.co.uk/news/technology-62098767), and the accompanying frightening stats. In May Tech Monitor suggested that job vacancies in the IT sector were up by [191%](https://techmonitor.ai/leadership/workforce/uk-tech-jobs-skills-shortage). There really is a problem in our industry but maybe employers and recruiters should look beyond the norm? Norfolk Developers did some digging.

Reading the BBC article more closely, the piece is examining general IT skills across the country as well as more highly qualified roles. [Two million](https://www.bbc.co.uk/news/technology-62098767.amp) UK tech vacancies last year in the industry and a further [12 million workers](https://www.bbc.co.uk/news/technology-62098767.amp) lack ‘essential digital skills’, shouts the article. Though, this could apply as much to a lack of basic office computing skills as a shortage of devs.

As a community comprising 1600 members with almost 500 on our very active [Discord](https://nor.dev/discord), if we know anything, it’s about working within the tech industry. 

## A degree is not a prerequisite

With universities and FE colleges about to open their doors for the new term, not everyone who has a passion for programming and tech will be entering these groves of academe. Discussing this with those within our community, many of these specialists tried uni & college but this wasn’t a fit for them so they left full time education. Some just didn’t think that a degree was necessary for a field in which they were already skilled.

## Community support

Alex Scotton, has never graced a uni or a college with his presence as a student. He had the self taught skills but as he says himself, “my journey into the industry took a long time.” Alex has been writing code since he was 10 and kept on programming.

In common with many within the tech community, imposter syndrome played a large part in his initial lack of success and it was down to a friend’s encouragement that Alex was able to gain a foothold in the industry working in a digital marketing team. From this start he was able to progress rapidly in the industry. Today he works as a freelance web developer,a consultant and organises the annual [nor(DEV): conference](https://nordevcon.com/). 

## A web developer’s point of view

Talking to web developer [Louise Foster](https://louisefoster.co.uk/), she says, “I'm completely self taught. I had an online shop between 2010 and 2017 and I ended up realising I got more of a kick working on the website than I did getting the orders in (the orders were great though as well).”

## A degree works for some

NorDev programmer, Jake Saterlay, has a degree in computer science. In discussion Jake suggested, “You’ll learn a lot about the basics of programming [at college], enough to get you your first job, and then after that you’ll get all the experience you need to accelerate your career”

He also believes that you learn many other skills at uni that’ll help in your career.

“I think an aspect that you get from university that you don’t get from being self taught is working in a team. I had various different group projects at university which helped teach me about key project management skills like delegation and communication.”

## A recruiter’s’ thoughts
Speaking to Rokker Consulting’s Jim Marshall, about the issue, he gives reasons for tech skills shortage and states,  “this is the result of an exponential rise in demand (many more traditional firms, by the nature of how they operate, sell/market and deliver products and services, are now principally technology firms), reduced immigration and a tight overall labour market.” 
 
Jim continues by suggesting, 
 
> “the skills shortage has been exacerbated by the fixed mindset of some hirers; sometimes not even taking the time to look at the backgrounds of their best technologists (many of whom entered the industry by non-traditional routes)”. 
 
> “I am a strong advocate of hiring on potential over proof. The key is creating hiring systems and attitudes that adequately index aptitude, curiosity and growth mindset.”
 
## Looking to the future

Amber Hunt managing director of consultancy [Marshall Wolfe](https://marshallwolfe.co.uk/) believes;

> “as technology evolves at a rapid rate, the challenge is hiring and retaining people with these new skills. Whilst companies continue to seek experienced hires, they now find themselves repositioning to attract new digital talent in order to balance the skills shortage – leveraging this by promoting upskilling, retraining and softer skills, alongside apprenticeships, internships and graduate schemes.”
 
In a bid to deal with the tech skills shortage, Amber is trying to “explore with our clients how they can create a sustainable pipeline of talent for the future and thrive in the current technology ecosystem.”
 
She is a keen advocate of a “more inclusive approach to recruitment and open doors for people from diverse backgrounds.”
 
## Alternative routes into tech

Bootcamps and coding camps are an alternative route into the tech industry. [Codebar](https://codebar.io/workshops/2409) in Norwich, organised by Holly Allen and Rose Bonner, is one way with skilled mentors and experts on hand for advice.
 
Another route is Norwich’s [Tech Educators](https://techeducators.co.uk/), where Leanna Lucas, with a background in retail and film has just gained the skills to [land her first job as a web developer for Aviva](https://techeducators.co.uk/blog/our-first-graduate-gets-hired-by-aviva). Talking to Tech Educator’s MD, James Adams, he recognises many of the difficulties of those trying to enter the industry.
 
“What we are trying to achieve at Tech Educators isn’t about saying a university CompSci degree isn’t of value, of course it is, but that’s one path. It’s about offering fair access to all, access to those who don’t want to learn in the “traditional” academic environment, who feel that three years is too long, or are worried about high and increasing costs of tuition over that period.”
 
## Funding

Talking about funding, Tech Educators recently applied for funds via the LEP. James confirmed,

> “We had the recent LEP led tender for government funded spaces, where not one fully instructor led course was selected. Some learners can do the self paced approach, some need an instructor, again for me, it’s about fair access to all, if we are going to truly drive outcomes that we would call a success.” 
 
James firmly believes that fair access for all can solve many of the industry’s skill shortage problems.
 
It’s not that there isn’t the talent - there is but it needs to be fostered and encouraged. Talking to so many, what becomes very clear is that those in the tech industry have taken different routes to achieve their goals and all of these needed to be acknowledged and nurtured.
 
Check out the Norfolk Developers' Discord channel, for jobs, advice, code discussions and some rather esoteric channels on pets and food.

The tech skills shortage


# Community Recommends: VSCode Extensions

Recently, I reached out to our community on the [NorDev Discord Server](https://nor.dev/discord) to get some recommendations on extensions for VSCode. I already had a few in mind but I figured there's no better place to get some solid opions so here are the community recommendations.

## Prettier
![Prettier](/static/images/pages/posts/2022-08-20-community-recommends-vscode-extensions/Prettier.jpg)
[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is a code formatter, and a very popular one too!  
In their own words: 
> Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.   

Now if you are new to coding and just starting out it may be worth skipping this one for a little while, just to ensure you learn best practices and don't become entirely reliant on a code formatter to keep your work legible.   
That said, the main reason this was chosen as a popular option by the community is the fact it allows you to worry less on the legibility of your code and instead focus more on the code itself.   
If you need to get in the zone and simply write the code without little worry or regard to formatting and other nuances then this is a great recommendation.  

## Live Server
![Live Server](/static/images/pages/posts/2022-08-20-community-recommends-vscode-extensions/Live_Server_Logo.jpg)
[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) is a fanstatic tool when you are working on sites that are comprised of nothing more than HTML, CSS and Javascript.   
Live Server provides you with a way to view your code as you would on, well, a live server. It auto updates as you save your code and is a great companion for a second screen (or split screen) set up so you can see the changes as you make them.   
As a new coder I found this to be really useful, I knew almost instantly that the changes I were making were either working or not. It's great for experimental learning.   

## Live Share
![Live Share](/static/images/pages/posts/2022-08-20-community-recommends-vscode-extensions/Live_Share.jpg)
[Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) is the definitive extension for sharing your projects and pair programming and working collaboratively remotely, all provided by Microsoft themselves.   
In their own words:
> This extension pack includes everything you need to start collaboratively editing and debugging in real time, including integrated audio and text chat. This provides you and your team/class with a one-click installation, in order to begin pair programming, performing remote code reviews, driving interactive lectures, and more, without needing to leave Visual Studio Code.   

I can't put it much better than that really, long story short, if you need a friend to help you with your code or you intend to pair programme, work collaboratively and want to work in real time then this the one for you.  
A strong choice from the community.   

## GitLens
![GitLens](/static/images/pages/posts/2022-08-20-community-recommends-vscode-extensions/GitLens.jpg)
[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is an extension that adds extra features to Git.   
To quote the experts:
> Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.   

Pretty self explanatory, not sure how else I can elaborate on that other than saying that it sure is a popular option and it comes from the trusty people at GitKraken, a little more from them below.

> GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.   

That's all I'm saying other than check it out!   

## CSS Peek
![CSS Peek](/static/images/pages/posts/2022-08-20-community-recommends-vscode-extensions/CSS_Peek.jpg)
[CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) is a favourite of mine beacuse I am a very ~~lazy~~ efficient person.   
CSS Peek allows you to, well, peek at your CSS. You can use it one a `class` in your HTML to see the CSS that it is appying. It does go one step further though and will allow you to edit the CSS from your peek without even opening your CSS file.   
When you're first applying classes it's great if you can remember exactly what your class does, when editing in future it's fantastic for those quick edits. It also lets you jump straight to the relevant part in the CSS file from your HTML document too.   

## JavaScript (ES6) code snippets
![JS Snippets](/static/images/pages/posts/2022-08-20-community-recommends-vscode-extensions/JS_Snippets.jpg)
[JS Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) does exactly what it says on the tin.   
This extension providers you with snippets of ES6 code, it also supports Typescript as well as Javascript and React too.  
A very handy little morsel!   

## Power Mode
![Power Mode](/static/images/pages/posts/2022-08-20-community-recommends-vscode-extensions/Power_Mode.jpg)
[Power Mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode) is the point at which we remember that the NorDev community has a good sense of humour.   
Power Mode has a number of features to add flair and meme's to your coding experience.   
There is a combo meter (keep those fingers tapping) as well as a variety of built-in effects including explosions, interdeminsional portals, and clippy (for the meme's) and over 20 customisable settings.   
I can't do it justice in text along, just click the link and prepare to have your mind blown!   

## And that's a wrap!
That is the list of all extensions that were recommended to me by the NorDev community.   
We'd love to hear any suggestions you have to please feel free to drop in, say Hi and let us know your favourites on the [NorDev Discord Server](https://nor.dev/discord)!


Going straight to the ♥️ of software development practice and process

Local, national and international speakers and workshops for Norfolk Developers.

Upcoming Events

📆 nor(DEV): Wander

📆 Food & Drinks at the Junkyard Market

Latest posts

A Quick Look At Some Popular Array Methods In JavaScript

The tech skills shortage

Community Recommends: VSCode Extensions

Latest Magazine

February 2020 Conference Edition