Introduction

JavaScript’s Proxy object is a powerful feature that unlocks a wide range of possibilities for developers. When combined with TypeScript, it enhances your ability to manage and manipulate objects and functions in innovative ways. This article explores the utility of Proxies through practical examples.

What is a Proxy?

A Proxy in JavaScript acts as a wrapper around another object, known as the target. It allows you to:

1. Intercept fundamental operations on the target object
2. Redefine how these operations behave

These operations include:

• Property lookup
• Assignment
• Enumeration
• Function invocation

With a Proxy, you can inject custom logic when getting or setting properties. This capability is particularly useful for:

• Implementing validations
• Triggering notifications
• Enabling automatic data binding

1. The Lazy Greeter

Ever had a friend who only says their full name when asked? That’s our lazy greeter:

let friend = new Proxy({ firstName: "Jane", lastName: "Doe" }, {
  get: (person, prop) => {
    if (prop === "fullName") {
      return `${person.firstName} ${person.lastName}`;
    }
    return person[prop];
  }
});

console.log(friend.fullName); // Output: Jane Doe

2. The Nosy Neighbor

This proxy keeps track of how many times you’ve asked about something:

let neighbor = new Proxy({ visits: 0 }, {
  get: (target, prop) => {
    target.visits++;
    console.log(`You've asked about ${String(prop)} ${target.visits} times!`);
    return target[prop];
  }
});

neighbor.cat;
neighbor.dog;
neighbor.cat;

3. The Unbudging Boulder

Create an object that refuses to change, like a stubborn boulder:

function makeStubborn(obj) {
  return new Proxy(obj, {
    set: () => {
      console.log("Nice try, but I'm not changing!");
      return true;
    }
  });
}

let boulder = makeStubborn({ weight: "very heavy" });
boulder.weight = "light as a feather"; // Console: Nice try, but I'm not changing!
console.log(boulder.weight); // Output: very heavy

4. The Chatty Builder

A proxy that loves to talk about what it’s building:

function chattyCar() {
  let car = {};
  return new Proxy({}, {
    get: (target, prop) => {
      return (value) => {
        console.log(`Ooh, adding ${value} as the ${String(prop)}!`);
        car[prop] = value;
        return target;
      };
    }
  });
}

chattyCar().setColor("red").setWheels(4).setEngine("V8");

5. The Forgetful Library

A proxy that fetches books only when you ask for them:

let library = new Proxy({}, {
  get: (shelf, book) => {
    console.log(`Searching for "${String(book)}"...`);
    return `Here's "${String(book)}" for you!`;
  }
});

console.log(library.Moby_Dick);
console.log(library.Pride_and_Prejudice);

6. The Strict Parent

A proxy that ensures you follow the house rules:

let kidsBedtime = new Proxy({ time: 9 }, {
  set: (rules, prop, value) => {
    if (prop === 'time' && (value < 7 || value > 10)) {
      console.log("Bedtime must be between 7 PM and 10 PM!");
      return false;
    }
    rules[prop] = value;
    return true;
  }
});

kidsBedtime.time = 8; // Works fine
kidsBedtime.time = 11; // Console: Bedtime must be between 7 PM and 10 PM!

Extra. The Town Crier

A proxy that announces every change:

function townCrier(person) {
  return new Proxy(person, {
    set: (target, prop, value) => {
      console.log(`Hear ye, hear ye! ${String(prop)} is now ${value}!`);
      target[prop] = value;
      return true;
    }
  });
}

let mayor = townCrier({ name: "Ms. Sherif" });
mayor.name = "Mr. Sherif"; // Console: Hear ye, hear ye! name is now Mr. Sherif!

Remember, while proxies are super cool, they’re like superpowers — use them wisely! They can make your code slower if overused, and might confuse your teammates if you’re not careful. But when used right, they can make your JavaScript objects do amazing things!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: CoFeed | Differ
• More content at PlainEnglish.io

6 Use Cases for Javascript Proxies 🧙 was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Streamlining Your Dependencies with ni

A Beginner’s Tutorial to the Package Manager of the Future

I thus cloned an old project but was unable to determine whether it was using npm or yarn as a package management. Or might it be pnpm? Or Bun? I guess I’ll just use ni!

Is this a brand-new packager? No, no, don’t be alarmed.

The straightforward utility ni will attempt to determine which package management is being used in the current project before executing the appropriate command.

How does it function?

ni assumes you use lockfiles, which you should.

