Coding || Design || Update

Simanta


# The Impact of Colors on a Website and Why They Are Vital for a Brand

In the vast landscape of the internet, where countless websites compete for attention, one crucial element can make all the difference – colors. Colors are not just a visual feast; they are powerful tools that can significantly impact a brand's identity and perception. In this blog post, we will explore the importance of colors for a brand and delve into success stories of big brands, like Apple, that have leveraged colors to create a lasting impression.

## The Psychology of Colors

Before we dive into the significance of colors for branding, it's essential to understand the psychology behind colors. Colors have the ability to evoke emotions, influence behavior, and shape perceptions. Different hues can trigger specific responses in the human brain, creating subconscious associations and forming lasting impressions.

For example:
- **Red** is often associated with passion, excitement, and urgency. Brands like Coca-Cola use red in their logos to grab attention and create a sense of energy.
- **Blue** is linked to trust, dependability, and professionalism. Tech giants like Facebook and Twitter have integrated blue into their branding to foster a sense of reliability.
- **Green** represents nature, growth, and health. Companies like Whole Foods and Starbucks use green to emphasize their focus on sustainability and natural products.

Understanding the psychological impact of colors helps brands strategically choose their color palette to align with their intended message and brand values.

## The Importance of Colors for a Brand

Colors play a fundamental role in building a brand's identity and recognition. Here's why they are vital for a brand's success:

1. **Brand Recognition:** Consistent use of colors across various touchpoints, such as logos, websites, marketing materials, and product packaging, fosters brand recognition. When customers encounter the brand's distinctive color scheme repeatedly, they subconsciously associate it with the company, enhancing brand recall.

2. **Brand Personality:** Colors can personify a brand and communicate its personality to the audience. Whether it's bold and adventurous or calm and sophisticated, the right color choice can help shape the brand's character and evoke desired emotions in customers.

3. **Differentiation:** In a competitive market, standing out from the crowd is crucial. Unique and well-thought-out color choices help brands differentiate themselves from competitors, leaving a memorable impression on consumers.

4. **Emotional Connection:** Colors have the power to create emotional connections with customers. A brand's color palette can evoke feelings of trust, joy, excitement, or nostalgia, fostering a deeper bond between the brand and its audience.

5. **Cultural Relevance:** Colors hold cultural significance, and their meanings can vary across different regions. Brands that understand and respect these cultural nuances can build stronger connections with diverse audiences worldwide.

## Success Stories: Apple's Iconic Color Evolution

Apple Inc., one of the world's most valuable companies, has masterfully utilized colors to reinforce its brand image throughout its history.

1. **Apple's Early Days:** In its initial logo, Apple featured a rainbow-colored apple with a bite taken out, designed by Rob Janoff in 1977. The rainbow colors symbolized Apple's vision of innovation, creativity, and diversity, aligning with the tech revolution of the era.

2. **Simplicity Redefined:** In 1997, under Steve Jobs' leadership, Apple underwent a rebranding. The rainbow logo was replaced with a monochromatic one – a sleek and minimalistic bitten apple in various shades of gray. This change marked a shift towards simplicity, elegance, and sophistication.

3. **Going Silver:** In the early 2000s, Apple's products, including the iPod, iMac, and MacBook, adopted a silver aluminum design, further accentuating the brand's focus on modernity and cutting-edge technology.

4. **Product Differentiation:** As Apple expanded its product range, it introduced distinct colors for various devices, such as the colorful iMac G3 in 1998 and the iPod Mini in 2004. These vibrant colors made the products visually appealing and helped customers identify different models at a glance.

5. **The Era of White:** When the iPod and later the iPhone were released, Apple embraced a minimalist and futuristic approach, featuring a predominantly white color scheme. The white earbuds and cables became an iconic symbol of the brand and demonstrated Apple's commitment to simplicity and elegance.

