DEV Community: Naga Chaitanya Konada

10 most important typescript concepts

Naga Chaitanya Konada — Sun, 02 Jul 2023 01:41:20 +0000

Introduction

TypeScript is an open-source programming language that is a superset of JavaScript. It adds optional static typing and class-based object-oriented programming to the language. As a result, TypeScript is becoming increasingly popular among developers, especially those working with large-scale projects. In this blog post, we will discuss 10 of the most important TypeScript concepts that every developer should know.

1. Type Annotations

Type annotations are a crucial concept in TypeScript. They allow developers to specify the data types of variables, function parameters, and return types. This can help catch errors during development and improve code readability.

For example,

let age: number = 27;

This specifies that the variable age should be of type number and have an initial value of 27.

2. Interfaces

Interfaces are used to define the structure of an object. They specify the names and types of the object's properties and can be used to enforce consistency across multiple objects.

For instance,

interface Person { name: string; age: number; }

This defines an interface for a Person object with a name property of type string and an age property of type number.

3. Classes

Classes are a core concept in object-oriented programming, and TypeScript has full support for them. Classes allow developers to define blueprints for objects that share the same properties and methods. They can also include constructors, access modifiers, and inheritance.

For example,

class Animal { 
    name: string; 
    constructor(name: string) { 
        this.name = name; 
    } 
}

This defines a Animal class with a name property and a constructor that sets the name property.

4. Generics

Generics are a powerful feature in TypeScript that allow for the creation of reusable code. They allow developers to create functions and classes that can work with a variety of data types.

For example,

function identity<T>(arg: T): T { 
    return arg; 
}

This defines a generic identity function that returns the same value that is passed to it.

5. Enums

Enums are a way to define a set of named values. They can improve code readability and help catch errors.

For instance,

enum Color { 
    Red, Green, Blue 
}

This defines an Color enum with three named values: Red, Green, and Blue. Enum values can also be assigned specific numeric values, such as:

enum Color { 
    Red = 1, 
    Green = 2, 
    Blue = 4 
}

6. Type Inference

Type inference is a feature of TypeScript that allows developers to omit type annotations in certain situations.

For example,

let age = 27;

This will automatically be inferred as a number type because it is assigned a numeric value. Type inference can also be used with function parameters and return types, such as:

function add(a: number, b: number) { 
    return a + b; 
}

7. Union and Intersection Types

Union types allow for the combination of two or more data types into one. This can be useful when a function or variable can accept multiple types of data.

For example,

let age: number | string = 27;

This specifies that the age variable can be of type number or string. Intersection types, on the other hand, allow for the creation of a new type that includes all properties and methods of multiple types.

For example,

type Animal = Dog & Cat;

This creates a new type Animal that has all properties and methods of both the Dog and Cat types.

8. Type Guards

Type guards are a feature in TypeScript that allow developers to check the type of a variable at runtime. This can be useful when working with union types or other situations where the type of a variable may not be known.

For instance,

if (typeof age === "number") { 
    console.log(age * 2); 
}

This checks if the age variable is of type number before performing a multiplication operation.

9. Decorators

Decorators are a feature in TypeScript that allow for the addition of metadata to classes, methods, and properties. They can be used to modify the behavior of a class or to provide additional information for tools like code analyzers.

For example,

@deprecated class MyClass {}

This marks the MyClass class as deprecated and will generate a warning when used.

10. Modules

Modules are a way to organize code into smaller, reusable components. They allow developers to define private and public parts of a codebase and to import and export components between files.

For example,

// my-class.ts
export class MyClass {}

This exports the MyClass class from a module, while:

// main.ts
import { MyClass } from "./MyClass";

This imports the MyClass class into another module.

Conclusion

TypeScript is a powerful language that is becoming increasingly popular among developers. By mastering these 10 important concepts, developers can write more efficient and maintainable code. While there are many other concepts and features in TypeScript, these 10 are a great starting point for any developer looking to learn the language.

References

If you liked what you learned, checkout my other posts here.

How popular are libraries in each technology

Naga Chaitanya Konada — Thu, 22 Jun 2023 01:38:31 +0000

In the world of software development, every technology has a leading library or framework. But have you ever wondered what is the leader among the leading libraries? Which technology has the highest number of likes or followers? Github is the best place to investigate and find out such a statistic. In this article, we will look at all the major technologies in various software development streams and explore the most popular libraries and frameworks in each category.

Frontend Libraries

Frontend development is the process of using HTML, CSS, and JavaScript to create web applications that run in a user's web browser. There are many popular frontend libraries available, but the clear leader is React. React is a JavaScript library developed by Facebook that allows developers to create complex and dynamic user interfaces. It has over 209k stars (2023) on Github, making it the most popular frontend library by a large margin.

Other popular frontend libraries include Vue.js, Angular, and Ember.js. Vue.js is a progressive JavaScript framework that is gaining popularity due to its simplicity and ease of use. Surprisingly, Vue.js has been more popular than React.js for a long time if you consider the GitHub stars parameter alone. Angular is a framework developed by Google that is widely used in enterprise applications. Ember.js is a framework that is known for its convention over configuration approach and is used by companies such as Netflix and LinkedIn.

Backend Language Libraries

Backend development is the process of creating server-side applications that provide data and services to frontend applications. There are many programming languages that can be used for backend development, and each language has its own set of libraries and frameworks. The most popular backend language is currently Python, and it has a number of popular libraries such as Django and Flask. Although Node.js has the most stars among individual projects, we have to give this category to Python in this category. This is because of its collective stars in the first two popular libraries, among many others.

Django is a high-level Python web framework that enables rapid development of secure and maintainable websites. It has over 71.5k stars on Github and is used by companies such as Instagram and Mozilla. Flask is a micro web framework that is lightweight and easy to use. It has over 63.3k stars (2023) on Github and is used by companies such as Airbnb and Netflix.

Other popular backend languages include Java, Ruby, and Node.js. Java is a widely used programming language that is popular in enterprise applications. Ruby is a dynamic, open-source programming language that is used in web development. Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that enables developers to build server-side applications in JavaScript.

DevOps

DevOps is the practice of combining software development and IT operations to improve the speed and quality of software delivery. There are many tools and platforms available for DevOps, but the most popular platform by far is Kubernetes. It is an open-source container orchestration platform that automates the deployment, scaling, and management of containerized applications. Kubernetes has over 99.3k stars (2023) on Github. Kubernetes is used by major companies such as Airbnb, GitHub, and Spotify for container orchestration and deployment automation.

