Charles Cooper

Charles Cooper

1602123894

How to Use Tailwind CSS in Vue and React

In this article, we’ll look at how to use Tailwind CSS in Vue and React, we’ll also learn how to conditional tree-shake our CSS styles.

Performance on the web is a pretty big deal nowadays as it can make or mar your product. It has moved from being something to be worked on after a product launches to being a very important part to be considered in any development process as web performance is a huge part of user experience(UX).

  • According to this study, The average online user expects your pages to load in 4 seconds or less and 40% are more likely to abandon your site after three seconds
  • This blog post shows how optimizing Pinterest’s website for performance saw a 15% increase in SEO traffic and a 15% increase in conversion rate to signup

What is a bundle size?

To understand what a bundle size means, we have to understand what bundling is.

Bundling is the process of a bundler(like webpack, parcel, or snowpack) to combine different groups of assets such as HTML, CSS, JavaScript, and images to produce a smaller file known as a bundle. Bundling is necessary to reduce the number of HTTP requests the browser has to make to serve content to users.

Bundle size is the size of any generated bundle and it affects how long it takes for our websites and web apps to load.

In this article, we’ll be exploring how to reduce our Tailwind CSS powered app bundle size by tree-shaking Tailwind CSS, we will also learn how to use PurgeCSS with Tailwind in production, we will explore how to do that in JavaScript frameworks such as Vue and React.

What is Tailwind CSS?

It’s a utility-first CSS library used to build custom designs, it offers no pre-configured styles and components to build with, rather it offers you a set of unopinionated building blocks known as utility/helper classes to help you style your components.

According to its official documentation:

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

What is PurgeCSS?

PurgeCSS is a development workflow tool for removing unused CSS in a project, it is the default library for controlling Tailwind CSS bundle sizes. It tree-shakes unused styles and optimizes CSS build sizes.

According to its official documentation:

PurgeCSS analyzes your content and your CSS files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your CSS, resulting in smaller CSS files.

Prerequisites

This tutorial assumes the reader has the following:

You can install Vue CLI with the following command using Yarn:

yarn global add @vue/cli

Verify the installation was successful by running vue in your terminal. You should see a list of the available commands.

#react #vue #javascript #tailwindcss #web-development

What is GEEK

Buddha Community

How to Use Tailwind CSS in Vue and React
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Beth  Nabimanya

Beth Nabimanya

1626409934

5 Reasons to Use Tailwind CSS with React Native

Tailwind CSS is an open-source utility-first CSS framework. It redefines the way you style applications by providing a variety of CSS classes.

Using Tailwind CSS, you can style your applications without a single custom class name or a stylesheet.

Furthermore, I found that it works exceptionally well with mobile applications based on React Native.

So, in this article, I’m going to discuss why Tailwind CSS is the best solution for React Native applications.

  • 1. Customized Packages for Better Integration
  • 2. Small Bundle Size in Production
  • 3. Improves Maintainability
  • 4. Consistent UI and Customizability
  • 5. Can Easily Keep the Application Up-to-Date

#react #tailwind-css #react-native #css #javascript

Elvis Miranda

Elvis Miranda

1578029098

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.

1. Tailwindcss-Vue

Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.

Tailwindcss-Vue

Download: https://github.com/advanced-data-machines/tailwindcss-vue/archive/master.zip

2. @zeit-ui/vue

Vue implementation for Zeit Style, originating from Zeit Design.

@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.

The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.

zeit-ui/vue

Download: https://github.com/zeit-ui/vue/archive/master.zip

3. CSSeffectsSnippets

Click on the animation to copy it to your clipboard

CSSeffectsSnippets

Demo: https://emilkowalski.github.io/css-effects-snippets/

Download: https://github.com/emilkowalski/css-effects-snippets/archive/master.zip

4. Vue Cirrus

A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.

Vue Cirrus

Demo: https://florianwoelki.github.io/vue-cirrus/#/

Download: https://github.com/FlorianWoelki/vue-cirrus/archive/master.zip

5. Vue CSS Modules

Seamless mapping of class names to CSS modules inside of Vue components.

Vue CSS Modules

Download: https://github.com/fjc0k/vue-css-modules/archive/master.zip

6. BG MixMaster 90 — CSS Background Grid /Pattern Generator

make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.

BG MixMaster 90

Download: https://codepen.io/jasesmith/pen/YZEYRL

7. CSSOBJ

CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.

CSS in JS solution, create CSSOM and CSS rules from js, features:

  • CSS Rules create and diff
  • CSS modules with local class
  • Auto vendor prefixer
  • Media query for old browsers
  • Dynamically change CSS

CSSOBJ

Demo: https://cssobj.github.io/cssobj-demo/

Download: https://github.com/cssobj/cssobj/archive/master.zip

#css #vue-css #css-component #vue-css-component #vue-js

Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Erna  Herzog

Erna Herzog

1626748440

Build a React Accordion from Scratch Using React Hooks and No Extra Dependencies

Follow these step-by-step instructions to create an animated accordion component in React.js using React Hooks and CSS.

🗂 DOWNLOADS 🗂

https://gum.co/AEeem

🔗 HELPFUL RESOURCES 🔗

React DOM Elements: https://reactjs.org/docs/dom-elements.html

Overview of dangerouslySetInnerHTML: https://react-cn.github.io/react/tips/dangerously-set-inner-html.html

How to prevent XSS attacks when using dangerouslySetInnerHTML in React: https://dev.to/jam3/how-to-prevent-xss-attacks-when-using-dangerouslysetinnerhtml-in-react-1464

Hooks API Reference: https://reactjs.org/docs/hooks-reference.html

Visual Studio Code: https://code.visualstudio.com/

#react #react hooks #react accordion #css #react.js