6. **Present Day:** In recent years, Apple has maintained a clean and sophisticated visual identity with a focus on a minimalist design. While the color palette has become more subdued, the brand's commitment to excellence, innovation, and user experience remains steadfast.

## Conclusion

Colors wield tremendous power in the world of branding. The psychology behind colors can shape perceptions, evoke emotions, and foster a profound connection with customers. Apple's journey serves as a compelling success story, showcasing how adept use of colors can contribute to a brand's enduring legacy.

In today's digital age, crafting a consistent and impactful color strategy is an essential aspect of building a strong brand presence online. Understanding the audience, the message, and the desired perception can guide brands in selecting the perfect color palette to leave a lasting impression in the hearts and minds of consumers.

The Impact of Colors on a Website



# Syntax, Cool Features, and Code Examples

Python, the versatile and elegant programming language, has captured the hearts of developers worldwide. Whether you are a beginner or an experienced programmer, Python's intuitive syntax and powerful features make it a joy to work with. In this blog post, we will explore some of Python's coolest features and dive into code examples related to array and object modification, filtering, and more.

## 1. Concise Syntax: List Comprehensions

Python's list comprehensions offer a concise and expressive way to create lists based on existing ones. Let's say we have a list of numbers and we want to create a new list with each number squared:

```python
numbers = [1, 2, 3, 4, 5]
squared_numbers = [num**2 for num in numbers]
print(squared_numbers)  # Output: [1, 4, 9, 16, 25]
```

List comprehensions are not only efficient but also improve code readability by encapsulating the logic in a single line.

## 2. Powerful Dictionary: Dictionary Comprehensions

Similar to list comprehensions, Python offers dictionary comprehensions to create dictionaries in a concise manner. Let's say we have a list of fruits and we want to create a dictionary where the keys are the fruit names, and the values are their respective lengths:

```python
fruits = ['apple', 'banana', 'orange', 'kiwi']
fruit_lengths = {fruit: len(fruit) for fruit in fruits}
print(fruit_lengths)  # Output: {'apple': 5, 'banana': 6, 'orange': 6, 'kiwi': 4}
```

This feature enables you to manipulate data and create dictionaries effortlessly.

## 3. Modifying Lists: The `map()` Function

The `map()` function in Python is an efficient way to modify elements in a list using a specified function. Suppose we have a list of temperatures in Celsius, and we want to convert them to Fahrenheit:

```python
def celsius_to_fahrenheit(celsius):
    return (celsius * 9/5) + 32

temperatures_celsius = [25, 30, 15, 20]
temperatures_fahrenheit = list(map(celsius_to_fahrenheit, temperatures_celsius))
print(temperatures_fahrenheit)  # Output: [77.0, 86.0, 59.0, 68.0]
```

With `map()`, you can transform entire lists efficiently without the need for explicit loops.

## 4. Filtering Data: The `filter()` Function

Python's `filter()` function allows you to filter elements from a list based on a specified condition. For instance, if we have a list of numbers and we want to keep only the even ones:

```python
def is_even(number):
    return number % 2 == 0

numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
even_numbers = list(filter(is_even, numbers))
print(even_numbers)  # Output: [2, 4, 6, 8, 10]
```

`filter()` offers a clean way to extract specific elements from a list based on custom criteria.

## 5. The `zip()` Function: Combining Multiple Lists

Python's `zip()` function enables you to combine multiple lists element-wise, creating tuples from corresponding elements. Let's say we have two lists: one with names and another with ages:

```python
names = ['Alice', 'Bob', 'Charlie']
ages = [28, 35, 42]
name_age_tuples = list(zip(names, ages))
print(name_age_tuples)  # Output: [('Alice', 28), ('Bob', 35), ('Charlie', 42)]
```

The `zip()` function is particularly useful when you want to iterate over multiple lists simultaneously.

## Conclusion

Python's elegant syntax and powerful features make it a top choice for developers across various domains. From list comprehensions for concise data manipulation to `zip()` for combining data, Python provides an array of tools to enhance your coding experience.