Other popular DevOps tools include Docker, Jenkins, and Ansible. Docker is a platform that allows developers to package applications and their dependencies into containers that can be easily deployed to any environment. Jenkins is an open-source automation server that enables developers to automate the building, testing, and deployment of software. Ansible is an open-source automation tool that enables developers to automate the configuration and management of IT infrastructure.

Fullstack E2E Solutions

Fullstack development is the process of creating applications that span both frontend and backend development. There are many fullstack frameworks available, but the most popular by far is Node.js. Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that enables developers to build server-side applications in JavaScript. It has over 96k stars on Github and is used by companies such as Netflix and LinkedIn.

Other popular fullstack frameworks include Ruby on Rails, Django, and Laravel. Ruby on Rails is a popular web application framework that uses the Ruby programming language. Django and Laravel are both backend web frameworks that use Python and PHP, respectively.

Machine Learning

Machine learning is the process of using algorithms and statistical models to enable computers to learn from data. There are many tools and libraries available for machine learning, but the most popular by far is TensorFlow. TensorFlow is an open-source platform for machine learning developed by Google. It has over 176k stars on Github and is used by companies such as Airbnb and Intel.

Other popular machine learning tools include PyTorch, Keras, and Scikit-learn. PyTorch is an open-source machine learning library developed by Facebook that is known for its ease of use and flexibility. Keras is a high-level neural networks API that is written in Python and is known for its simplicity. Scikit-learn is a machine learning library for Python that is used for data analysis and data mining tasks.

Mobile App Libraries and Languages

Mobile app development is the process of creating applications for mobile devices such as smartphones and tablets. There are many mobile app libraries and languages available, but the most popular by far is Flutter. Flutter is a mobile app development framework developed by Google that enables developers to build high-performance, high-fidelity, apps for iOS and Android from a single codebase. It has over 154k stars on Github.

Other popular mobile app libraries and languages include Swift, Kotlin, and React Native. Swift is a programming language developed by Apple that is used for iOS and macOS development. Kotlin is a programming language developed by JetBrains that is used for Android development. React Native is a JavaScript framework developed by Facebook that enables developers to build mobile applications for iOS and Android using a single codebase.

Templating Engines

Templating engines are tools that enable developers to create HTML templates that can be dynamically generated and rendered by web applications. There are many templating engines available, but the most popular by far is Pug. Pug is a templating engine that is known for its simplicity and ease of use. It has over 21.3k stars on Github. Airbnb and Node.js use Pug templating engine.

Other popular templating engines include Jade, EJS, and Handlebars. Jade is a high-performance templating engine that is used for server-side rendering. EJS is a lightweight templating engine that is used for client-side and server-side rendering. Handlebars is a templating language that is based on the Mustache template language.

Finally

In conclusion, the popularity of libraries and frameworks varies widely across different technologies and software development streams. However, by examining Github stars and usage by major companies, we can determine which libraries and frameworks are currently the most popular in each category. Although ChatGPT and AI are buzzwords in the software industry these days, it is important to note that a solid history of success and reliability for a tool is equally important. The number of stars on Github is a testament to this. React.js leads the way with 209k stars, followed closely by Vue.js with 204k stars, and then TensorFlow with 176k stars.

If you liked this post, please take a moment to check out my other posts here.

Evolution of Frontend Frameworks over the Last Decade

Naga Chaitanya Konada — Thu, 02 Mar 2023 11:22:07 +0000

Over the past decade, frontend frameworks have evolved significantly, providing developers with better tools and technologies to build dynamic and responsive web applications. In this video, we'll take a closer look at how frontend frameworks have changed and evolved over the years.

Early 2010s: jQuery and Backbone.js

In the early 2010s, jQuery was the most popular frontend library used by developers to simplify DOM manipulation and event handling. It was widely used by developers due to its ease of use and the fact that it greatly simplified many of the complexities of Javascript. However, as web applications became more complex, developers began to realize that they needed a more structured approach to building web applications. This led to the development of Backbone.js, a lightweight framework that provided structure and organization to web applications. Backbone.js was designed to be more modular and scalable than jQuery, allowing developers to build large and complex web applications more easily. It provided a set of conventions for organizing code and encouraged the use of models, views, and collections to organize data and logic. This made it easier for developers to build complex applications with fewer errors and more maintainable code.

Mid-2010s: AngularJS and React

In the mid-2010s, AngularJS and React emerged as two of the most popular frontend frameworks. AngularJS, developed by Google, provided developers with a complete solution for building large-scale web applications. It offered a lot of features out of the box, including two-way data binding and dependency injection. This allowed developers to build complex applications with ease. On the other hand, React, developed by Facebook, offered a more lightweight approach to building web applications. It utilized a virtual DOM to improve performance and scalability, making it a great choice for building modern web applications. Developers could easily create reusable components that could be shared between different parts of the application. This made it possible to build complex applications that were easy to maintain and scale. Overall, both AngularJS and React had their strengths and weaknesses, and developers had to choose the right tool for the job depending on the project requirements and their own preferences.

Late 2010s: Vue.js and Angular

In the late 2010s, Vue.js and Angular emerged as two of the most popular frontend frameworks. Vue.js, a progressive framework, offered a more flexible and modular approach to building web applications. It allowed developers to easily integrate into existing applications, and offered a great deal of flexibility when working with templates, making it a popular choice for many developers. Angular, on the other hand, continued to evolve and improve, providing developers with a complete solution for building scalable and complex web applications. It's extensive set of features and tools allowed developers to quickly build large-scale applications that could easily handle high traffic and complex data manipulation. Additionally, Angular's strict adherence to object-oriented principles made it an attractive choice for enterprise-level applications, where maintainability and scalability were key concerns. Overall, while both Vue.js and Angular have their strengths and weaknesses, they continue to be two of the most popular and widely-used frontend frameworks in the world of web development.

Conclusion - who stood the test of time

In terms of standing the test of time, Angular and React have emerged as the most popular and widely-used frontend frameworks. Angular's extensive set of features and tools make it a great choice for building large-scale applications, while React's lightweight approach and virtual DOM make it perfect for building modern web applications. Both frameworks have continued to evolve and improve, and they remain at the forefront of frontend development.

However, Vue.js has also gained a considerable following since its introduction in the late 2010s. Its flexible and modular approach to building web applications, as well as its ease of integration with existing applications, has made it a popular choice for many developers.

It's also worth mentioning that there are other frontend frameworks that have gained popularity in recent years, such as Svelte and Ember.js. While they may not have the same level of adoption as Angular, React, or Vue.js, they offer unique features and benefits that may be useful for certain projects. As frontend development continues to evolve, it will be interesting to see how these frameworks and others continue to grow and adapt to meet the needs of developers.

