appli web - Offirmo-team/wiki GitHub Wiki

Voir aussi développement mobile, développement web, dévelopement bureau, electron, javascript, serveur, API web, css, html, yeoman, webstorm, bower, bootstrap, node.js, AngularJS, require.js, express, mocha, chai, backbone, jquery, module web...

single page webapp.

Docs générales

• technos http://www.webplatform.org/
• e-book "Programming JavaScript Applications" http://chimera.labs.oreilly.com/books/1234000000262/index.html
• APIs API web
  • https://web.dev/storage-for-the-web/
• checklist https://frontendchecklist.io/
• PWA
  • https://web.dev/maskable-icon/

https://docs.google.com/document/d/1DMacL7iwjSMPP0ytZfugpU4v0PWUK0BT6lhyaVEmlBQ/edit#

• Offline & Realtime Synchronization
• Offline Access Policies
• Realtime Multi-User Presence
• Session-Persisted App State
• Offline Support with Proactive Caching
• Offline Archiving and Querying
• High Frequency, Multi-Client Data Synchronization
• Multi-Client Shared State & Predictive Cache
• Multiplayer board game
• Multiplayer RPG
• micro-frontends https://shahata.medium.com/taking-micro-frontends-to-the-next-level-1a1a91adc476

Progressive web apps:

• (++) bonne intro https://alistapart.com/article/yes-that-web-project-should-be-a-pwa
• https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955
• (+) roadmap https://cloudfour.com/thinks/a-progressive-roadmap-for-your-progressive-web-app/

• https://developers.google.com/web/updates/2019/02/rendering-on-the-web

• https://worldwideweb.cern.ch/
• https://www.gizmodo.com.au/2019/09/100-websites-that-shaped-the-internet-as-we-know-it/

Voir aussi sécurité et javascript#sécurité.

• https://www.owasp.org
  • TOP 10 dangers https://www.owasp.org/index.php/Top_10_2013-Top_10
  • reset mots de passe http://security.stackexchange.com/questions/105124/why-should-you-redirect-user-to-login-page-after-password-reset

Les classiques:

• supply chain https://medium.com/hackernoon/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5
  • https://medium.com/hackernoon/part-2-how-to-stop-me-harvesting-credit-card-numbers-and-passwords-from-your-site-844f739659b9
• juste public... https://medium.freecodecamp.org/discovering-the-hidden-mine-of-credentials-and-sensitive-information-8e5ccfef2724
• CSRF "cross-site request forgery" = lien dans un e-mail https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)
  • http://yehg.net/lab/pr0js/articles/A_Most-Neglected_Fact_About_CSRF.pdf?1386252751
• XSS "cross-site scripting" = "affichage" d'un contenu utilisateur
  • https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)
  • https://www.owasp.org/index.php/Types_of_Cross-Site_Scripting
  • https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet
• SSRF
• clicklacking! https://blog.innerht.ml/google-yolo/
• XSHM Cross Site History Manipulation
• Cross frame scripting https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/
• path traversal https://www.owasp.org/index.php/Path_Traversal

Technos:

• same-origin policy

  • https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
  • very primitive, defeated by JSONP!

• CORS "Cross-Origin Resource Sharing"

  • = a request + response headers
    • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
  • OR a property on rsrc links https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-crossorigin
  • https://auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/
  • https://fosterelli.co/developers-dont-understand-cors
  • https://frontendian.co/cors

• CSP "Content Security Policy"

  • https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
  • https://developers.google.com/web/fundamentals/security/csp/
  • can be set in a meta!
  • 1. create it https://www.cspisawesome.com/content_security_policies
  • 2. evaluate it https://csp-evaluator.withgoogle.com/

• résumé https://www.future-processing.pl/blog/improving-security-of-your-web-application-with-security-headers/

• exercice avec exemples concrets : http://www.slideshare.net/starbuck3000/trouvez-la-faille-confoo-2012

• http://www.slideshare.net/snipeyhead/dotscale-2014

• attaque https://blog.cloudflare.com/an-introduction-to-javascript-based-ddos/

• attaque (2018) https://blog.innerht.ml/google-yolo/

• https://stormpath.com/blog/secure-single-page-app-problem/
• http://wiki.dreamhost.com/Troubleshooting_Hacked_Sites
• http://www.sitepoint.com/strengthen-user-authentication-and-preserve-user-experience
• http://blog.meadhbh.org/2013/08/in-defense-of-javascript-cryptography.html
• Emily Stark at Hack Reactor - JavaScript and Web Security http://www.youtube.com/watch?v=6_3pomxyp8M
• bonne explication Same origin policy http://security.stackexchange.com/questions/67889/why-do-browsers-enforce-the-same-origin-security-policy-on-iframes

