## Introduction
As a developer, JavaScript is an essential language to know, especially for modern web development. JavaScript can be used to create dynamic and interactive websites and web-based applications.

If you’re a beginner, however, it can be a bit overwhelming to learn JavaScript and figure out how to use it effectively. To help you get started, we’ve compiled a list of the top 10 essential JavaScript tips for beginners.

## 1. Start with the fundamentals.
Before you dive into more complex topics, make sure you understand the basics of JavaScript. That includes the syntax, variables, data types, and how to use the language to manipulate HTML and CSS. You should be able to clearly understand the differences between keywords such as let and const.

## 2. Use comment blocks.
Comment blocks are a great way to document your code and make it easier for other developers to understand. By writing comments, you’ll be able to recall what you were trying to accomplish when you come back to the code in the future.

## 3. Take advantage of modern frameworks.
These days, there are a lot of great JavaScript frameworks like React, Angular, and Vue that can make it easier to develop complex web applications.

Developers should take advantage of modern frameworks for several reasons. First, modern frameworks provide a more organized and efficient way to write code. This allows developers to create larger and more complex applications with fewer lines of code.

Additionally, modern frameworks provide a variety of features that make developing applications easier, such as automated testing, debugging tools, and improved performance. Modern frameworks have a large community of developers who can provide support and advice which can be invaluable when developing complex applications.

## 4. Use a linter.
A linter is a tool that helps you write better code by checking for errors, typos, and other potential issues. Using a linter in Javascript can help you keep your code organised and maintain consistency throughout your codebase. It can help you identify potential errors in your code and enforce coding conventions, such as indentation, variable naming conventions and formatting.

Additionally, it can help you avoid common coding pitfalls, such as typos, that can lead to unexpected bugs and errors. Ultimately, using a linter in Javascript can help ensure that your code is of high quality and runs as expected.

## 5. Learn the browser developer tools.
The browser developer tools are an invaluable resource for JavaScript developers. They allow you to inspect the HTML and CSS elements on a page, debug your code, and test out changes in real-time.

## 6. Learn about asynchronous programming.
Asynchronous programming is a key concept in JavaScript and understanding it will help you write better code. It allows you to write code that can run in the background while the main thread is occupied with other tasks. This is essential for creating responsive user experiences in web applications, as well as to ensure that multiple processes can run concurrently without blocking the main thread.

## 7. Take advantage of libraries and frameworks.
There are a lot of great libraries and frameworks available for JavaScript developers. Consider using one of these to speed up your development process and make it easier to develop complex projects. You can find almost all packages on the NPM repository.

## 8. Get familiar with modern JavaScript syntax.
Modern JavaScript has changed a lot over the years. If you’re still using old syntax, it’s time to update your code. Get familiar with modern syntax like arrow functions, template literals, and async/await.

## 9. Learn about security.
Security is an important topic for web developers and JavaScript developers should be aware of potential risks. Make sure you learn about common security vulnerabilities and how to protect your code from malicious attacks.

## 10. Experiment and practice.
The best way to learn JavaScript is to experiment and practice. Try out different concepts and write code to solve problems. As you get more comfortable with the language, you’ll be able to develop more complex projects.

## Conclusions
By learning these essential JavaScript tips for beginners, you’ll be well on your way to becoming a proficient JavaScript developer. With practice and experimentation, you’ll be able to master the language and create some amazing web applications.

Tips for Javascript Developers


## Introduction to Atomic Design in Frontend Apps: Streamlining Project Planning and Enhancing User Interfaces

In the ever-evolving landscape of frontend development, delivering seamless user experiences has become paramount. To achieve this, developers and designers are constantly seeking innovative methodologies that not only expedite project planning but also ensure the creation of consistent and user-friendly interfaces. One such methodology that has gained significant traction is “Atomic Design.”

Atomic Design is not just a methodology. It’s a conceptual framework that aims to transform the way we approach frontend app development. Coined by Brad Frost, Atomic Design breaks down interfaces into fundamental building blocks, allowing developers and designers to create systems that are not only modular but also inherently scalable. This approach draws inspiration from chemistry, where elements combine to form molecules, which then come together to create complex structures. Similarly, in Atomic Design, UI components are categorised into distinct levels of complexity, namely atoms, molecules, organisms, templates, and pages.

## Efficient Project Task Planning Through Atomic Design
Incorporating Atomic Design principles into project task planning offers a comprehensive framework that simplifies the intricate process of frontend development. By breaking down user interfaces into atomic components, teams gain a structured and modular foundation to base their task assignments upon.

This granularity allows for precise task allocation, enabling developers and designers to focus on specific components or elements without overwhelming complexity. Moreover, the hierarchical nature of Atomic Design ensures that the dependencies between components are well-defined, aiding in the prioritization and sequencing of tasks.

