Giter VIP home page Giter VIP logo

you-dont-need-javascript's People

Contributors

aayush105 avatar abhineshjha avatar amanpathan avatar ankit-3130 avatar anuragc07 avatar avtech04 avatar ayansaxena24 avatar cht8687 avatar codedrinks270 avatar dev-anand25 avatar gaurovgiri avatar gilmrjc avatar janup2442 avatar kedarnath-rothe avatar lordsid003 avatar lucademian avatar mrigendra1-singh avatar muditkashyap avatar nampnq avatar noorulainaga avatar om-sagar avatar re5pawn avatar rs-labhub avatar scriptype avatar shreenarayan123 avatar shubham-vartak avatar stevemao avatar techmannih avatar upendra2003 avatar vinayaksoni1729 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

you-dont-need-javascript's Issues

Neon button animation pictutre/gif

In the readme file we don't have a demo gif for neon button instead we have a ')' which is added in the readme file
Screenshot 2023-10-04 at 12 57 00 PM

Solution:
Upload gif (neon-button.gif) in the images folder
neon-button

Modals in Demo 1 are added to the nav to the nav stack.

The states of the modals displayed in Demo 1 are placed on the nav stack, you can reproduce this on the pen by clicking open and closed the modals a few times and then clicking "back" in your browser.

I think violates users' expectations about modals and the back button, but YMMV.

Mouse tracking example is pretty ridiculous

Rendering 500 animated elements instead of using one that is moved via JS... Really? Performance-wise it's disproving the whole point of this repo. "You don't need JS (unless it's more efficient to use it)".

Accordion Toggle Height

for:
.vertical [type=checkbox]:checked ~ label ~ .content { height:300px; border:1px solid #542437; }

change height to auto (or add scrolling overflow), add corresponding CSS selector for radio button version.

you should fork these, put them under source control and give credit to the initial author.

Add requirements for browsers

When viewing and further use of an examples, I would like to know in what min version of browser it will work.

Need add information about it in Readme for every new and old demo. (via Can I use)

I think it would be helpful. Thanks

Browser compatibility

It would be awesome if this page had a browser-compatibility table that not just shows that these things work in css but also that they work cross/browser/platform.

Github badge in the README

Screenshot from 2023-10-11 13-39-56

I want to contribute to this repository by adding above shown badge to the repository.

Please assign me this issue.

Accordion demo isn't a true accordion

In an accordion menu, only one "section" opens at a time (this mimics the musical instrument which stretches open one part the bellows at a time). In your demo, opening a second or third section does not close the previously-opened section.

Emphasize that that using CSS in most of these ways is terrible practice

CSS was made to be a styling language and to be supplementary to the markup of a page, not vital to it. Use of practices such as the checkbox hack to replace functionality that should be done using JavaScript is bad practice as it creates bad semantics, wrecking the markup of a page.

This library to should emphasize the areas where these hacks should not be used, both in the README and each demo page where this is the case.

Update Accordion CSS to Support radio on last rule

On most of the rules the CSS for the accordion example supports checkbox or radio however the last rule is missing the extra condition. If you add this condition to that rule then you can switch between checkbox and radio buttons in the html to decide whether to open one at a time or as they are clicked.

Great examples!

Game Mod

Game modification is considered to be completely safe.

Add compatibility information.

This repo is awesome, this could be replacing some basic js library (accordion, tab). But, please add browsers compatibility information. e.g Flex isn't supported yet in many old browser like IE8.

If you add compatibility info, frontend developers could add fallback (polyfill) for old browsers.

Suggest on README.md

I think a better "point of view" can be omitted for better reading because everyone knows what you are talking about, which the sample code might not compatible on their machines or browsers

README.md update

in the very first line the word "that" is missing which makes it semantically incorrect.

Surface is an entire framework built with no js

Issues might not be the best place to do this, if you would rather I could move this over to Twitter etc.

Just wanted to let you know that I built a framework a number of years back that tried to use no JavaScript and see how far I could push html + CSS.

It has working and styled models, accordians etc.

Feel free to check it out 👍 https://github.com/mildrenben/surface

user-select: none;

I think add in the css code:

body {
    user-select: none;
}

will be better, because when I quickly click on these stuff will not appear like when the double click on the selected character style.
My English is not good enough, hope you can understand what I mean.:joy:

Add a disclaimer that Floating Label only works without validation rules.

If you change input type to anything but text, and of course you should for email, url, tel (...) for accessibility (and to prompt the proper keyboard) the browser will have default validations checks for those types which means that the use of :invalid pseudo-selector won't work when the user actually enters invalid content. By this I mean that If, for example, the user inserts an invalid email and tab or focus the next field, the label will overlap the content.

You also have type="password" example, but that only works because there's not a pattern for the password so a 1 character long password will be considered valid, but of course this is not a real usecase.

If a validation pattern exists, which is mandatory in real sites, even if you use input[type="text"] for every field and user don't match it, the label will overlap the content.

Example fail usecases

CSS4

In the future there will be a proper solution using the :placeholder-shown pseudo selector, but its support is really bad (chrome only) at the time of writing.

CSS4 Example


Nice repo btw 👏 I gave a workshop for beginners on this a few months ago.. it was supposed to be turned into a repo of components like yours, you can check it for some magic :target solutions as well! (sry for the bad code organization, it was the result of a live coding workshop).

Cheers!

_

.

Allow newlines in info hovers

I'm not sure the best way to do a pull-request with the way the demos are stored in codepen.

Adding this rule to the "Info on hover without JS" will allow the newlines to be displayed:

dfn::after {
  white-space: pre-wrap;
}

More than CSS!

There are more languages lurking out there that are also alternatives to JS that could be given a spotlight in this project. For example, PHP! Check out danwin/le-chat-php, as it is an entire functioning chat server. WebAssembly is also an upcoming supplement on the rise.

SCSS version and grunt task for the project?

Hey guys,

I was wondering if you can accept my help converting the css to scss files and configuring grunt for the project with some tasks like scss, watch, server, css min etc.

what do you think?

thanks.

README.MD missing word "not" in a sentence

Please bear with me. I am new to GitHub and git. In the very first sentence of the first paragraph (just below the page title (You Don't Need JavaScript) we have the sentence (set to bold for easy identification):

Please note these demos should be considered as CSS "Proofs of Concepts". They may have serious issues from accessibility point of view (keyboard navigation, speech synthesis, etc.), or progressive enhancement/degradation/etc.

Perhaps what you meant to say was (word in bold added):

Please note these demos should NOT be considered as CSS "Proofs of Concepts". They may have serious issues from accessibility point of view (keyboard navigation, speech synthesis, etc.), or progressive enhancement/degradation/etc.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.