TortoiseFeel

How to get familiar with Tailwind CSS?

Hello, Welcome to the post.

Here is the common question first you have in your mind to when get started with Tailwind CSS for your first project or go-to learning project for Tailwind and other frontend tech you were learning together.

So, Lets Get’s close familiar with Tailwind CSS to start with.

More content is boiling and will be coming up soon!

Keep your focused till then here!

PS. Okay, well will start now with some basic code from Tailwind CSS docs to familiarize with CSS class names we will be generally using to start our basics structure for any UI component building in frontend or html.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Here lets talk about all the classes used in the above code to create the small chat notification pop box for example:

p-6 applies padding to the box, ranges suffix starts from number 0 to 96 with also some decimal values unto 3 number, like, p-1.5, p-2.5 and p-3.5
also suffix available to handle specific paddings are like; p – all side, ps – padding start (on left side), pe padding for end (right side only), px – for padding left and right side, py – for padding top and bottom , px-auto

Similarly, you can learn for margin would be having same sets of rules to apply margin to the box using the same above like suffix and prefix name, just you might need to change ‘p‘ to ‘m‘.

max-w-sm is to set max width on smaller devices or for smaller devices.

mx-auto is setting margin left and right auto to center align the box element. (note as we discussed for padding suffix and prefix same applies to margin)

bg-white – apply white background color to the element, for more possible values are available in Tailwind CSS Background list latest versions, you can also apply variations and calculation with class names

rounded-xl – rounding the box with xl size value, there are bunch of options and ways to round the box or make the rounded to none using rounded-none, check the rounded classes and variations list on Tailwind CSS Rounded Corners
shadow-lg – applies outer box shadow to the element, possible values available are shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, or shadow-2xl, you can also apply inner shadow and no shadow using class like shadow-inner and shadow–none

in Tailwind CSS we can use variant modifies, what are they? they are just utility class to apply styles like when you hover and element or so, for example apply shadow-lg on hover right through CSS class name code here it is an example of variant modifiers class: hover:shadow-lg, will apply shadow effect on hover of the that particular element, isn’t it easy? For more styling options check Tailwind CSS Shadow

flex – applies flex box styles to the element its child elements how they grow or shrink using more utility class names like flex-1, flex-initial, flex-auto and flex-none, also breakpoints and variants are available for the class flex. Check out Tailwind CSS Flex for more details information.

items-center – abasically to align child items in center respect to flex direction column or row

space-x-4 – to creates space between child elements or help to create gaps between the elements, various class option with gap size available, checkout Tailwind CSS Space

h-12 and w-12 – are to apply width and height to the logo element, there are many height and width utility classes available, just heads up class names starting from w-0, w-px, w-1,and so on … till end w-ful, w-screen, w-min, w-max, w-fit, similarity for height, Tailwind CSS Width

Next remaining are text- and font- they applies text variant size and colors and font variant size and weights and more, check underline-offset-1 and so on variant till 8 applies underline offset between text line to the bottom. Tailwind CSS Underline Offset Tailwind CSS Font Weight and more variants classes we can look straight through the doc for more deeper learning of CSS class names.

I hope this gives us the highlight what lies under Tailwind CSS styling guides and what classes we can utilize from the bunch out in the tail of wind CSS, make sense!?

Happy learning, for tips or corrections please leave message or drop us note on hello@tortoisefeel.com

How to build Android APK/apk from command line interface on windows/mac?

Hello,

If you are looking for, to build or generate the android apk file (in your capacitor project) directly from the command line rather then opening Android Studio and building up.

I will share few steps and challenges face to build android apk from CLI on windows and also would share below the mac version of command line code too incase you are mac user.

First step first,

Before running the CLI command which I will be sharing below, we make sure we add the two things under Environment variables of windows system.

Java JDK or JAVA_HOME path
zipalign if not set or when you run command your cli throw error not zipalign command (so we need it too in the PATH variable of the windows system)

See last two entries in the image above, second entry were zipalign.exe is available under your real Android Studio folder.

Next, just try out these command you will be good to go

Windows CLI command for Android APK release build

cd android && 
gradlew.bat assembleRelease && 
cd app/build/outputs/apk/release &&
jarsigner -keystore YOUR_KEYSTORE_PATH -storepass YOUR_KEYSTORE_PASS app-release-unsigned.apk YOUR_KEYSTORE_ALIAS &&
zipalign 4 app-release-unsigned.apk app-release.apk