In this blog post, we explored just a few of Python's cool features with code examples related to array and object modification, filtering, and more. Python's versatility ensures that you can tackle a wide range of programming challenges with ease and efficiency. So, go ahead and unleash the power of Python in your projects!

Unleashing the Power of Python

TypeScript is a typed language that allows you to specify the type of variables, function parameters, returned values, and object properties.

If you're interested in learning TypeScript in a comprehensive way, I highly recommend this bestseller course: [Understanding TypeScript - 2020 Edition](https://www.udemy.com/share/1013yQA0QTc1ZUQ3g=/)



## Intersection Types

An intersection type is a way of combining multiple types into one. Meaning that you can merge a given type A with a type B or more and get back a single type with all properties.

```ts
type LeftType = {
  id: number
  left: string
}

type RightType = {
  id: number
  right: string
}

type IntersectionType = LeftType & RightType

function showType(args: IntersectionType) {
  console.log(args)
}

showType({ id: 1, left: "test", right: "test" })
// Output: {id: 1, left: "test", right: "test"}
```

As you can see, `IntersectionType` combines two types - `LeftType` and `RightType` and use the `&` sign to construct the intersection type.

## Union Types

Union types allow you to have different types annotation within a given variable.

```ts
type UnionType = string | number

function showType(arg: UnionType) {
  console.log(arg)
}

showType("test")
// Output: test

showType(7)
// Output: 7
```

The function `showType` is a union type that accepts both strings and numbers as a parameter.

## Generic Types

A generic type is a way of reusing part of a given type. It helps to capture the type `T` passed in as a parameter.

```ts
function showType<T>(args: T) {
  console.log(args)
}

showType("test")
// Output: "test"

showType(1)
// Output: 1
```

To construct a generic type, you need to use the brackets and pass `T` as a parameter. Here, I use `T` (the name is up to you) and then, call the function `showType` twice with different type annotations because it's generic - it can be reused.

```ts
interface GenericType<T> {
  id: number
  name: T
}

function showType(args: GenericType<string>) {
  console.log(args)
}

showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<number>) {
  console.log(args)
}

showTypeTwo({ id: 1, name: 4 })
// Output: {id: 1, name: 4}
```

Here, we have another example that has an interface `GenericType` which receives a generic type `T`. And since it's reusable, we can call it with first a string, and then a number.

```ts
interface GenericType<T, U> {
  id: T
  name: U
}

function showType(args: GenericType<number, string>) {
  console.log(args)
}

showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<string, string[]>) {
  console.log(args)
}

showTypeTwo({ id: "001", name: ["This", "is", "a", "Test"] })
// Output: {id: "001", name: Array["This", "is", "a", "Test"]}
```

A generic type can receive several arguments. Here, we pass in two parameters: `T` and `U`, and then use them as type annotations for the properties. That said, we can now use the interface and provide different types as argument.

## Utility Types

TypeScript provides handy built-in utilities that help to manipulate types easily. To use them, you need to pass into the `<>` the type you want to transform.

### Partial

- `Partial<T>`

Partial allows you to make all properties of the type `T` optional. It will add a `?` mark next to every field.

```ts
interface PartialType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Partial<PartialType>) {
  console.log(args)
}

showType({ id: 1 })
// Output: {id: 1}

showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John", lastName: "Doe"}
```

As you can see, we have an interface `PartialType` which is used as type annotation for the parameters received by the function `showType()`. And to make the properties optional, we have to use the `Partial` keyword and pass in the type `PartialType` as an argument. That said, now all fields become optional.

### Required

- `Required<T>`

Unlike `Partial`, the `Required` utility makes all properties of the type `T` required.