Renderprops vs Custom Hooks: Which one to use?

Naga Chaitanya Konada — Wed, 01 Mar 2023 17:01:21 +0000

Introduction

React Hooks have revolutionized the way we write React components. They provide a way to reuse stateful logic across components, making our code more modular and easier to maintain. Two of the most commonly used techniques for reusing logic in React are renderprops and custom hooks. In this post, we'll explore the differences between renderprops and custom hooks, and when to use each one.

Renderprops

Renderprops is a technique where a component accepts a function as a prop, which it then calls and passes some data to it. The function then returns some JSX, which the component renders. The main advantage of using renderprops is that it allows for a lot of flexibility in the way that data is passed between components. It's also a great way to share stateful logic between components without needing to use Redux or other state management libraries.

For example, let's say that we have a component that fetches some data from an API and needs to render it. We could use a renderprop to pass the data to a child component:

function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(setData);
  }, [url]);

  return children(data);
}

function DisplayData({ data }) {
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <DataFetcher url="https://api.example.com/data">
      {data => <DisplayData data={data} />}
    </DataFetcher>
  );
}

In this example, we have a DataFetcher component that fetches data from an API and passes it to its child component using a renderprop. The child component, DisplayData, receives the data and renders it as a list.

Custom Hooks

Custom hooks are functions that use React hooks to provide some reusable logic. They allow us to extract stateful logic from components and reuse it in other components. Custom hooks are great for encapsulating complex logic and making it easy to reuse across our application.

For example, let's say that we have a component that needs to fetch some data from an API and update its state when the data changes. We could create a custom hook to handle the fetching logic:

function useData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(setData);
  }, [url]);

  return data;
}

function DisplayData() {
  const data = useData('<https://api.example.com/data>');

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function App() {
  return <DisplayData />;
}

In this example, we have a custom hook called useData that fetches data from an API and returns it. We then use this hook in our DisplayData component to fetch and display the data. This makes our DisplayData component much simpler and easier to read.

When to use Renderprops vs Custom Hooks

So, which one should you use? The answer is: it depends. Both renderprops and custom hooks have their own advantages and disadvantages, and the choice between them depends on the specific use case.

Renderprops are great for passing data between components that aren't directly related. They allow for a lot of flexibility in the way that data is passed, and they're a good way to share stateful logic without requiring a lot of boilerplate code. On the other hand, renderprops can be difficult to read and understand, especially when you have a lot of nested components.

Custom hooks are great for encapsulating complex logic and making it easy to reuse across your application. They're also very easy to use and understand, and they don't require any additional boilerplate code. However, custom hooks can only be used within a component, so they're not as flexible as renderprops.

Conclusion

In summary, both renderprops and custom hooks are powerful techniques for reusing logic in React. Renderprops are great for passing data between components, while custom hooks are great for encapsulating complex logic and making it easy to reuse across your application. The choice between them depends on the specific use case, so it's important to understand the advantages and disadvantages of each one. By using these techniques effectively, we can write more modular and maintainable code in React.

Animate on scroll in React

Naga Chaitanya Konada — Sun, 14 Feb 2021 05:30:24 +0000

Have you worked on animations in React? Do you think they are different from normal CSS animations? Are they difficult to achieve?

Well, they are easy but they are not obvious. If you are good with CSS, then yeah you can animate things, but React plays with DOM nodes so differently that you may sometimes not get a level-ground to play with your CSS.

This post does not go over the details of how you do animations in React. If you are looking for that, do let me know in the comments.

This post tries to address a specific scenario: how to animate sections of your page into view as you scroll to those sections.

The challenge

Product owners want the apps to be blazing fast. At the same time they want them to be beautiful and well designed and have a pleasant user experience. Sometimes depending on the type of web-site and the target consumers, that might mean that the app should contain some animations.

Now writing up animations in plan HTML and CSS is quite easy because you are not dealing with involvement of JavaScript there. Browser understands CSS and converts the rules provided there to swift animations very easily.

When you club the idea of blazing fast sites that still animate and do UI stuff, that is where things start to get a little tricky. You might go about using a modern framework like React (based things like Gatsby or Next.js) or Vue (or Angular, I know I know 😜). Now, each of these works differently and when it comes to animations they provide ways of achieving your required animations. All these ways are not quite as straight forward as working with CSS. To say the least, they do not scale well. Of course, since they are all JS based frameworks, you might get some flexibility and reusability but you always have the overhead of learning the methods recommended by these tools and these methods may not always suite your way.

One such scenario is that you have a single column page with a bunch of sections and your product owner comes and tells you that these sections should not show up right away as static stuff. Instead their ask is that each of those sections should have some sort of fly-in animation (from left or right) and that they should animate when you scroll to them and not at the time the page loads. For our convenience, lets assume the project is built on React.

How do you achieve this?

The solution for today

Of course, we have many wonderful libraries that help with animations. Some of them are: react-transition-group, react-spring, react-reveal

Today, we will make use of something called framer-motion. I like this one particularly because it is very easy to use, you can achieve complex animations with simple configurations and you can animate between pages as well and my most favorite feature is exit animations. Exit animations are especially tricky because normally your component gets unmounted before the animation finishes (or even triggers) and achieving full animation is a little tricky whereas this tool allows us to specify exit animation as a prop which is cool.

To achieve scroll based animations, we will leverage a capability in JavaScript called IntersectionObserver.

Alright let's get started.

Note: that we are not dealing with dynamically loading components through React.lazy or code-splitting or any of that stuff in this one. We have everything loaded on to the page up-front and we show them through an animation when user scrolls up to them.

The setup

I will go over the solution by giving the step by step instructions so that you can follow. But if you are in a hurry, the TLDR; demo is here in codesandbox, you can take a look at it and may be copy paste stuff.

Anyway, for the setup, go ahead and create a create-react-app project or anything similar.

npx create-react-app framer-motion-lazy-show
# yarn create react-app framer-motion-lazy-show

We need framer-motion so go ahead and install it.

npm i framer-motion
# yarn add framer-motion

Get started with the component

Our hero is one component that handles revealing contents through a fade-in animation when user scrolls to it. Initially contents will be visibly hidden (notice contents are not unmounted).

Lets create LazyShow.js component with some boiler-plate:

const LazyShow = ({ children }) => {
  return (
    <div className="lazy-div">
      {childen}
    </div>
  );
};

All its doing at the moment is get the children and render them in a div with class lazy-div. Lets style it a bit.

.lazy-div {
  /* height: 50vh; */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  font-size: 1.5em;
}

Font size is exaggerated here for demo purposes so that we see each of the LazyShow components occupy much of the view-port height. Alternatively we could have given a height: 50vh; or min-height: 80vh to make our point, but these styles do not affect the functionality of the component.

Add in the animation

In order to make use of framer-motion we would have to import motion element and convert our normal <div> to a <motion.div component.

import { motion } from 'framer-motion';

Then we can specify the initial and animate props for our fade-in affect.

So go ahead and update the JSX as so:

<motion.div
  className="lazy-div"
  initial={{ opacity: 0, x: -10 }}
  animate={{ opacity: 1, x: 0}}
>
  {children}
</motion.div>

All we are saying is that initially the opacity of our child component is 0 and as the animation finishes it becomes 1. Also we are moving the component using x key, initially it will be 10px towards left (negative) and then it becomes 0 which is its normal position. So essentially the whole contents would be fading in from the left.

There is another concept in framer-motion called variants, where you can specify variants={fadeInVariants} and define fadeInVariants with initial and animate keys to do the exact same thing. This variants concept has the advantage of clean less-cluttered JSX. But we do not require that for this demo.

Preview the component

Add a bunch of the <LazyShow> in your App.js

const LazyShowWrapper = () => {
  return (
    <>
      <LazyShow>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </LazyShow>
      {/* add a bunch of these*/}
   </>
  )
}

export default function App() {
  return (
    <>
      <LazyShowWrapper />
    </>
  );
}

Now you would see in the preview that the component renders but immediately runs the animation and be done with it. That is not what we want.

Control animation start

We should control when the animation starts. For that we can use the useAnimation hook that framer-motion provides and get the controls module. Replace the animate prop value with this controls api and use the controls.start function to start the animation.

import { motion, useAnimation } from "framer-motion";

Changed component looks like this:

const LazyShow = ({ children }) => {
  const controls = useAnimation();
  useEffect(() => {
      controls.start({
        x: 0,
        opacity: 1,
        transition: {
          duration: 0.5,
          ease: "easeOut"
        }
      });
  }, [controls]);
  return (
    <motion.div
      className="lazy-div"
      initial={{ opacity: 0, x: -10 }}
      animate={controls}
    >
      {children}
    </motion.div>
  );
};

Now, with the above changes, the animation is controlled but it still triggers immediately after the component loads. We still want to control the animation to show when user scrolls to it.

Listen to visibility (Intersection Observer)

We can use the useOnScreen hook available in here.

function useOnScreen(ref, rootMargin = '0px') {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIntersecting(entry.isIntersecting);
      },
      {
        rootMargin
      }
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      observer.unobserve(ref.current);
    };
  }, []);

  return isIntersecting;
}