In Code above, note we are using gradlew.bat which is important to note for window users reset is same for MAC command too (didn’t tested on mac, channel of command source from the post), result would working for me on windows!

Note the date and time of output (compare to post date and time, I renamed the file to mdw-app-release.apk for use)

Mac CLI command for Android APK release build

cd android && 
./gradlew assembleRelease && 
cd app/build/outputs/apk/release &&
jarsigner -keystore YOUR_KEYSTORE_PATH -storepass YOUR_KEYSTORE_PASS app-release-unsigned.apk YOUR_KEYSTORE_ALIAS &&
zipalign 4 app-release-unsigned.apk app-release.apk

If you like to generate for debug just changed assembleRelease to assembleDebug and change the file names accordingly, from release to debug or whatever names you would like to prefix or suffix.

Hope this gives ideas and info for the challenge you might facing.

Happy Learning & Thanks for visit.

What does this actually means: Warning: The signer’s certificate is self-signed. POSIX file permission and/or symlink attributes detected.

If you encounter this warning message on CLI

What does this actually means: Warning: The signer's certificate is self-signed. POSIX file permission and/or symlink attributes detected. These attributes are ignored when signing and are not protected by the signature.

on after your local Android APK build for release version, basically it means, as learned from AI source to understand it real cause of the warning, so no need to worry much, you can continue reading the details for more understandings.

It indicates that the certificate used to sign the file is self-signed, meaning it was generated by the developer rather than being issued by a trusted certificate authority.

Additionally, the warning mentions POSIX file permission and/or symlink attributes. POSIX refers to the Portable Operating System Interface, which defines a standard set of APIs for compatibility between different Unix-like operating systems. The warning suggests that the file permissions and symbolic links present in the file are ignored during the signing process and are not protected by the digital signature.

This warning is informational and does not necessarily indicate an error or problem. Self-signed certificates are commonly used during development or testing stages, but for production or public distribution, it is recommended to use certificates issued by trusted certificate authorities.

If you are encountering this warning while signing an APK file, you can consider obtaining a certificate from a trusted certificate authority to replace the self-signed certificate. This will provide users with more confidence in the authenticity and integrity of the application. However, if you are using a self-signed certificate for personal or internal use, you can generally ignore this warning as long as you trust the source of the file and its contents.

It’s important to note that the warning regarding POSIX file permission and symlink attributes being ignored during signing does not have a significant impact on the functionality of the signed file. The signature primarily ensures the integrity of the file contents and detects any modifications made after signing.

Happy Learning!

YouTube Key Color #FF0000

YouTube was founded by three former PayPal employees: Chad Hurley, Steve Chen, and Jawed Karim. They created the platform in February 2005 and launched it to the public in November 2005. The idea for YouTube came about when the founders had difficulty sharing videos from a dinner party, inspiring them to create a platform where users could easily upload, share, and watch videos online. The website quickly gained traction and popularity, eventually becoming the largest online video-sharing platform in the world.

YOUTUBE

Let
‘EM
VIDEOS

Chad Hurley, Steve Chen, & Jawed Karim

Facebook Key Color #1877F2

Facebook was founded by Mark Zuckerberg, along with his college roommates Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes. Mark Zuckerberg, a Harvard University student at the time, launched Facebook in February 2004 as a social networking website initially limited to Harvard students. It later expanded to other universities, and eventually became available to the general public, gaining widespread popularity and becoming one of the largest social media platforms in the world.

FACEBOOK

Let
‘EM
NETWORKING

Mark Zuckerberg

Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes

Instagram Key Color #833AB4

Instagram was founded by Kevin Systrom and Mike Krieger. They launched the photo-sharing platform in October 2010. Kevin Systrom initially developed the idea for Instagram as a location-based social network called “Burbn” before pivoting to focus on photo-sharing, which eventually led to the creation of Instagram as we know it today.

INSTAGRAM

Let
‘EM
Roll

Kevin Systrom & MIKE KRIEGER

Instagram, Youtube and Facebook brand single color hexcode as main their attribute.

Here you go!

The main brand color hex codes of Instagram, YouTube, and Facebook:

Instagram: #833AB4
YouTube: #FF0000
Facebook: #1877F2

Happy Finding!

Function getStaticPaths, How to create paths in getStaticProps function If you have no access to create paths in getStaticPaths, NEXTJS

Hello,

Hope this is very interesting question of scenario you might be facing to solve with next js and

