DEV Community: HidetoshiYanagisawa

How to Retrieve Travel Time with React Native Maps Directions

HidetoshiYanagisawa — Wed, 30 Aug 2023 00:15:59 +0000

Hello, dev.to community! Today, I'm going to show you how to obtain the estimated travel time between two points using react-native-maps-directions. This can be incredibly handy when creating apps related to travel or movement.

Introduction
Setting up react-native-maps-directions
Retrieving the Travel Time
Complete Sample Code
Conclusion

Introduction

First, let's install the necessary packages:

npm install react-native-maps react-native-maps-directions

Also, you'll need a Google Maps Directions API key. You can get one here.

Setting up react-native-maps-directions

Next, let's set up the basic configuration to display the route guidance:

import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const App = () => {
  const origin = {latitude: 37.7749, longitude: -122.4194}; // For example, San Francisco
  const destination = {latitude: 34.0522, longitude: -118.2437}; // For example, Los Angeles

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 36.7783,
        longitude: -119.4179,
        latitudeDelta: 10,
        longitudeDelta: 10,
      }}>
      <MapViewDirections
        origin={origin}
        destination={destination}
        apikey="YOUR_GOOGLE_MAPS_API_KEY"
      />
    </MapView>
  );
};

Retrieving the Travel Time

react-native-maps-directions provides the onReady property, which sets a callback for when the route information is loaded. We can use this to get the route's distance and estimated travel time.

const handleDirectionsReady = (result) => {
  const distance = result.distance; // Distance (km)
  const duration = result.duration; // Travel time (hours)

  console.log(`Distance: ${distance} km, Travel time: ${duration} hours`);
};

<MapViewDirections
  ...
  onReady={handleDirectionsReady}
/>

Complete Sample Code

Here's the full sample code to display route guidance and retrieve the travel time:

import React from 'react';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const App = () => {
  const origin = {latitude: 37.7749, longitude: -122.4194};
  const destination = {latitude: 34.0522, longitude: -118.2437};

  const handleDirectionsReady = (result) => {
    const distance = result.distance;
    const duration = result.duration;

    console.log(`Distance: ${distance} km, Travel time: ${duration} hours`);
  };

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 36.7783,
        longitude: -119.4179,
        latitudeDelta: 10,
        longitudeDelta: 10,
      }}>
      <MapViewDirections
        origin={origin}
        destination={destination}
        apikey="YOUR_GOOGLE_MAPS_API_KEY"
        onReady={handleDirectionsReady}
      />
    </MapView>
  );
};

export default App;

Conclusion

In this article, we explored how to use react-native-maps-directions to retrieve the estimated travel time between two points. This method can simplify the process when building travel-related apps. Give it a try and enhance your apps!

If you found this helpful, please leave a like or comment. Stay tuned for more helpful tutorials! 🚀

Efficiently Persisting State in React Native with Recoil and react-native-mmkv

HidetoshiYanagisawa — Thu, 24 Aug 2023 07:09:59 +0000

Introduction

Recoil has gained traction as a state management library for React. However, there are various methods to persist its state. In this article, we'll explore how to efficiently persist Recoil's state using react-native-mmkv, a fast key-value storage.

Installing Necessary Packages

First, let's install the required packages:

yarn add recoil react-native-mmkv

Then, link the native part of react-native-mmkv:

expo install react-native-mmkv

Creating a Persistence Helper for Recoil

Next, we'll create a helper function to persist the state of Recoil's atoms and selectors using react-native-mmkv.

import MMKV from 'react-native-mmkv';
import { atom, DefaultValue } from 'recoil';

export const persistentAtom = <T>(key: string, defaultVal: T) => {
  return atom<T>({
    key,
    default: defaultVal,
    effects_UNSTABLE: [
      ({ setSelf, onSet }) => {
        const savedValue = MMKV.getString(key);

        if (savedValue != null) {
          setSelf(JSON.parse(savedValue));
        }

        onSet((newValue) => {
          if (newValue instanceof DefaultValue) {
            MMKV.delete(key);
          } else {
            MMKV.set(key, JSON.stringify(newValue));
          }
        });
      },
    ],
  });
};

