#Vue JS landing page | Explore Tumblr posts and blogs

holytheoristtastemaker · 5 years ago

Link

React UI Framework (also known as React UI Library or React UI Kit) is a collection of pre-defined and built-in React UI components with a certain design system.

It helps developers to create a React application faster and easier. React UI library is similar but not the same with the React admin templates for Webapp that I discussed before.

They both ease the work of the developer, but they have different scope. A React UI Kit can be used to develop any kind of application, and its customization usually easier.

On the other side, React templates are usually themed for a certain type of application. It can be an admin template, landing page template, or e-commerce template.

When should you use a React UI Framework?

Just because it looks cool to use a React UI framework doesn't mean you have to always use it every time you develop a project.

Using a React UI Library will be best if you're in this condition:

You don't have much time to develop your React project.

There is no fixed design for your app, so you should design your own app but you don't want to spend much time on styling.

You like the design system of a React UI Library and want to adopt it into your app with a little or no customization.

Using a React UI Framework is not recommended if you have a fixed design for your app and you know that you will need a lot of customization. A CSS Framework like Tailwind will be the best for that case.

However, if you still want to use a React UI Framework even when you know there will be some customization, I would suggest that you use its CSS Framework version.

Some of React UI Libraries like Reactstrap and Semantic UI are built based on existing CSS frameworks.

In my experience, customizing a CSS framework is easier than customizing a React UI framework. It's because a CSS framework only affects components based on a class, while components of a React UI framework are predefined as React components with their own props.

What Are the Best React UI Frameworks / Libraries 2020?

There are a lot of React UI libraries out there. But, you only need the best of them to use it on your project.

Here, i collate the best and most popular UI libraries for React.js. Just choose one that suits your project.

1. Material-UI

Material UI is the most popular React UI Framework with a material design style. It provides a lot of React components for faster and easier web development.

You can build your own design system, or start with Material Design.

Material-UI has been widely used by React developers to adopt the Material design to their app. It is the best framework to use if you want to create a Material Design app easily.

In fact, there are some react templates that built on top of this framework such as MaterialPro and Material Admin.

Go to Material-UI site

2. React Bootstrap & Reactstrap

As you might know, Bootstrap is the most popular CSS framework widely used by Front-end developers.

However, Bootstrap is dependent on Jquery. So, if you want to use Bootstrap components in your react project, you should also import jquery and bootstrap js files, which is not a best practice.

React Bootstrap and Reactstrap come to solve this problem. They are 2 different React UI libraries, but they are based on the popular Bootstrap framework.

They adopt every component in the original Bootstrap framework as a React component. So, you don't have to import Jquery and Bootstrap js files to your project.

Choose one of them if you want to use Bootstrap components in your React project!

Go to React Bootstrap site Go to Reactstrap site

3. Ant Design

Ant Design is the world's second most popular React UI framework with a design system for enterprise-level products.

It is an open-source React UI library with 62k+ stars & 23k+ forks on Github that still open for contribution. It has a sleek design, a lot of UI components, and very well documented.

Go to Ant Design site

4. Semantic UI React

Originally, Semantic-UI is a UI framework designed for theming, like Bootstrap. Now, it has integrations with popular javascript frameworks: React, Angular, Meteor, Ember.

Semantic-UI has 50+ UI elements, 3000+ CSS variables and 3 levels of variable inheritance. It also use Em unit for responsive design and flexbox friendly.

When this post was written, Semantic-UI has more than 4.8k stars and 5k forks on Github. So, it quite popular and widely used by Frontend developers.

Go to Semantic UI site

5. React Desktop

As the name suggests, React Desktop is a React UI library that aims to bring native experience to the web, featuring many macOS Sierra and Windows 10 components.

React Desktop is a great choice to create a cross-platform application that work on desktop and web. It also works perfectly NW.js and Electron.js, but can be used in any JavaScript-powered project.

With desktop-like UI kit, you can create a cross-platform react application faster and easier.

Go to React Desktop site

6. Elemental UI

Elemental UI is a React UI kit with high quality and modular set of UI scaffolding components.

It aims to to create a set of functional and unopinionated components that are useful on their own or together, with an unobtrusive default style and flexible theme capabilities.

Currently, Elemental UI has 4.3k+ stars and 240+ forks on Github.

Go to Elemental UI site

7. Atlaskit

Atlaskit is Atlassian's Official UI library that built with Atlassian Design Guidelines. It has very rich UI components that a web application needs.

The best thing about Atlaskit is its modularity. You don't have to import all Atlaskit library to use its component. Just choose a package that very well documented here, and import it to your project.

Go to Atlaskit site

8. Grommet

Grommet is a responsive and mobile-first React UI kit built for Webapps with easy to use components library. It provides accessibility, modularity, responsiveness, and theming in a tidy package.

Grommet can be implemented easily both for a new project and an existing project. You can use the new app starter kit or existing app starter kit to implement Grommet on your project.

Some fine companies like Netflix, Uber, Samsung, Github, etc are using Grommet for their project. So, you don't have to worry about its quality.

Go to Grommet site

9. Carbon Design System