It will identify your current package manager (or the packageManager field in your packages.json, if given), yarn.lock / pnpm-lock.yaml / package-lock.json / bun.lockb performs the appropriate tasks.

In case you were unsure whether or not you needed that strange package-lock.json file that seems to change suddenly upon npm install, you do!

Installation

I already have at least npm globally installed:

npm i -g @antfu/ni

Usage

You have a new project open and all set to install the requirements. You can start by typing ni.

Guaranteed commands

Here is a list of all the commands that are currently available. You may always check the whole list in the project’s README if something changes and this information becomes stale.

ni — to install dependencies
Same as npm install.

Let’s install react.

ni react

You can also use the -D flag to install as a dev dependency.

ni -D prettier

You can run commands in your package.json scripts.

nr start
nr build

nlx - Download and execute a package

Same as npx.

nlx gitignore node

nu - Upgrade dependencies

Same as npm upgrade.

Upgrades all your packages to the latest version.

nu

nun - Uninstall dependencies

Same as npm uninstall.

nun husky

This will remove your package from package.json and uninstall it from node_modules.

nci - Clean install dependencies

Same as npm ci.

This will purge your node_modules folder and install your dependencies again.

nci

na - Alias for the current manager

Same as npm

na run test

It will use the correct package manager to forward the command.

Conclusion

This tool is a great way to avoid having to remember which one is used where.

Even if most of the time npm is the right one, just typing ni or nr is faster anyway.

I hope you’ll find this useful too!

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Streamlining Your Dependencies with ni: A Beginner’s Tutorial to the Package Manager of the Future. was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using CSS to add a dark theme to your current websites is really simple. We’ll do this in this article by utilizing CSS Variables.

The theme will be available in three different variations: Auto, Light, and Dark. However, the Auto theme will utilize the operating system’s theme option to determine whether the site will be Light or Dark. The Light and Dark themes are very clearly self-explanatory.

💡 Note: Using media queries and LocalStorage for theming is a great solution for smaller, weekend projects. However, if your projects are bigger, consider building a proper design system that is composable and scalable, using Bit’s open-sourced ThemeProvider that lets you quickly build a full theming solution with the Context API and design tokens.

To learn more about theming components with React:

Theming in Components with React and Bit

Implementing the HTML

Starting with HTML, each theme’s identifier may be thought of as being included in the value attribute:

<select id="theme">
    <option value="auto">Auto</option>
    <option value="light">Light</option>
    <option value="dark">Dark</option>
</select>

Implementing the CSS

Now that we’ve added some CSS to the body element, you may choose your Light Theme colors here by utilizing CSS variables:

body {
    --background-color: #ffffff;
    --text-color: #000000;
}

In order for our method to function, you’ll need to use your CSS Variables consistently across your style sheet. For instance, you could:

.main-content {
    background: var(--background-color);
    color: var(--text-color);
}

button {
    color: var(--text-color);
}

In cases where we’re going to be employing a dark theme, we’re just going to replace the values of the aforementioned specified variables. Add this CSS now:

:root {
    --dark-background-color: #111111;
    --dark-text-color: #eeeeee;
}

body.theme-dark {
    --background-color: var(--dark-background-color);
    --text-color: var(dark-text-color);
}

The dark theme should now function if you apply the theme-dark class to your body> element. When the time comes, we’ll use JavaScript to change this value with the choose>, but for now, let’s put our Auto option in place:

@media (prefers-color-scheme: dark) {
    body.theme-auto {
        --background-color: var(--dark-background-color);
        --text-color: var(--dark-text-color);
    }
}

The aforementioned CSS makes advantage of Media Queries to determine whether the operating system likes a Dark Theme and, if it does, whether we should use the nested ruleset for the body. theme-auto.

Basically what we’re saying “Does the body have a class named theme-auto, and does the operating system favor dark mode? So, let’s go to Dark Mode.”

Change the OS theme color to test it out, or even better, browse the page on your phone while using Dark Mode.

Including JavaScript

We can now focus on getting our theme selection drop-down to function because our CSS is operational. Let’s include the next JavaScript:

function applyTheme(theme) {
    document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
    document.body.classList.add(`theme-${theme}`);
}

document.addEventListener("DOMContentLoaded", () => {
   document.querySelector("#theme").addEventListener("change", function() {
        applyTheme(this.value);
   });
});

