Little URL

A goto web app to help you minify your long website links 🔗.

Little URL is built with vue, and lots love ❤️ :sparkling*heart:, and deployed on netlify. It is practically my first app built with more intension to accessibilty support. This is achieved by following both WCAG and WAI-ARIA criteria and guidelines to make Web content and Web applications more accessible to people with disabilities.

Because of our believe in being progressive, this is considered a work in progress 🚧. But, feel free to explore 🪐 Little URL, thank you friend.

Table of contents

• Project Title

• Table of contents

• Getting started

• Prerequisites

• Project setup

  • Install all packages, plugins and dependencies
  • Compiles and hot-reloads for development
  • Compiles and minifies for production
  • Run your unit tests
  • Lints and fixes files
  • Customize configuration
  • How to use / About the App

• Built with

• Things tagged unnecessary

• Things avoided

• Things not consider / ignored

• Things with issues unresolved

• Authors

• License

• Contributing

• Acknowledgments

(Back to top)

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

(Back to top)

Prerequisites

The things you will need in order to use the app and how to install them

• Before you begin, ensure you have the latest node installed on your computer - Node.js 14.16.1 was used for this

Check with:

# ensure Node.js is >= 14.16.1
vue --version

• Also ensure you have the latest vue cli installed - Vue CLI 3.O was used for this

Check with:

# ensure Vue CLI is >= 3.0
vue --version

(Back to top)

Project setup

This will walk you through how to setup the app on your local computer and/or machine.

Install all packages, plugins and dependencies

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

How to use / About the App

The app has two input medium with a button each and a button to reveal and hide instruction / guide.

1. To shorten a link (URL), paste or type the URL in first input area and click the button beside it that reads "Shorten URL".

   A shortened URL will be generated and automatically appears in the second input.

2. Click the "Copy URL" button beside the second input area to copy the generated link or manaully copy using your mouse.

   To view instructions, kindly selected the "View Instructions" button to view the instructions as earlier described.

(Back to top)

Built with

• Vue 2 - The progressive javascript framework. Its CDN was used.

• Font Awesome - The web's most popular and next generation of our icon library + toolkit for vector icons and social logos on your website.

• Google Fonts - A leading host of open-source fonts for use on the web, making the web more beautiful, fast, and open through great typography.

• Clipboard - A light weight 3kb gzipped package that requires no flash nor framework to copy text to clipboard. Its CDN was used.

• Axios - Promise based HTTP client for the browser and node.js. Its CDN was used.

(Back to top)

Things tagged unnecessary

• Use of components as it seems really small and will lead to unnecessary use of props

• Enabling history mode with either vuex or localstorage

• Making a request persist on page refresh

(Back to top)

Things avoided

• Use of packages (so CDN was preferred wherever possible).

(Back to top)

Things not consider / ignored

• Routing and wrong route catching.
• Detailed error catching with notification.
• Animated request responses.
• Linting style
• Testing

(Back to top)

Things with issues unresolved

• Unable to use "import" for both css anf js local files due to 'MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)' which could not resolve.

• Unable to use of .env file as I could not discipher how to implement it in my project structure.

(Back to top)

Authors

• Mubarak SULAYMAN - @mubaraksulayman

See also the list of contributors who participated in this project.

(Back to top)

License

This project is licensed under the MIT License.

(Back to top)

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

(Back to top)

Acknowledgments

• Inspiration was drawn from Link shortener website on DevProjects by codementor

(Back to top)