```ts
interface RequiredType {
  id: number
  firstName?: string
  lastName?: string
}

function showType(args: Required<RequiredType>) {
  console.log(args)
}

showType({ id: 1, firstName: "John", lastName: "Doe" })
// Output: { id: 1, firstName: "John", lastName: "Doe" }

showType({ id: 1 })
// Error: Type '{ id: number: }' is missing the following properties from type 'Required<RequiredType>': firstName, lastName
```

The `Required` utility will make all properties required even if we make them optional first before using the utility. And if a property is omitted, TypeScript will throw an error.

### Readonly

- `Readonly<T>`

This utility type will transform all properties of the type `T` in order to make them not reassignable with a new value.

```ts
interface ReadonlyType {
  id: number
  name: string
}

function showType(args: Readonly<ReadonlyType>) {
  args.id = 4
  console.log(args)
}

showType({ id: 1, name: "Doe" })
// Error: Cannot assign to 'id' because it is a read-only property.
```

Here, we use the utility `Readonly` to make the properties of `ReadonlyType` not reassignable. That said, if you try to give a new value to one of these fields, an error will be thrown.

Besides that, you can also use the keyword `readonly` in front of a property to make it not reassignable.

```ts
interface ReadonlyType {
  readonly id: number
  name: string
}
```

### Pick

- `Pick<T, K>`

It allows you to create a new type from an existing model `T` by selecting some properties `K` of that type.

```ts
interface PickType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Pick<PickType, "firstName" | "lastName">) {
  console.log(args)
}

showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John"}

showType({ id: 3 })
// Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick<PickType, "firstName" | "lastName">'
```

`Pick` is a bit different from the previous utilities we have already seen. It expects two parameters - `T` is the type you want to pick elements from and `K` which is the property you want to select. You can also pick multiple fields by separating them with a pipe(`|`) symbol.

### Omit

- `Omit<T, K>`

The `Omit` utility is the opposite of the `Pick` type. And instead of selecting elements, it will remove `K` properties from the type `T`.

```ts
interface PickType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Omit<PickType, "firstName" | "lastName">) {
  console.log(args)
}

showType({ id: 7 })
// Output: {id: 7}

showType({ firstName: "John" })
// Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick<PickType, "id">'
```

This utility is similar to the way `Pick` works. It expects the type and the properties to omit from that type.

### Extract

- `Extract<T, U>`

`Extract` allows you to construct a type by picking properties that are present in two different types. The utility will extract from `T` all properties that are assignable to `U`.

```ts
interface FirstType {
  id: number
  firstName: string
  lastName: string
}

interface SecondType {
  id: number
  address: string
  city: string
}

type ExtractType = Extract<keyof FirstType, keyof SecondType>
// Output: "id"
```

Here, we have two types that have in common the property `id`. And hence by using the `Extract` keyword, we get back the field `id` since it's present in both interfaces. And if you have more than one shared field, the utility will extract all similar properties.

### Exclude

Unlike `Extract`, the `Exclude` utility will construct a type by excluding properties that are already present in two different types. It excludes from `T` all fields that are assignable to `U`.

```ts
interface FirstType {
  id: number
  firstName: string
  lastName: string
}

interface SecondType {
  id: number
  address: string
  city: string
}

type ExcludeType = Exclude<keyof FirstType, keyof SecondType>

// Output; "firstName" | "lastName"
```

As you can see here, the properties `firstName` and `lastName` are assignable to the `SecondType` type since they are not present there. And by using the `Extract` keyword, we get back these fields as expected.

### Record

- `Record<K,T>`

This utility helps you to construct a type with a set of properties `K` of a given type `T`. `Record` is really handy when it comes to mapping the properties of a type to another one.

```ts
interface EmployeeType {
  id: number
  fullname: string
  role: string
}

let employees: Record<number, EmployeeType> = {
  0: { id: 1, fullname: "John Doe", role: "Designer" },
  1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
  2: { id: 3, fullname: "Sara Duckson", role: "Developer" },
}

// 0: { id: 1, fullname: "John Doe", role: "Designer" },
// 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
// 2: { id: 3, fullname: "Sara Duckson", role: "Developer" }
```