Quickly, what this hook is doing is taking a ref and root margin and maintaining an internal isIntersecting state which becomes true when the ref is intersecting.

Now let's update the LazyShow component to leverage this new hook.

const LazyShow = ({ children }) => {
  const controls = useAnimation();
  const rootRef = useRef();
  const onScreen = useOnScreen(rootRef);
  useEffect(() => {
    if (onScreen) {
      controls.start({
        x: 0,
        opacity: 1,
        transition: {
          duration: 0.5,
          ease: "easeOut"
        }
      });
    }
  }, [onScreen, controls]);
  return (
    <motion.div
      className="lazy-div"
      ref={rootRef}
      initial={{ opacity: 0, x: -10 }}
      animate={controls}
    >
      {children}
    </motion.div>
  );
};

We leverage useRef api to get the reference of our motion.div that needs animation. We update the dependencies list of our only useEffect to track the onScreen boolean that is returned out of the useOnScreen hook.

So when the component comes into view, the onScreen becomes true and the useEffect executes and the animation starts.

The transition key in the control.start call controls the duration of the animation and also the ease parameter.

This is the final change. Now you can see that the component shows up with the animation when user scrolls to it.

The solution demo is here:

Conclusion

There are many ways to achieve the same effect. Did you try something else previously? Let me know how it worked out for you. I would like to know your feedback. Do you want me to create a post on anything else? Do let me know.

How to check if you are in an iFrame

Naga Chaitanya Konada — Mon, 16 Nov 2020 14:51:33 +0000

What if you want to check if your page is hosted in an i-frame and may be prevent certain features?

On the network side, you can pass a response header from your server that looks like this:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

The X-Frame-Options: DENY header prevents your page to be accessed in an i-frame altogether.

Whereas, the X-Frame-Options: SAMEORIGIN header allows the page to load if the parent (wrapping window) of the i-frame is of the same origin, which is somewhat OK.

But if you do not have a header provided by your server and you still want to check if you are inside an i-frame, you may do the following conditional check.

if(window.location === window.parent.location) {
  // you are not inside an i-frame
} else {
  // you are definitely inside an i-frame
}

Alright, I hope this helps.

References

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
https://tommcfarlin.com/check-if-a-page-is-in-an-iframe/

JavaScript execution context (this)

Naga Chaitanya Konada — Sun, 18 Oct 2020 16:20:12 +0000

There is a YouTube playlist that I did explaining the whole concept mentioned in this article, if you are that person who wants to watch and learn, please head on there.

The agenda

Talk about the execution context
About use strict and global this
Where to define a function
- Does location matter for functions
- Putting a function in an object literal
- Inside a method function
How to invoke a function
- Normal function invocation
- Method invocation
- Explicit binding invocation
How arrow functions differ
- Where to declare the arrow functions
- How to invoke them
Conclusion
- Recap differences between using use effect and not
- Different types of invocations
- Location of a normal function
- Arrow functions invocation and location

What is `this`

The this keyword refers to the object that a function gets based on how it is invoked. For arrow functions, it refers to the this context that gets assigned to the enclosing function.

depends on

whether you used use strict
how the function is invoked
where the function is declared
whether it is an arrow function or now

About `use strict` and `this`

When you use this in global scope, it refers to the window object in a browser. It refers to globalThis when in Node.js environment.

But if you use strict mode (by putting use strict at the beginning of your file), then you will not get window object when you use this. In fact it points to undefined.

function foo() {
    console.log(this === window); // true
}

"use strict";
function foo() {
    console.log(this === window); // false
}

Where to define a function

In modern JavaScript development, we generally tend to put functions in their own files, thanks to the JavaScrpt ES6 modules, CommonJS pattern and many other techniques that work towards using per-file concept.