Here, we are awaiting the DOM’s readiness so that we can begin utilizing it, and once it is, we are listening for when the user selects a choice from the theme selector drop-down menu. After they choose an option, we delete any previously installed theme classes from the <body> tag and then add the chosen theme by calling this.value.

Going a step further, keeping the subject in mind

We could go one step further and enable the browser to retain the theme selection made when refreshing the page. We can utilize LocalStorage to do this.

Let’s add the following JavaScript so that we have this:

document.addEventListener("DOMContentLoaded", () => {
    const savedTheme = localStorage.getItem("theme") || "auto";

    applyTheme(savedTheme);

    for (const optionElement of document.querySelectorAll("#theme option")) {
        optionElement.selected = savedTheme === optionElement.value;
    }

    document.querySelector("#theme").addEventListener("change", function () {
        localStorage.setItem("theme", this.value);
        applyTheme(this.value);
    });
});

Now, after selecting a theme, we use localStorage.setItem(“theme”, this.value) to store the theme in local storage. Following this, we get the previously saved theme into the savedTheme constant, with a default value of auto, when the page loads. We just apply the stored theme once we have this.

In addition, we are cycling over all of our <option> components and selecting the option as “selected” if the value matches our stored theme.

Refresh the page, select a theme, and then refresh once again to see whether it works.

Please leave a comment if it functions for you.

Build Apps with reusable components, just like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo

Learn more

• How We Build Micro Frontends
• How we Build a Component Design System
• How to reuse React components across your projects
• 5 Ways to Build a React Monorepo
• How to Create a Composable React App with Bit

Using CSS to Implement a Dark Mode Theme for Your Websites was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. SourceAi

SourceAI is an AI-powered tool that can generate code in any programming language from any human language description. It can also simplify, find errors and fix them and debug your code.

2. Codepen

CodePen is a website that allows developers to build and share web-based code snippets.

3. Asana

Asana is a web-based project management tool that can be used to organize and prioritize tasks. It provides a flexible task management system that can be customized to fit the needs of any team.

4. RescueTime

RescueTime is a time-tracking and productivity tool that can be used to track time spent on different tasks and websites. It provides detailed reports on productivity and can be used to identify and eliminate time-wasting activities.

5. ChatGPT

ChatGPT can be fine-tuned on specific tasks and domains, such as customer service, e-commerce, and more, by training it on a smaller dataset specific to that task. This allows it to generate more accurate and relevant responses for specific use cases.

Overall, ChatGPT is a powerful language model that can be used to generate human-like text in a variety of applications.

6. Snyk

7. Sizzy

The browser for web developers. Develop, debug and test your websites and apps with ease and speed.

8. Wappalyzer

Technology profiler that shows you what websites are built with. Uncover programming languages, analytics, marketing tools, etc.

9. Figma

A free design tool for teams who build products together. It helps the entire product team create, test, and ship faster.

10. CodeSandBox

An online code sandbox for users to write, edit, test, collaborate and run web development projects.

11. Ngrok

A free service that helps you share a site or server running on your local machine on the web.

12. Swimm

Write internal documentation and notes about your code with ease.

In order for your engineers to trust it and spend less time hunting for information, provide internal code documentation that is constantly current, simple to discover, and easy to use.

13. Trello

Trello is a popular project management tool that lets you create and manage tasks, whether that be a team project or just your own personal list of chores. You can set deadlines, leave notes on projects and tasks, and assign tasks to other project collaborators.

14. Hoppscotch

You may build requests more quickly and spend less time on development with the aid of a lightweight, web-based API development suite.

15. CSS Diner

Css game to boost your productivity and reclaim your free time.

16. W3Schools

17. Programmer Humor

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Interested in scaling your software startup? Check out Circuit.

17 Productivity Tools for Developer Workflow Improvement 🚀 was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

In programming, an algorithm is a set of instructions or a procedure for solving a specific problem or achieving a specific task. Algorithms can be expressed in any programming language and can be as simple as a sequence of basic operations or as complex as a multi-step process involving different data structures and logic. The main goal of an algorithm is to take in input, process it and provide an output that is expected. Algorithms can be classified based on the time and space complexity, the technique used for solving the problem, and the type of problem it solves. Examples of algorithm are sorting, searching, graph traversals, string manipulations, mathematical operations, and many more.

Algorithms we will be talking about:

1. Sorting algorithms: Sorting is a fundamental operation in computer science and there are several efficient algorithms for it, such as quicksort, merge sort and heap sort.
2. Search algorithms: Searching for an element in a large dataset is a common task and there are several efficient algorithms for it, such as binary search and hash tables.
3. Graph algorithms: Graph algorithms are used to solve problems related to graphs, such as finding the shortest path between two nodes or determining if a graph is connected.
4. Dynamic programming: Dynamic programming is a technique for solving problems by breaking them down into smaller subproblems and storing the solutions to these subproblems to avoid redundant computation.
5. Greedy algorithms: Greedy algorithms are used to solve optimization problems by making the locally optimal choice at each step with the hope of finding a global optimum.
6. Divide and Conquer: Divide and Conquer is an algorithm design paradigm based on multi-branched recursion. A divide and conquer algorithm breaks down a problem into sub-problems of the same or related type, until these become simple enough to be solved directly.
7. Backtracking: Backtracking is a general algorithmic technique that considers searching every possible combination in a systematic manner, and abandons a particular path as soon as it determines that it cannot be part of the solution.
8. Randomized Algorithm: Randomized algorithms use randomness to solve a problem. It can be useful to solve problems that cannot be solved deterministically or to improve the average case complexity of a problem.

These algorithms are widely used in various applications and it’s important for a programmer to have a strong understanding of them. So i will try my best to explain them.

1. Sorting algorithms:

• Quicksort: Quicksort is a divide-and-conquer algorithm that chooses a “pivot” element from the array and partitions the other elements into two sub-arrays, according to whether they are less than or greater than the pivot. The sub-arrays are then sorted recursively.

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

print(quicksort([3,6,8,10,1,2,1]))

• Merge Sort: The merge sort algorithm is a divide-and-conquer algorithm that divides an array in two, sorts the two halves, and then merges them back together.

def merge_sort(arr):
    if len(arr) <= 1:
        return arr
    mid = len(arr) // 2
    left = merge_sort(arr[:mid])
    right = merge_sort(arr[mid:])
    return merge(left, right)

def merge(left, right):
    result = []
    i = 0
    j = 0
    while i < len(left) and j < len(right):
        if left[i] < right[j]:
            result.append(left[i])
            i += 1
        else:
            result.append(right[j])
            j += 1
    result += left[i:]
    result += right[j:]
    return result
print(merge_sort([3,6,8,10,1,2,1]))

• Heap Sort: The heap sort algorithm is a comparison-based sorting algorithm that builds a heap from the input elements and then repeatedly extracts the maximum element from the heap and places it at the end of the sorted output array.

def heap_sort(arr):
    n = len(arr)
    for i in range(n, -1, -1):
        heapify(arr, n, i)
    for i in range(n-1, 0, -1):
        arr[i], arr[0] = arr[0], arr[i]
        heapify(arr, i, 0)

def heapify(arr, n, i):
    largest = i
    l = 2 * i + 1
    r = 2 * i + 2
    if l < n and arr[i] < arr[l]:
        largest = l
    if r < n and arr[largest] < arr[r]:
        largest = r
    if largest != i:
        arr[i], arr[largest] = arr[largest], arr[i]
        heapify(arr, n, largest)
print(heap_sort([3,6,8,10,1,2,1]))

2. Search algorithms:

• Binary Search: Binary search is an efficient algorithm for finding an item from a sorted list of items. It works by repeatedly dividing in half the portion of the array being searched, until the target value is found.

def binary_search(arr, x):
    low = 0
    high = len(arr) - 1
    mid = 0
    while low <= high:
        mid = (high + low) // 2
        if arr[mid] < x:
            low = mid + 1
        elif arr[mid] > x:
            high = mid - 1
        else:
            return mid
    return -1
print(binary_search([1,2,3,4,5,6,7], 4))

• Hash Tables: A hash table is a data structure that maps keys to values, using a hash function to compute an index into an array of buckets or slots, from which the desired value can be found.

class HashTable:
    def __init__(self):
        self.size = 10
        self.keys = [None] * self.size
        self.values = [None] * self.size

  def put(self, key, data):
        index = self.hash_function(key)
        while self.keys[index] is not None:
            if self.keys[index] == key:
                self.values[index] = data  # update
                return
            index = (index + 1) % self.size
        self.keys[index] = key
        self.values[index] = data

    def get(self, key):
        index = self.hash_function(key)
        while self.keys[index] is not None:
            if self.keys[index] == key:
                return self.values[index]
            index = (index + 1) % self.size
        return None

    def hash_function(self, key):
        sum = 0
        for pos in range(len(key)):
            sum = sum + ord(key[pos])
        return sum % self.size