Using the Persistent Atom

Now, let's create a persisted atom using the helper function:

import { persistentAtom } from './path-to-your-helper';

export const userState = persistentAtom('userState', {
  name: '',
  age: 0,
});

Using in Your Application

You can use this persisted atom in your application just like any regular Recoil atom:

import { useRecoilState } from 'recoil';
import { userState } from './path-to-your-atom';

const UserInfo = () => {
  const [user, setUser] = useRecoilState(userState);

  return (
    <View>
      <Text>Name: {user.name}</Text>
      <Text>Age: {user.age}</Text>
    </View>
  );
};

Conclusion

Combining Recoil with react-native-mmkv allows for efficient state persistence in React Native applications. This combination is ideal for maintaining application performance while securely storing user data.

If you found this article helpful, please give it a thumbs up or leave a comment. Any questions or feedback are also welcome! 🚀

Implementing Attractive Bottom Sheets in React Native with `react-native-bottom-sheet`

HidetoshiYanagisawa — Thu, 24 Aug 2023 07:03:26 +0000

What is a Bottom Sheet?

A bottom sheet is a UI design pattern in mobile applications, representing a layer of content that slides up from the bottom of the screen. It serves as a method to provide additional information or actions to the user. Bottom sheets can be used for various purposes, such as menu options, navigation, or detailed information.

Features of React Native Bottom Sheet

react-native-bottom-sheet offers features like:

Modal presentation view, Bottom Sheet Modal.
Smooth gesture interactions and snapping animations.
Seamless keyboard handling for both iOS and Android.
Support for scrolling interactions in FlatList, SectionList, ScrollView, and View.
Compatibility with Expo.
Written in TypeScript.

Installation Guide

yarn add @gorhom/bottom-sheet@^4

Dependencies:

yarn add react-native-reanimated react-native-gesture-handler

For those using Expo:

expo install react-native-reanimated react-native-gesture-handler

Basic Usage

Here's a basic example of implementing a bottom sheet:

import React from 'react';
import { View, Text, Button } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  const bottomSheetRef = useRef(null);

  const handleOpenSheet = () => {
    bottomSheetRef.current.snapTo(1);
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Bottom Sheet" onPress={handleOpenSheet} />
      <BottomSheet
        ref={bottomSheetRef}
        index={0}
        snapPoints={['25%', '50%', '75%']}
      >
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>This is the content of the Bottom Sheet</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

export default App;

Conclusion

Using react-native-bottom-sheet, you can easily add attractive bottom sheets to your React Native applications. Leverage the rich features and straightforward implementation of this library to enhance user experience!

If you found this article helpful, please give it a thumbs up or leave a comment. Any questions or feedback are also welcome! 🚀

Mastering AWS Cognito: A Comprehensive Guide

HidetoshiYanagisawa — Tue, 22 Aug 2023 06:57:19 +0000

Introduction

Hello, developers! In today's post, we will dive deep into one of AWS's most versatile services - Cognito. By the end of this article, you'll have a solid grasp of what Cognito offers and how to implement it in your projects.

What is AWS Cognito?
Key Features
Significant Benefits
Common Use Cases
Implementation Guide
Conclusion

1. What is AWS Cognito?

AWS Cognito is an authentication and authorization service provided by Amazon Web Services (AWS). It allows developers to easily add user management and secure authentication processes to their applications.

2. Key Features

a. User Pools

Offers basic user management features like user registration, sign-in, and password reset.

b. Federated Identities

Provides temporary AWS authentication credentials by leveraging third-party identity providers like Facebook, Google, and SAML-based authentication.

3. Significant Benefits

Integration with social identity providers.
Cross-platform support with SDKs for platforms like iOS, Android, and JavaScript.
Enhanced security with all data encrypted at rest and transmitted using secure protocols.
Multi-factor authentication for added user security.
Customizable user experience for authentication flows and UI.

4. Common Use Cases

User authentication for mobile and web applications.
Providing temporary AWS credentials directly from frontend applications.
Integration with third-party services.

5. Implementation Guide

Here's a sample code for user authentication using the JavaScript SDK of Cognito:

const AmazonCognitoIdentity = require('amazon-cognito-identity-js');

const poolData = {
    UserPoolId: '<YOUR_USER_POOL_ID>',
    ClientId: '<YOUR_CLIENT_ID>'
};

const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

const authenticationData = {
    Username: '<USERNAME>',
    Password: '<PASSWORD>',
};

const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

const userData = {
    Username: '<USERNAME>',
    Pool: userPool
};

const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);

cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: (session) => {
        console.log('authentication successful', session);
    },
    onFailure: (err) => {
        console.error('authentication failed', err);
    }
});

Ensure you modify the placeholders (<YOUR_USER_POOL_ID>, <YOUR_CLIENT_ID>, etc.) to match your environment settings.

6. Conclusion

AWS Cognito stands as a potent tool for effortlessly implementing user authentication in mobile and web applications. I hope this guide serves as a valuable resource as you consider integrating it into your projects.

Happy coding!

Handling SVGs in SwiftUI: A Comprehensive Guide with SwiftSVG

HidetoshiYanagisawa — Tue, 22 Aug 2023 00:35:08 +0000

When developing apps with SwiftUI, you might encounter the need to handle SVGs. Since SwiftUI does not natively support SVGs, in this article, we will explore how to display SVGs using the third-party library SwiftSVG.

Introducing SwiftSVG
Adding SVG Files to Your Project
Displaying SVG in SwiftUI
Conclusion

Introducing SwiftSVG

To add SwiftSVG to your project, you can easily integrate it using the Swift Package Manager.

Open Xcode and select your desired project.
Navigate to File > Swift Packages > Add Package Dependency....
Enter the package repository URL as https://github.com/mchoe/SwiftSVG.git and click "Next".
Choose the version you need and click "Next".
Select the target you wish to install to and click "Finish".

import SwiftSVG

Adding SVG Files to Your Project

Adding SVG files to your Xcode project is straightforward.

Open the Xcode project navigator.
Drag and drop the SVG file directly from Finder.
Ensure the following options are selected:
- Copy items if needed
- Create groups
- Add to targets (select the main app target)

Displaying SVG in SwiftUI

Below is a basic way to display SVGs in SwiftUI using SwiftSVG:

import SwiftSVG

let svgView = UIView(SVGNamed: "your_svg_name") { (svgLayer) in
    svgLayer.resizeToFit(self.bounds)
}

struct SVGView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        return svgView
    }

    func updateUIView(_ uiView: UIView, context: Context) {
    }
}

Now, you can use the SVGView within your SwiftUI view hierarchy to display the SVG.

Conclusion

In this article, we delved into how to handle SVG files in SwiftUI using the SwiftSVG library. With SwiftSVG, displaying SVGs in your SwiftUI app becomes a breeze. If you have requirements around SVGs, consider introducing this library to your toolkit.

Your feedback and likes are much appreciated!

Harnessing the Power of React with IntersectionObserver!

HidetoshiYanagisawa — Fri, 18 Aug 2023 07:55:58 +0000

The IntersectionObserver API, which observes whether an element is within the viewport, can supercharge your user experience when combined with React. In this article, we'll dive deep into unlocking its full potential!

What is IntersectionObserver?
Basics of Using IntersectionObserver in React
Practical Application: 3 Powerful Features
- Lazy Loading
- Infinity Scroll
- Ad Visibility Measurement
Conclusion

What is IntersectionObserver?

IntersectionObserver is an API designed to monitor when specific elements enter or exit the viewport. This allows for effective control of element visibility and triggering certain actions based on their state.

Basics of Using IntersectionObserver in React

To utilize IntersectionObserver within React, we primarily combine useRef and useEffect. We capture DOM elements with useRef and then set up the observer within the useEffect.