As teams collaboratively assemble atoms into molecules, molecules into organisms, and so on, the project’s development roadmap becomes more tangible, facilitating better resource allocation, streamlined timelines, and a shared vision of project progress. This approach not only enhances efficiency but also minimizes the risk of bottlenecks, as team members can work concurrently on different components, ultimately resulting in a well-orchestrated project task planning process.

## Why Choose Atomic Design: Bridging the Gap Between Design and Code
Converting meticulously crafted designs into functional code is often a challenging endeavour. The intricacies of translating visual elements to interactive components while maintaining design consistency can lead to a time-consuming and error-prone process. This is where Atomic Design emerges as a powerful tool to bridge the gap between design and code, facilitating a smoother and more efficient workflow.

### 1. Component Reusability and Consistency

At the core of Atomic Design is the concept of componentisation. UI elements, whether they’re as basic as buttons (atoms) or as complex as feature sections (organisms), are treated as discrete, reusable entities. This component-based approach ensures that the same design elements can be efficiently reused across the application, guaranteeing design consistency and reducing redundant coding efforts. By creating a library of these components, developers can easily access and integrate them, saving valuable time during the development phase.

### 2. Hierarchical Structure for Clarity

The hierarchical structure of Atomic Design provides a clear and intuitive framework for both designers and developers. Starting at the atomic level, designers define the fundamental building blocks. These atoms and molecules are then combined to form more complex organisms and templates. This structure serves as a roadmap for developers, guiding them through the process of translating each design element into code. Consequently, the chances of misinterpretation and deviation from the original design are minimised.

### 3. Faster Iterations and Prototyping

Atomic Design’s modularity encourages rapid iterations and prototyping. As each component is designed, it can be quickly integrated into the existing codebase, allowing for real-time visualisation of how the components interact and behave. This iterative approach enhances collaboration between designers and developers, fostering a dynamic feedback loop that leads to quicker refinements and improvements. Moreover, prototypes can be easily created by assembling pre-designed components, providing stakeholders with a tangible sense of the final product’s functionality and appearance.

### 4. Scalability and Future-Proofing

Frontend applications are rarely static; they evolve over time with feature additions and updates. Atomic Design’s emphasis on scalability ensures that as the application grows, the underlying architecture remains manageable. New components can be seamlessly integrated into the existing structure, leveraging the established design patterns. This future-proofing aspect not only streamlines development but also minimizes the risk of introducing inconsistencies as the app expands.How do we consider tasks

### Conclusions
In conclusion, Atomic Design empowers frontend developers to efficiently transform intricate designs into functional code by embracing a modular, hierarchical, and systematic approach. Its reusability, clarity, iterative nature, and scalability make it an invaluable asset in modern frontend development, enhancing collaboration, saving time, and ultimately resulting in polished user interfaces that stand the test of time.

Atomic Design in Frontend Apps


## Introduction
I’ve flunked software interviews more times than I can count with just two hands. The worst experience was when I got so embarrassed that I apologized and left midway through that interview.

It took me three years to finally find the answer to the technical question asked during that interview. Three years of gaining experience, working diligently every day. And when I asked some very senior colleagues the same question none of them could get it.

This is when I realized that having a bad interview isn’t always on you, sometimes your interviewers can throw you an impossible question as a junior as a way of messing you up. But let’s take a look at a few ways to avoid falling into the pit of regret.

## Practice the fundamentals
Working with React for the past few years now, I’ve had the chance to do a lot of technical interviews with some very senior people, and one common trait that makes me say no to a candidate is that they don’t know the fundamentals of Javascript.

I’d ask them, what’s a closure, what is scope, they wouldn’t be able to tell me, and yet they know the in’s and out’s of react hooks. Without understanding that under the hood hooks are simple scoped functions that return a state scoped to that function.

## Have solid examples
This is one that you will come across time and time again, one question that is always asked in most interviews “What was your biggest mistake” and then people think, and then they make stuff up. Don’t do this. Your biggest mistake isn’t something that you need to be ashamed of.

This question is there to test your capacity for calm reaction, learning from your mistakes and seeing if you’re the type of person who will try to pass blame onto someone else. Mistakes happen, fix it, learn it and forget about it. But do not make this up.

It doesn’t have to be anything major, it can be something like “I used a rusty razor to shave my beard and now I’m bleeding”. The calm reaction, apply tissue, the learning, buy new blades, blame… yourself for not looking after your shaving equipment.

## Practice, Practice, Practice
Where?
- Leet code
- Codewars
- A notepad
- Your own brain

There are a lof of places to practice.

Code something and practice. If you’re having trouble understanding a concept go code something with it and learn how it’s working.

## Show ownership
This can be a college project, school project, home cooking project, showing that you decided to do something and you owned something that made a difference to someone. Ownership is one of the most impressive qualities that a candidate can show as it shows that they are willing to do the work.