t = HashTable()
t.put("apple", 10)
t.put("orange", 20)
t.put("banana", 30)
print(t.get("orange"))

3. Graph Algorithm :

• Dijkstra’s shortest path algorithm: Dijkstra’s shortest path algorithm is an algorithm for finding the shortest path between nodes in a graph.

import heapq

def dijkstra(graph, start):
    heap = [(0, start)]
    visited = set()
    while heap:
        (cost, v) = heapq.heappop(heap)
        if v not in visited:
            visited.add(v)
            for u, c in graph[v].items():
                if u not in visited:
                    heapq.heappush(heap, (cost + c, u))
    return visited

graph = {
    'A': {'B': 2, 'C': 3},
    'B': {'D': 4, 'E': 5},
    'C': {'F': 6},
    'D': {'G': 7},
    'E': {'G': 8, 'H': 9},
    'F': {'H': 10},
    'G': {},
    'H': {}
}
print(dijkstra(graph, 'A'))

4. Dynamic Programming:

• Fibonacci sequence: A classic example of a problem that can be solved using dynamic programming is the Fibonacci sequence.

def fibonacci(n):
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    else:
        return fibonacci(n-1) + fibonacci(n-2)
    
    
print(fibonacci(10))

5. Greedy Algorithms:

• Huffman coding: Huffman coding is a lossless data compression algorithm that uses a greedy algorithm to construct a prefix code for a given set of symbols.

from collections import Counter, namedtuple

def huffman_encoding(data):
    """
    Generates a Huffman encoded string of the input data
    """
    # Create a frequency counter for the data
    freq_counter = Counter(data)
    # Create a namedtuple for the Huffman tree nodes
    HuffmanNode = namedtuple("HuffmanNode", ["char", "freq"])
    # Create a priority queue for the Huffman tree
    priority_queue = PriorityQueue()
    # Add all characters to the priority queue
    for char, freq in freq_counter.items():
        priority_queue.put(HuffmanNode(char, freq))
    # Combine nodes until only the root node remains
    while priority_queue.qsize() > 1:
        left_node = priority_queue.get()
        right_node = priority_queue.get()
        combined_freq = left_node.freq + right_node.freq
        combined_node = HuffmanNode(None, combined_freq)
        priority_queue.put(combined_node)
    # Generate the Huffman code for each character
    huffman_code = {}
    generate_code(priority_queue.get(), "", huffman_code)
    # Encode the input data
    encoded_data = ""
    for char in data:
        encoded_data += huffman_code[char]
    return encoded_data, huffman_code
print(huffman_encoding("aaaaabbbcccc"))

6. Divide and Conquer :

• Merge Sort: already explained above

7. Backtracking:

• The N-Queens Problem: The N-Queens problem is a classic problem that can be solved using backtracking. The goal is to place N queens on an NxN chessboard in such a way that no queen can attack any other queen.

def solveNQueens(n):
    def could_place(row, col):
        # check if a queen can be placed on board[row][col]
        # check if this row is not under attack from any previous queen in that column
        for i in range(row):
            if board[i] == col or abs(board[i] - col) == abs(i - row):
                return False
        return True

def backtrack(row=0, count=0):
        for col in range(n):
            if could_place(row, col):
                board[row] = col
                if row + 1 == n:
                    count += 1
                else:
                    count = backtrack(row + 1, count)
        return count
    board = [-1 for x in range(n)]
    return backtrack()
print(solveNQueens(4))

This algorithm starts placing queens in the first row, and for every placed queen it checks if it is under attack from any previous queen. If not, it proceeds to the next row and repeats the process. If a queen is placed in a position where it is under attack, the algorithm backtracks and tries a different position. This continues until all queens are placed on the board without any attacking each other.

8. Randomized Algorithm: — Randomized QuickSort: A variation of quicksort algorithm where pivot is chosen randomly.

import random

def randomized_quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = random.choice(arr)
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return randomized_quicksort(left) + middle + randomized_quicksort(right)

print(randomized_quicksort([3,6,8,10,1,2,1]))

These are some of the most commonly used algorithms that every programmer should be familiar with. Understanding these algorithms and their implementation can help a programmer to make better decisions when it comes to designing and implementing efficient solutions.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Build awareness and adoption for your tech startup with Circuit.

