Comments (14)
Oh My Goodness 😍 In just a few days sooo much progress has been made. Congrats @Chalarangelo. So glad I've been able to be apart of this amazing project & community 🎊 🎉 The site looks amazing.
There is def still so much to work on. Even though I would like to tackle a thing or two on the list above. I def need to still finish adding other lodash categorizes & snippets to backlog #100 & Get them done
from 30-seconds-of-code.
Also regarding the examples/comments underneath each snippet.
In order to reduce clutter, I suggest you put them in an expandable/collapsible container underneath a Usage heading.
This will also allow you to add lots of different examples that showcase the snippet's functionality better. You can add each example with normal heading-code pairs rather than a comment block which looks kinda messy atm.
from 30-seconds-of-code.
It would be good to get a nice domain name, and host the site on Netlify so that you get nice preview links when people submit pull requests 😃
from 30-seconds-of-code.
@Pl4gue beat me to #268 and did a great job. Commenting it here for documentation purposes
from 30-seconds-of-code.
In order to reduce clutter, I suggest you put them in an expandable/collapsible container underneath a Usage heading.
This will also allow you to add lots of different examples that showcase the snippet's functionality better. You can add each example with normal heading-code pairs rather than a comment block which looks kinda messy atm.
@atomiks I def agree and think having an expandable/collapsible container underneath the Usage heading. Would def make the page look clutter free as well as also adding different examples that can show the different ways a function/snippet can be used/applied.
from 30-seconds-of-code.
As far as I can tell, now that we can copy to clipboard and that we have search and proper styling, the website is mostly complete. Should I close the issue and add a guideline or two in the CONTRIBUTING.md file to state that we are always looking for people to help with CSS and stuff like that in order to close #275, too?
from 30-seconds-of-code.
It looks really nice and clean, good job.
Here's my take on it. (Just edited all the CSS on the page)
-
Use native system font as I believe people find it easiest to read (what they're used to). NOTE: On Chrome and Firefox the native font had really poor kerning. I wrote a utility to fix this for the relevant versions
-
Does anyone know of a syntax highlighter that tokenizers more thoroughly than Prism? The native one in Atom, for example, tokenizes a lot more. It would be nice to have that so we can have more color separation.
from 30-seconds-of-code.
@atomiks I'll check the utility tomorrow. I mainly changed the fonts because the native ones looked semi-terrible on my laptop, but that's not usually the case. I want to switch back to the native stack first thing tomorrow.
About the highlighting, Prism was the first one I found that did not require any configuration and it looked pretty decent. But we can easily switch to another one, provided it works properly, it's just a couple of lines in the template file.
By the way shadows, are really easy to add to the cards and I think I like their look. Any other opinions?
from 30-seconds-of-code.
I've always used Prism too, but what about highlight.js?
I checked their demo page and it looks to have a more thorough tokenizer for JS:
Actually maybe that's what Atom uses cuz it's a web app?
from 30-seconds-of-code.
Like I said in #233, give me a couple of days to get the collapsible spoiler thing ready in the CSS framework (it works, but it needs to be tested) and we can get on that. In the meantime we need examples to be parsed separately in the web script, so that we can split them without having to restructure all of the snippets yet again.
@atomiks I tried highlight and I didn't manage to get it working, but I'll see what I can do. Prism is also a lot lighter in terms of size and is used by MDN, so I expect that the highlighting in it is familiar to most developers. However, I saw some problems with tokenization, maybe I did not set it up correctly. I'll recheck it.
(I mention the fact that it is lighter, because the website will get quite heavy as we add snippets and functionality and we should make sure to make it as lightweight as possible wherever we can.)
from 30-seconds-of-code.
I'm looking at the search functionality and I'm thinking a simple search box that will load the nav and hide the links that don't match the search may be best. Then it won't require too much extra changes except to build the script, and add the meta info to the a
tags somehow.
Granted this is just a design idea and coding it is always a different animal
from 30-seconds-of-code.
I would maybe take a look at implementing searching the next days @skatcat31
from 30-seconds-of-code.
And here I used to think search boxes were hard... They probably are but a simple one isn't too bad
from 30-seconds-of-code.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.
from 30-seconds-of-code.
Related Issues (20)
- Merge two arrays and remove duplicate elements HOT 2
- CSVToArray will return an empty item for documents ending with \n HOT 2
- addDaysToDate fails with non-UTC timezone HOT 1
- A snippet folder dedicated to Angular
- Js
- Broken links HOT 4
- New snippet ideas HOT 1
- passive-scroll-listener-performance has obsolete/incorrect advice HOT 2
- Regarding the throttle function's question. HOT 7
- style: Centering the footer section ⏡ HOT 2
- Website Navigation Bar
- cookie parsing containing a `=` in value HOT 5
- [ BUG ] Missing space in footer section HOT 12
- Typo in the event-loop-explained.md snippet HOT 2
- fix: Unnecessary parameter in Queue class methods HOT 2
- Terminology issue in blog HOT 4
- :bug: Fix Footer settingsPath (GithHub,CC ,30-sec-of-code Link)
- Kindly add hacktoberfest label to your repo. HOT 1
- [Feature Request] : The border of search bar is not clearly visible .
- Typo on the website
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from 30-seconds-of-code.