The way `Record` works is relatively simple. Here, it expects a `number` as a type which is why we have 0, 1, and 2 as keys for the `employees` variable. And if you try to use a string as a property, an error will be thrown. Next, the set of properties is given by `EmployeeType` hence the object with the fields id, fullName, and role.

### NonNullable

- `NonNullable<T>`

It allows you to remove `null` and `undefined` from the type `T`.

```ts
type NonNullableType = string | number | null | undefined

function showType(args: NonNullable<NonNullableType>) {
  console.log(args)
}

showType("test")
// Output: "test"

showType(1)
// Output: 1

showType(null)
// Error: Argument of type 'null' is not assignable to parameter of type 'string | number'.

showType(undefined)
// Error: Argument of type 'undefined' is not assignable to parameter of type 'string | number'.
```

Here, we pass the type `NonNullableType` as an argument to the `NonNullable` utility which constructs a new type by excluding `null` and `undefined` from that type. That said, if you pass a nullable value, TypeScript will throw an error.

By the way, if you add the `--strictNullChecks` flag to the `tsconfig` file, TypeScript will apply non-nullability rules.

## Mapped types

Mapped types allow you to take an existing model and transform each of its properties into a new type. Note that some utility types covered earlier are also mapped types.

```ts
type StringMap<T> = {
  [P in keyof T]: string
}

function showType(arg: StringMap<{ id: number; name: string }>) {
  console.log(arg)
}

showType({ id: 1, name: "Test" })
// Error: Type 'number' is not assignable to type 'string'.

showType({ id: "testId", name: "This is a Test" })
// Output: {id: "testId", name: "This is a Test"}
```

`StringMap<>` will transform whatever types that passed in into a string. That said, if we use it in the function `showType()`, the parameters received must be a string - otherwise, an error will be thrown by TypeScript.

## Type Guards

Type Guards allow you to check the type of a variable or an object with an operator. It's a conditional block that returns a type using `typeof`, `instanceof`, or `in`.

- `typeof`

```ts
function showType(x: number | string) {
  if (typeof x === "number") {
    return `The result is ${x + x}`
  }
  throw new Error(`This operation can't be done on a ${typeof x}`)
}

showType("I'm not a number")
// Error: This operation can't be done on a string

showType(7)
// Output: The result is 14
```

As you can see, we have a normal JavaScript conditional block that checks the type of the argument received with `typeof`. With that in place, you can now guard your type with this condition.

- `instanceof`

```ts
class Foo {
  bar() {
    return "Hello World"
  }
}

class Bar {
  baz = "123"
}

function showType(arg: Foo | Bar) {
  if (arg instanceof Foo) {
    console.log(arg.bar())
    return arg.bar()
  }

  throw new Error("The type is not supported")
}

showType(new Foo())
// Output: Hello World

showType(new Bar())
// Error: The type is not supported
```

Like the previous example, this one is also a type guard that checks if the parameter received is part of the `Foo` class or not and handles it consequently.

- `in`

```ts
interface FirstType {
  x: number
}
interface SecondType {
  y: string
}

function showType(arg: FirstType | SecondType) {
  if ("x" in arg) {
    console.log(`The property ${arg.x} exists`)
    return `The property ${arg.x} exists`
  }
  throw new Error("This type is not expected")
}

showType({ x: 7 })
// Output: The property 7 exists

