{"id":18256912,"url":"https://github.com/mediacomem/comem-masrad-dfa","last_synced_at":"2025-09-12T18:25:04.009Z","repository":{"id":17117279,"uuid":"79109078","full_name":"MediaComem/comem-masrad-dfa","owner":"MediaComem","description":"MAS-RAD DFA course","archived":false,"fork":false,"pushed_at":"2023-10-07T17:58:45.000Z","size":24429,"stargazers_count":2,"open_issues_count":3,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-20T16:52:19.052Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mediacomem.github.io/comem-masrad-dfa/latest/","language":"JavaScript","has_issues":false,"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/MediaComem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-16T10:46:17.000Z","updated_at":"2021-11-05T16:01:17.000Z","dependencies_parsed_at":"2023-01-11T20:25:55.805Z","dependency_job_id":null,"html_url":"https://github.com/MediaComem/comem-masrad-dfa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MediaComem%2Fcomem-masrad-dfa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MediaComem","download_url":"https://codeload.github.com/MediaComem/comem-masrad-dfa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247229121,"owners_count":20904986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-05T10:24:06.798Z","updated_at":"2025-04-04T18:30:46.222Z","avatar_url":"https://github.com/MediaComem.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MAS-RAD | CAS-DAR | Advanced Front-end Development (DFA)\r\n\r\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\r\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\r\n\r\n- [Prerequisite](#prerequisite)\r\n- [Plan](#plan)\r\n- [Additional concepts and tools](#additional-concepts-and-tools)\r\n- [Documentation](#documentation)\r\n- [Useful links](#useful-links)\r\n\r\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\r\n\r\nThe goal of this course is to discover concepts and tools to organize the front-end side of a web application and enrich the user interface/experience according to current good practices.\r\n\r\nYou will:\r\n\r\n- learn how to make good use of a CSS framework to build a responsive HTML user interface\r\n- learn (or review) how to manipulate the DOM API with or without a library\r\n- learn how to manage asynchronous communications with a Web API on the back end\r\n- learn how the use of a framework does help to organize the front-end code of a single page application\r\n- be introduced to frameworks that help you develop and build your web application for multiple devices\r\n\r\n_This course uses subjects from or based on [COMEM+][comem] [architecture \u0026 deployment][comem-archidep], [web-oriented architecture][comem-archioweb] and [mobile development][comem-devmobil] courses taught to students of [Media Engineering][im] at [HEIG-VD][heig]._\r\n\r\n## Prerequisite\r\n\r\n- Basics of HTML, CSS and JavaScript\r\n- Use of [command line][cli]\r\n- Use of [Git][git], [Git branching][git-b] and [Collaborating with Git on GitHub][collab]\r\n\r\n## Plan\r\n\r\n- ✔ [Introduction][dfa]\r\n- ✔ [Setting up your environment][setup]\r\n\r\n- Bootstrap\r\n  - ✔ [Getting started][bb]\r\n  - ✔ [Layout management][blm] ([practice][bex])\r\n\r\n- JavaScript\r\n  - ✔ [Basics and more][js-bas]\r\n\r\n- DOM Manipulation\r\n  - ✔ [With JavaScript][js-dom]\r\n  - ✔ [With jQuery][jq-dom]\r\n\r\n- Web Service and asynchronous operations\r\n  - ✔ [RESTful APIs][rest]\r\n  - ✔ [Basic Promises][js-prom-basic]\r\n  - ✔ [Observables with Rxjs][rxjs]\r\n\r\n- ✔ [Modular JavaScript][js-modules] (✔ [practice][js-mod-practice])\r\n\r\n- ✔ [TypeScript][ts]\r\n\r\n- Angular\r\n  - ✔ [Angular CLI][ng-cli]\r\n  - ✔ [Getting started][ng]\r\n  - [Angular Forms][ng-forms]\r\n  - ✔ [Hands-On exercise][ng-exercise]\r\n\r\n  - ✔ [Navigation \u0026 Routing][ng-router]\r\n\r\n- ✔ [Project Starter][project-starter]\r\n\r\n- Geolocation \u0026 map features\r\n  - ✔ [Geolocation][geo-api]\r\n  - ✔ [Angular Leaflet][ng-leaflet]\r\n\r\n## Additional concepts and tools\r\n\r\n- ✔ [Code and architecture principles][code-principles]\r\n\r\n- ✔ [Node Package Manager (npm)][npm]\r\n\r\n- ✔ [JavaScript Closures][js-clos]\r\n- ✔ [JavaScript Prototypes][js-prot]\r\n- ✔ [JavaScript ES6 Classes][js-classes]\r\n\r\n- ✔ [Advanced Promises][js-prom]\r\n\r\n- ✔ [SOP \u0026 CORS][sop-cors]\r\n\r\n## Documentation\r\n\r\n- ✔ [Travel Log API][travel-log-api-docs]\r\n\r\n## Useful links\r\n\r\n- ✔ [REST demonstration API][rest-demo] (implementation \u0026 docs source) used in the RESTful APIs exercise\r\n\r\n[angular-leafet]: https://mediacomem.github.io/comem-archidep/latest/subjects/angular-leaflet/\r\n[api-call]: ./subjects/api-call\r\n[bb]: ./subjects/bootstrap\r\n[blm]: ./subjects/bootstrap-layout-management\r\n[bex]: ./subjects/bootstrap-practice\r\n[cli]: https://mediacomem.github.io/comem-archidep/latest/subjects/cli/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[code-principles]: https://tazaf.github.io/heig-mdt-gio1/latest/subjects/basic-principles/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[comem]: http://www.heig-vd.ch/comem\r\n[comem-archioweb]: https://mediacomem.github.io/comem-archioweb/latest/\r\n[comem-archidep]: https://mediacomem.github.io/comem-archidep/latest/\r\n[comem-devmobil]: https://mediacomem.github.io/comem-devmobil/latest/\r\n[collab]: https://mediacomem.github.io/comem-archidep/latest/subjects/git-collaborating?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[dfa]: ./subjects/intro\r\n[git]: https://mediacomem.github.io/comem-archidep/latest/subjects/git/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[git-b]: https://mediacomem.github.io/comem-archidep/latest/subjects/git-branching?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[geo-api]: ./subjects/geolocation/\r\n[heig]: http://www.heig-vd.ch\r\n[im]: https://heig-vd.ch/formations/bachelor/filieres/ingenierie-des-medias\r\n[jq-dom]: ./subjects/jquery-dom\r\n[js-ajax]: ./subjects/js-ajax\r\n[js-bas]: ./subjects/js\r\n[js-classes]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-classes/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[js-clos]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-closures/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[js-dom]: ./subjects/js-dom\r\n[js-mod-practice]: https://github.com/Tazaf/masrad-dfa-js-module-practice\r\n[js-modules]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-modules?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[js-prom]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-promises/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[js-prom-basic]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-promises-basics/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[js-prot]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-prototypes/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[mapbox]: https://www.mapbox.com/mapbox.js/api/v3.0.1/\r\n[ng]: ./subjects/angular\r\n[ng-cli]: ./subjects/angular-cli\r\n[ng-bootstrap]: ./subjects/angular-ui-bootstrap\r\n[ng-exercise]: https://github.com/Tazaf/masrad-dfa-angular-starter-practice\r\n[ng-forms]: ./subjects/angular-forms\r\n[ng-leaflet]: ./subjects/angular-leaflet\r\n[ng-router]: ./subjects/angular-routing\r\n[ng-starter]: ./subjects/angular-auth-starter/\r\n[ng-ui-router]: ./subjects/angular-ui-router\r\n[ng-ui-router-exercise]: https://github.com/MediaComem/comem-webdev-angular-ui-router-exercise\r\n[npm]: https://mediacomem.github.io/comem-archioweb/latest/subjects/npm/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[project-starter]: https://github.com/Tazaf/masrad-project-starter\r\n[rest]: https://mediacomem.github.io/comem-archioweb/latest/subjects/rest/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[rest-demo]: https://github.com/MediaComem/comem-webdev-express-rest-demo\r\n[rxjs]: https://mediacomem.github.io/comem-devmobil/latest/subjects/rxjs/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n[setup]: ./subjects/setup\r\n[sop-cors]: ./subjects/sop-cors\r\n[travel-log-api-docs]: https://demo-travel-log-api.onrender.com/\r\n[ts]: https://mediacomem.github.io/comem-devmobil/latest/subjects/ts/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmediacomem%2Fcomem-masrad-dfa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmediacomem%2Fcomem-masrad-dfa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmediacomem%2Fcomem-masrad-dfa/lists"}