But we are not touching the module system or the import and export feature of ES6. In this series, we are only concerned about the question of whether a function is declared outside another function or not.

function foo() {
    console.log(this === obj);
}

const obj = {
    name: "naga",
    foo: function() {
        console.log(this === obj);
    }
}

obj.foo(); // true
foo(); // false

Remove duplicate function declaration:

function foo() {
    console.log(this === obj);
}

const obj = {
    name: "naga",
    foo: foo
}

obj.foo(); // true
foo(); // false

Location does not matter when it comes to using the this context:

// foo.js
export default function foo() {
    console.log(this);
}

// bar.js
import foo from './foo.js';

const obj = {
    name: "naga",
    foo: foo
}

obj.foo(); // prints obj
foo(); // prints window

invoking a member method without the object

const obj = {
    name: "naga",
    foo: function () {
        console.log(this === obj);
    }
}

obj.foo(); // true

const foo = obj.foo;
foo(); // false

Putting a function inside a method


const obj = {
    name: "naga",
    foo: function() {
        function bar() {
            console.log(this === obj);
        }
        console.log(this === obj);
        return bar;
    }
}

const barFunc = obj.foo(); // true
barFunc(); // false

Ways to invoke a function

normal invocation

function foo() {
    console.log(this); // global or window
}

foo();

method invocation

function foo() {
    console.log(this); // points to obj
}

const obj = {
    foo: foo
}

obj.foo(); // prints obj

explicit binding

function foo() {
    console.log(this); // normally prints global or window
}

const obj = {
    bar: 10
}

const boundFoo = foo.bind(obj);

boundFoo(); // prints obj coz of the binding

using call or apply

function foo() {
    console.log(this); // normally prints global or window
}

const obj = {
    bar: 10
}

foo.call(obj); // prints obj coz of the binding
foo.apply(obj); // prints obj coz of the binding

call vs apply

const math = {
    add: function () {
        const args = Array.from(arguments);
        return args.reduce((sum, num) => sum + num);
    }
}

const thisArg = null;
const add5 = math.add.bind(thisArg, 5); // returns a curried function

console.log(add5(10)); // 15
console.log(math.add.call(thisArg, 5, 10)); // 15
console.log(math.add.apply(thisArg, [5, 10])); // 15

Fixing sub-function problem

the problem

const obj = {
    name: "naga",
    foo: function() {
        function bar() {
            console.log(this === obj);
        }
        console.log(this === obj);
        return bar;
    }
}

const barFunc = obj.foo(); // true
barFunc(); // false

using scope

const obj = {
    name: "naga",
    foo: function() {
        const self = this;
        function bar() {
            console.log(self === obj); // oh yeah works
        }
        console.log(this === obj); // always true
        return bar;
    }
}

const barFunc = obj.foo(); // true
barFunc(); // true

using explicit binding

const obj = {
    name: "naga",
    foo: function() {
        function bar() {
            console.log(this === obj);
        }
        console.log(this === obj);
        return bar;
    }
}

const barFunc = obj.foo(); // true
const barFuncBound = barFunc.bind(obj);
barFuncBound(); // now it works --> true

How arrow functions differ from normal functions regarding `this`

We know normal functions take the this context based on how they are invoked and not based on where they are declared*.*

Arrow functions take the this context based on where they are declared and not based on how they are invoked.

const foo = () => {
    console.log(this === window); // true
}

foo(); // true

const obj = {
    foo: foo
};
obj.foo(); // true, so not bound to obj even though it is a method

const objFooBound = obj.foo.bind(obj);
objFooBound(); // true, still points to window, bind fails

const fooBound = foo.bind(obj);
fooBound(); // still true, bind fails

What if we declare in a function

Now the arrow function totally obeys the enclosing scope's this context because it is declared inside it.

function foo() {
    const bar = () => {
        console.log(this === window);
    }
    bar();
}

foo(); // true, enclosing function is called in the normal way

const obj = {
    baz: 10,
    foo: foo
}
obj.foo(); // now false, enclosing function called using method invocation

const boundFoo = foo.bind({});
boundFoo(); // now also false, enclosing function bound to an object

visiting our old example

const obj = {
    name: "naga",
    foo: function() {
        const bar = () => {
            console.log(this === obj); // true, now it takes context of the foo method 
        }
        console.log(this === obj); // obviously true
        return bar;
    }
}

const bar = obj.foo(); // true
bar(); // true

this fixes the problem of having functions inside methods of an object. you may use arrow functions.

Conclusion

Declare normal functions anywhere, just not inside the object methods
Use arrow functions for functions inside methods
You can invoke normal functions in three ways: normal way, as an object method and by explicitly binding
Arrow functions do not care how you invoke them, all they care is where they are declared.
Use use strict to avoid accidentally putting stuff in the global context (window or globalThis)

Blog post layout using CSS grids

Naga Chaitanya Konada — Sat, 03 Oct 2020 14:48:42 +0000

Recap

Welcome back!

In the last article, I explained how I tried to achieve a typical blog-post layout using flexbox. Here is the link to the final layout in CodePen.

I mentioned that there were a couple of hacks we had to do to make it work, because of the way flexbox works. It is unidirectional in nature, which means, at any time you can only affect the layout in one direction, row or column. If you wish to make a complex layout with sections spanning across multiple rows and columns in a random fashion, then the best option (and somewhat of the only option) is CSS grids.

The last time I checked the compatibility for CSS grid layout in CanIUse.com, it is hovering around 95%. It is a very good coverage, you can confidently use CSS grids for your layout needs and this number will only become better going forward.

So, why don't we go ahead and implement the same layout in CSS grids?

Final result

Just like the previous one, we achieve the same UI, no difference at all. But internally, it is a lot cleaner and easy to understand.

Here is the codepen:

Demo

This is it, that is what we get. Not so much different from the previous flexbox example, much simpler internally.

Let's look at the improvements

Addressing the double `h1` problem

We have done some structural changes to the HTML. It no longer has two h1s, which is good for our SEO stuff and semantics.

Now the structure looks like this:

<!-- content wrapper -->
    <!-- the h1 title -->
    <!-- the left nav -->
    <!-- the reading column -->
<!-- content wrapper ends -->

This is so much simpler than the one in flexbox version.

We use the beauty of CSS grids and specifically grid-template-areas property to achieve our desired layouts, both in desktop and mobile views.

To make grids work, we apply display: grid to the root level .content-wrapper div.

Unlike flexbox which might require multiple parent divs to achieve complex layouts, the grid system does require only one parent div and all the sections can be immediate children of that parent.