showType({ y: "ccc" })
// Error: This type is not expected
```

The `in` operator allows you to check whether a property `x` exists or not on the object received as a parameter.

## Conditional Types

It tests two types and selects one of them depending on the outcome of that test.

```ts
type NonNullable<T> = T extends null | undefined ? never : T
```

This example of the `NonNullable` utility type checks if the type is null or not and handle it depending on that. And as you can note, it uses the JavaScript ternary operator.

TypeScript Cheat Sheet


Something has always existed. According to physics, there can never be true physical nothingness—though there can be times when existence resembles nothing, such as a vacuum (the state of minimum possible energy) (Phys.org). Creating a space where there are no quantum fluctuations requires an enormous amount of energy, and there would be a remnant of that energy in that space afterwards if the fluctuations were flushed out, plus an unstable environment (1veritasium). Even on computers, deleted data is not actually tossed away, by rather written over.

# h1 Heading

## h2 Heading

### h3 Heading

#### h4 Heading

##### h5 Heading

###### h6 Heading

## Horizontal Rules

---


## Emphasis

**This is bold text**

**This is bold text**

_This is italic text_

_This is italic text_

~~Strikethrough~~

## Blockquotes

> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.

## Lists

Unordered

- Create a list by starting a line with `+`, `-`, or `*`
- Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    - Ac tristique libero volutpat at
    * Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
- Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

4. You can use sequential numbers...
5. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar

## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

Block code "fences"

```
Sample text here...
```

Syntax highlighting

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description                                                               |
| ------ | ------------------------------------------------------------------------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default.    |
| ext    | extension to be used for dest files.                                      |

Right aligned columns

| Option |                                                               Description |
| -----: | ------------------------------------------------------------------------: |
|   data | path to data files to supply the data that will be passed into templates. |
| engine |    engine to be used for processing templates. Handlebars is the default. |
|    ext |                                      extension to be used for dest files. |

## Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)


Something has always existed. According to physics, there can never be true physical nothingness—though there can be times when existence resembles nothing, such as a vacuum (the state of minimum possible energy) (Phys.org). Creating a space where there are no quantum.

How to create SVG-ready icon symbols in Sketch PART 2


## Why responsible website is so important?

Responsive website/web app design is the “big thing” right now. But if you are not a developer you may be wondering what this term means. You might also be unsure what is it or why website should be implementing responsive design, especially if you do not understand the concept.



## So what is responsive web app? 

Responsive design is a web design and development technique that helps in creating a site that can adjust according to the user’s screen. A responsive design will enhance a user’s browsing experience by creating a flexible and responsive web page, optimized for any device.

**Benefits of Website Design :**

- More Mobile Traffic
- Faster Mobile Development at lower costs
- Lower Maintenance needs
- Faster Webpages
- Lower bounce rates
- Higher conversion rates
- Easier analytics reporting
- Get to win the SEO
- Improved offline browsing experience
- Improved online browsing experience
- Attract lifetime clients to your businesses
- Streamlining the brand
- Resourceful in marketing and advertising
- Improving used engagement
- Reach out to more clients

As more people are beginning to use mobile devices, like smartphones and tablets for every business task only capable on desktop, one thing has become clear: mobile is taking over internet surfing.

Why you should make your website responsive


## We can divide this into 2 parts : 

- Website SEO optimization

  I am google certified digital marketer. Learnt a lot from google. This course/exam was divided into some parts like 


  https://learndigital.withgoogle.com/digitalgarage/validate-certificate-code

  certificate id: HBN TKY NH8

![](/postimg/gcertificate.jpg)

  - Web structure

  - UI/UX Design

  - How to write content
  
  - SEO
  
  - Marketing
  
  - Visuals that google cares 
  
    

​       **For optimization I like the PWA approach. **


- On going SEO 

  Means whenever you write article or something on your blog, you need to understand which keywords, visuals google cares and how you should use them. It may gain some popularity or high score, but won't be the same as the time goes on. That's why it's on going process. You have to learn how to use some tools that can help you to figure out what to do next.
  



## What is SEO ?

SEO stands for “search engine optimization.” It’s the practice of increasing both the quality and quantity of website traffic



###  Why SEO is important

- Paid advertising on social media, other online platforms can generate traffic to websites, the majority of online traffic is driven by search engines. Search engines are getting smarter, but they still need our help.

- Optimizing your site with SEO will help deliver better information to search engines so that your content can be properly indexed and displayed within search results.

- Organic Search Is Most Often the Primary Source of Website Traffic

- Good SEO Also Means a Better User Experience

- Local SEO Means Increased Engagement, Traffic & Conversions

- SEO Impacts the Buying Cycle SEO Best Practices Are Always Being Updated

- Understanding SEO Helps You Understand the Environment of the Web

- It’s A Long-Term Strategy



Implementing white hat quality SEO on a brand’s website is always going to be beneficial to that brand and its marketing efforts

For example, if you run a lead generation site, would you rather have:

- 2,000 monthly visitors and 5 people fill out a contact form? 

  **Or**

- 400 monthly visitors and 40 people fill out a contact form?

Use SEO to help you accomplish them — not the other way around.

SEO can do so much more than vanity metrics. When done well, it helps real businesses achieve real goals for their success.

How I made my website  SEO score up to 90%


## let and const

Until ES2015, `var` was the only construct available for defining variables.

```javascript
var a = 0
```

If you forget to add `var` you will be assigning a value to an undeclared variable, and the results might vary.

In modern environments, with strict mode enabled, you will get an error. In older environments (or with strict mode disabled) this will initialize the variable and assign it to the global object.

If you don’t initialize the variable when you declare it, it will have the `undefined` value until you assign a value to it.

```javascript
var a //typeof a === 'undefined'
```

You can redeclare the variable many times, overriding it:

```javascript
var a = 1
var a = 2
```

You can also declare multiple variables at once in the same statement:

```javascript
var a = 1, b = 2
```

The **scope** is the portion of code where the variable is visible.

A variable initialized with `var` outside of any function is assigned to the global object, has a global scope and is visible everywhere. A variable initialized with `var` inside a function is assigned to that function, it's local and is visible only inside it, just like a function parameter.

Any variable defined in a function with the same name as a global variable takes precedence over the global variable, shadowing it.

It’s important to understand that a block (identified by a pair of curly braces) does not define a new scope. A new scope is only created when a function is created, because `var` does not have block scope, but function scope.

Inside a function, any variable defined in it is visible throughout all the function code, even if the variable is declared at the end of the function it can still be referenced in the beginning, because JavaScript before executing the code actually *moves all variables on top* (something that is called **hoisting**). To avoid confusion, always declare variables at the beginning of a function.

### Using `let`

`let` is a new feature introduced in ES2015 and it's essentially a block scoped version of `var`. Its scope is limited to the block, statement or expression where it's defined, and all the contained inner blocks.

Modern JavaScript developers might choose to only use `let` and completely discard the use of `var`.

> *If `let` seems an obscure term, just read `let color = 'red'` as* let the color be red *and it all makes much more sense*

Defining `let` outside of any function - contrary to `var` - does not create a global variable.

### Using `const`

Variables declared with `var` or `let` can be changed later on in the program, and reassigned. Once a `const` is initialized, its value can never be changed again, and it can't be reassigned to a different value.

```javascript
const a = 'test'
```

We can’t assign a different literal to the `a` const. We can however mutate `a` if it's an object that provides methods that mutate its contents.

`const` does not provide immutability, just makes sure that the reference can't be changed.

`const` has block scope, same as `let`.

Modern JavaScript developers might choose to always use `const` for variables that don't need to be reassigned later in the program, because we should always use the simplest construct available to avoid making errors down the road.

Var vs Let vs Const


## What is UI?

UI is how your app looks. The user interface.



## What is UX?

UX is how your app works. The user experience regarding how it works.

------

The real challenge for businesses today is to create, market apps  and ensure that the differentiators are not only regarding of **what** the app has to offer, but also **how** it delivers complete user satisfaction.

### Put yourself in the end user’s shoes for a minute.

- Imagine a mobile application that promises great deals but is hard to navigate through.

- An app that offers a unique product or service but fails to showcase it within the app.

- An application that has high business potential but is poorly designed.

  -----

## 5 unarguable reasons why UI is important:

**1.How you present your offering matters the most**

The presentation (UI) of a poorly designed application can drive no traffic and leave a bad taste. This is the main reason why so many companies out there invest their resources in finding a good UI design.

**2.Great design is great business**

Milton Glaser once said, “There are three responses to a piece of design — yes, no, and WOW!” The branding, colour scheme, layout, graphics, tab and button placement, typography usage, white space and all other such design-level elements denote how well the app communicates visually with the user. And “wow” is what great UI can help you achieve.

 **3.You need the best marketing tool in the world**

It goes without saying that effective communication is important when it comes to addressing the users’ needs — and stable UI ensures that your content is presented in a delectable platter that appeals to the people it is intended to gratify.

 **4.Finding the right thing at the right place at any given time is essential**

There is no way they will want to spend more time on the app. Modern businesses, digital marketers and UI-UX designers and developers put in a lot of effort into the ideal navigation based on business type, products or services offered and the audience.

**5.Form and functionality are everything!**

This is why the functionality or usability aspects of a mobile app are integral to its short- and long-term success. Usability, experts reckon, is the foundation of a great UI and can go a long way in ensuring an exceptional customer experience.

> As businesses grow smarter, the consumers, too

When you look at the big picture, it’s easy to understand why User Interface Design is so important. It is the reason companies either see success or failure.

5 reasons why UI/Ux is important


There are two error handling situations in JavaScript. Either an error is thrown from a third-party library, database, API or you want to throw an error yourself. 



## Make your own custom errors by extending the base Error class:

```jsx
class OutOfError extends Error {}