Carbon is an open-source design system for digital products and experiences developed by IBM with its design language.

The Carbon design system aims to improve UI consistency and quality, making the development process more efficient and focused, establishing a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

It is built in React first, but it also supports core parts of the system in vanilla JS, Angular, and Vue.

Go to Carbon design system site

10. PrimeReact

PrimeReact is an open-source React UI library with a collection of 70+ UI components. It developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.

It is a complete UI framework for React that provides various input components, buttons, panel, data view & list, charts, etc.

0 notes

arksstech · 5 years ago

Text

Introducing Alpine.js: A Tiny JavaScript Framework | ArkssTech

Introducing Alpine.js: A Tiny JavaScript Framework Like most developers, I have a bad tendency to over-complicate my workflow, especially if there’s some new hotness on the horizon. Why use CSS when you can use CSS-in-JS? Why use Grunt when you can use Gulp? Why use Gulp when you can use Webpack? Why use a traditional CMS when you can go headless? Every so often though, the new-hotness makes life simpler. Recently, the rise of utility based tools like Tailwind CSS have done this for CSS, and now Alpine.js promises something similar for JavaScript. In this article, we’re going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to build interactive websites. If you regularly build sites that require a sprinkling on Javascript to alter the UI based on some user interaction, then this article is for you. Throughout the article, I refer to Vue.js, but don’t worry if you have no experience of Vue — that is not required. In fact, part of what makes Alpine.js great is that you barely need to know any JavaScript at all. Now, let’s get started. What Is Alpine.js? According to project author Caleb Porzio: “Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.” Let’s unpack that a bit. Let’s consider a basic UI pattern like Tabs. Our ultimate goal is that when a user clicks on a tab, the tab contents displays. If we come from a PHP background, we could easily achieve this server side. But the page refresh on every tab click isn’t very ‘reactive’. To create a better experience over the years, developers have reached for jQuery and/or Bootstrap. In that situation, we create an event listener on the tab, and when a user clicks, the event fires and we tell the browser what to do. See the Pen Showing / hiding with jQuery by Phil on CodePen. See the Pen Showing / hiding with jQuery by Phil on CodePen. That works. But this style of coding where we tell the browser exactly what to do (imperative coding) quickly gets us in a mess. Imagine if we wanted to disable the button after it has been clicked, or wanted to change the background color of the page. We’d quickly get into some serious spaghetti code. Developers have solved this issue by reaching for frameworks like Vue, Angular and React. These frameworks allow us to write cleaner code by utilizing the virtual DOM: a kind of mirror of the UI stored in the browser memory. The result is that when you ‘hide’ a DOM element (like a tab) in one of these frameworks; it doesn’t add a display:none; style attribute, but instead it literally disappears from the ‘real’ DOM. This allows us to write more declarative code that is cleaner and easier to read. But this is at a cost. Typically, the bundle size of these frameworks is large and for those coming from a jQuery background, the learning curve feels incredibly steep. Especially when all you want to do is toggle tabs! And that is where Alpine.js steps in. WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! Like Vue and React, Alpine.js allows us to write declarative code but it uses the “real” DOM; amending the contents and attributes of the same nodes that you and I might edit when we crack open a text editor or dev-tools. As a result, you can lose the filesize, wizardry and cognitive-load of larger framework but retain the declarative programming methodology. And you get this with no bundler, no build process and no script tag. Just load 6kb of Alpine.js and you’re away! Alpine.js JQuery Vue.js React + React DOM Coding style Declarative Imperative Declarative Declarative Requires bundler No No No Yes Filesize (GZipped, minified) 6.4kb 30kb 32kb 5kb + 36kb Dev-Tools No No Yes Yes WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! When Should I Reach For Alpine? For me, Alpine’s strength is in the ease of DOM manipulation. Think of those things you used out of the box with Bootstrap, Alpine.js is great for them. Examples would be: Showing and hiding DOM nodes under certain conditions, Binding user input, Listening for events and altering the UI accordingly, Appending classes. You can also use Alpine.js for templating if your data is available in JSON, but let’s save that for another day. When Should I Look Elsewhere? If you’re fetching data, or need to carry out additional functions like validation or storing data, you should probably look elsewhere. Larger frameworks also come with dev-tools which can be invaluable when building larger UIs. From jQuery To Vue To Alpine Two years ago, Sarah Drasner posted an article on Smashing Magazine, “Replacing jQuery With Vue.js: No Build Step Necessary,” about how Vue could replace jQuery for many projects. That article started me on a journey which led me to use Vue almost every time I build a user interface. Today, we are going to recreate some of her examples with Alpine, which should illustrate its advantages over both jQuery and Vue in certain use cases. Alpine’s syntax is almost entirely lifted from Vue.js. In total, there are 13 directives. We’ll cover most of them in the following examples. Getting Started Like Vue and jQuery, no build process is required. Unlike Vue, Alpine it initializes itself, so there’s no need to create a new instance. Just load Alpine and you’re good to go. The scope of any given component is declared using the x-data directive. This kicks things off and sets some default values if required: ... Capturing User Inputs x-model allow us to keep any input element in sync with the values set using x-data. In the following example, we set the name value to an empty string (within the form tag). Using x-model, we bind this value to the input field. By using x-text, we inject the value into the innerText of the paragraph element. This highlights the key differences with Alpine.js and both jQuery and Vue.js. Updating the paragraph tag in jQuery would require us to listen for specific events (keyup?), explicitly identify the node we wish to update and the changes we wish to make. Alpine’s syntax on the other hand, just specifies what should happen. This is what is meant by declarative programming. Updating the paragraph in Vue while simple, would require a new script tag: new Vue({ el: '#app', data: { name: '' } }); While this might not seem like the end of the world, it highlights the first major gain with Alpine. There is no context-switching. Everything is done right there in the HTML — no need for any additional JavaScript. Click Events, Boolean Attributes And Toggling Classes Like with Vue, : serves as a shorthand for x-bind (which binds attributes) and @ is shorthand for x-on (which indicates that Alpine should listen for events). In the following example, we instantiate a new component using x-data, and set the default value of show to be false. When the button is clicked, we toggle the value of show. When this value is true, we instruct Alpine to append the aria-expanded attribute. x-bind works differently for classes: we pass in object where the key is the class-name (active in our case) and the value is a boolean expression (show). WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! Hiding And Showing The syntax showing and hiding is almost identical to Vue. This will set a given DOM node to display:none. If you need to remove a DOM element completely, x-if can be used. However, because Alpine.js doesn’t use the Virtual DOM, x-if can only be used on a (tag that wraps the element you wish to hide). Magic Properties In addition to the above directives, three Magic Properties provide some additional functionality. All of these will be familiar to anyone working in Vue.js. $el fetches the root component (the thing with the x-data attribute); $refs allows you to grab a DOM element; $nextTick ensures expressions are only executed once Alpine has done its thing; $event can be used to capture a nature browser event. Let’s Build Something Useful It’s time to build something for the real world. In the interests of brevity I’m going to use Bootstrap for styles, but use Alpine.js for all the JavaScript. The page we’re building is a simple landing page with a contact form displayed inside a modal that submits to some form handler and displays a nice success message. Just the sort of thing a client might ask for and expect pronto!