Practical Application: 3 Powerful Features

1. Lazy Loading

Lazy Loading is a technique where elements (especially images and videos) are not loaded immediately on page load, but only when needed—like when scrolling brings them close to the viewport.

Code Sample

import React, { useState, useEffect, useRef } from 'react';

function LazyImage({ src, alt, ...props }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const imgRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        imgRef.current.src = src;
        imgRef.current.onload = () => setIsLoaded(true);
        observer.disconnect();
      }
    });

    observer.observe(imgRef.current);

    return () => observer.disconnect();
  }, [src]);

  return <img ref={imgRef} alt={alt} {...props} style={isLoaded ? {} : { opacity: 0 }} />;
}

Explanation

We manage the image's loading state using useState.
We hold a reference to the image element using useRef.
Within the useEffect, we set up an observer to monitor if the element enters the viewport.
Upon entering, we set the actual src, initiating the image load.

2. Infinity Scroll

A technique where, upon reaching the bottom of the page, more content is automatically loaded. Commonly seen on social media platforms.

Code Sample

import React, { useState, useEffect, useRef } from 'react';

function InfinityScroll({ fetchData }) {
  const [items, setItems] = useState([]);
  const loadingRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(async ([entry]) => {
      if (entry.isIntersecting) {
        const newItems = await fetchData();
        setItems(prevItems => [...prevItems, ...newItems]);
      }
    });

    if (loadingRef.current) {
      observer.observe(loadingRef.current);
    }

    return () => observer.disconnect();
  }, [fetchData]);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <div ref={loadingRef}>Loading...</div>
    </div>
  );
}

Explanation

We observe a loading status element.
When this element comes into view, we fetch more data and append it to our existing item list.

3. Ad Visibility Measurement

Measuring the duration an advertisement remains visible in the viewport. This can be crucial for billing criteria in ad platforms.

Code Sample

import React, { useEffect, useRef } from 'react';