Top 8 Algorithms Every Programmer Should Know 💯 was originally published in Python in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Functions

In JavaScript, a function is a block of code that can be reusable. Functions can accept input (called parameters) and return output (called return value).

To define a function in JavaScript, you use the function keyword, followed by the name of the function, a list of parameters (enclosed in parentheses), and the function body (enclosed in curly braces).

Here is an example of a function in JavaScript:

function greet(name) {
  console.log("Hello, " + name + "!");
}

To call a function in JavaScript, you simply use its name followed by the list of arguments (enclosed in parentheses).

Here is an example of how to call the greet function:

greet("John"); // Output: "Hello, John!"

You can also define a function that returns a value using the return statement.

Here is an example of a function that returns a value:

function add(num1, num2) {
  return num1 + num2;
}

console.log(add(10, 5)); // Output: 15

Objects

In JavaScript, an object is a collection of key-value pairs. You can use objects to store data in a structured way.

To create an object in JavaScript, you use the {} curly braces and define the key-value pairs inside the braces.

Here is an example of an object in JavaScript:

var person = {
  name: "John",
  age: 30,
  occupation: "Developer"
};

To access the values in an object, you use the . dot notation followed by the key.

Here is an example of how to access the values in the person object:

console.log(person.name); // Output: "John"
console.log(person.age);  // Output: 30
console.log(person.occupation); // Output: "Developer"

You can also update the values in an object by simply reassigning them.

person.name = "Jane";
person.age = 25;
console.log(person.name); // Output: "Jane"
console.log(person.age);  // Output: 25

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Interested in scaling your software startup? Check out Circuit.

Functions & Objects in JavaScript was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Git is a powerful version control system that allows developers to track changes to their code and collaborate with team members. It is an essential tool for any developer, and learning how to use it can greatly improve your workflow.

Before you start using Git, you need to set it up on your computer. This involves installing the Git software and configuring your username and email address. These details will be associated with your commits, so it’s important to use your real name and a valid email address.

Once you have Git set up, you can create a new repository for your project. A repository, or “repo” for short, is a collection of files and directories that are tracked by Git. To create a new repository, navigate to the directory where you want to store your code and run the following command:

git init

This will create a new Git repository in the current directory. You can then add files to the repository by using the git add command. For example, to add a file called main.c, you would run the following command:

git add main.c

To add all the files in the current directory, you can use the git add . command.

Once you have added your files, you can commit your changes to the repository. A commit is a snapshot of your code at a particular point in time. To commit your changes, use the git commit command, followed by a message describing the changes you have made. For example:

git commit -m “Added main.c file”

It’s important to write clear and concise commit messages, as they will help you and your team members understand the changes that have been made to the code.

Git also allows you to create branches, which are separate copies of your code that you can work on without affecting the main branch. This is useful when you want to try out a new feature or fix a bug without disrupting the main codebase. To create a new branch, use the git branch command, followed by the name of the branch. For example:

git branch new-feature

To switch to a different branch, use the git checkout command, followed by the name of the branch. For example:

git checkout new-feature

When you are ready to merge your changes back into the main branch, you can use the git merge command. For example:

git merge new-feature

These are just a few of the basic commands that you can use with Git. There are many more options and features available, and learning how to use them will greatly improve your workflow as a developer.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Interested in scaling your software startup? Check out Circuit.

Git For Beginners was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction to CSS

CSS (Cascading Style Sheets) is a styling language that is used to control the look and feel of a website or web application. It is a crucial part of the front-end development process and is used to apply styles to HTML elements on a web page.

Why learn CSS?

CSS is an essential skill for any web developer, as it allows you to control the appearance and layout of a website. With CSS, you can change the font, color, size, and position of elements on a web page, as well as create complex layouts and animations.

Getting started with CSS

To get started with CSS, you will need a text editor and a web browser. There are many text editors available, such as Sublime Text, Atom, and Notepad++. Once you have a text editor installed, you can create a new HTML file and link to a CSS file, or you can include the CSS styles directly in the HTML file using a <style> tag.

Basic syntax of CSS

CSS consists of rules that are applied to elements on a web page. A rule consists of a selector, which specifies the element or elements to which the rule will be applied, and a declaration, which consists of a property and a value.

Here is an example of a basic CSS rule:

h1 {
  color: red;
  font-size: 24px;
}

In this example, the h1 selector applies the rule to all h1 elements on the page. The declaration consists of two properties: color and font-size, and their respective values: red and 24px.

