A simple website, that fills out abbreviations for popular slangs.
Home Page: https://abbreve.vercel.app/
License: Apache License 2.0
Found a passion for web development and I can't wait to grow my skills. I love participating in communities, and giving back to small projects that I love. You will catch me watching a movie or five when I'm not coding.
🌍 I'm based in Cameroon
✉️ You can contact me at [email protected]
🚀 I'm currently working on Abbreve
🧠 I'm learning ReactJs
🤝 I'm open to collaborating on technical writing work, and frontend development internhips
Top Repositories
TBH - To Be Honest
ROFL - Rolling Around Floor Laughing
FFS - For F*ck Sake
No response
Missing AbbreviationlmkNot a bug
While I was giving a try to Abbreve, i typed ngl but unfortunately didn't get any results in return - i know the project is still so young but no problem.
Same thing goes for ftw.
The current codebase is a bit hard to read because there is little/no linebreaks/formatting. Using prettier addresses this issue and would also help keep a consistent formatting for the whole codebase
Before and After using prettier
No response
I noticed that the last time a release for this project was done
How about create an automatic release, that happens whenever some contributes to this project, it will use the conventional commit.
Here's a link for reference:
Set Automatic Release (Skip Commitizen)
Conventional Commit
This can only be done by the owner of the repo
Currently, there's only one db.json file, which contains all definitions and as the DB file grows (more definitions added) there'd be at least the following issues:
...plus many other possible issues
My proposal is, to split each abbreviation into its own file like below:
Abbreve
└public
└─server
└──db
│ │ gtm.json
│ │ lfg.json
│ │ idk.json
│ │ ...
Where each JSON file contains the definition of an abbreviation. The actual abbreviation would be the name of the JSON file.
Note: The structure of each abbreviation would still be the same, (I made a proposal for improving the structure in #42)
No response
By using my proposed solution,
Caveats
Using my proposed solution means changing the structure of all abbreviations becomes difficult, but we can solve this by creating a simple app for changing the structure of all abbreviations.
Improve Ui for mobile state as well as a few changes for desktop state.
The UI right now is awesome but could use a little fixes here and there
I'll love to take this on 💪🏼
When we put wrong slang or slang that is not present or the search bar is empty, we get a msg telling us the real problem like
this
1. When slag is not present
- This entry does not exist in our records as of yet :(
1. You can help us add this by creating a [github issue](https://github.com/Njong392/Abbreve)
2. Or, you could fill out this [feedback form](https://t.co/mp86BLYBhq) and we will address the issue
2. When SearchBar is Empty
- Search bar 🔍 is Empty!. Please put abbreviation in search bar
But when either of these messages appears, the content on its left gets displaced slightly to the left. it will more clear from the SS I have added below.
No response
Currently, we have prettier but you'd have to manually run npm run format to format the code base before pushing changes.
Sometimes, one might forget to format the code base before pushing changes.
Adding husky prevents this by automatically formatting the code base before each commit
No response
No response
Consider appending the abbreviations on the homepage to the JSON database
No response
No response
I'm thinking since this is more like a dictionary-like app, the page length should be that long. A smaller font size for the main text and some other little rearrangements and optimization should be help to fix this to a level.
No response
No response
What issue are you facing? Missing Abbreviation
Which slang/feature/bug? :lmk
Bug description: No bug
Currently, there's no indication to show when the app is looking up the definition for my searched abbrev.
It would be an improvement in UX to show a loading animation when a search is running
No response
No response
I think it's much better if the search bar is located at the top, it's easier to find.
Just a thought
Bugsample text question answersample text question answer
We need to update the repo README.md to account for the changes made in #64.
No response
Instead of a picture of the website for demo in the readme, would be nice to have a gif instead
No response
No response
Let's talk through a few different scenerios:
When user types in value for an existing abbreviation and then clicks the search button, the definition appears as expected.
If user types in the following AFTER db.json has already been fetched once:
a. An existing abbreviation, it appears as expected without having to press the submit button.
b. However when a user types in an abbreviation that doesn't exist in db.json, nothing appears, no error message, etc.
How do we want to handle the scenerios for 2a & 2b? Here are possible solutions:
I propose the 2nd condition as a fix to the problem. Thoughts?
No response
No response
db.json file contains repeattive data, see from line 172 to line 332 (as of now).
No response
when the search input is empty, hitting the submit button sends a request and all the abbreviations are fetched successfully but unable to find a matching abbreviation for the empty string '', hence resulting in the error message.
Adding input validation should fix this. Thank you, this is my first time creating an issue.
No response
No response
What issue are you facing? Missing Abbreviation
Which slang/feature/bug? :TBF = to be fair
Bug description:
No response
This issue is to add a new slang ootd, ttyl, rofl and tc to the app.
OOTD stands for Outfit Of The Day.
TTYL stands for Talk To You Later.
ROFL stands for Rolling On the Floor, Laughing
TC stands for Take Care
@Njong392 I am open to making this PR.
It would be great to show search suggestions for similar abbrevs when the user starts typing in the search box.
No response
Sometimes, you may forget an abbrev but you know the first few characters. Adding search suggestions provides a good ux in such situations
Users should be notified if a record they have entered isn't available in the JSON database yet. This is yet to be worked upon.
No response
No response
Hi! I have some small color changes that can make the application more accessible.
original:
new version:
I changed the original purple color to deep purple and added a slightly lighter purple to make some parts of the text more readable. I also made the gray a bit lighter.
Let me know if you like it!
No response
What issue are you facing? Missing Abbreviation
Which slang/feature/bug? :ikr = I know right
Bug description:
What issue are you facing? Missing Abbreviation
Which slang/feature/bug? :til = today I learned
Bug description:
Text color of Get Started button should be updated to white
On Hover
I'll appriciate if this can be assinged to me ;)
CONFLICTING ABBREVIATIONS
I think room should be made for some abbr. terms like "WTH" which has more than one meaning i.e " What the heck" and "What the hell".
We need some rules to make sure that contributors adhere to and collaborate in ways that are suitable for everyone else.
No response
No response
To help new contributors know exactly what to do and what to expect of the project...
No response
No response
The screenshot in the README was recently substituted by a GIF. But the markdown link of the added GIF is showing in the README, and this doesn't look very good. You can see the link above the gif itself.
Open the README file in edit mode (You have to fork the repo to do this) and in the section where the gif is added, and change
 to
No response
I think "use cases" could be added to the terms to give users more insight into the term to those who are new to it and as an illustration.
No response
What issue are you facing? Missing Abbreviation
Which slang/feature/bug? :hello this is a test
Bug description:
Currently, users have to scroll down in order to search for abbreviations, which IMO is not a good UX since the main focus of the app is for users to quickly find definitions for abbrevs.
My proposal is to move the search input to the top so that users can easily and quickly search for abbrev definitions.
As you can see, the search input + button is visible the moment the user opens the app without even scrolling down
No response
What issue are you facing? Missing Abbreviation
Which slang/feature/bug? :tbh = to be honest
Bug description:
Bugsample text question answersample text question answer
The Logo used in the Navbar can also be up there as the favicon
No response
No response
Hey!
I would like to share that the text on the CTA button "find an abbreviation" changes its color on click and it becomes not accessible. Not enough contrast between the text-color and bg-color.
I would rather keep the text color white.
No response
Removing text after submitting form would be a nice option.
No response
No response
@Njong392
Consider adding the hacktoberfest topic to this repo to bring more potential contributors to this project .
What do you think?
No response
The current structure of db looks like:
[abbreviation]: {
definition: string,
alternatives?: string
}
which is good, but we can improve on the structure by making the alternatives prop required and an array. So the new structure now becomes:
[abbreviation]: {
definition: string,
alternatives: string[]
}
Using the proposed structure gives us the possibility to add other features, such as linking related abbreviations and other benefits as the app grows
Below is an example showing the current structure and how it would look like after implementing the proposed structure
BEFORE:
{
"lgtm":{
"definition":"Looks Good To Me",
"alternatives": "Looks Great To Me, Looks Great To Merge"
},
"lfg":{
"definition":"Let's Fucking Go",
"alternatives" : "Life Feels Good, Looking For Group"
},
"idk":{
"definition": "I Don't Know"
},
"imo":{
"definition": "In My Opinion"
}
}
AFTER:
{
"lgtm":{
"definition":"Looks Good To Me",
"alternatives": ["Looks Great To Me", "Looks Great To Merge"]
},
"lfg":{
"definition":"Let's Fucking Go",
"alternatives" : ["Life Feels Good", "Looking For Group"]
},
"idk":{
"definition": "I Don't Know",
"alternatives": []
},
"imo":{
"definition": "In My Opinion",
"alternatives": []
}
}
No response
We can even further improve on the structure to include more information like so:
[definition]: {
definition: string,
contexts: string[], // Check explanation at the bottom
alternatives: {
definition: string,
contexts: string[] // Check explanation at the bottom
}[]
}
Example:
{
"lgtm": {
"definition": "Looks Good To Me",
"contexts": [
"chat",
"conversation"
],
"alternatives": [
{
"definition": "Looks Great To Me",
"contexts": []
},
{
"definition": "Looks Great To Merge",
"contexts": [
"collaboration",
"teamwork"
]
}
]
},
"lfg": {
"definition": "Let's Fucking Go",
"contexts": [],
"alternatives": [
{
"definition": "Life Feels Good",
"contexts": []
},
{
"definition": "Looking For Group",
"contexts": []
}
]
},
"idk": {
"definition": "I Don't Know",
"contexts": [],
"alternatives": []
},
"imo": {
"definition": "In My Opinion",
"contexts": [],
"alternatives": []
}
}
Explanation:
The contexts field is an array of contexts in which the abbreviation is mostly used.
Notes:
Automatically, all alternatives under each abbreviation fall under the contexts provided for the main definition
e.g
Both Looks Great To Me and Looks Great To Merge fall under chat and conversation contexts since they are both alternatives to the Looks Good To Me definition
DISCLAIMER!
The items I used for each context are just for demonstration purposes.
The padding left and right on mobile devices makes the texts wrap a lot and increases scroll length.
There isn't much space on mobile screens, so, the available spaces should be utilized maximally.
No response
Maybe the white text color should be retained since it scales already (indicating it's state) or what do you think
No response
No response
Since this is open to the public now, adding a license like Apache 2.0 would probably be cool.
No response
No response
Hi everyone,
There's not enough contrast between background color and text color when the user hovers over the Get Started link (navbar).
I don't know if the text could be changed to a lighter color or just not have a change of color on hover since there's already a scale effect.
Picture of the button on hover:
No response
When a slang that does not exist is shown, there is a message to tell user that the slang does not exist. But if the next slang to be entered does exist, the abbreviation is shown. But the error message from the previous entry does not go away.
No response
What issue are you facing? Missing Abbreviation
Which slang/feature/bug? :FGS - for god's sake (or rated R version: FFS - for fuck's sake)
Bug description:
Upon submitting, show some error if there's no information.
No response
No response
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.