Lets see the magic of grid-template-areas.

In desktop view:

The content wrapper div looks like this:

.title {
  grid-area: title; // this is the grid area label
}

.left-nav {
  grid-area: leftnav;
  position: relative;
  max-width: 100%;
}

.reading-column {
  grid-area: reading;
}

.content-wrapper {
  display: grid;
  grid-gap: 0 2rem;
  grid-template-areas:
    ". title"
    "leftnav reading";
  grid-template-columns: minmax(250px, 1fr) 3fr;
  width: 100%;
}

We firstly provide grid-area label to each of the siblings and use those names in grid-template-areas rule of the parent to decide the layout.

There are two strings in the value of grid-template-areas, they represent two rows. And the contents of each string represent the columns. Each string has two tokens, so two columns each.

So, the first row has nothing in the first column (because . represents nothing) and has the header in the second column.

The second row has the leftnav in the first column space and the reading section in the second column space.

This is what we want.

Mobile view:

Now lets look at the grid-template-areas value in case of mobile view:

@media only screen and (max-width: 900px) {
  .content-wrapper {
    grid-template-areas:
      "title"
      "leftnav"
      "reading";
    grid-template-columns: 1fr;
  }
}

Here there are three strings, so three rows. And each string has only one token, so only one column. As simple as that.

Controlling width of the left nav section

Notice this line:

.content-wrapper {
  ...
  grid-template-columns: minmax(250px, 1fr) 3fr;
  ...
}

There is a function we are using here called minmax. What this does is it fixes the minimum and maximum width values for each column (since it is grid-template-columns). In this particular case, we want the first column of the .content-wrapper to have a minimum of 250px and a maximum of 1fr. 1fr means one fraction.

The second column has 3fr always (no minmax applied), so as long as the total width of .content-wrapper is such that the total fractions (1fr + 3fr = 4fr) is more than 4 times 250px, the width of the leftnav column will be that much (total width / 4). But as soon as that becomes 250px or less, the leftnav takes up 250px and the rest is divided to three fractions (3fr).

So, when the overall width is 1200px, the left column width is 1fr (out of 4fr) which is 1/4 of 1200px which is 300px.

Whereas when the overall width is just 900px, the leftnav takes up 250px and the reading section width is 650px (900 - 250).

Summing up, you can notice that the size of the leftnav increases slightly as you keep increasing the window width.

In the mobile view, there is only one column and all the rows have 1fr width, so they occupy complete width.

Reading column width

There are .reading-column__sections within the reading column and thanks to the below rules, the maximum width of these sections does not exceed 60ch even though the column itself is spanning till the right side edge.

.reading-column__section {
  width: 100%;
  max-width: 60ch;
}

Conclusion

If you are new to flexbox and grids in CSS, it is high time you learn them. There are many good resources for you to understand them. The browser support is getting better and better.

Please do suggest if you want me to achieve any other feature in this particular example. Or if you like it, please let me know what you learned.

Subscribe to my YouTube channel for many such developer tips.

Blog post layout using CSS flexbox

Naga Chaitanya Konada — Thu, 01 Oct 2020 08:10:46 +0000

Intro

Lately, I have been thinking a lot about CSS. It is so wonderful how far CSS has come along. Browser support is awesome for new features like Flexbox and Grids in CSS.

When you think about creating complex layouts, it is no longer a dread or nightmare. Rather, it is just fun to create them, isn't it?

So, why not get our feet wet and start off by creating some layouts on our own. Along the way, why not learn a new concept or two!

The best way to learn is to write code.

Final result

This is what we are building today. This is a typical layout when you come across blog article layouts.

There is a header, a page navigation section and the rest of the page contains sections, each with a section header and some content.

Now, in larger screen sizes, the layout can split into two columns, the left column being the table of contents and the right column is the sections content.

I made the table of contents floating when you scroll the page so that it is always visible for you, very typical these days.

Also, according to Kevin Powell (watch this video, it is awesome), we need to limit the total width of the text column to be a max of 60ch.

Demo

Lets kick it off

For the rest of the tutorial, we will be working towards the above code.

The all important template

Go ahead and start your coding, create an empty html 5 document and create the default structure.

It looks something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

TIP: You can get the above structure in VSCode (thanks to Emmet) by typing ! and hitting tab in a new HTML file

The most important line in the above code is the meta viewport tag. It should have the width=device-width and initial-scale=1.0 to make responsive stuff work in mobile views.

A little bit about the structure

We have a page title, a navigation section and some content sections.

In the desktop view, we want to display the page title aligning to the content sections column. We want the navigation section towards the left.

In the mobile view, we want them all to be in a single column, but the left navigation should now go in between the page title and the sections.

The problem with this layout

You might think, the markup structure should look like this:

<!-- page title h1 -->
<!-- left nav list -->
<!-- content sections -->

The problem with this is very simple. How would you get only the left nav and content sections to be in two columns in the desktop layout?

Now you can do it like this:

<!-- page title h1 -->
<!-- two column wrapper -->
   <!-- left nav list -->
   <!-- content sections -->
<!-- two column wrapper ends -->

The above layout works fine now, you can toggle the layout of the two column wrapper div to be two column or single column layout based on view port widths.

But the big problem is that the page title will not align with the content sections in the desktop view. Instead it will always be on the left side. Now, as a hack, you may use some javascript to find out the width of the left nav and add left margin to the page title when the viewport width changes. This is kind of hack-ey.

What I would do instead is, to use two headings in two different locations and show-hide them based on the layout.

<!-- page title h1 (for mobile) -->
<!-- two column wrapper -->
   <!-- left nav list -->
   <!-- reading column -->
      <!-- page title h1 (for desktop) -->
      <!-- content sections -->
   <!-- reading column ends -->
<!-- two column wrapper ends -->

The markup

Here is how the markup looks like:

<h1 class="title">Lorem ipsum dolor sit amet</h1>
<div class="content-wrapper">
  <nav class="left-nav">
    <ul class="left-nav__list">
      <li class="left-nav__list-item"><a href="#" class="left-nav__link">Lorem ipsum dolor.</a></li>
      <!-- rest of the links-->
    </ul>
  </nav>

  <div class="reading-column">
    <h1 class="title">Lorem ipsum dolor sit amet</h1>
    <div class="reading-column__section">
      <h2 class="reading-column__title">Lorem ipsum dolor sit amet, consectetur.</h2>
      <p class="reading-column__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius est tenetur possimus ipsum. Nostrum nobis odit delectus et excepturi, quis repudiandae facere, expedita dignissimos, quo nihil? Veritatis, voluptates expedita corporis earum esse illo ipsa vitae ab. Molestiae officiis officia aut? Explicabo earum quis officia quo eligendi eveniet reprehenderit sint dolores?</p>
    </div>
    <!-- rest of the sections -->
  </div>
