Git Product home page Git Product logo

caninclude's Introduction

CAN I INCLUDE

This project provides functionality to test whether one tag can be included in another. Based on information from HTML Spec WHATWG

Please, see Demo here

Development environment

  • VSCode
  • VSCode Remote Containers
  • Clone git clone https://github.com/CyberLight/caninclude
  • Go to cloned project repo folder cd caninclude
  • Open in VSCode code .
  • In popup menu click by Reopen in Container
  • Whew!

Setup spec.json for app

  • npm run crawl - this command crawl html spec page and make json data for app

How to run app in development

  • npm run dev - this open app using nodemon
  • Go to url http://localhost:3000 in your browser
  • That's all!

How to run app in production

  • Need to set env variables from Environment variables section
  • npm start - this command launch an app using pm2 using ecosystem.config.js

Environment variables

  • COOKIE_KEY - a key for sign cookies type: String
  • FEEDBACK_DAILY_LIMIT - a limit count of feedbacks daily type: Integer
  • RECOMMEND_CLEAR_CACHE_CRON_TIME - string in cron time format. Default value: 0 */30 * * * * (every 30 minutes)
  • MAIN_PAGE_DECORATION_TYPE - main page decoration mode or type type: String, possible values:
    • NY_LIGHT_RIBBON
  • LOGO_URL - URL of the logo file to be included in the src attribute of the img element
  • LOGO_ALT - text for alt attribute of img element

Project structure

  • .data - a folder for sqlite database
  • .devcontainer - a folder with VSCode Remote Containers configuration
  • components - a folder with server components that was written in Preact.
  • scripts - a folder with helper scripts for a project
  • crawl.js - a script for crawling html spec page
  • ecosystem.config.js - a configuration file for pm2
  • nodemon.json - a configuration file for nodemon
  • server.js - main and huge file which contains all routes and logic for an app
  • specfix.js - a script for making some additional json data transformations
  • utils.js - file with helper data managers and helper functions

Project routes that are important

  • / - Main page with some counters by usage of app and results for each tags
  • /can/include?parent=&child= - renders page with full information and result of ability to include one tag into another
  • /admin/feedbacks - ui for manage and view feedbacks
    • For ability to access to this route, you need:
      • npm run gen:invite role=admin
      • This script will output url like this: /invites/81493f1f9a306f64417b91960f6ded3b/apply
      • Go to your browser and concatenate http://localhost:3000 and /invites/81493f1f9a306f64417b91960f6ded3b/apply and press Enter
      • After that you can access to /admin/feedbacks

License

See the LICENSE file for license rights and limitations (MIT).

caninclude's People

Contributors

cyberlight avatar dependabot[bot] 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

caninclude's Issues

Tabindex attribute value for SwapButton component

So, let's have a look on the following case. A user typed some tag name in the first input. Then he pressed tab key on his keyboard. Then swap button got the focus. I think the user intended to type the second tag name, not swap this tags names (moreover, the second field can be blank at all). So, how about the following sequence:

  1. user typed the first tag name;
  2. user pressed tab key;
  3. the second textfield got the focus;
  4. user is about to type the second tag name?

Parsing HTML spec: Skipping of keywords wrapped with an <em /> tag inside the text of the tag section

From: @SelenIT
Original description