function AdComponent({ src }) {
  const adRef = useRef(null);
  const startTimeRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        startTimeRef.current = new Date();
      } else if (startTimeRef.current) {
        const duration = new Date() - startTimeRef.current;
        console.log(`Ad was visible for ${duration}ms`);
        startTimeRef.current = null;
      }
    });

    if (adRef.current) {
      observer.observe(adRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return <img ref={adRef} src={src} alt="Advertisement" />;
}

Explanation

We record the time an ad becomes visible.
When the ad exits the viewport, we compute the visibility duration and log it.

Conclusion

Combining React with IntersectionObserver allows for the easy implementation of extremely powerful features. Use the examples above as a guide and integrate them into your projects for an enhanced user experience!

Demystifying JavaScript's New `.at()` Array Method!

HidetoshiYanagisawa — Fri, 18 Aug 2023 07:13:57 +0000

Hello, everyone! There's a new buzz in the JavaScript world, and it's all about a new array method named .at(). In this article, we'll explore from the basics to the intricacies of this new method. Let's dive right in!

What's the .at() method?
The Basics of Using .at()
Accessing Elements with Negative Indices
Differences between .at() and Traditional Array Indexing
Wrapping Up

1. What's the `.at()` method?

Introduced to JavaScript arrays, the .at() method has a unique characteristic: it accepts both positive and negative indices. This feature has made accessing elements from the end of arrays incredibly straightforward.

2. The Basics of Using `.at()`

First, let's touch upon its basic usage.

const fruits = ["apple", "banana", "cherry", "date", "fig"];

// Accessing the first element
console.log(fruits.at(0)); // "apple"

// Accessing the third element
console.log(fruits.at(2)); // "cherry"

3. Accessing Elements with Negative Indices

The real magic of .at() is its ability to access array elements using negative indices.

// Accessing the last element
console.log(fruits.at(-1)); // "fig"

// Accessing the second to the last element
console.log(fruits.at(-2)); // "date"

4. Differences between `.at()` and Traditional Array Indexing

Let's explore the primary distinction between traditional array indexing and the .at() method.

// Traditional array indexing out-of-bounds access
console.log(fruits[100]); // undefined

// Out-of-bounds access with .at() method
console.log(fruits.at(100)); // undefined

Both methods safely return undefined for out-of-bounds access.

5. Wrapping Up

The .at() method provides developers with a new tool to make array element access more flexible and intuitive. Accessing the last elements of an array has never been simpler! Do consider integrating it into your toolset.

Gaining insights into such new JavaScript features can enhance the efficiency and readability of your development process. If you found this informative, do give it a thumbs up👍 and share!

That's all for our dive into the .at() method. Stay tuned for more tech insights in our upcoming articles!

---

Resolve 404 Errors in React Router with Apache's .htaccess

HidetoshiYanagisawa — Thu, 17 Aug 2023 15:45:13 +0000

Background of the Issue
Why Does This Happen?
Solution: Apache's .htaccess Configuration
Detailed Explanation of the Configuration
Conclusion

1. Background of the Issue

When building single-page applications with React Router, a common issue arises: direct access to internal page URLs often results in a 404 error. In this post, we'll explore a solution using Apache server configurations.

2. Why Does This Happen?

React Router deals with client-side routing. Hence, when a server request is made to a URL that doesn't correspond to an actual file or directory, the server returns a 404 error.

3. Solution: Apache's .htaccess Configuration

To address this issue, you can adjust the .htaccess file on your Apache server as follows:


RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

With this configuration, any direct access to internal URLs will redirect to index.html, allowing React Router to handle the routing properly.

4. Detailed Explanation of the Configuration

RewriteEngine On: Enables the rewrite engine.
RewriteBase /: Sets the base URL for rewriting to the root.
RewriteRule ^index\.html$ - [L]: Allows direct access to index.html.
RewriteCond %{REQUEST_FILENAME} !-f and RewriteCond %{REQUEST_FILENAME} !-d: Applies the next rule only if the requested path doesn't correspond to an actual file or directory.
RewriteRule . /index.html [L]: For any path meeting the above conditions, redirect to index.html.

5. Conclusion

React Router routing issues can be mitigated with the right server configurations. If you're using Apache, the above .htaccess configuration can enhance your user experience. If you found this helpful, please consider sharing and letting your fellow developers know!

Boost Your JavaScript Performance with the Debounce Technique!

HidetoshiYanagisawa — Tue, 15 Aug 2023 06:41:23 +0000

Hello readers! Today, we'll dive deep into the JavaScript debounce technique. By leveraging this method, you can efficiently control high-frequency event triggers, enhancing the performance of your web pages.

What is debounce?
Implementing debounce
Practical Examples
Benefits and Considerations of debounce
Conclusion

1. What is `debounce`?

Debounce is a technique to control the processing of high-frequency events. It ensures that a function is executed only if a certain interval has passed without another event trigger. This suppresses unnecessary function executions, preventing potential performance issues.

2. Implementing `debounce`

Here's a simple JavaScript implementation of the debounce function:

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(context, args);
        }, wait);
    };
}

This function takes the actual function (func) to be executed and a waiting time (wait) as arguments.

3. Practical Examples

Let's look at some practical uses of the debounce function we've just created.

Controlling Window Resize Events

const debouncedFunction = debounce(() => {
    console.log('Debounced!');
}, 300);

window.addEventListener('resize', debouncedFunction);

In this example, even if the window resize event is triggered, the console.log('Debounced!'); will only execute 300 milliseconds after the last resize event.

Controlling API Requests on Input

const inputElement = document.querySelector('#search-input');

inputElement.addEventListener('keyup', debounce((event) => {
    fetchApi(event.target.value);
}, 500));

Here, instead of making an API request every time a user types into a search form, the request is only made 500 milliseconds after the last key input, given that no new key inputs occur within that interval.

4. Benefits and Considerations of `debounce`

Benefits