</div>

Notice, there are two h1 tags, one at the root level (inside body), the other one inside the .reading-column div.

I know, you might be thinking - two h1s inside the markup, is it like violating the SEO rules or something? Yes it kind of does. But at least we got one h1 right up in the markup. Do you think there is a better way? Leave a comment plz.

Lets dive into the CSS

Now, having consistent CSS is every FE guy's dream, right? The important thing to take care up front for this is to have some CSS resets.

This is what I start with:

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 2rem;
}

img {
  width: 100%;
}

Now, the font-family, font-size and margin are optional, but I included them anyway. The most important ones are box-sizing and image width. Of course, there are many more resets you can do.

Image width thing:

By default, all <img>s are displayed inline-block and so if the width of the image is bigger, it will overflow towards right creating a horizontal scrollbar.

So, we set the width to 100% to fix that issue.

See this codepen to see the issue.

Maximum width 60ch:

As I mentioned earlier, there is a psychological thing that says a line should contain a max of 60 letters in a line for the comfort of the eyes and for the sake of not losing interest.

Making two columns work:

By default all HTML content without additional CSS is single column.

Then how do we make it two columns? We use @media queries (MDN).

There are two main approaches to writing media queries.

desktop first approach: When you write CSS for desktop version and then write just the media queries for mobile version.
mobile first approach: When you write CSS for mobile version first and then write just the media queries for desktop version.

The common thing with both approaches is that you always override some rules you wrote above in your file.

In our example, we are using desktop first approach, no particular reason.

The .content-wrapper div holds two sections, the .left-nav and the .reading-column. In desktop, in order to make them two columns, we just give display: flex to the .content-wrapper parent. They immediately become two columns, why?

When you use display: flex, by default the layout becomes horizontal. All the immediate children become individual columns. This is because by default, flex-direction is row in flexbox (MDN).

Now, We achieved two columns. Next thing is page title alignment.

Making page title work:

We wanted the main title of the page to align with the second column (content column), right? So how do we achieve that?

Well, if you just want to use CSS and no JS, you have very little choice with Flexbox. In a future post, we will cover CSS grids which solve this issue very easily.

For now, what we do is that we create a duplicate h1 tag and copy that inside the .reading-column div. This allows us the ability to hide and show based on layout.

In desktop view, we hide the original page title and show the one inside .reading-column:

.title {
  display: none;
}

.reading-column .title {
  display: block;
}

In mobile view (@media query), we do the opposite:

@media only screen and (max-width: 900px) {
  .title {
    display: block;
  }

  .reading-column .title {
    display: none;
  }
}

There you go, our title is now aligning properly with respect to the content column.

Lets take care of left-nav

There are a couple of things to take care here:

In desktop layout, the top of the first left-nav link should align with the first title of the content sections. If not, it would look awkward because the left nav goes all the way up, nudging beside the page title.
In desktop layout, I wish to have the left navigation floating when the user scrolls so that they can have an idea where to go next.

For the first issue, we simply manage the margin-top of the .left-nav. Now, you have to try out the alignment by changing the margin-top till you see it properly aligned. For my layout, it worked at 5rem so I kept that.

.left-nav {
    # other rules
    margin-top: 5rem;
    # other rules
}

We reset this back to 0 in the media query because we do not want this kind of margin in mobile view.

@media only screen and (max-width: 900px) {
    # other rules
    .left-nav {
        # other left-nav rules
        margin-top: 0;
        # other left-nav rules
    }
    # other rules
}

Achieving floating left nav in desktop

This is a cool feature isn't it? To be able to see the page links all the time in the desktop view?

To achieve this, we have to use a cool feature called position: sticky.

Thanks to flexbox, We already have the .left-nav stretching from top to bottom in desktop view. This is because, by default, the align-items rule defaults to stretch. Check MDN to learn more about this.

Now, all we have to do is target the .left-nav__list and do the position related changes.

Note about positioning: In order for this to work, we have to make sure our .left-nav should have a position value other than the default one. Because, the child with a position value of sticky will always look for its immediate parent in the hierarchy that has its own stacking context. In other words, it will look for the parent that has position as one of these: [sticky, fixed, absolute or relative]. So we give position: relative to .left-nav.

Here are the changes.

.left-nav {
  # other rules
  position: relative;
}

.left-nav__list {
  # other rules
  position: sticky;
  top: 0;
}

The top: 0 rule makes sure our list is sticking to the top rather than to the bottom of the parent.

Other important things to learn

In the desktop view, the links are aligning towards right, this is something I have seen in many such implementations.
Use list-style-type: none to remove the bullets in the list which come by default. In some CSS resets, this is done for all lists, but I think that is more of a limitation than an advantage, especially in documentation apps where bullets are expected to be there by default.
Notice that in desktop view, we are fixing the width of the left nav and doing flex: 1 to the reading column. What this does is that your reading column will always occupy the rest of the width in the page.

Missing features we could add

The "always see the table of contents" feature is only available in desktop but not in the mobile view, may be we could add a sliding-in left-navigation to achieve this in future.
We may try to achieve highlighting the left-nav link based on the current section in view. This is a useful feature if you have sections whose heights are many times more than the viewport height. In this case, even though the section heading is hidden above, you can still look at the left-nav to know which section it is.

What next

I will resolve a couple of hacks that we did here in my next post using CSS grids.

Two h1s in the markup
Manually tweaking the margin-top of left-nav to align it with the first content heading.

Please do suggest if you want me to achieve any other feature in this particular example. Or if you like it, please let me know what you learned.

See you in the next one.

Subscribe to my YouTube channel for many such developer tips.

React vs Vue (A feature comparison)

Naga Chaitanya Konada — Thu, 23 Apr 2020 19:02:06 +0000

What this is not

This is not a comparison of how React works, how Vue fares in performance and code quality against React, etc.

This is rather a set of features which caught my eye as somewhat of a similarity. They are so similar in terms of learning curve, feature set and also tools developed around them, that sometimes I think they could combine and become a super-sonic tool that works across the board.

Please do not judge me over this, if some of the feature items look too naive and should not be there at all. But this is how I think both of the tools evolved over time and they are more common than you might think.

Wherever possible I have given links to the corresponding tools, in case you want to quickly take a look at them.

Here it goes