(There is another issue with the input case that some important "not" words are missing in its categories description, 
perhaps because it is marked with the em tag in the spec, but these issues seem somewhat related to me 
since it's all about parsing the spec)

There is another issue with the input case that some important "not" words are missing in its categories description, perhaps because it is marked with the em tag in the spec, but these issues seem somewhat related to me since it's all about parsing the spec

For example:

site doesn't work

failed to start application on caninclude.glitch.me

This is most likely because your project has a code error.
Check your project logs, fix the error and try again.

Focus problem with Github Corner element at top right corner of non main page header

Problem scenario

  • Make request from main page for any pair of tags
  • You are on the non main page which displays tags details
  • Set focus for parent tag input
  • Press Tab key twice
  • The page title goes beyond the upper border and hides some of the fields

Expected scenario

  • Make request from main page for any pair of tags
  • You are on the non main page which displays tags details
  • Set focus for parent tag input
  • Press Tab key twice
  • The Github Corner component should display a focus outline without any scroll effects for the title form components

Input interface should be more user friendly

It took me a while to understand that the interrogation mark it's actually the submit button. It really looks like an help button. Also, it's missing the cursor pointer.
First time I tried I input parent first, child second, seems more natural to a coder. I was confused with the result.
The arrow to change the parent/child relation is very confusing, giving no indication what is parent what is child.

I would suggest having a code like approach. Where child is inside (bellow/after) parent.

Also, clicking the arrows would in fact change the inputs values.
No need to keep arrows active, since we can swap as many times as we want.

I'm not a designer, but something like this.

Screenshot 2021-09-29 at 18 58 04

Will you be so kind to add swap tagNames button?

Hello. Will you be so kind to add swap tagNames button? I mean the following thing.
Once I pressed this button, the tags names I typed into the text fields swaped.

Lets imagine the following situation. I asked the canIInclude application, 'can I include <a> into <img> tag?' Later I've realized I've made a mistake, cause I understand <a> can't be incuded into <img>. There is no such button yet so I have to clear both of these fields and type the names anew. If this buttond existed it would be much easier to rich this purpose.

Thank you in advanced.

GLITCH_ADMIN: (header - h1) 'https://html.spec.whatwg.org/' says: 'A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required

ISSUE: 'https://html.spec.whatwg.org/' says: 'A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form...'.
TAG PAIR: header - h1

image

By feedback from site: Wrong include result for title in head

feedback1

Thank you for feedback! It's a real helpful!

Actual

  • Result for ability to include title to head is no

Expected

  • Result for ability to include title to head is yes

Result by research

  • The problem was discovered in a preprocessing script that simply detects negative tags for exclusion. Since for the head tag inside the documentation, we can see no more than one and no indicates that head is in the collection of negative tags for exclusion.
  • For a simple solution to this problem, I decided to add “no more than one” to exclude from negative tags collection which can't be included into the parent

Can <video> tag be within <audio> tag? (And vice versa.)

Currently the site is unsure ("I doubt") for both video as child and as parent. The correct answer to the question is a definitive no.

It looks like the site is doubting because of the transparent content model:

Because the parent <audio/> tag has the Transparent content option and the ability to nest the tag is not fully understood.

But when we read the actual content model section for these tags, we will find the following:

[...] then transparent, but with no media element descendants.

The only media elements in the HTML spec today are video and audio, see 4.8.12 Media elements. So we can definitively say that even though these elements have a transparent content model they can never be nested inside eachother.

I am not sure how this could be parsed out of the spec in an easy way. It might not be possible. But thought I would leave it here as a note anyway. Thanks for this cool project!

Set the focus to the child tag name textfield on NON-MAIN page

When an user visits can-i-include application the main page is opening. The the child tag name textfield has the focus, so he can type any tag name then twice hit the TAB key then type the second tag name, after submit the form and find out, if he can include the 1st tag into the 2nd one.

After the form submitting, he get the full info about those tags. Then he like, 'Ok, I've got it. Let's find out if I can include <another_tag_1> into <another_tag_2>'. He is on non-main page where the first text field isn't focused so he has to use mouse or twice hit the TAB key (the first hit result to getting focus by site logo).

The new version 2 of the site is out!

Dear users and those who found bugs, thank you for your contribution to the project!

Many thanks to the following people:

I hope that I took into account all the issues you found in version 2!
You can use the new version at the current address, url has not changed!
You can also install webapp directly from the browser and enjoy (or not so much) the functionality of the service

Sincerely yours, Aleksandr Vishniakov aka CyberLight

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.