tous les classiques :

• SSL / TLS / HTTPS : voir http#ssltls
• SQL, OS, LDAP injections
• broken auth and security
• XSS and clickjacking
• direct object references leaks
• security misconfiguration
• sensitive data exposure
• missing access control (least privilege !)
• CRSF
• 3rd party modules
• unvalidated redirects

plus quelques uns plus rarement mentionnés :

• mettre un délai systématique sur le test de mot de passe (brute force)
• ne pas charger toute l'appli tant que pas logué (contre le DOS)
• redemander le mot de passe sur action sensible, et maintenir cet état qq instants
  • fait par GitHub = sudo mode
  • utiliser APIs log, absence pour sortir de ce mode en avance
• si un mot de passe est en cours de saisie, l'effacer immédiatement si la page est passée en arrière plan ou dans tous les cas au bout de X secondes
  • ex. un utilisateur qui tape son mot de passe puis s'absente avant d'avoir validé
  • m'est arrivé, Fortunéo le fait

• https://passwordless.net/
• https://medium.com/@ninjudd/passwords-are-obsolete-9ed56d483eb
• faire son propre serveur OAuth2 https://github.com/jaredhanson/oauth2orize
• +++ hashage https://blogs.dropbox.com/tech/2016/09/how-dropbox-securely-stores-your-passwords/

http://security.stackexchange.com/questions/58215/are-random-urls-a-safe-way-to-protect-profile-photos

• http://en.wikipedia.org/wiki/Strict_Transport_Security
• https://devcenter.heroku.com/articles/websocket-security
• https://devcenter.heroku.com/articles/ssl-endpoint
• http://blog.opal.io/crypto-in-the-browser.html

• https://keybase.io/triplesec/
• https://github.com/evilpacket/helmet
• https://github.com/yahoo/xss-filters
• sanitize https://code.google.com/p/google-caja/
  • https://github.com/chriso/node-validator + plugins

• http://www.peter-eigenschink.at/projects/steganographyjs/showcase/
• https://cloud.google.com/tools/security-scanner/

• https://alistapart.com/article/breaking-out-of-the-box/

Bonnes réflexions:

• ++ "The website obesity crisis" http://idlewords.com/talks/website_obesity.htm
• http://www.motherfuckingwebsite.com/ & http://bettermotherfuckingwebsite.com/
• http://www.theworldsworstwebsiteever.com/
• https://michel.codes/blogs/ui-as-an-afterthought

Conseils google :

• https://developers.google.com/web/fundamentals/
• https://developers.google.com/webmasters/mobile-sites/

Autres

• http://sixrevisions.com/project-management/website-architecture/
• http://nobackend.org/

Principes de conception

• mobile first http://www.pompage.net/traduction/mobile-d-abord
• API first http://blog.isotoma.com/2014/02/api-first/
• offline first http://offlinefirst.org/

"one new framework every day" http://codeofrob.com/entries/a-comparison-of-various-js-frameworks-using-cold-hard-data.html

Voir angular.js, react

• backbone
  • http://dhruvaray.github.io/backbone-associations/specify-associations.html

Choix

• http://stackoverflow.com/questions/7788611/what-javascript-template-engines-you-recommend
• ++++ http://garann.github.io/template-chooser/

dustjs par linkedin

• https://developers.google.com/web/fundamentals/performance/rail
• velocirender https://www.bitovi.com/blog/announcing-velocirender

• webstorm http://www.jetbrains.com/
• brackets

Combo :

• banque d'icônes SVG http://thenounproject.com/
• générateur de fonte d'icônes http://icomoon.io/app/

• webdriver
• TU + replay https://github.com/facebook/huxley
• https://github.com/substack/testling
• harness https://github.com/scriby/browser-harness
• http://nightwatchjs.org/
• https://github.com/defunctzombie/zuul

Remote debug

• https://developer.chrome.com/devtools/docs/remote-debugging
• http://moduscreate.com/enable-remote-web-inspector-in-ios-6/

Inspection

• platform detection https://github.com/bestiejs/platform.js
• https://github.com/andrewbredow/Library-Detector-for-Chrome

• puer ! http://developer.telerik.com/featured/3-useful-tools-local-development-testing/

npm install -g puer
puer

• node simple server https://www.npmjs.org/package/serve