CSS selectors

There are many different types of selectors that can be used to target elements on a web page. Some common selectors include:

• Type selectors: These selectors target elements based on their HTML tag name. For example, the h1 selector targets all h1 elements on the page.
• Class selectors: These selectors target elements that have a specific class attribute. Class selectors are denoted by a period (.) followed by the class name. For example, the .important selector targets all elements with a class of "important".
• ID selectors: These selectors target elements that have a specific ID attribute. ID selectors are denoted by a hash symbol (#) followed by the ID name. For example, the #header selector targets the element with an ID of "header".
• Descendant selectors: These selectors target elements that are descendants of a specific element. For example, the li a selector targets all a elements that are inside li elements.

CSS properties

There are hundreds of CSS properties that can be used to style elements on a web page. Some common properties include:

• color: This property sets the color of an element's text.
• font-size: This property sets the size of an element's font.
• font-family: This property sets the font family of an element's text.
• margin: This property sets the space outside of an element.
• padding: This property sets the space inside of an element.
• border: This property sets a border around an element.
• background-color: This property sets the background color of an element.

CSS can be used to create complex layouts for a website or web application. There are several layout techniques that can be used, including:

• Float-based layouts: This technique uses the float property to create columns and rows of elements.
• Flexbox: This technique uses the display: flex property to create flexible layouts that can be easily aligned and distributed.
• Grid: This technique uses the display: grid property to create a grid of elements that can be easily positioned and resized.

Responsive design

Responsive design is a technique that allows a website or web application to adapt to different screen sizes and devices. This is achieved using media queries, which allow you to apply different styles based on the width of the viewport.

Here is an example of a media query:

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

In this example, the rule is applied only when the viewport is 600 pixels or less in width. This allows you to create styles that are specific to small screen sizes, such as mobile devices.

Conclusion

CSS is a powerful styling language that is essential for any web developer. With CSS, you can control the appearance and layout of a website or web application, and create complex layouts and animations. By learning CSS, you can take your web development skills to the next level and create visually appealing and user-friendly websites.

👋 If you find this helpful, please click the clap 👏 button below a few times to show your support for the author 👇

🚀Join FAUN Developer Community & Get Similar Stories in your Inbox Each Week

CSS For Beginners was originally published in FAUN.dev() 🐾 on Medium, where people are continuing the conversation by highlighting and responding to this story.

In Python, everything is an object. This means that in Python, you can use objects to represent real-world entities, such as a person or a bank account.

Classes

In Python, a class is a template that is used to create objects. A class defines the attributes and behaviors of an object.

To create a class in Python, you use the class keyword, followed by the name of the class, and the class definition (enclosed in curly braces).

Here is an example of a class in Python:

class Person:
  def __init__(self, name, age):
    self.name = name
    self.age = age
    
  def greet(self):
    print(f"Hello, my name is {self.name} and I am {self.age} years old.")

In the example above, the Person class has two attributes: name and age. It also has a greet method that prints a greeting message.

The __init__ method is a special method in Python that is used to initialize an object. It is called when the object is created.

Instances

To create an object (also called an instance) from a class, you use the class name followed by the arguments for the __init__ method (enclosed in parentheses).

Here is an example of how to create an object from the Person class:

p1 = Person("John", 30)

To access the attributes and behaviors of an object, you use the . dot notation.

Here is an example of how to access the attributes and behaviors of the p1 object:

print(p1.name)  # Output: "John"
print(p1.age)   # Output: 30
p1.greet()      # Output: "Hello, my name is John and I am 30 years old."

You can also update the attributes of an object by simply reassigning them.

p1.name = "Jane"
p1.age = 25

print(p1.name)  # Output: "Jane"
print(p1.age)   # Output: 25
p1.greet()      # Output: "Hello, my name is Jane and I am 25 years old."

Inheritance

In Python, inheritance is a way to create a new class that is a modified version of an existing class. The new class is called the subclass, and the existing class is the superclass.

The subclass can have additional attributes and behaviors, as well as override or extend the attributes and behaviors of the superclass.

To create a subclass in Python, you use the class keyword, followed by the name of the subclass, the (SuperClass) syntax, and the class definition (enclosed in curly braces).

Here is an example of a subclass in Python:

class Animal:
  def __init__(self, species):
    self.species = species
    
  def make_sound(self):
    print("Some generic animal sound")

class Dog(Animal):
  def __init__(self, breed):
    super().__init__("Dog")
    self.breed = breed
    
  def make_sound(self):
    print("Bark")

In the example above, the Dog class is a subclass of the Animal class. It has an additional attribute: breed. It also has a modified make_sound method that overrides the make_sound method of the Animal class.

To call the superclass method from the subclass, you can use the super() function.

In the example above, the __init__ method of the Dog class calls the __init__ method of the Animal class using the super() function. This allows the Dog class to initialize the species attribute inherited from the Animal class.

dog1 = Dog("Labrador")
print(dog1.species) # Output: "Dog"
print(dog1.breed)  # Output: "Labrador"
dog1.make_sound()  # Output: "Bark"

In Python, you can also use multiple inheritance, where a subclass can inherit from multiple superclasses.

Here is an example of multiple inheritance in Python:

class A:
  def do_something(self):
    print("Doing something in class A")

class B:
  def do_something(self):
    print("Doing something in class B")

class C(A, B):
  pass
c = C()
c.do_something() # Output: "Doing something in class A"

In the example above, the C class inherits from both the A and B classes. When the do_something method is called on the c object, the implementation from the A class is used because it appears first in the inheritance list.

Polymorphism

Polymorphism is the ability of a class to have different forms. In Python, you can use polymorphism to create methods with the same name in different classes, but with different implementations.

Here is an example of polymorphism in Python:

class Animal:
  def make_sound(self):
    print("Some generic animal sound")

class Dog(Animal):
  def make_sound(self):
    print("Bark")

class Cat(Animal):
  def make_sound(self):
    print("Meow")

animals = [Animal(), Dog(), Cat()]
for animal in animals:
  animal.make_sound()
# Output:
# Some generic animal sound
# Bark
# Meow

In the example above, the Animal, Dog, and Cat classes all have a make_sound method, but with different implementations.

When the make_sound method is called on the objects in the animals list, the correct implementation is called based on the object's class.

This is an example of polymorphism because the make_sound method has different forms (implementations) depending on the object's class.

Special Methods

In Python, you can use special methods to define the behavior of objects when they are used in certain ways.

Here are some examples of special methods in Python:

• __str__: This method is called when the object is passed to the str() function. It should return a string representation of the object.

class Person:
  def __init__(self, name, age):
    self.name = name
    self.age = age
    
  def __str__(self):
    return f"Person(name={self.name}, age={self.age})"

p = Person("John", 30)
print(str(p)) # Output: "Person(name=John, age=30)"

• __len__: This method is called when the object is passed to the len() function. It should return the length of the object.

class Person:
  def __init__(self, name, age):
    self.name = name
    self.age = age
    
  def __len__(self):
    return self.age

p = Person("John", 30)
print(len(p)) # Output: 30

• __add__: This method is called when the object is used in an addition operation. It should return the result of the addition.

class Vector:
  def __init__(self, x, y):
    self.x = x
    self.y = y
    
  def __add__(self, other):
    return Vector(self.x + other.x, self.y + other.y)

v1 = Vector(1, 2)
v2 = Vector(3, 4)
v3 = v1 + v2
print(v3.x) # Output: 4
print(v3.y) # Output: 6

These are just a few examples of special methods in Python. There are many other special methods that you can use.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Build awareness and adoption for your tech startup with Circuit.

What are Objects in Python was originally published in Python in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. Coolors

The preferred tool for creating a color scheme for your website is Coolers

2. Roadmap.sh

A roadmap collection may include roadmaps for frontend, backend, blockchain, cyber security, and other areas.

They also contain connections to useful learning resources!

3. CSS Layout

There are hundreds of components in it that you may copy-paste into your project and modify to suit your needs.

4. FreeCodeCamp

In order to make studying web development accessible to everyone, FreeCodeCamp is a nonprofit organization that comprises of an interactive learning web platform, an online community forum, chat rooms, online publications, and local organizations.

5. Omatsuri

an open source web application that includes 12 fantastic frontend tools for regular use. Like:

1. Triangle generator
2. Color shades generator
3. Gradient generator
4. Page dividers
5. SVG compressor
6. SVG → JSX converter
7. Base64 encoding
8. Fake data generator
9. Symbols collection
10. Lorem ipsum
11. CSS cursors
12. Keyboard events codes

6. Keyframes

This Web App has several tools such as animation, shadow & color generator.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Interested in scaling your software startup? Check out Circuit.

6 Free Modern Tools for Developers of 2023 was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.