Performance Boost: By controlling high-frequency event processing, you can reduce unnecessary operations.
Enhanced User Experience: Maintain a smooth user interaction while only executing essential processes.

Considerations

Proper handling of context is crucial inside the debounce function to use this correctly.
Setting the right wait time is key to balancing user experience and performance.

5. Conclusion

The debounce technique is a powerful tool for effectively controlling high-frequency event processing in JavaScript. Implementing this can significantly improve web page performance and user experience. Use it wisely, and you'll surely see its benefits.

I hope you found this article insightful. If you did, please don't forget to give it a thumbs up or leave a comment! Happy coding!

Diving Deep into the HTML Living Standard

HidetoshiYanagisawa — Sun, 13 Aug 2023 18:47:00 +0000

HTML, the foundational language for web pages, constantly evolves. Dive with us as we explore the intriguing world of the HTML Living Standard, shedding light on its creation, distinct elements, and ongoing evolution.

Introduction
What is the HTML Living Standard?
Origins of the Standard
Signature Elements
A Continuously Evolving Specification
Real-world Examples
Conclusion

Introduction

HTML stands at the cornerstone of web development. But have you ever pondered the backstory of the tags and elements you use daily? This post aims to demystify the HTML Living Standard, detailing its inception, features, and practical applications.

What is the HTML Living Standard?

The HTML Living Standard represents the latest specifications of HTML. Unlike static versions, this "living" standard updates in tandem with new tech advancements and browser implementations.

Origins of the Standard

Around 2004, major browser vendors sensed a stagnation in the evolution of HTML. This prompted the formation of a new group, WHATWG, which later spearheaded the development of what we now recognize as "HTML5." This specification subsequently transformed into the continuously updated "HTML Living Standard."

Signature Elements

The HTML Living Standard introduced a plethora of new elements and attributes.

Semantic Elements: Designed to represent web page content more semantically.

<article>
    <header>
        <h2>Title of the article</h2>
    </header>
    <p>Content of the article...</p>
    <footer>
        <p>Author: John Doe</p>
    </footer>
</article>

Multimedia Support: Enhancements in native multimedia support.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

A Continuously Evolving Specification

The HTML Living Standard isn't a fixed version; it's an ever-evolving specification. This adaptability ensures swift alignment with new technologies and browser functionalities.

Real-world Examples

The HTML Living Standard offers an array of new elements and attributes. Here are some hands-on examples:

<!-- Semantic Element Example -->
<article>
    <header>
        <h2>Title of the article</h2>
    </header>
    <p>Content of the article...</p>
    <footer>
        <p>Author: John Doe</p>
    </footer>
</article>

<!-- Video Element Example -->
<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Conclusion

The HTML Living Standard paves the way for the future of the web. Embracing and understanding its new elements and attributes empowers us to craft more sophisticated web pages.

Discover the Origins of HTML Tags! Surprising Backgrounds and Uses

HidetoshiYanagisawa — Sun, 13 Aug 2023 08:24:45 +0000

Dive deep into the world of HTML tags and uncover the hidden meanings and histories behind them. In this article, we'll explore several common HTML tags, learn about the English words from which they originated, and delve into their meanings and applications.

Introduction
Anchor Tag: <a>
Image Tag: <img>
Break Tag: <br>
Horizontal Rule Tag: <hr>
Unordered List: <ul>
Ordered List: <ol>
List Item: <li>
Division Tag: <div>
Span Tag: <span>
Meta Tag: <meta>
Link Tag: <link>
Form Tag: <form>
Definition List Tag: <dl>
Definition Term Tag: <dt>
Definition Description Tag: <dd>
Conclusion

Introduction

HTML is the foundational language for building web pages. But, have you ever stopped to think about the origins of the tags you use daily? Let's delve into these mysteries and illuminate the stories behind each tag.

Anchor Tag: `<a>`

Original Word: Anchor
English Meaning: A device used to anchor something or a reference point.
Tag Purpose: To create hyperlinks.
Usage Example:

<a href="https://www.example.com">Visit Example</a>

Image Tag: `<img>`

Original Word: Image
English Meaning: A representation or resemblance of something.
Tag Purpose: To embed images.
Usage Example:

<img src="image.jpg" alt="Description of image">

Break Tag: `<br>`

Original Word: Break
English Meaning: A pause or interruption.
Tag Purpose: To insert line breaks.
Usage Example:

<p>This is some text.<br>Here starts a new line.</p>

Horizontal Rule Tag: `<hr>`

Original Word: Horizontal Rule
English Meaning: A line that goes from left to right.
Tag Purpose: To insert a thematic break.
Usage Example:

<p>Some text above the line.</p>
<hr>
<p>Some text below the line.</p>

Unordered List: `<ul>`

Original Word: Unordered List
English Meaning: A list without a specific order.
Tag Purpose: To create bulleted lists.
Usage Example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Ordered List: `<ol>`

Original Word: Ordered List
English Meaning: A list with a specific order.
Tag Purpose: To create numbered lists.
Usage Example:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

List Item: `<li>`

Original Word: List Item
English Meaning: An item in a list.
Tag Purpose: To represent items within a list.
Usage Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Division Tag: `<div>`

Original Word: Division
English Meaning: A section or part of a whole.
Tag Purpose: To group content together.
Usage Example:

<div>
  <p>This is some content inside a div.</p>
</div>

Span Tag: `<span>`

Original Word: Span
English Meaning: A section or stretch of time or distance.
Tag Purpose: To group inline elements.
Usage Example:

<p>This is a <span style="color:red;">colored</span> word.</p>

Meta Tag: `<meta>`

Original Word: Metadata
English Meaning: Data about other data.
Tag Purpose: To provide metadata about the document.
Usage Example:

<meta charset="UTF-8">

Link Tag: `<link>`

Original Word: Link
English Meaning: A connection or relationship.
Tag Purpose: To reference external resources.
Usage Example:

<link rel="stylesheet" href="styles.css">

Form Tag: `<form>`

Original Word: Form
English Meaning: A structure or arrangement.
Tag Purpose: To collect user input.
Usage Example:

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

Definition List Tag: `<dl>`

Original Word: Definition List
English Meaning: A list of terms and their definitions.
Tag Purpose: To display terms alongside their definitions.
Usage Example:

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Definition Term Tag: `<dt>`

Original Word: Definition Term
English Meaning: The term being defined.
Tag Purpose: To represent the term being defined.
Usage Example:

<dl>
  <dt>Browser</dt>
  <dd>A software application used to access and view websites.</dd>
</dl>

Definition Description Tag: `<dd>`

Original Word: Definition Description
English Meaning: The definition of a term.
Tag Purpose: To provide the definition or description of a term.
Usage Example:

<dl>
  <dt>Server</dt>
  <dd>A computer program or system that provides resources, data, services, or programs to other computers, known as clients, over a network.</dd>
</dl>

Conclusion

HTML tags form the backbone of the web, each carrying its unique history and purpose. By understanding these backgrounds, we can use these tags more effectively, creating richer and more meaningful web experiences.

Efficiently Using Environment Variables in FastAPI!

HidetoshiYanagisawa — Fri, 11 Aug 2023 18:46:00 +0000

FastAPI offers a flexible and efficient way to build web applications. One of its strengths is the ease with which it integrates with external tools and libraries. In this article, we'll delve into how you can effectively use environment variables within your FastAPI applications. This is crucial for safely managing configurations, secrets, and other sensitive data. Dive in to learn the steps and grab some sample code!

Installing Necessary Libraries
Setting Up Environment Variables
Using Environment Variables in FastAPI

1. Installing Necessary Libraries

First and foremost, we'll need to install the python-dotenv library to effortlessly handle environment variables.

pip install python-dotenv

2. Setting Up Environment Variables

Next, create a .env file in the root directory of your project. Set your environment variables within this file. For example:

DATABASE_URL=postgresql://user:password@localhost:5432/mydatabase
SECRET_KEY=mysecretkey

Before launching your FastAPI application, add the following code to ensure the .env file's environment variables are loaded:

import os
from dotenv import load_dotenv

load_dotenv()  # Loads environment variables from .env file

3. Using Environment Variables in FastAPI

Once the environment variables are loaded, they can be accessed and used within the FastAPI application. Use os.environ.get() to retrieve the values of these variables:

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    secret_key = os.environ.get("SECRET_KEY")
    return {"Hello": "World", "Key": secret_key}

By following these steps, you can seamlessly and securely use environment variables in your FastAPI applications.

That's it! By using environment variables in FastAPI, you ensure the security of configurations, secrets, and other sensitive data. Give it a try in your next project!

If you have questions or feedback, don't hesitate to drop a comment or give a thumbs up! 🚀🌟

DEV Community: HidetoshiYanagisawa

How to Retrieve Travel Time with React Native Maps Directions

Table of Contents

Introduction

Setting up react-native-maps-directions

Retrieving the Travel Time

Complete Sample Code

Conclusion

Efficiently Persisting State in React Native with Recoil and react-native-mmkv

Introduction

Installing Necessary Packages

Creating a Persistence Helper for Recoil

Using the Persistent Atom

Using in Your Application

Conclusion

Implementing Attractive Bottom Sheets in React Native with `react-native-bottom-sheet`

What is a Bottom Sheet?

Features of React Native Bottom Sheet

Installation Guide

Basic Usage

Conclusion

Mastering AWS Cognito: A Comprehensive Guide

Introduction

Table of Contents

1. What is AWS Cognito?

2. Key Features

a. User Pools

b. Federated Identities

3. Significant Benefits

4. Common Use Cases

5. Implementation Guide

6. Conclusion

Handling SVGs in SwiftUI: A Comprehensive Guide with SwiftSVG

Table of Contents

Introducing SwiftSVG

Adding SVG Files to Your Project

Displaying SVG in SwiftUI

Conclusion

Harnessing the Power of React with IntersectionObserver!

Table of Contents

What is IntersectionObserver?

Basics of Using IntersectionObserver in React

Practical Application: 3 Powerful Features

1. Lazy Loading

Code Sample

Explanation

2. Infinity Scroll

Code Sample

Explanation

3. Ad Visibility Measurement

Code Sample

Explanation

Conclusion

Demystifying JavaScript's New `.at()` Array Method!

Table of Contents

1. What's the .at() method?

2. The Basics of Using .at()

3. Accessing Elements with Negative Indices

4. Differences between .at() and Traditional Array Indexing

5. Wrapping Up

Resolve 404 Errors in React Router with Apache's .htaccess

Table of Contents

1. Background of the Issue

2. Why Does This Happen?

3. Solution: Apache's .htaccess Configuration

4. Detailed Explanation of the Configuration

5. Conclusion

Boost Your JavaScript Performance with the Debounce Technique!

Table of Contents

1. What is debounce?

2. Implementing debounce

3. Practical Examples

Controlling Window Resize Events

Controlling API Requests on Input

4. Benefits and Considerations of debounce

Benefits

Considerations

5. Conclusion

Diving Deep into the HTML Living Standard

Table of Contents

1. What's the `.at()` method?

2. The Basics of Using `.at()`

4. Differences between `.at()` and Traditional Array Indexing

1. What is `debounce`?

2. Implementing `debounce`

4. Benefits and Considerations of `debounce`

Anchor Tag: `<a>`

Image Tag: `<img>`

Break Tag: `<br>`

Horizontal Rule Tag: `<hr>`

Unordered List: `<ul>`

Ordered List: `<ol>`

List Item: `<li>`

Division Tag: `<div>`

Span Tag: `<span>`

Meta Tag: `<meta>`

Link Tag: `<link>`

Form Tag: `<form>`

Definition List Tag: `<dl>`

Definition Term Tag: `<dt>`

Definition Description Tag: `<dd>`