class FlatError extends Error {}
```

```jsx
try {
  //some code
} catch (err) {
  if (err instanceof OutOfError) {
    //handle error
  } else if (err instanceof FlatError) {
    //handle error
  }
}
```

### Then you can throw error like this:

```jsx
try {
  const car = new Car() //imagine we have a Car object

  if (!car.fuel) {
    throw new OutOfError('No fuel!')
  }
  if (car.flatTire) {
    throw new FlatError('Flat tire!')
  }
} catch (err) {
  if (err instanceof OutOfError) {
    //handle error
  } else if (err instanceof FlatError) {
    //handle error
  }
}
```



Custom error catcher in JavaScript


## Here are a couple of reasons why React has got so well known so rapidly: 

- Working with the DOM API is hard. ReactJS fundamentally enables dev & designers to work with a virtual program that is more cordial than the genuine program. React virtual program acts like a wire between the engineer and the framework. 

- ReactJS empowers engineers to definitively compose their User Interfaces components and model the condition of those interfaces. This implies as opposed to concocting steps to depict exchanges on interfaces, engineers simply portray the interfaces as far as a last state (like a capacity). At the point when exchanges happen to that state, React deals with refreshing the User Interfaces dependent on that. 

- ReactJS is only JavaScript, there is a little, maybe 5% API to learn, only a couple of functions and how to utilize them. From that point onward, your JavaScript aptitudes are what make you a superior React designer & developer. There are no boundaries to passage. A JavaScript designer can turn into a gainful React engineer in a couple of days. 

- The main role behind utilizing ReactJS is, it deals with the whole procedure of composing your segments in the advancement condition. There are interminable front-end systems and libraries; in regard to web advancement. In any case, picking the best innovation is a troublesome activity for the achievement of your business.

### JSX Syntax Looks Like This

------

```jsx
<div className="green">Children Content</div>;
<MyCounter count={3 + 5} />;

{// Here, we set the "scores" attribute below to a JavaScript object}
var scores = {
  playerA: 2,
  playerB: 7
};
<Board data-index="2">
  <h1>Scores</h1>
  <Scoreboard className="results" scores={scores} />
</Board>;
```



ReactJS is easy to learn and can provide a good solution for web UI with JS functionalities. That's why React is so popular. 