when you don’t want to use “function getServerSideProps” to pass dynamic (data as) props to the page components
when you don’t want too make a extra API calls to generate the paths for products or whatever list of thing you are creating in “function getStaticPaths”

Here is the quick things we need to work out to work this out of box for specially the scenario were are showing product detail view page which is of route like in Nextjs as “page/product/[id].js“

First in function getStaticPaths() we just need to do this and pass fallback as “true” as we our dynamic path is not pre-rendered!

export async function getStaticPaths() {
    // Empty array since paths will be dynamically created in getStaticProps
    return {
        paths: [],
        fallback: true, // Set to true if there are dynamic paths that are not pre-rendered !! 
    };
};

Next, we need to edit our “getStaticProps” function and then voila;


export async function getStaticProps({ params }) {
    const product = await getProduct(params && params.id);
    if (!product) {
        return {
            redirect: {
                destination: '/',
                permanent: false,
            },
        }
    }

    return {
        props: {
            product,
            error: resp.error ? true : false
        }
    };
}

Boom you are done, and just use those props in your page component like



return (<PhotoProvider
        key={'photoprovider-key-' + product?.id}
        speed={() => 600}
        easing={(type) => (type === 2 ? '' : 'cubic-bezier(.25, 1, .30, 1)')}>

/*...other codes*/
</PhotoProvider>

you will find you page up and working, fine!

Hope this simple steps helps to solve our complex situations arises in the development work of software building on planet earth!

I would also like to the above situation, why we can’t just do the same thing simply with getServerSideProps in single function, I am facing the issue to build using next build && next export for android package, as dynamics cannot be rendered as html files due to getServerSideProps sitting in between, and also as per the Next JS docs we can’t do anything what I have found of my learnings.

Happy Learning! Thanks for reading.

Keep coding & Develop Wonderful.

To Follow help out to know: uidevwork

What is forwardRef and how its helps in react?

Hello, lets quickly take a review on React forwardRef, what it in actual,

In React, the forwardRef function is a utility that allows you to pass a ref through a component to one of its children. It’s commonly used when you need to access the underlying DOM node or React component instance of a child component from the parent component.

When you create a component using functional components in React, you can use the useRef hook to create a ref object. This ref object can then be passed as a prop to child components. However, when you pass the ref as a prop to a child component, React does not automatically pass it down to the underlying DOM element or custom component. This is where forwardRef comes into play.

By using forwardRef, you can create a component that accepts a ref and forwards it to one of its children. Here’s an example:

const ChildComp = React.forwardRef((props, ref) => {
  // Use the ref object to access the underlying DOM node or component instance
  return <input ref={ref} />;
});

const ParentComp = () => {
  const inputRef = React.useRef(null);

  const handleClick = () => {
    // Access the input element using the ref
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

In the example above, the ChildComponent uses forwardRef to forward the ref prop to the <input> element. In the ParentComponent, a ref is created using the useRef hook and passed to ChildComponent using the ref prop. This allows the ParentComponent to access the input element and call the focus method when the button is clicked.

By using forwardRef, helps to bridge the gap between functional components and the imperative DOM or component operations that sometimes require direct access to child component element.

Note here we are accessing child’s component dom node not child component here as ref object, i.e can be consider as subtle difference to understand for our mind.

Hope this helps to clear out the basic concept behind using forwardRef in React.

Happy Learning!

How to fix nextjs appending http://localhost:3000/_next/image? to the image srcset how to remove for production build for images?

Hello,

Welcome to the question and for the search, facing this issue? lets quickly see how we can fix this, with and in next.config.js file.

In Next.js, when using the next/image component, the src attribute is automatically transformed to a URL that goes through the Next.js image optimization pipeline. During development, this URL may include http://localhost:3000/_next/image? to indicate the local development server.

However, for production images, you can configure Next.js to remove the http://localhost:3000/_next/image? prefix. Here’s how you can achieve that:

Create a custom loader for Next.js images:

Open next.config.js and add the following code:
- module.exports = {
- images: {
  - loader: 'imgix',
  - path: '', // Remove the path prefix for production images
- }, };
This configuration sets the loader option to use the imgix loader, which removes the http://localhost:3000/_next/image? prefix. The path option is set to an empty string, this will leave the prefix for image urls and left blank

Now you can easily build your project and test to images are loading fine with absolute url path if applied so.

Hope this help to solve the issue.

Happy Learning!