{"id":16550299,"url":"https://github.com/sylhare/webkit","last_synced_at":"2026-04-22T03:33:24.612Z","repository":{"id":51696332,"uuid":"88215741","full_name":"sylhare/webkit","owner":"sylhare","description":":dango: Some CSS, HTML and Javascript tests","archived":false,"fork":false,"pushed_at":"2022-01-31T14:48:05.000Z","size":51451,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T19:01:57.690Z","etag":null,"topics":["css","html","javascript","web"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sylhare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-13T23:53:39.000Z","updated_at":"2024-01-19T15:38:26.000Z","dependencies_parsed_at":"2022-08-23T01:31:50.437Z","dependency_job_id":null,"html_url":"https://github.com/sylhare/webkit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sylhare/webkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2Fwebkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2Fwebkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2Fwebkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2Fwebkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sylhare","download_url":"https://codeload.github.com/sylhare/webkit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2Fwebkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32119919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T00:31:26.853Z","status":"online","status_checked_at":"2026-04-22T02:00:05.693Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","web"],"created_at":"2024-10-11T19:33:47.792Z","updated_at":"2026-04-22T03:33:24.597Z","avatar_url":"https://github.com/sylhare.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webkit  \n\n[![Generic badge](https://img.shields.io/badge/github-webkit-blue.svg)](https://github.com/Sylhare/webkit) [![npm version](https://badge.fury.io/js/webkit-npm.svg)](https://badge.fury.io/js/webkit-npm) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/3add1f97018e4710ab17fa9c94234508)](https://www.codacy.com/app/Sylhare/webkit?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=Sylhare/webkit\u0026amp;utm_campaign=Badge_Grade)\n\nSome tests on javascript, CSS and HTML. \nBecause at least with github it can be stored online and I know where to find them. \nYou know that feeling like \"I knew how to do it, where did I put that ... oh right I made a junk repo out of it :+1:\". Are you really reading this? :eyes: \n\n## Start learning\n\nHere are some complete website for web based languages and technologies to learn:\n\n- [w3c Schools](https://www.w3schools.com/)\n- [SoloLearn](https://www.sololearn.com/)\n- [Kirupa's blog](https://www.kirupa.com/learn/index.htm)\n- [MDN learning Area](https://developer.mozilla.org/en-US/docs/Learn)\n\t- mdn/[learning-area](https://github.com/mdn/learning-area) code example on github\n\n## HTML\n\nHere is a list of nice links for HTML:\n\n- [getting started](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)\n- Simple HTML examples : [samdutton/simpl](https://github.com/samdutton/simpl)\n- Generate favicon with [real favicon generator](https://realfavicongenerator.net/)\n\n## CSS\n\nHere is a list of nice links for CSS:\n\n- [How to align div](http://www.tipue.com/blog/center-a-div/)\n- [CSS Grid for better cross plateform design](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout)\n- [CSS tricks](https://css-tricks.com/)\n- [Center in CSS generator](http://howtocenterincss.com/)\n- [30s solutions to CSS problem](https://atomiks.github.io/30-seconds-of-css/)\n\n### Responsive navbar\n\nIt is default with bootstrap, but here are some explainations on how to do it yourself:\n\n- [pure CSS navbar](http://blog.christopherianmurphy.com/2016/01/responsive-pure-css-menu/)\n- [CSS and js responsive navbar](https://www.hongkiat.com/blog/responsive-web-nav/)\n- [Basic responsive navbar](https://www.w3schools.com/howto/howto_js_topnav.asp)\n\n\n### Colors\n\n#### Color therory\nMake it look good:\n\n- [Color scheme](https://coolors.co/browser/latest/7) \n- [Color's info](http://www.color-hex.com/) \n- [Design-seeds](https://www.design-seeds.com/wander/wanderlust/color-range-2/)\n- [Müller's Colour Brightness Theory](http://www.colourlovers.com/blog/2007/09/02/the-muller-formula-or-predictable-color-preferences)\n\n#### HSL, HSV, RGB\n- [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV)\n- [RGB to HSL color conversion](https://www.rapidtables.com/convert/color/rgb-to-hsl.html)\n- [HSL to RGB color conversion](https://www.rapidtables.com/convert/color/hsl-to-rgb.html)\n- [Math behind colorspace conversions, RGB-HSL](http://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/)\n- [The three-dimensional representation of the HSV model](https://books.google.ca/books?id=oBbY3uFIgM8C\u0026pg=PA318\u0026lpg=PA318\u0026dq=%22The+three-dimensional+representation+of+the+HSV+model%22\u0026source=bl\u0026ots=yP-bc9zeEk\u0026sig=YXor-sGrcrrOENu-OzEHsDtc4bA\u0026hl=en\u0026sa=X\u0026ei=5G9cUcbTAYrn0QHX9IHgCQ#v=onepage\u0026q=%22The%20three-dimensional%20representation%20of%20the%20HSV%20model%22\u0026f=false)\n\n## BootStrap\n\n[Bootstrap](http://getbootstrap.com/) is a nice CSS / Javascript framework to build good looking sites, app, blogs, etc.\n\nYou can follow the [github](https://github.com/twbs/bootstrap) project here\n\nThere are also a lot of layout tools that can be used to either customiser or simplify your life with bootstrap such as :\n\n- [layouit](http://www.layoutit.com/build)\n- [Bootstrap design tool](http://bootstrapdesigntools.com/)\n- [Bootstrap elements](https://bootsnipp.com/)\n\n### Isolated bootstrap\n\nIf you don't want to have everything bootstrapped but rather only the grid or else, you can isolate bootstrap into another class say `.bootstrap-iso` with **less**.\n\n- [Isolate bootstrap with less](https://formden.com/blog/isolate-bootstrap)\n\nAnd you can install [less](http://lesscss.org/#) with the node.js package manager (npm):\n\n    npm install -g less\n\nFor [proxy errors](https://forum.freecodecamp.org/t/npm-behind-a-proxy-server/19386) try this:\n\n    npm config set proxy http://\u003cproxy-server-url\u003e:\u003cport\u003e\n    npm config set https-proxy http://\u003cproxy-server-url\u003e:\u003cport\u003e\n\n## Javascript  \n\nHere is a list of nice links for Javascript:\n\n - [Reading files in JavaScript using the File APIs](https://www.html5rocks.com/en/tutorials/file/dndfiles/)\n\n\n### Events \n\n- [Creating and triggering events](https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events )\n- [Trigger events with parameters](http://stackoverflow.com/questions/18613456/trigger-event-with-parameters) \n- [Dispatch event with data](http://stackoverflow.com/questions/23725816/dispatch-event-with-data)\n\n### Server requests\n\nI have mostly french documentation for that, how to handle server/application or API communication. `Ajax` and `XMLHttpRequest`:\n\n- [FR: Interrogez un serveur web](https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/interrogez-un-serveur-web)\n- [FR: Utilisez des API web](https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/utilisez-des-api-web)\n- [FR: Le fonctionnement de $.ajax()](https://openclassrooms.com/courses/un-site-web-dynamique-avec-jquery/le-fonctionnement-de-ajax)\n- [Getting started with Ajax](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started)\n- [FR: L'objet XMLHttpRequest](https://openclassrooms.com/courses/ajax-et-l-echange-de-donnees-en-javascript/l-objet-xmlhttprequest-1)\n\n### Managing JSON\n\nYou can [load JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) through an XMLHttpRequest.\n\nWhen you want to transform a JSON object into string or a string into a JSON.\nWrite that in the console (ctr + shift + i) in the browser\n\n```javascript\nvar myJSON = { \"name\": \"John\", \"level\": \"27\" };\nmyJSON\n\nvar myString = JSON.stringify(myJSON);\nmyString\n\nvar myParsed = JSON.parse(myString);\nmyParsed\n```\n\n### Miscellaneous\n\nIn Javascript, the `…` will take each element of an array separately.\n\n```\narr =[1, 2, 3, 4]\nString.fromCharCode(…arr)\n```\nWill return the string equivalent for all of the element of `arr`\n\n## Test framework\n\nTo test your javascript code, you might need the help of some test framework. As in other languages, they are here to help you write better code.\n\n- [Raygun - framework comparaison](https://raygun.com/blog/javascript-unit-testing-frameworks/)\n- [Designmodo - test javascript unit test](https://designmodo.com/test-javascript-unit/)\n- [Medium - javascript testing guide](https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a)\n\nI have tested a couple of them:\n\n- jasmine - nice in browser display, feature BDD\n- Qunit - looks like a traditionnal unit test framework, a bit ugly in browser.\n\n## JQuery\n\nThe [JQuery framework](http://jquery.com/) is a set a function that facilitate the development of javascript features. From DOM manipulation to events, it makes everything easier.\n\nHow to use, download here the source file or add this line in your html:\n\n```javascript\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"\u003e\u003c/script\u003e\n```\n\n## Node.js\n\n[Node.js](https://nodejs.org/en/) is a javascript backend.\n\n### npm\n\nYou would need beforehand. Node.js is a free open source lightweight server framework that runs on javascript. \nNode Package Manager (npm) needs [node.js](https://nodejs.org/en/). To install a remote package:\n```\nnpm install \u003cpackage\u003e\n```\n\nTo run a simple package (it should be written on the doc, or it should have an `index.js`):\n```\nnode index.js\n```\n\n### Build setup local node package\n\nHere are the basic operation that you can do on a local node package.\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nnpm run unit\n\n# run all tests\nnpm test\n```\n\n## Jekyll\n\nJekyll is a rubby app that creates static web/blog from text. You define a template and then all you do is add content. It is also widely use to create github page.\n\n- [Jekyll official doc](https://jekyllrb.com/docs/)\n- [Configuring Jekyll for github page](http://downtothewire.io/2015/08/15/configuring-jekyll-for-user-and-project-github-pages/)\n- [Jekyll on github page](https://www.smashingmagazine.com/2014/08/build-blog-jekyll-github-pages/)\n- [Create and publish a Jekyll gem](https://webdesign.tutsplus.com/tutorials/how-to-create-and-publish-a-jekyll-theme-gem--cms-27475)\n- [Set up a Jekyll theme](https://webdesign.tutsplus.com/tutorials/how-to-set-up-a-jekyll-theme--cms-26332)\n\n### Liquid\n\nLiquid is made by shopify and is used in jekyll:\n\n- [Shopify liquid wiki](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers)\n\nHere some information on how to use liquid for page / collection tags and categories:\n\n- [Use tags and categories in Jekyll](https://codinfox.github.io/dev/2015/03/06/use-tags-and-categories-in-your-jekyll-based-github-pages/)\n- [Alphabetize Jekyll page's tags](https://blog.lanyonm.org/articles/2013/11/21/alphabetize-jekyll-)page-tags-pure-liquid.html\n- [Collection pages by tags](https://stackoverflow.com/questions/36958975/listing-jekyll-collection-pages-by-tags)\n- [List all posts](https://learn.cloudcannon.com/jekyll/list-posts/)\n\n## cURL\n\ncURL (for client URL request library) is a command line interface tool and library to get online content and data using various protocols. The resource must be designated with an URL and supported by cURL.\nIt can also create or modify the resource (opposed to wget) and thus can be used as a REST client.\n\n### Installation\n\nOn the curl [download page](https://curl.haxx.se/download.html) there's a link to the [download wizard](https://curl.haxx.se/dlwiz/). Complete all the steps as follows:\n\n 1. **Select Type of Package**: *curl executable*\n 2. **Select Operating System**: *Windows / Win32* or *Win64*\n 3. **Select for What Flavour**: *Generic*\n 4. **Select which Win32 Version** (only if you selected *Windows / Win32* in step 2): *Unspecified*\n\nIf you chose Windows / Win32 you should end up [here](https://curl.haxx.se/dlwiz/?type=bin\u0026os=Win32\u0026flav=-\u0026ver=-), a page that links to [http://www.paehl.com/open_source/?CURL_x.y.z](http://www.paehl.com/open_source/?CURL_7.54.0) (x.y.z will change as newer versions of curl are released). There you can click the first link (_\"Download WITHOUT SSL\"_) or second link (_\"Download WITH SUPPORT SSL\"_) for a zip file with curl.exe. \n\nIf you chose Win64 you should end up [on this page](https://curl.haxx.se/dlwiz/?type=bin\u0026os=Win64\u0026flav=-) which should have direct download links from the https://curl.haxx.se website. These too contain only curl.exe.\n\nFinally, you can copy curl.exe into %windir% and it should become available on the command line.\n\n`curl.exe` is in the `bin` folder of the downloaded / extracted curl folder.\n\n\n## Miscelaneous \n\nHere is a website that has a lot of free of use images for your website: [pexels](https://www.pexels.com/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylhare%2Fwebkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylhare%2Fwebkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylhare%2Fwebkit/lists"}