serve

• browser-sync

• https://en.wikipedia.org/wiki/Social_login
• http://portablecontacts.net/

Voir UX

voir dustjs, FormatJS

Voir aussi css

• http://lesscss.org/
• http://davidwalsh.name/add-rules-stylesheets

Voir css#Typographie pour la technique.

*L’apostrophe est probablement le signe typographique le plus malmené de nos jours :

taper directement au clavier : ’
dans le code HTML inscrire : <nowiki>&#8217;</nowiki>
dans le code HTML inscrire : <nowiki>&rsquo;</nowiki>

• explication des types d'adaptation http://liquidapsive.com/
• tailles d'écran par popularité http://screensiz.es/phone
• http://www.sitepoint.com/series/understanding-responsive-web-design/
  • http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/
• outils
  • http://www.sitepoint.com/viewport-resizer-bookmarklet/
  • http://www.opera.com/it/developer/mobile-emulator
  • http://crossbrowsertesting.com/
• http://www.sitepoint.com/responsive-web-design-too-fragile/
• http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-responsive-rules/
• http://www.sitepoint.com/7-responsive-web-design-tips/
• http://stackoverflow.com/questions/8456455/mobile-web-how-to-get-physical-pixel-size
• ...

• norme http://oembed.com/
• sass (pour des url ou pour partager son propre site) http://embed.ly/

Totalement non trivial si on veut UTF8, entités, etc.

• http://commonmark.org/
  • http://blog.codinghorror.com/standard-markdown-is-now-common-markdown/

• OK maintenant ? http://googlewebmastercentral.blogspot.fr/2014/05/understanding-web-pages-better.html
• https://developers.google.com/webmasters/ajax-crawling/
• http://www.webdesignerdepot.com/2013/05/seo-sanity-check-part-1-googles-penguin-and-panda-updates/
• Open graph http://ogp.me/
• bloquer google bot "Using meta tags to block access to your site" https://support.google.com/webmasters/answer/93710?hl=en
• ...

• http://www.webdesignerdepot.com/2013/03/how-to-manage-the-back-button-with-javascript/
• https://github.com/browserstate/history.js
• ...

Voir base de données

• http://www.sitepoint.com/a-better-cookie-html5-and-web-storage/

• http://www.w3.org/TR/webstorage/
• http://www.w3.org/TR/IndexedDB/
• https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/ https://github.com/mozilla/localForage

https://github.com/gabesoft/trans

offline detection ?

• websocket ? application cache
• http://alistapart.com/article/application-cache-is-a-douchebag
• spec http://www.w3.org/TR/2011/WD-html5-20110525/offline.html
• https://github.com/gr2m/appcache-nanny
• bookmarklet d'aide http://westciv.com/tools/manifestR/
• solution complète et complexe http://labs.ft.com/2012/08/basic-offline-html5-web-app/

Voir courriel.

• http://www.kidozen.com/building-graphical-email-reports-using-casperjs/

• http://www.webdesignerdepot.com/2013/04/how-to-use-the-download-attribute/

• http://www.24joursdeweb.fr/2014/le-web-mobile-et-la-performance/
• http://aerotwist.com/blog/my-performance-audit-workflow/
• https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

https://www.dareboost.com/fr/home

• http://stevesouders.com/hpws/rules.php
• http://www.slideshare.net/bluesmoon/frontend-performance-beginner-to-expert-to-crazy-person

• core count http://blog.wg.oftn.org/post/51125082905/core-estimator

Threads

• http://easywebworker.com/
• https://zapier.com/engineering/intro-to-web-workers/
• http://communistjs.com/
• http://meteorhacks.com/fibers-eventloop-and-meteor.html

• https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/
• srcset
  • http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
  • http://eightmedia.github.io/yass.js/
• cache manuelle : http://addyosmani.github.io/basket.js/
• cache https://github.com/topcloud/cachemere

• Cache du navigateur : Voir http

...

Base CMS http://apostrophecms.org/

• http://www.jsdb.io/view/conditioner

• http://www.webdesignerdepot.com/2013/03/how-to-use-the-fullscreen-api/
• lib : https://github.com/sindresorhus/screenfull.js

• http://wicky.nillia.ms/headroom.js/
• http://www.thepetedesign.com/demos/purejs_onepage_scroll_demo.html

• http://sparkbox.github.io/bouncy-ball/
• http://easings.net/fr
• http://dan-silver.github.io/ElementTransitions.js/

• http://lipka.github.io/piecon/
• http://tommoor.github.io/tinycon/
• http://lab.ejci.net/favico.js/