## Be coachable
This mainly tends to be an issue with more senior candidates, in your current position you’re probably the “creme dela creme” on that project. This won’t be the case in a new company so never come in with the attitude of, “oh this is easy I can pick this up no issue”.

This is going to make the interviewer think that you’re just going to come in, not listen to instructions, not allow yourself to be taught how things are done at your new company and as a result, break something in production.

## Be collaborative
This is something that everyone loves to see, how did you collaborate with your past colleagues? but also, how did you argue with them? How did you get your co-workers to agree to things that probably not everyone agreed with? When I say be collaborative I don’t mean go with the flow for the sake, I mean show how you have tried to make the best product even if it meant having disagreements.

## Research the company
Many companies are going to have a ton of data online about them, probably even the interview questions. You should try to find out as much as you can.

## Explain your solutions
Researching the company and its questions can be a double edged sword, if you do find the technical tasks, be prepared to go deeper than just the answer. Be able to explain how it works, why it works, and what the complexity of it is. Never stop with the answer, always consider the edge cases and how to potentially solve for them.

## Code out loud
When I’m interviewing a candidate the worst thing that happens is the candidate goes quiet. An interviewer will want to know what you’re thinking, they want to know how you got to a solution and they want to know why you’re going for that solution.

This way even if you provide a really ugly answer, that works, is fast, that solves for all use cases an interviewer can see why you did it this way and you’ll get the marks.

## Realise it’s not personal
In the vast majority of interviews I’ve done I’ve had a scoring sheet. It’s not about what I think about you as a person, it’s sometimes just how you do on the technical assessments. This means that this can be standardized across the board and ensure that all candidates are treated the same and scored at the same level.

## Conclusions
Even with these tips we’re only scratching the surface of the multitude of things that can go right or wrong for you during an interview process. Not all interviews are going to be the same but with practice, preparation and confidence you can make them go a little bit better.