Initial view (Large preview)

Modal open (Large preview)

Success message (Large preview) Note: You can view the original markup here. WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! To make this work, we could add jQuery and Bootstrap.js, but that is quite a bit of overhead for not a lot of functionality. We could probably write it in Vanilla JS, but who wants to do that? Let’s make it work with Alpine.js instead. First, let’s set a scope and some initial values: Now, let’s make our button set the showModal value to true: Get in touch When showModal is true, we need to display the modal and add some classes: Let’s bind the input values to Alpine: And disable the ‘Submit’ button, until those values are set: Submit Finally, let’s send data to some kind of asynchronous function, and hide the modal when we’re done: Submit And that’s about it! Just Enough JavaScript When building websites, I’m increasingly trying to ask myself what would be “just enough JavaScript”? When building a sophisticated web application, that might well be React. But when building a marketing site, or something similar, Alpine.js feels like enough. (And even if it’s not, given the similar syntax, switching to Vue.js takes no time at all). It’s incredibly easy to use (especially if you’ve never used VueJS). It’s tiny ( There are more advanced features that aren’t included in this article and Caleb is constantly adding new features. If you want to find out more, take a look at the official docs on Github. WANT TO BUILD YOUR BUSINESS APP IN LARAVEL FRAMEWORK? ARKSSTECH, AGILE SOFTWARE DEVELOPMENT COMPANY OFFERS EXPERIENCED LARAVEL APP DEVELOPERS & TO HIRE LARAVEL DEVELOPERS FOR STARTUPS AND SMES. RENT A CODER TODAY!! Read the full article

#bestbrowsersforwebdesign #designsystems #webdesignbrowsers #webdesigncomponents #webdesigntools #webdesignworkflow

0 notes

solaceinfotechpvtltd · 6 years ago

Text

Effective Considerations to choose the technology for Web Application

https://solaceinfotech.com/blog/considerations-to-choose-the-technology-for-web-application/https://solaceinfotech.com/blog/considerations-to-choose-the-technology-for-web-application/

With last 2 decades, many technologies and platforms grow a head in the market. Also the development trends are reaching to the sky with its functionalities. What is the most important thing to consider when developing web applications? Choosing the best technology from the bucket of vast technologies is a crucial task. The choice of a technology is challenging for small businesses and startups, because they have a limited budget. And so the necessity of technology that provides the most bang for the bug to get their projects off the ground.

The right choice of technology is a key to project’s success, whereas the wrong choice of technology can be the reason of failure. So, here we are going to help you to decide the appropriate technology for your web application.

What is a technology for web app development?

Before proceeding to the criteria for choosing the web technology, just clear what contains the process of web development? There are two main sides of web development: Client-side and Server side. Client-side can be known as front-end. Server side includes functional programming, database and the server itself.

Client-side Programming-

Programming at client-side involves appearance of a web app that users see on their screens. This is also called as Front-end. Below are some of the major front-end technologies-

Cascading Style Sheets(CSS) and Hypertext Markup Language(HTML). HTML focuses on how to display the contents of a web page, while CSS styles that content. Bootstrap is another technology that helps framework for managing HTML and CSS.

JavaScript (JS) makes web pages interactive. JavaScript has many libraries for eg., jQuery, React.js, and Zepto.js and frameworks for eg., Angular, Vue, Backbone, and Ember for fast and easy web development. There are many JavaScript frameworks available for effective development.

Server-side programming-

Server side is not visible to users but it helps client-side to function as required. The main challenging task is to choose the server-side technology. Server-side programming are used to create the logic of websites and applications. Frameworks for programming languages offer lots of tools for simpler and faster coding. Here are some popular programming languages with their frameworks-

PHP (Laravel)

Java (Spring)

Ruby (Ruby on Rails)

Scala (Play)

Python (Django, Flask, Pylons)

How not to choose web technology?

1. Don’t Choose according to Personal Preferences-

It is good to rely on your personal choices when choosing a technology for a web application. But there is a problem- This methodology functions admirably just for individuals with a strong foundation in web advancement.

If you have a lot of experience in web development or you are a chief technology officer, your choice may be correct. But if you don’t have enough knowledge of the web development process, this paradigm may lead to down. Because you have chosen the wrong technology.

2. Don’t choose according to the previous projects-

Regardless of how effective your past projects are, you satisfied them before. The same technology you used before may be out-dated now. In addition, your projects are not the same , hence the technology on project may not be appropriate for another.

3. Don’t choose according to the competitors’ Experiences-

Gaining from the experience of your rivals might be the correct technique, but not for choosing the technology. Keep in mind that your project is unique and the goal is to beat your opponent companies. If you failed to choose the right technology, you’re likely to face the challenges in the future which is more costly.

Criteria for choosing the technology-

1. If your requirements are focusing towards product transaction or anything which is market oriented then it is pointing to E- Commerce project.

2. The requirements are focusing on content, then it is reflecting the importance of content delivery.

3. If you have a lot of search system requirement be it in any domain, at that point the web search tool related application should spring up.

4. Types of Web applications–

Important thing to choose is the type of web application you’re going to develop. A technology is a toolset to create a web app. So the decision should be appropriate. According to complexity, web projects can be divided into three types:

Simple- These web applications are created with the help of out-of-the-box solutions. For eg., Landing pages, simple online stores.

Mid-level- These type of apps have more functionalities as compared to the simple apps. These web applications are build with the help of frameworks. Eg., apps for large e-commerce stores.

Complex- Such type of web apps have lots of functions and integrations. They are developed with different web technologies and may have some programming languages. For eg., Social networks

5. Time to Market-

It is an important factor for choosing the technology for startups and for small businesses. The faster you develop and deploy applications, the more ahead of contenders you’ll be. Time to market is depend on technology you select.

Issues you should consider when choosing a technology-1. Out-of-the-box solutions-

Look out whether a technology has some out-of-box solutions for adding necessary functions to web apps.

2. Integration with third-party solutions-

Ensure that the technology you choose supports integration with third party solutions. Because it helps you to add functionalities as per your need.

Read more at- https://solaceinfotech.com/blog/considerations-to-choose-the-technology-for-web-application/

#web apps #web apps development #web applications #applications #development #technology #tech #programming #coding

0 notes

suzanneshannon · 6 years ago

Text

How I Created a Code Beautifier in Two Days

I recently drew up a wireframe for a code beautifier. The next day, I decided to turn it into a real tool. The whole project took less than two days to complete.

I'd been thinking about building a new code beautifier for a while. The idea isn't unique, but every time I use someone else's tool, I find myself reapplying the same settings and dodging advertisements every single time. 🤦🏻‍

I wanted a simple tool that worked well without the hassle, so last week I grabbed some paper and started sketching one out. I'm a huge fan of wireframing by hand. There's just something about pencil and paper that makes the design part of my brain work better than staring at a screen.

I kicked off the design process by hand-drawing wireframes for the app.

I was immediately inspired after drawing the wireframe. The next day, I took a break from my usual routine to turn it into a something real. 👨🏻‍💻

Check it Out

The design

I knew I wanted the code editor to be the main focus of the tool, so I created a thin menu bar at the top that controls the mode (i.e. HTML, CSS, JavaScript) and settings. I eventually added an About button too.

The editor itself takes up most of the screen, but it blends in so you don't really notice it. Instead of wasting space with instructions, I used a placeholder that disappears when you start typing.

The Dark Mode UI is based on a toggle that updates the styles.

At the bottom, I created a status bar that shows live stats about the code including the current mode, indentation settings, number of lines, number of characters, and document size in bytes. The right side of the status bar has a "Clear" and "Clean + Copy" button. The center has a logo shamelessly plugging my own service.

I don't think many developers really code on phones, but I wanted this to work on mobile devices anyway. Aside from the usual responsive techniques, I had to watch the window size and adjust the tab position when the screen becomes too narrow.

I'm using flexbox and viewport units for vertical sizing. This was actually pretty easy to do with the exception of a little iOS quirk. Here’s a pen showing the basic wireframe. Notice how the textarea stretches to fill the unused space between the header and footer.

See the Pen Full-page text editor with header + footer by Cory LaViska (@claviska) on CodePen.

If you look at the JavaScript tab, you’ll see the iOS quirk and the workaround. I’m not sure how to feature detect something like this, so for now it’s just a simple device check.

Handling settings

I wanted to keep the most commonly used settings easy to access, but also expose advanced settings for each mode. To do this, I made the settings button a popover with a link to more advanced settings inside. When a setting is changed, the UI updates immediately and the settings are persisted to localStorage.

The most common settings are contained in a small panel that provides quick access to them, while advanced settings are still accessible via a link in the panel.

I took advantage of Vue.js here. Each setting gets mapped to a data property, and when one of them changes, the UI updates (if required) and I call saveSettings(). It works something like this.

function saveSettings() { const settings = {}; // settingsToStore is an array of property names that will be persisted // and "this" is referencing the current Vue model settingsToStore.map(key => settings[key] = this[key]); localStorage.setItem('settings', JSON.stringify(settings); }

Every setting is a data property that gets synced to localStorage. This is a rather primitive way to store state, so I might update the app to use a state management library such as Vuex later on.

To restore settings, I have a restoreSettings() function that runs when the app starts up.

The function fetches settings from localStorage, then applies them one by one ensuring only valid settings in settingsToStore get imported.

The Advanced Settings link opens a dialog with tabs for each mode. Despite having over 30 settings total, everything is organized and easy to access so users won't feel overwhelmed.

Clicking the "Advanced Settings" link opens up language-specific preferences and shortcuts.

Applying themes

Dark mode is all the rage these days, so it's enabled by default. There's also a light theme for those who prefer it. The entire UI changes, except for popovers and dialogs.

I considered using prefers-color-scheme, which coincidentally landed in Firefox 67 recently, but I decided a toggle would probably be better. Browser support for the color theme preference query isn't that great yet, plus developers are weird. (For example, I use macOS with the light theme, but my text editor is dark.)

The app with Light Mode UI enabled.

Defining features

Coming up with feature ideas is fairly easy. It’s limiting features for an initial release that’s hard. Here are the most relevant features I shipped right away:

Beautifies HTML, CSS, and JavaScript code

Syntax highlighting with tag/bracket matching

Paste or drop files to load code

Auto-detects indentation preference based on pasted code or dropped file

Light and dark themes

Clean and copy in one click

Keyboard shortcuts

Most JS Beautify options are configurable

Settings get stored indefinitely in localStorage

Minimal UI without ads (just an unobtrusive plug to my own service) 🙈

I also threw in a few easter eggs for fun. Try refreshing the page, exploring shortcuts, and sharing it on Facebook or Twitter to find them. 😉

The tools and libraries I used

I'm a big fan of Vue.js. It's probably overkill for this project, but the Vue CLI let me start building with all the latest tooling via one simple command.

vue create beautify-code

I didn't have to waste any time scaffolding, which helped me build this out quickly. Plus, Vue came in handy for things like live stats, changing themes, toggling settings, etc. I used various Element UI components for things like buttons, form elements, popovers, and dialogs.

The editor is powered by CodeMirror using custom styles. It’s a well-supported and fantastic project that I can’t recommend enough for in-browser code editing.

The library that does all the beautifying is called JS Beautify, which handles JavaScript, HTML, and CSS. JS Beautify runs on the client-side, so there’s really no backend to this app — your browser does all the work!

JS Beautify is incredibly easy to use. Install it with npm install js-beautify and run your code through the appropriate function.

import beautify from 'js-beautify'; const code = 'Your code here'; const settings = { // Your settings here }; // HTML const html = beautify.html(code, settings) // CSS const css = beautify.css(code, settings) // JavaScript const js = beautify.js(code, settings)

Each function returns a string containing the beautified code. You can change how each language is output by passing in your own settings.

I’ve been asked a few times about Prettier, which is a comparable tool, so it’s worth mentioning that I chose JS Beautify because it’s less opinionated and more configurable. If there’s enough demand, I’ll consider adding an option to toggle between JS Beautify and Prettier.

I've used all of these libraries before, so integration was actually pretty easy. 😅

This project was made possible by my app, Surreal CMS. If you’re looking for a great CMS for static websites, check it out — it’s free for personal, educational, and non-profit websites!

Oh, and if you’re wondering what editor I used... it’s Visual Studio Code. 👨🏻‍💻

The post How I Created a Code Beautifier in Two Days appeared first on CSS-Tricks.

How I Created a Code Beautifier in Two Days published first on https://deskbysnafu.tumblr.com/

0 notes

kgcodes · 6 years ago

Photo

Major coding goals this week: . 1. Create landing/home pages for the Set Up Shopz website using Vue JS . 2. Handle any app review issues with the Foams App created with Xamarin (hopefully none) . 3. Planning a new app for Wave Link . We need next new app ideas! (passive income only) What y’all got? https://ift.tt/2LTMjSH

#Digital Creator #Music Producer #App Developer #Instagram

0 notes

bobecardinal · 5 years ago

Text

Nonid - Vue Nuxt SEO and Software Landing Page Template

Nonid – Vue Nuxt SEO and Software Landing Page Template

Live Preview Buy Now Screenshots

Author: LayerdropsPrice: $14

Nonid is a multi-concept SEO, Sofware, SaaS, Mobile app, Startup & Marketing landing page Vue Nuxt Template. It is build with Vue Js, Nuxt Js. Template is very easy to customize and fully responsive. It is best for your mobile app landing pages or businesses

Note:

This is a Vue Nuxt Js Template. It will not work with the…

View On WordPress

0 notes

laravelvuejs · 4 years ago

Text

Malex - Business Consulting Agency Vue JS Template

Malex – Business Consulting Agency Vue JS Template

Malex is a fully-featured responsive Bootstrap based on Vue JS framework business consulting agency template. It is easy to use this design. You can adapt it to any activity. There is a lot of space for the information and a design is a great decision if you want to present your activity on the internet in a modern way. This item is based on the Vue JS framework, so it is fully adaptable for any…

View On WordPress

#advisor #company #consultant #corporate #creative #finance #financial #landing page #marketing #modern #one page #professional #services #vue js #vuejs

1 note · View note

riichardwilson · 5 years ago

Text

Introducing Alpine.js: A Tiny JavaScript Framework

About The Author

Phil Smith is a freelance developer based in Brighton, UK. His agency, amillionmonkeys partner with designers, entrepreneurs and agencies to build websites and … More about Phil …

Ever built a website and reached for jQuery, Bootstrap, Vue.js or React to acheive some basic user interaction? Alpine.js is a fraction of the size of these frameworks because it involves no build steps and provides all of the tools you need to build a basic user interface.

Like most developers, I have a bad tendency to over-complicate my workflow, especially if there’s some new hotness on the horizon. Why use CSS when you can use CSS-in-JS? Why use Grunt when you can use Gulp? Why use Gulp when you can use Webpack? Why use a traditional CMS when you can go headless? Every so often though, the new-hotness makes life simpler.

Recently, the rise of utility based tools like Tailwind CSS have done this for CSS, and now Alpine.js promises something similar for JavaScript.

In this article, we’re going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to build interactive websites. If you regularly build sites that require a sprinkling on Javascript to alter the UI based on some user interaction, then this article is for you.

Throughout the article, I refer to Vue.js, but don’t worry if you have no experience of Vue — that is not required. In fact, part of what makes Alpine.js great is that you barely need to know any JavaScript at all.

Now, let’s get started.

What Is Alpine.js?

According to project author Caleb Porzio:

“Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.”

Let’s unpack that a bit.

Let’s consider a basic UI pattern like Tabs. Our ultimate goal is that when a user clicks on a tab, the tab contents displays. If we come from a PHP background, we could easily achieve this server side. But the page refresh on every tab click isn’t very ‘reactive’.

To create a better experience over the years, developers have reached for jQuery and/or Bootstrap. In that situation, we create an event listener on the tab, and when a user clicks, the event fires and we tell the browser what to do.

See the Pen Showing / hiding with jQuery by Phil on CodePen.

That works. But this style of coding where we tell the browser exactly what to do (imperative coding) quickly gets us in a mess. Imagine if we wanted to disable the button after it has been clicked, or wanted to change the background color of the page. We’d quickly get into some serious spaghetti code.

Developers have solved this issue by reaching for frameworks like Vue, Angular and React. These frameworks allow us to write cleaner code by utilizing the virtual DOM: a kind of mirror of the UI stored in the browser memory. The result is that when you ‘hide’ a DOM element (like a tab) in one of these frameworks; it doesn’t add a display:none; style attribute, but instead it literally disappears from the ‘real’ DOM.

This allows us to write more declarative code that is cleaner and easier to read. But this is at a cost. Typically, the bundle size of these frameworks is large and for those coming from a jQuery background, the learning curve feels incredibly steep. Especially when all you want to do is toggle tabs! And that is where Alpine.js steps in.

Like Vue and React, Alpine.js allows us to write declarative code but it uses the “real” DOM; amending the contents and attributes of the same nodes that you and I might edit when we crack open a text editor or dev-tools. As a result, you can lose the filesize, wizardry and cognitive-load of larger framework but retain the declarative programming methodology. And you get this with no bundler, no build process and no script tag. Just load 6kb of Alpine.js and you’re away!

Alpine.js JQuery Vue.js React + React DOM Coding style Declarative Imperative Declarative Declarative Requires bundler No No No Yes Filesize (GZipped, minified) 6.4kb 30kb 32kb 5kb + 36kb Dev-Tools No No Yes Yes

When Should I Reach For Alpine?

For me, Alpine’s strength is in the ease of DOM manipulation. Think of those things you used out of the box with Bootstrap, Alpine.js is great for them. Examples would be:

Showing and hiding DOM nodes under certain conditions,

Binding user input,

Listening for events and altering the UI accordingly,

Appending classes.

You can also use Alpine.js for templating if your data is available in JSON, but let’s save that for another day.

When Should I Look Elsewhere?

If you’re fetching data, or need to carry out additional functions like validation or storing data, you should probably look elsewhere. Larger frameworks also come with dev-tools which can be invaluable when building larger UIs.

From jQuery To Vue To Alpine

Two years ago, Sarah Drasner posted an article on Smashing Magazine, “Replacing jQuery With Vue.js: No Build Step Necessary,” about how Vue could replace jQuery for many projects. That article started me on a journey which led me to use Vue almost every time I build a user interface. Today, we are going to recreate some of her examples with Alpine, which should illustrate its advantages over both jQuery and Vue in certain use cases.

Alpine’s syntax is almost entirely lifted from Vue.js. In total, there are 13 directives. We’ll cover most of them in the following examples.

Getting Started

Like Vue and jQuery, no build process is required. Unlike Vue, Alpine it initializes itself, so there’s no need to create a new instance. Just load Alpine and you’re good to go.

The scope of any given component is declared using the x-data directive. This kicks things off and sets some default values if required:

Capturing User Inputs

x-model allow us to keep any input element in sync with the values set using x-data. In the following example, we set the name value to an empty string (within the form tag). Using x-model, we bind this value to the input field. By using x-text, we inject the value into the innerText of the paragraph element.

See the Pen Capturing user input with Alpine.js by Phil on CodePen.

This highlights the key differences with Alpine.js and both jQuery and Vue.js.

Updating the paragraph tag in jQuery would require us to listen for specific events (keyup?), explicitly identify the node we wish to update and the changes we wish to make. Alpine’s syntax on the other hand, just specifies what should happen. This is what is meant by declarative programming.

Updating the paragraph in Vue while simple, would require a new script tag:

new Vue({ el: '#app', data: { name: '' } });

While this might not seem like the end of the world, it highlights the first major gain with Alpine. There is no context-switching. Everything is done right there in the HTML — no need for any additional JavaScript.

Click Events, Boolean Attributes And Toggling Classes

Like with Vue, : serves as a shorthand for x-bind (which binds attributes) and @ is shorthand for x-on (which indicates that Alpine should listen for events).

In the following example, we instantiate a new component using x-data, and set the default value of show to be false. When the button is clicked, we toggle the value of show. When this value is true, we instruct Alpine to append the aria-expanded attribute.

x-bind works differently for classes: we pass in object where the key is the class-name (active in our case) and the value is a boolean expression (show).

See the Pen Click Events, Boolean Attributes and Toggling Classes with Alpine.js by Phil on CodePen.

Hiding And Showing

The syntax showing and hiding is almost identical to Vue.

See the Pen Showing / hiding with Alpine.js by Phil on CodePen.

This will set a given DOM node to display:none. If you need to remove a DOM element completely, x-if can be used. However, because Alpine.js doesn’t use the Virtual DOM, x-if can only be used on a <template></template> (tag that wraps the element you wish to hide).

Magic Properties

In addition to the above directives, three Magic Properties provide some additional functionality. All of these will be familiar to anyone working in Vue.js.

$el fetches the root component (the thing with the x-data attribute);

$refs allows you to grab a DOM element;

$nextTick ensures expressions are only executed once Alpine has done its thing;

$event can be used to capture a nature browser event.

See the Pen Magic Properties by Phil on CodePen.

Let’s Build Something Useful

It’s time to build something for the real world. In the interests of brevity I’m going to use Bootstrap for styles, but use Alpine.js for all the JavaScript. The page we’re building is a simple landing page with a contact form displayed inside a modal that submits to some form handler and displays a nice success message. Just the sort of thing a client might ask for and expect pronto!

Initial view (Large preview)

Modal open (Large preview)

Success message (Large preview)

Note: You can view the original markup here.

To make this work, we could add jQuery and Bootstrap.js, but that is quite a bit of overhead for not a lot of functionality. We could probably write it in Vanilla JS, but who wants to do that? Let’s make it work with Alpine.js instead.

First, let’s set a scope and some initial values:

Now, let’s make our button set the showModal value to true:

<button class="btn btn-lg btn-secondary" @click="showModal = true" >Get in touch</button>

When showModal is true, we need to display the modal and add some classes:

Let’s bind the input values to Alpine:

And disable the ‘Submit’ button, until those values are set:

<button type="button" class="btn btn-primary" :disabled="!name || !email">Submit</button>

Finally, let’s send data to some kind of asynchronous function, and hide the modal when we’re done:

<button type="button" class="btn btn-primary" :disabled="!name || !email" @click="submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})">Submit</button>

And that’s about it!

See the Pen Something useful built with Alpine.js by Phil on CodePen.

Just Enough JavaScript

When building websites, I’m increasingly trying to ask myself what would be “just enough JavaScript”? When building a sophisticated web application, that might well be React. But when building a marketing agency site, or something similar, Alpine.js feels like enough. (And even if it’s not, given the similar syntax, switching to Vue.js takes no time at all).

It’s incredibly easy to use (especially if you’ve never used VueJS). It’s tiny (< 6kb gzipped). And it means no more context switching between HTML and JavaScript files.

There are more advanced features that aren’t included in this article and Caleb is constantly adding new features. If you want to find out more, take a look at the official docs on Github.

(ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/introducing-alpine-js-a-tiny-javascript-framework/ source https://scpie.tumblr.com/post/611788754623086592

0 notes

t-baba · 5 years ago

Photo

What's new in Chrome and Firefox for devs, plus what's on the horizon for Safari

#447 — July 1, 2020

Web Version

Frontend Focus

▶ Google's web.dev LIVE Event is On Now — It started yesterday but Google is running a three day (June 30-July 2) online event focused on the Web development community covering new tooling and techniques. If you want to watch the talks from yesterday, they’re all here.

web.dev

When Sass and New CSS Features Collide — CSS has added plenty of cool new features (such as custom properties) of late, but they don’t come without their own problems. Here, Ana Tudor explains why she still finds preprocessors, like Sass, necessary.

CSS Tricks

Easily Create and Embed Data Visualizations with Logi Composer — Logi Composer is the first out-of-the-box development experience for embedded analytics. Watch this webinar to learn how you can easily create, customize, and embed data visualizations, and maintain complete control over the end-user experience.

Logi Analytics sponsor

What's New In DevTools in Chrome 85 — Style editing for CSS-in-JS frameworks, Lighthouse 6.0, support for new JavaScript features, and more.

Jecelyn Yeen (Google Developers)

▶ What's New for Web Developers in Safari & WebKit — A 40-minute video looking at the latest features and improvements announced at WWDC for Safari and WebKit, including updated web APIs, CSS and media features, JavaScript syntax, and more. This video looking at changes to the Safari Web Inspector is also worth a look.

Jon Davis (Apple)

New in Firefox 78: DevTools Improvements and Abundant Web Platform Updates — Version 78 landed yesterday, bringing with it a new regex engine, updates to the ECMAScript Intl API, new CSS selectors, enhanced support for WebAssembly, and many improvements to the dev tools. These are the highlights, but if you want to dig into the full list of developer-facing changes, that’s here.

Florian Scholz, Harald Kirschner (Mozilla)

⚡️ Quick bits:

Last week we linked to a report on how Safari may start blocking Google Analytics, turns out that isn't quite right, as Simo Ahava explains.

Related to the above item, here's Apple's own explainer on how tracking prevention tech works in WebKit.

Chrome will be enforcing a 398-day validity period for TLS certificates issued after September 1.

Apple declined to implement 16 Web APIs in Safari due to privacy concerns.

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery — Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

ℹ️ Interested in running a job listing in Frontend Focus? There's more info here.

📙 News, Tutorials & Opinion

Improving HTTP with Structured Header Fields — Highlights the benefits of the new Structured Fields library — a collection of well-defined data types designed to help assure interoperability, remove some HTTP header headaches, and introduce some network level performance gains.

Mark Nottingham

▶ What Is CUBE CSS? (Smashing Podcast Episode 19) — Drew McLellan talks to Andy Bell, the creator of CUBE CSS, to find out how this CSS methodology differs from BEM, SMACSS, and OOCSS.

Smashing Magazine podcast

Using the Chrome UX Report API — Learn how to use the recently released Chrome UX Report API to get easy, RESTful access to real-user experience data across millions of websites (and compare your Core Web Vitals measurements).

Rick Viscomi and Shane Exterkamp

A Lightning-Speed Overview of Svelte — A quick way to learn the core parts of JavaScript framework Svelte.

Per Harald Borgen

How to Dynamically Get All CSS Custom Properties on a Page — Some fun DOM and stylesheet wrangling on display here.

Tyler Gaw

Are You Using SVG Favicons Yet? A Guide for Modern Browsers

Antoine Boulanger

Styling Layout Wrappers In CSS

Ahmad Shadeed

🔧 Code, Tools and Resources

emoji-picker-element: A Lightweight Emoji Picker for the Modern Web — See a live demo here. Some cool performance advantages for this: It’s a web component and it’s built on Svelte and IndexedDB.

Nolan Lawson

Bootstrap Icons Alpha 5 — The fifth and final alpha release of Bootstrap Icons, featuring 300 new glyphs (taking the total past 1,000 icons).

Mark Otto, Jacob Thornton, and Bootstrap contributors

Tragopan: A Minimal Dependency-Free Pan/Zoom Library — Try it out here. Claims to work faster due to use of native browser scrolling for panning (left/right/up/down) and transform/scale for zooming.

team.video

Stitches: An Atomic CSS-in-JS Library — Another option in the CSS-in-JS world that includes abstractions for React, Vue, and Tailwind UI.

Christian Alfoni

Checkboxland: Render 'Anything' as HTML Checkboxes — This frivolous experiment is equal parts terrifying and impressive. It’s a JS library that displays animations, text, and arbitrary data using nothing but HTML checkboxes and, to be fair, they’ve presented it really well!

Bryan Braun

How to Target Email Clients — A crowdsourced list of email development techniques for singling out email clients and platforms.

Dylan Smith

by via Frontend Focus https://ift.tt/3gf6eaF

#HTML5 Branding #HTML5 Weekly

0 notes