• https://github.com/kangax/fabric.js
• https://github.com/maxogden/voxel-engine
• http://paperjs.org/about/ SVG
• http://svgjs.com/
• http://snapsvg.io/ Vidéo
• http://vagnervjs.github.io/frame-player/

• pour bootstrap IE6-8 https://github.com/scottjehl/Respond
• various, AMD https://github.com/cujojs/poly
• https://github.com/jondavidjohn/hidpi-canvas-polyfill

• https://github.com/HubSpot/pace
• http://github.hubspot.com/offline/docs/welcome/
• http://nanobar.micronube.com/
• CSS spinners http://projects.lukehaas.me/css-loaders/

• https://github.com/icholy/Duration.js

• https://github.com/tantaman/LargeLocalStorage

http://www.emoji-cheat-sheet.com/

• http://www.producthunt.com/danlev/collections/emoji-products
• http://hassankhan.github.io/emojify.js/
• https://github.com/mwunsch/rumoji

• http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html
• http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

• http://momentjs.com/
• http://numeraljs.com/

• https://github.com/elclanrs/jq-idealforms
• http://togakangaroo.github.io/persistState/
• http://firstopinion.github.io/formatter.js/demos.html
• http://athaeryn.github.io/flyLabel.js/
• http://creditcardjs.com/

• sélecteurs
  • http://brianreavis.github.io/selectize.js/
  • http://ivaynberg.github.io/select2/
  • http://groenroos.github.io/minimalect/
  • http://igor10k.github.io/ikSelect/
  • https://github.com/harvesthq/chosen
• Édition
  • in place http://vitalets.github.io/x-editable/
  • Texte massif http://www.theguardian.com/info/developer-blog/2014/mar/20/inside-the-guardians-cms-meet-scribe-an-extensible-rich-text-editor
    • https://github.com/guardian/scribe
    • https://github.com/quilljs/quill/
    • http://ckeditor.com/
  • code
    • https://github.com/jakiestfu/Behave.js
  • JSON
    • http://stackoverflow.com/questions/998832/gui-based-or-web-based-json-editor-that-works-like-property-explorer
    • http://jsoneditoronline.org/ https://github.com/josdejong/jsoneditor
    • http://json.bubblemix.net/#
• dates
  • http://www.eyecon.ro/bootstrap-datepicker/ http://eternicode.github.io/bootstrap-datepicker/
  • https://github.com/ChiperSoft/Kalendae

• http://labs.voronianski.com/ngActivityIndicator.js/

• http://github.hubspot.com/vex/docs/welcome/
• http://dimsemenov.com/plugins/magnific-popup/

• http://kenwheeler.github.io/slick/

• https://github.com/ncuillery/angular-breadcrumb
• http://jquery-plugins.net/xbreadcrumbs-jquery-plugin
• http://jquery-plugins.net/jbreadcrumb-collapsible-breadcrumb-navigation-with-jquery

• http://baijs.nl/tinyscrollbar/
• http://jscrollpane.kelvinluck.com/
• http://demos.flesler.com/jquery/scrollTo/
• http://manos.malihu.gr/jquery-custom-content-scroller/

• http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

• http://www.tripwiremagazine.com/2013/04/jquery-countdown-scripts.html
• http://keith-wood.name/countdown.html

• http://heelhook.github.io/chardin.js/
• http://easelinc.github.io/tourist/
• http://pagenotes.com/pagenotes/tooltipTemplates.htm
• http://usablica.github.io/intro.js/
• hopscotch

• http://www.highcharts.com/

• http://fineuploader.com/index.html
• https://github.com/Wildhoney/ngDroplet

• http://trevoro.net/2013/whats-your-timezone/
• https://github.com/mseeley/timer
• https://github.com/bfattori/timersjs
• http://arshaw.com/fullcalendar/
• http://flipclockjs.com/

• responsive https://github.com/filamentgroup/tablesaw
• datatables + plugins
  • http://www.designyourway.net/blog/resources/28-useful-plugins-to-enhance-your-tables-efficiency/
  • http://datatables.net/forums/discussion/8789/tips-for-using-datatables-with-very-large-data-sets/p1
  • http://datatables.net/extras/scroller/
  • http://www.lab4games.net/zz85/blog/2012/06/23/virtual-rendering-1000000-items-efficiently/
• http://handsontable.com/index.html