If you’re worrying about an upcoming interview you can book 1:1 interviewing preparation with me [here](https://calendly.com/thewebuiguy/new-meeting)

Ace your next software interview

### Intro
There are quite a number of reasons to use distributed system architecture. Werner Vogles of amazon states “we can scale our operation independently, maintain unparalleled system availability and introduce new services quickly without the need for massive reconfiguration.” By focusing on the scalability and component independence amazon has been able to increase their speed of delivery while also improving on their safety, in the form of scalability and availability. 

Many companies who adopt this architectural pattern are striving towards common goals and benefits. The goal of improving software delivery speed as a functional scope is realized. The goal of maintaining software system safety as scale increases. 


In their InfoQ article UK e-retailer Gilt is an early adopter of microservices architecture. Their VP of engineering states that the benefits include:

- Lessening of dependencies between teams.
- Allows for initiatives to run in parallel
- Supports multiple technologies, languages and or frameworks
- Enables graceful degradation of a service.
- Promotes ease of innovation through “disposable code” let it fail and move on.


### Incremental upgrades
When in an organisation rewriting their entire application is simply out of the question. There is no way that a team can down tools during the development of a product, to do so would lose them both time, money and possibly even clients. Micro frontends allow an approach that lets developers strangle the old legacy code out of the application piece by piece, while in conjunction continue development of new features without the worry of causing the overall application to fail.

This approach allows for developers to both maintain old cold, while developing new features in a totally separate code base which can increase both speed and safety. The safety is that if one of these new features is not 100% by the time it reaches production, at least it is only that one feature and not the entire application. 

Micro frontend's allow us a chance to test out new technologies on a case by case basis. We can easily upgrade a library in one of our applications without affecting the overall project. These changes can then be measured and analysed in a contained and isolated environment, which would lead to an easier decision on whether or not to move it into the rest of the codebase.


### Isolated Modules
The code for each of our modules is going to live in its own repo, project or folder. These smaller pieces of code  tend to be easier for us to work on as there are not 1 => N amount of projects in these projects there is just the project. We can ensure that each application has a thick line to create its bounded context. However this isolation is not a silver bullet that will ensure small bundle sizes, smaller code bases, we still need to put effort into our code and its quality. It is easy to depend on the approach to manage how large our codebase becomes but this is one pit that we cannot fall into.

We do however gain one advantage to this approach and that is that our service can now be deployed by itself. Build times may go from minutes down to seconds. This reduces the amount of time we are waiting to see if a build has been successful, if a build has failed or if a build is going go to production. With our monolithic application we need to deploy the entire application for one small fix in one small area of the application.


### Autonomous Teams
As a company manages to break their monolithic application into smaller apps this is going to lead to having fully independent teams who only work on their section of the product. Teams will have full ownership of their vertical slices of the application and more and more companies will move away from having horizontal teams who look after common parts of the project. For this to work teams need to be formed around vertical slices of business functionality rather than around technical capabilities. While doing this we do need to ensure that a team is not going off on a tangent and creating their own UI libraries to use within a project. 


### Team Communications
This approach to development also means that there must be an increase within the organization of communication between teams. At all times. Dan Abramov once put forth the argument, “what games would feel like if every designer put a different game engine into it”. In opposition to this statement it is clear that with this approach to programming it is even more crucial that teams speak with each other on a daily, if not hourly basis.


### Conclusions
There are both benefits and drawbacks to this appraoch of frontend architecture, you are allowing teams to be completely isolated, which in turn will mean that it is up to each team to ensure a clear line of communication remains open.
But once the initial hiccups have been overcome this approach will allow both company and teams to scale from 1 => N amount of projects, teams and services.

Benefits of micro frontends

Rabbitode is a probject created to provide a simple interface in order to work with the AMQP interface to rabbitmq.


RabbitMQ  is an events broker that allows us to send a recieve events between producers and consumers via an event queue.

# Installation
- Installation via npm `npm install rabbitode`


## Requirements
In order for this project to run you must have a working instance of rabbitmq on your machine or server.
I reccomend docker for local development.
```docker run -p 5672:5672 -d --rm --name rabbit rabbitmq:3```

# Api

## Creating a connection
```typescript
    import { RabbitMqInterface } from 'rabbitode';
    const myConnection = new RabbitMqInterface();
    
    myConnection.setRabbitUri('http://myconnection')
    
    const handleConsume = channel => msg => {
      console.log(myConnection.decodeToString(msg))
      channel.ack(msg);
    };
    
     myConnection.sendDirect({
        exchangeName: 'direct_test_exchange',
        routingKey: `direct_test_queue`,
        content: {
          message: `this is a direct test message`
        }
      });
       
      myConnection.startDirectConsumer({
          exchangeName: 'direct_test_exchange',
          exchangeType: 'direct',
          queueName: 'direct_test_queue',
          consumerCallback: handleConsume,
      });
```

## API
#### Send Direct
```typescript
rabbitInterface.sendDirect({
    exchangeName: 'direct_test_exchange',
    routingKey: `direct_test_queue`,
    content: {
      message: `this is a test message for direct stuff ${variable}`
    }
  });

```
#### Send Fanout
```typescript
rabbitInterface.sendFanout({
    exchangeName: 'fanout_test_exchange',
    routingKey: ``, // leave this blank with a fanour
    content: `this is a test message for fanouts: ${count}` 
    // will return undefined with decodeToJSON as its a string
});
```
#### Send Topic
```typescript
rabbitInterface.sendTopic({
    exchangeName: 'topic_test_exchange',
    routingKey: `test.test`,
    content: `this is a test message for topics: ${count}`
  });
```
#### Consumer Direct
```typescript
rabbitInterface
  .startDirectConsumer({
    exchangeName: 'direct_test_exchange',
    exchangeType: 'direct',
    queueName: 'direct_test_queue',
    consumerCallback: handleConsume,
});
```

#### Consumer Fanout
```typescript
rabbitInterface
  .startFanoutConsumer({
    exchangeName: 'fanout_test_exchange',
    exchangeType: 'fanout',
    queueName: '',
    consumerCallback: handleConsume,
  });

```
#### Consumer topic
```typescript
// the topics this consumer will listen for given in the routing key
const myTopics = ['test.*', '*.test'];
rabbitInterface
    .startTopicConsumer({
        exchangeName: 'topic_test_exchange',
        exchangeType: 'topic',
        consumerCallback: handleConsume,
    }, myTopics);
```
#### Consumer Handler
```typescript
//MUST CONTAIN CALLBACKS
const handleConsume = channel => msg => {
  console.log(rabbitInterface.decodeToString(msg));
  console.log(rabbitInterface.decodeToJson(msg));
  //console.log(msg.fields.routingKey); topics only really
  channel.ack(msg);
};

```
#### Set custom uri
```typescript

myConnection.setRabbitUri('http://mylocation');

```
#### Enable debugging
```typescript

myConnection.enableDebugging();

```

#### Disable debugging
```typescript

myConnection.disableDebugging();

```

#### Decode to JSON
##### will check if message content is JSON or Return undefined
```typescript

myConnection.decodeToJson(message);

```

#### Decode to String
```typescript

myConnection.decodeToString(message);

```

# Changes
### v-2.0.0
 - Most methods return this to enable method chaining 
 - send method no longer available, use sendDirect, sendTopic, sendFanout instead
 
### v-2.0.1
  - Security Vulnerability fixes in package.json

Latest Articles

Tips for Javascript Developers

Atomic Design in Frontend Apps

Ace your next software interview

Benefits of micro frontends

Abstracting Rabbits