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.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
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
This will walk you through how to setup the app on your local computer and/or machine.
npm install
npm run serve
npm run build
npm run test:unit
npm run lint
The app has two input medium with a button each and a button to reveal and hide instruction / guide.
-
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.
-
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.
-
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.
-
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
- Use of packages (so CDN was preferred wherever possible).
- Routing and wrong route catching.
- Detailed error catching with notification.
- Animated request responses.
- Linting style
- Testing
-
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.
- Mubarak SULAYMAN - @mubaraksulayman
See also the list of contributors who participated in this project.
This project is licensed under the MIT License.
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.
- Inspiration was drawn from Link shortener website on DevProjects by codementor