• carte bancaire https://github.com/jessepollak/card
• calendrier kylestetz.github.io/CLNDR/
• carte de France https://github.com/neveldo/jQuery-Mapael
• https://github.com/facebook/puewue-frontend
• http://kdzwinel.github.io/JS-OCR-demo/
• http://tlindig.github.io/position-calculator/
• jeux de couleurs https://github.com/davidmerfield/randomColor
• knob https://github.com/aterrien/jQuery-Knob

• http://isotope.metafizzy.co/index.html

• http://cytoscape.github.io/cytoscape.js/

• http://getwordsmith.co/
• http://caroufredsel.dev7studios.com/index.php
• http://jpanelmenu.com
• http://leafletjs.com/index.html
• https://github.com/mbostock/d3
• https://github.com/hakimel/reveal.js
• uri http://medialize.github.io/URI.js/
• http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
• http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer
• https://github.com/mintchaos/flippant.js
• http://flipclockjs.com/
• http://aehlke.github.io/tag-it/
• https://github.com/2fdevs/videogular

• http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/

...

• http://socket.io/#how-to-use
• tysoncadenhead.com/blog/getting-started-with-socket-io

• WebRTC
  • http://www.webrtc.org/
  • http://www.html5rocks.com/en/tutorials/webrtc/basics/
• base64/32 https://github.com/mattrobenolt/node_nibbler
• https://github.com/videlalvaro/gifsockets

• http://www.webdesignerdepot.com/2012/10/restricting-input-with-jquery/
• ...

• ...

Les navigateurs hormis IE empêchent en JS pur de copier dans le clipboard (pour des raisons de sécurité). Les workarounds possible : utiliser Flash... ou simplifier la vie à l'utilisateur en sélectionnant pour lui (de façon visible ou masquée).

• http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript
• http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard

• http://www.loc.gov/standards/iso639-2/php/code_list.php
• http://en.wikipedia.org/wiki/ISO_3166-1
• base https://mledoze.github.io/countries/

• https://developers.facebook.com/docs/opengraph/guides/internationalization?locale=fr_FR

• browser prefs
• cookie explicite
• lieu
• facebook :
  • header
  • option
• négociation
  • https://github.com/jed/locale

• Mozilla moderne http://l20n.org/
• classique bien featurée, compatible dust FormatJS
• https://www.npmjs.com/package/messageformat
  • outil lié http://l10ns.org/
• gettext modernisé ? http://slexaxton.github.io/Jed/
• airbnb http://airbnb.github.io/polyglot.js/
• https://hacks.mozilla.org/2013/04/localize-your-node-js-service-part-1-of-3-a-node-js-holiday-season-part-9/
• http://ejohn.org/blog/a-strategy-for-i18n-and-node/
• ...

• ...

• http://stackoverflow.com/questions/11345812/web-application-internationalization-do-it-server-side-or-client-side
• https://github.com/SlexAxton/messageformat.js
• http://www.mindmagma.com/jquery/lingua/demo.htm
• https://github.com/martinandert/counterpart
• ...

• http://www.sitepoint.com/adobe-shuts-browserlab/
• http://www.sitepoint.com/modern-ie-browser-testing/

Metriques: https://bitsofco.de/what-is-first-input-delay/

• FID First input delay = tracks the delay between the time a user can attempt to interact with a part of the site, and the time that the interface is able to respond to that interaction
• apdex
• TTI time to interactive = refers to the point at which a user can reliably interact with the content on the website, such as clicking links or entering text into input fields.
• FCP First Contentful Paint = refers to the point at which the browser renders any information from the DOM
• FM First Meaningful = first useful bit of content is rendered on the screen
• FP, FMP, TTYL

mesure https://web.dev/measure

• http://status.modern.ie/
• http://www.chromestatus.com/features

visible invisible ?

fermeture ? avertissement ?

https://github.com/ai/visibilityjs

http://ponyfoo.com/articles/cross-tab-communication

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype#Methods
• semver http://semver.org/
• bower components http://sindresorhus.com/bower-components/
• require.js http://requirejs.org/docs/api.html
• AngularJS http://angularjs.org/
• bootstrap http://getbootstrap.com/components/

• https://github.com/KapIT/observe-shim/
• http://www.sitepoint.com/a-drag-and-drop-planning-board-with-html5/

AMP

• https://github.com/ampproject/amphtml/blob/master/DESIGN_PRINCIPLES.md

libs

• https://github.com/danielstjules/pattern-emitter/
• https://github.com/artnez/urltree
• https://github.com/sentientwaffle/llquantize
• https://github.com/ahultgren/hamster