Feature	For React	For VueJS
Single Page Application	React CLI (create-react-app)	Vue CLI (vue create)
Server Side Rendering	Next.js	Nuxt.js
Static Site Generator	Gatsby, React-Static	Gridsome, VuePress
Material UI Library	Material-UI.com	Vuetify
DevTools	React DevTools for Chrome and Firefox	Vue DevTools for Chrome and Firefox
Bootstrap Library	react-bootstrap	bootstrap-vue
Routing	react-router, reach-router	VueJS router (vue-router)
UI State management	React Context, Redux (react-redux)	Vuex
Native apps	React Native (create-react-native-app)	Vue Native (vue-native-cli)

What do you think

I feel I did a nice job going after all these tools. I come from a React background and rarely get to work on VueJS apps in my work. I have been doing some side projects in Vue, just to get a feel of it. What do you think of the above listing of features. Should I add any other features for comparison? Did I miss anything. Have I listed something wrong? Do let me know in the comments.

Headless CMS comparison from JAMStack perspective (Gatsby)

Naga Chaitanya Konada — Thu, 23 Apr 2020 13:07:53 +0000

What are JAMStack projects

JAMStack has been popularised by teams like Netlify who along with many static site generator frameworks like Gatsby are making the process of hosting sites way better than before. If you are anyone like me, you must have utilised Gatsby and Netlify and one of the headless CMS tools out there already. No?

Checkout JAMStack.org site to know more about JAM stack and its advantages over traditional stacks.

What are Headless CMS tools

These are CMS tools where content is decoupled from their respective templates, thus avoiding the tight dependency of frontend projects on these CMS tools. If these are used, front-end developer can easily get the content and plug it in wherever required for the application they are making.

These CMS tools will expose an API layer that gets consumed by the front-end setup, as a traditional REST api or a GraphQL api.

Static Site Generators, will consume this API and generate static HTML pages that can be hosted easily without an actual server -- the whole point of JAMStack.

Checkout the HeadlessCMS.org site for a quick look at the plethora of these kind of CMS solutions out there, sorted by their popularity.

Also checkout StaticGen.com which has a similar listing for Static Site Generator tools out there, sorted by their popularity.

What is the comparison then

Recently, I went through a bunch of these CMS solutions against the Gatsby framework, mainly understanding how well and easy, we can integrate them with an existing Gatsby setup, how easily we can migrate content to these CMS tools and how easily we can maintain these.

Here is a full list of comparisons I did ⬇️

Feature	Netlify CMS	Contentful	Strapi CMS	Tina CMS
Gatsby integration	Yes	Yes	Yes	Yes
Cloud based	No	Yes	No	No
Separate repo	No	No	Yes	No
Authentication	GitHub/GitLab/BitBucket	GitHub/Google/Twitter	Email based/random UID	Anyone with access to the repo
Static files	Yes	No	No	Yes
Same repo	Yes	No	No	Yes
Multi-media	Repo-based	Cloud-based	Independent	Repo-based
Integration changes	Low	Low	Low	Medium
Incremental builds	Yes, possible	No, full build required	No, full build required	Yes, possible
CMS UI	Separate	Separate	Separate	Integrated
CMS Component support	No	No	Yes	No
Content Types	Yes	Yes	Yes	No
File formats	Markdown, Yaml, JSON	N/A	N/A	Markdown, JSON
Component modification required (one time)	No	No	No	Yes
Multi-site support	No	Yes	Yes	No
Webhooks	Not required	Yes	Yes	Not required
Content migration	Possible	Not possible	Not possible	Possible

How do you find this comparison to be? Would you like to add more details? Probably more points to compare? Have you done a similar comparison with these (or other) CMS tools? Please jump in and leave a comment. I will definitely check them out.

Best practices for reusable components in React

Naga Chaitanya Konada — Mon, 30 Mar 2020 13:00:13 +0000

These are some of the points related to best practices for reusable components in React-based projects.

Components should be small and easy to read.
Use prop-types package to structure and validate the props of your components.
For styled-components, do not include any functional details, instead pass them as props.
For container components, do not include UI details, instead, let the children styled-components take care of them
Prefer functional components vs class-based components.
Prefer CSS in JS strategy for styled-components for better maintainability.
UI variations should be coming in as configurable props whereas data should be coming up as part of a global state like Redux or React Context.
Don’t repeat sections wherever it can be avoided, instead use arrays to store those section details and loop over them.
For components, add comments only wherever absolutely necessary (to indicate a hack or workaround for a bug).
For library utilities (pure functions), write JS-Doc comments.
Avoid using anonymous components wherever possible.
All files for a component should be part of the same folder.
Always use eslint and prettier for keeping your code clean and formatted.
Use ES6 features.

DEV Community: Naga Chaitanya Konada

10 most important typescript concepts

Introduction

1. Type Annotations

2. Interfaces

3. Classes

4. Generics

5. Enums

6. Type Inference

7. Union and Intersection Types

8. Type Guards

9. Decorators

10. Modules

Conclusion

References

How popular are libraries in each technology

Frontend Libraries

Backend Language Libraries

DevOps

Fullstack E2E Solutions

Machine Learning

Mobile App Libraries and Languages

Templating Engines

Finally

Evolution of Frontend Frameworks over the Last Decade

Early 2010s: jQuery and Backbone.js

Mid-2010s: AngularJS and React

Late 2010s: Vue.js and Angular

Conclusion - who stood the test of time

Renderprops vs Custom Hooks: Which one to use?

Introduction

Renderprops

Custom Hooks

When to use Renderprops vs Custom Hooks

Conclusion

Animate on scroll in React

The challenge

The solution for today

The setup

Get started with the component

Add in the animation

Preview the component

Control animation start

Listen to visibility (Intersection Observer)

Conclusion

How to check if you are in an iFrame

References

JavaScript execution context (this)

The agenda

What is this

About use strict and this

Where to define a function

Ways to invoke a function

Fixing sub-function problem

How arrow functions differ from normal functions regarding this

What if we declare in a function

visiting our old example

Conclusion

Blog post layout using CSS grids

Recap

Final result

Demo

Let's look at the improvements

Addressing the double h1 problem

In desktop view:

Mobile view:

Controlling width of the left nav section

Reading column width

Conclusion

Blog post layout using CSS flexbox

Intro

Final result

Demo

Lets kick it off

The all important template

A little bit about the structure

The problem with this layout

The markup

Lets dive into the CSS

Image width thing:

What is `this`

About `use strict` and `this`

How arrow functions differ from normal functions regarding `this`

Addressing the double `h1` problem