├── .gitignore ├── .travis.yml ├── package.json ├── readme.md ├── src ├── Interfaces │ └── index.ts ├── index.html ├── main.scss ├── main.ts ├── modules │ ├── filters.ts │ ├── formatters.ts │ └── graph.ts └── technologies.json ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .idea 4 | dist -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | script: 5 | - yarn install --silent 6 | - npm run build 7 | cache: yarn 8 | deploy: 9 | provider: pages 10 | skip-cleanup: true 11 | github-token: $GITHUB_TOKEN 12 | keep-history: true 13 | local-dir: dist 14 | on: 15 | branch: master -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "map", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "repository": "git@github.com:Grafikart/dev-map.git", 6 | "author": "Jonathan Boyer ", 7 | "license": "MIT", 8 | "scripts": { 9 | "dev": "npx parcel src/index.html --out-dir docs/", 10 | "build": "rm -rf dist && npx parcel build src/index.html --no-source-maps --public-url /dev-map/ --log-level 2 && cp src/technologies.json dist/technologies.json" 11 | }, 12 | "devDependencies": { 13 | "node-sass": "^4.9.0", 14 | "parcel-bundler": "^1.9.1", 15 | "typescript": "^2.9.2" 16 | }, 17 | "dependencies": { 18 | "@types/d3": "^5.0.0", 19 | "d3": "^5.5.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Carte d'apprentissage 2 | 3 | Ce dépôt est un "proof of concept" pour une représentation de l'apprentissage informatique. L'objectif est de montrer rapidement les technologies à apprendre pour un objectif précis 4 | 5 | [Demo live](https://grafikart.github.io/dev-map/) (ne surtout pas ouvrir avec l'inspecteur ouvert) 6 | 7 | ## 👬 Participer 8 | 9 | Si vous le souhaitez vous pouvez participer à ce projet de plusieurs façons : 10 | 11 | - En améliorant le système de rendu en jouant avec le typescript et la librairie d3.js (ou le CSS) 12 | - En proposant de nouveaux noeuds dans le graph en modifiant le fichier `technologies.json` 13 | 14 | ## 💡 Idées 15 | 16 | Je mets ici certaines idées que je ne suis pas sûr de réaliser (à voir l'impact en terme de temps). Vous pouvez aussi en proposer d'autres en faisant une PR. 17 | 18 | - Avoir une sidebar qui se déplie lorsque l'on clique sur une langage / techno 19 | -------------------------------------------------------------------------------- /src/Interfaces/index.ts: -------------------------------------------------------------------------------- 1 | import { SimulationNodeDatum } from 'd3-force' 2 | 3 | export interface ITutorial { 4 | name: string 5 | url: string 6 | } 7 | 8 | export interface ITechnology { 9 | name: string, 10 | type: string, 11 | desc: string, 12 | require: string[] 13 | tutorials?: ITutorial[], 14 | } 15 | 16 | export interface IJobs { 17 | [name: string]: string[] 18 | } 19 | 20 | export interface IData { 21 | technologies: ITechnology[] 22 | jobs: IJobs 23 | } 24 | 25 | export interface INode extends SimulationNodeDatum{ 26 | name: string, 27 | type: string, 28 | desc: string 29 | } 30 | 31 | export interface ILink { 32 | source: INode, 33 | target: INode 34 | } 35 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Carte d'apprentissage 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 |
15 | Carrières : 16 |
17 |
18 | Voir sur github 19 |
20 |
21 | Point de départ 22 |
23 |
24 | Langage 25 |
26 |
27 | Outil 28 |
29 |
30 | Framework 31 |
32 |
33 | Librarie 34 |
35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/main.scss: -------------------------------------------------------------------------------- 1 | $node: #294a66; 2 | $colors: language #ff5f5f, tool #0060ca, framework #6a9c78; 3 | 4 | body, html { 5 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 6 | margin: 0; 7 | padding: 0; 8 | background-color: #f0f6ff; 9 | color: #617182; 10 | overflow: hidden; 11 | } 12 | 13 | /* HEADER 14 | ========================================================================== */ 15 | .header { 16 | height: 4rem; 17 | background-color: #fff; 18 | box-shadow: 0 1px 1px 1px #126ad31a; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | right: 0; 23 | padding: 0 30px; 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | .header__jobs { 29 | margin-left: auto; 30 | 31 | a { 32 | cursor: pointer; 33 | } 34 | 35 | a::after { 36 | content: '|'; 37 | margin-left: 10px; 38 | margin-right: 10px; 39 | opacity: .5; 40 | } 41 | 42 | a:last-child::after { 43 | display: none; 44 | } 45 | 46 | a:hover { 47 | text-decoration: underline; 48 | } 49 | 50 | a.is-active { 51 | font-weight: bold; 52 | } 53 | } 54 | 55 | .header__search { 56 | padding: 11px 10px; 57 | border: solid 1px #dfe7f3; 58 | } 59 | 60 | .header__btn { 61 | background-color: #6861c3; 62 | border: 1px solid #6861c3; 63 | color: #fff; 64 | text-align: center; 65 | white-space: nowrap; 66 | user-select: none; 67 | padding: 8px 20px; 68 | font-size: .875rem; 69 | border-top-right-radius: .25rem; 70 | border-bottom-right-radius: .25rem; 71 | height: 38px; 72 | vertical-align: middle; 73 | font-weight: 300; 74 | transition: box-shadow .3s ease; 75 | cursor: pointer; 76 | 77 | &:hover { 78 | box-shadow: 0 5px 10px #736cc766; 79 | } 80 | } 81 | 82 | /* Footer 83 | ========================================================================== */ 84 | .footer { 85 | position: absolute; 86 | bottom: 10px; 87 | right: 30px; 88 | } 89 | 90 | .footer__legend { 91 | display: inline-block; 92 | margin-left: 10px; 93 | &::before { 94 | content: ''; 95 | display: inline-block; 96 | vertical-align: middle; 97 | background-color: $node; 98 | color: darken($node, 15); 99 | width: 20px; 100 | height: 5px; 101 | border: 1px solid darken($node, 15); 102 | } 103 | } 104 | 105 | @each $color in $colors { 106 | .footer__legend.is-#{nth($color, 1)}::before { 107 | background-color: nth($color, 2); 108 | border-color: darken(nth($color, 2), 15); 109 | color: darken(nth($color, 2), 15); 110 | } 111 | } 112 | 113 | .footer__legend.is-root::before { 114 | background-color: #000; 115 | border-color: #000; 116 | color: #000; 117 | } 118 | 119 | .link { 120 | position: absolute; 121 | color: inherit; 122 | bottom: 10px; 123 | left: 30px; 124 | 125 | &:hover { 126 | text-decoration: none; 127 | } 128 | } 129 | 130 | /* Graph 131 | ========================================================================== */ 132 | .node { 133 | cursor: pointer; 134 | } 135 | 136 | .ring { 137 | fill: #6ac6ff; 138 | opacity: 0; 139 | stroke-width: 2px; 140 | } 141 | 142 | .node:hover .ring { 143 | opacity: 0.3; 144 | } 145 | 146 | .outline { 147 | fill: $node; 148 | stroke-width: 2px; 149 | stroke: darken($node, 15); 150 | } 151 | 152 | @each $color in $colors { 153 | .node-#{nth($color, 1)} .outline { 154 | fill: nth($color, 2); 155 | stroke-width: 2px; 156 | stroke: darken(nth($color, 2), 15); 157 | } 158 | } 159 | 160 | .node-source .outline { 161 | fill: #000; 162 | stroke-width: 2px; 163 | stroke: #000; 164 | } 165 | 166 | .links line { 167 | stroke: #777; 168 | stroke-width: 2px; 169 | } 170 | 171 | svg { 172 | cursor: all-scroll; 173 | } 174 | 175 | div.tooltip { 176 | position: absolute; 177 | text-align: center; 178 | color: black; 179 | width: 160px; 180 | height: auto; 181 | padding: 5px; 182 | font: 12px sans-serif; 183 | background: rgba(#f0f6ff, .9); 184 | border: 1px solid grey; 185 | border-radius: 8px; 186 | pointer-events: none; 187 | transform: translate3d(-50%, -100%, 0); 188 | } 189 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import data from './technologies.json' 2 | import * as d3 from 'd3' 3 | import { dataToLinks, dataToNodes } from './modules/formatters' 4 | import { ILink, INode } from './Interfaces' 5 | import { nodesWithDependencies } from './modules/filters' 6 | import Graph from './modules/graph' 7 | 8 | const baseNodes = dataToNodes(data) 9 | const baseLinks = dataToLinks(data, baseNodes) 10 | 11 | let graph = new Graph(baseNodes, baseLinks) 12 | graph.onNodeClick(node => { 13 | let evolutions = baseLinks.filter(link => link.target === node).map(link => link.source.name) 14 | graph.build(nodesWithDependencies([node.name, ...evolutions], baseNodes, baseLinks)) 15 | }) 16 | graph.build() 17 | 18 | // Jobs shortcut 19 | const $jobs = document.querySelector('#js-jobs') as HTMLElement 20 | let $activeJob: HTMLElement|null = null 21 | Object.keys(data.jobs).forEach(function (name) { 22 | let $a = document.createElement('a') 23 | $a.innerHTML = name 24 | $a.addEventListener('click', function () { 25 | if ($activeJob) { 26 | $activeJob.classList.remove('is-active') 27 | } 28 | graph.build(nodesWithDependencies(data.jobs[name], baseNodes, baseLinks)) 29 | $activeJob = $a 30 | $a.classList.add('is-active') 31 | }) 32 | $jobs.appendChild($a) 33 | }) 34 | 35 | // Search a technology 36 | const $form = document.querySelector('#js-form') as HTMLFormElement 37 | $form.addEventListener('submit', function (e): void { 38 | e.preventDefault() 39 | let q = new FormData($form).get('q') as string 40 | if (q === '') { 41 | return graph.build() 42 | } 43 | let node = baseNodes.find(node => node.name.toLowerCase() === q.toLowerCase()) 44 | if (node === undefined) { 45 | return alert('No technology match "' + q + '"') 46 | } 47 | graph.build(nodesWithDependencies([node.name], baseNodes, baseLinks)) 48 | }) 49 | 50 | if (module.hot) { 51 | module.hot.accept(function () { 52 | window.location.reload() 53 | }) 54 | } 55 | -------------------------------------------------------------------------------- /src/modules/filters.ts: -------------------------------------------------------------------------------- 1 | import { ILink, INode } from '../Interfaces' 2 | 3 | interface INodesLinks { 4 | nodes: INode[], 5 | links: ILink[] 6 | } 7 | 8 | /** 9 | * Find all dependencies for a Node 10 | * @param {INode} node 11 | * @param {ILink[]} links 12 | * @param {INode[]} dependencies 13 | * @return {INode[]} 14 | */ 15 | const getDependencies = function (node: INode, links: ILink[], dependencies: INode[] = []): INode[] { 16 | let requirements = links 17 | .filter(link => link.source.name === node.name) 18 | .map(link => link.target) 19 | if (requirements.length === 0) { 20 | return dependencies 21 | } 22 | dependencies = [...dependencies, ...requirements] 23 | requirements.forEach(requirement => { 24 | dependencies = getDependencies(requirement, links, dependencies) 25 | }) 26 | return dependencies 27 | } 28 | 29 | /** 30 | * Extract Nodes and Links form a list 31 | * @param {string[]} names 32 | * @param {INode[]} nodes 33 | * @param {ILink[]} links 34 | * @return {INodesLinks} 35 | */ 36 | export const nodesWithDependencies = function (names: string[], nodes: INode[], links: ILink[]): INode[] { 37 | let filteredNodes = nodes.filter(node => names.includes(node.name)) 38 | filteredNodes.forEach(node => { 39 | filteredNodes = [...filteredNodes, ...getDependencies(node, links)] 40 | }) 41 | return Array.from(new Set(filteredNodes)) 42 | } 43 | -------------------------------------------------------------------------------- /src/modules/formatters.ts: -------------------------------------------------------------------------------- 1 | import { IData, ILink, INode } from '../Interfaces' 2 | 3 | export const dataToNodes = function (data: IData): INode[] { 4 | return data.technologies.map(function (tech) { 5 | return { 6 | name: tech.name, 7 | type: tech.type, 8 | desc: tech.desc 9 | } 10 | }) 11 | } 12 | 13 | export const dataToLinks = function (data: IData, nodes: INode[]): ILink[] { 14 | let links: ILink[] = [] 15 | data.technologies.forEach(function (tech) { 16 | tech.require.forEach(function (requirement) { 17 | links.push({ 18 | source: nodes.find(node => node.name === tech.name), 19 | target: nodes.find(node => node.name === requirement) 20 | }) 21 | }) 22 | }) 23 | return links 24 | } 25 | -------------------------------------------------------------------------------- /src/modules/graph.ts: -------------------------------------------------------------------------------- 1 | import { ILink, INode } from '../Interfaces' 2 | import * as d3 from 'd3' 3 | import { Selection, Simulation, SimulationLinkDatum, ZoomBehavior } from 'd3' 4 | 5 | export default class Graph { 6 | 7 | private radius = 25 8 | private nodes: INode[] = [] 9 | private links: ILink[] = [] 10 | private svg: Selection 11 | private linkGroup: Selection 12 | private nodeGroup: Selection 13 | private simulation: Simulation 14 | private zoom: ZoomBehavior 15 | private events: { 16 | [type: string]: (node: INode) => void 17 | } = {} 18 | 19 | constructor (nodes: INode[], links: ILink[]) { 20 | this.links = links 21 | this.nodes = nodes 22 | 23 | this.svg = d3.select('body').append('svg') 24 | .attr('width', window.innerWidth) 25 | .attr('height', window.innerHeight) 26 | 27 | window.addEventListener('resize', () => { 28 | this.svg 29 | .attr('width', window.innerWidth) 30 | .attr('height', window.innerHeight) 31 | this.simulation.force('center', d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2)) 32 | }) 33 | 34 | this.svg.append('svg:defs').append('svg:marker') 35 | .attr('id', 'triangle') 36 | .attr('refX', 20) 37 | .attr('refY', 3) 38 | .attr('markerWidth', 30) 39 | .attr('markerHeight', 30) 40 | .attr('orient', 'auto') 41 | .append('path') 42 | .attr('d', 'M 0 0 6 3 0 6 0 3') 43 | .style('fill', 'black') 44 | 45 | this.linkGroup = this.svg.append('g').attr('class', 'links') 46 | this.nodeGroup = this.svg.append('g').attr('class', 'nodes') 47 | 48 | this.zoom = d3.zoom().on('zoom', () => { 49 | this.nodeGroup.attr('transform', d3.event.transform) 50 | this.linkGroup.attr('transform', d3.event.transform) 51 | }) 52 | 53 | this.simulation = d3 54 | .forceSimulation() 55 | .force('charge', d3.forceManyBody().strength(-200)) 56 | .force('center', d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2)) 57 | .force('radial', d3.forceRadial(100, window.innerWidth / 2, window.innerHeight / 2).strength(node => { 58 | return this.isSource(node) ? 0.1 : 0 59 | })) 60 | .force('collision', d3.forceCollide(this.radiusGenerator())) 61 | .force('link', d3.forceLink() 62 | .id((node: INode) => node.name) 63 | .distance(this.radiusGenerator(50)) 64 | .strength(0.2) 65 | ) 66 | } 67 | 68 | /**! 69 | * Build the graph and restart the simulation 70 | * @param {INode[]} nodes 71 | * @param {ILink[]} links 72 | */ 73 | public build (nodes: INode[] = this.nodes) { 74 | let links = this.links.filter(link => nodes.includes(link.source) && nodes.includes(link.target)) 75 | let linkElements = this.linkGroup 76 | .selectAll('line') 77 | .data(links, (link: ILink) => link.source.name + link.target.name) 78 | linkElements.exit().remove() 79 | linkElements = linkElements 80 | .enter().append('line') 81 | .attr('marker-end', 'url(#triangle)') 82 | .merge(linkElements) 83 | let div = d3.select('body') 84 | .append('div') 85 | .attr('class', 'tooltip') 86 | .style('opacity', 0) 87 | let nodeElements = this.nodeGroup 88 | .selectAll('g') 89 | .data(nodes, (node: INode) => node.name) 90 | nodeElements.exit().remove() 91 | nodeElements = nodeElements 92 | .enter() 93 | .append('g') 94 | .attr('class', node => 'node node-' + node.type + (this.isSource(node) ? ' node-source' : '')) 95 | .merge(nodeElements) 96 | nodeElements 97 | .append('circle') 98 | .attr('r', this.radiusGenerator(10)) 99 | .attr('class', 'ring') 100 | nodeElements 101 | .append('circle') 102 | .attr('r', this.radiusGenerator()) 103 | .attr('class', 'outline') 104 | nodeElements 105 | .append('text') 106 | .text(node => node.name) 107 | .attr('pointer-event', 'none') 108 | .attr('fill', '#FFFFFF') 109 | .attr('font-size', '10px') 110 | .attr('text-anchor', 'middle') 111 | .attr('dy', 4) 112 | nodeElements 113 | .on('mouseover', (node) => { 114 | if (node.desc !== null) { 115 | div.transition() 116 | .duration(200) 117 | .style('opacity', 1) 118 | div.html(node.desc) 119 | .style('left', (d3.event.pageX) + 'px') 120 | .style('top', (d3.event.pageY - 10) + 'px'); 121 | } 122 | }) 123 | nodeElements 124 | .on('mouseout', (node) => { 125 | div.transition() 126 | .duration(200) 127 | .style('opacity', 0) 128 | }) 129 | let onClickCb = () => { 130 | this.events['click'] 131 | } 132 | if (this.events['click'] !== undefined) { 133 | nodeElements 134 | .on('click', (data) => { 135 | div.remove() 136 | this.events['click'](data) 137 | }) 138 | } 139 | // Let's simulate 140 | this.simulation.alphaDecay(0.0228) 141 | this.simulation.nodes(nodes).on('tick', () => { 142 | nodeElements 143 | .attr('style', node => `transform: translate3d(${node.x}px, ${node.y}px, 0)`) 144 | linkElements 145 | .attr('x1', link => link.target.x) 146 | .attr('y1', link => link.target.y) 147 | .attr('x2', link => link.source.x) 148 | .attr('y2', link => link.source.y) 149 | }) 150 | this.simulation.force('link').links(links) 151 | // If a filter is active increase the radial force 152 | if (nodes !== this.nodes) { 153 | this.simulation.force('radial').strength(node => { 154 | return this.isSourceOrIsolated(node) ? 0.01 : 0 155 | }) 156 | } 157 | if (this.simulation.alpha() !== 1) { 158 | this.simulation.alpha(1).alphaTarget(0).restart() 159 | } 160 | // Reset the view 161 | this.svg 162 | .transition() 163 | .duration(1000) 164 | .call(this.zoom.transform, d3.zoomIdentity 165 | .translate(0, 0) 166 | .scale(1) 167 | ).on('end', () => { 168 | this.svg.call(this.zoom) 169 | }) 170 | 171 | const dragDrop = d3.drag() 172 | .on('start', node => { 173 | node.fx = node.x 174 | node.fy = node.y 175 | }) 176 | .on('drag', node => { 177 | this.simulation.alphaTarget(0.7).restart() 178 | node.fx = d3.event.x 179 | node.fy = d3.event.y 180 | }) 181 | .on('end', node => { 182 | if (!d3.event.active) { 183 | this.simulation.alphaTarget(0) 184 | } 185 | node.fx = null 186 | node.fy = null 187 | }) 188 | 189 | nodeElements.call(dragDrop) 190 | } 191 | 192 | /** 193 | * @param {(node: INode) => void} cb 194 | */ 195 | public onNodeClick (cb: (node: INode) => void) { 196 | this.events['click'] = cb 197 | } 198 | 199 | /** 200 | * Is the node a source node (no requirements) 201 | * @param {INode} node 202 | * @return {boolean} 203 | */ 204 | private isSource (node: INode): boolean { 205 | return this.isSourceOrIsolated(node) && this.links.find(link => link.target === node) !== undefined 206 | } 207 | 208 | /** 209 | * Is the node a source node (no requirements) 210 | * @param {INode} node 211 | * @return {boolean} 212 | */ 213 | private isSourceOrIsolated (node: INode): boolean { 214 | return this.links.find(link => link.source === node) === undefined 215 | } 216 | 217 | /** 218 | * @param {number} incr 219 | * @return {(node: any) => number} 220 | */ 221 | private radiusGenerator (incr = 0) { 222 | return (node: any): number => { 223 | let ratio = 1 224 | if (node.type === 'language') 225 | ratio = 1.2 226 | if (this.isSource(node)) 227 | ratio = 1.5 228 | return this.radius * ratio + incr 229 | } 230 | } 231 | } 232 | -------------------------------------------------------------------------------- /src/technologies.json: -------------------------------------------------------------------------------- 1 | { 2 | "jobs": { 3 | "Développeur Front-End": [ 4 | "HTML", 5 | "JavaScript", 6 | "SASS", 7 | "Webpack", 8 | "Git", 9 | "FTP", 10 | "Photoshop" 11 | ], 12 | "Développeur Back-end Symfony": [ 13 | "Symfony", 14 | "Unix", 15 | "Git", 16 | "FTP", 17 | "SSH" 18 | ], 19 | "Développeur WordPress": [ 20 | "WordPress", 21 | "FTP", 22 | "SQL", 23 | "CSS", 24 | "SSH" 25 | ] 26 | }, 27 | "technologies": [ 28 | { 29 | "name": "SASS", 30 | "type": "language", 31 | "tutorials": [ 32 | { 33 | "name": "CSS Maintenable avec SASS et Compass", 34 | "url": "https://www.grafikart.fr/formations/sass-compass" 35 | } 36 | ], 37 | "desc": "Syntactically Awesome StyleSheets est un langage de génération de feuilles de style", 38 | "require": [ 39 | "CSS" 40 | ] 41 | }, 42 | { 43 | "name": "postfix", 44 | "type": "tool", 45 | "desc": "Postfix est un serveur de messagerie électronique", 46 | "require": [ 47 | "Unix" 48 | ] 49 | }, 50 | { 51 | "name": "Jade", 52 | "type": "language", 53 | "desc": "Jade est un moteur de template pour node", 54 | "require": [ 55 | "HTML" 56 | ] 57 | }, 58 | { 59 | "name": "mjml", 60 | "type": "language", 61 | "desc": "MJML est un language de développement d'email responsive", 62 | "require": [ 63 | "HTML" 64 | ] 65 | }, 66 | { 67 | "name": "Debian", 68 | "type": "tool", 69 | "desc": "Debian est un système d'exploitation et une distribution de logiciels libres", 70 | "require": [ 71 | "Unix" 72 | ] 73 | }, 74 | { 75 | "name": "Antergos", 76 | "type": "tool", 77 | "desc": "Antergos est une distribution Linux basée sur ArchLinux", 78 | "require": [] 79 | }, 80 | { 81 | "name": "PHPUnit", 82 | "type": "tool", 83 | "desc": "PHPUnit est un framework open source de tests unitaires dédié au langage de programmation PHP", 84 | "require": [ 85 | "PHP" 86 | ] 87 | }, 88 | { 89 | "name": "Capistrano", 90 | "type": "tool", 91 | "desc": "Capistrano est un outil open source pour exécuter des scripts sur plusieurs serveurs", 92 | "require": [ 93 | "Ruby" 94 | ] 95 | }, 96 | { 97 | "name": "Composer", 98 | "type": "tool", 99 | "desc": "Composer est un gestionnaire de dépendances libre écrit en PHP", 100 | "require": [ 101 | "PHP" 102 | ] 103 | }, 104 | { 105 | "name": "Sublime Text", 106 | "type": "tool", 107 | "desc": "Sublime Text est un éditeur de texte", 108 | "require": [] 109 | }, 110 | { 111 | "name": "Fail2ban", 112 | "type": "tool", 113 | "desc": "Fail2ban est un framework de prévention contre les intrusions, écrit en Python", 114 | "require": [ 115 | "Unix" 116 | ] 117 | }, 118 | { 119 | "name": "Windows", 120 | "type": "tool", 121 | "desc": "Windows, c'est Windows ! :-)", 122 | "require": [] 123 | }, 124 | { 125 | "name": "XML", 126 | "type": "language", 127 | "desc": "XML ou eXtensible Markup Language est un langage informatique de balisage générique", 128 | "require": [] 129 | }, 130 | { 131 | "name": "Xdebug", 132 | "type": "tool", 133 | "desc": "Xdebug est une extension pour PHP apportant des fonctions de débogage et de profilage", 134 | "require": [ 135 | "PHP" 136 | ] 137 | }, 138 | { 139 | "name": "WordPress", 140 | "type": "framework", 141 | "desc": "WordPress est un système de gestion de contenu gratuit, libre et open-source", 142 | "require": [ 143 | "PHP" 144 | ] 145 | }, 146 | { 147 | "name": "Twig", 148 | "type": "language", 149 | "desc": "Twig est un moteur de templates pour le langage de programmation PHP", 150 | "require": [ 151 | "Composer", 152 | "PHP" 153 | ] 154 | }, 155 | { 156 | "name": "VueRouter", 157 | "type": "library", 158 | "desc": "VueRouter est un routeur pour les outils VueJS", 159 | "require": [ 160 | "VueJS" 161 | ] 162 | }, 163 | { 164 | "name": "VueResource", 165 | "type": "library", 166 | "desc": "VueResource est un client HTTP pour VueJS", 167 | "require": [ 168 | "VueJS" 169 | ] 170 | }, 171 | { 172 | "name": "NodeWebkit", 173 | "type": "library", 174 | "desc": "Node Webkit est un moteur d'éxécution basé sur Chromium et NodeJS", 175 | "require": [ 176 | "NodeJS" 177 | ] 178 | }, 179 | { 180 | "name": "Illustrator", 181 | "type": "tool", 182 | "desc": "Illustrator est un logiciel de création graphique vectorielle", 183 | "require": [] 184 | }, 185 | { 186 | "name": "CSS", 187 | "type": "language", 188 | "desc": "Les feuilles de style en cascade1, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML", 189 | "require": [ 190 | "HTML" 191 | ] 192 | }, 193 | { 194 | "name": "jQuery UI", 195 | "type": "library", 196 | "desc": "jQuery UI est une collection de widgets, effets visuels et thèmes implémentés avec jQuery, des feuilles de style en cascade, et du HTML", 197 | "require": [ 198 | "jQuery" 199 | ] 200 | }, 201 | { 202 | "name": "Cordova", 203 | "type": "framework", 204 | "desc": "Apache Cordova est un framework de développement mobile open-source", 205 | "require": [ 206 | "NodeJS", 207 | "JavaScript" 208 | ] 209 | }, 210 | { 211 | "name": "Ionic", 212 | "type": "framework", 213 | "description": "", 214 | "desc": null, 215 | "tutorials": [], 216 | "require": [ 217 | "TypeScript" 218 | ] 219 | }, 220 | { 221 | "name": "jQuery", 222 | "type": "library", 223 | "desc": "jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web", 224 | "require": [ 225 | "JavaScript" 226 | ] 227 | }, 228 | { 229 | "name": "NodeJS", 230 | "type": "tool", 231 | "desc": "Node.js est une plateforme logicielle libre et événementielle en JavaScript", 232 | "require": [ 233 | "JavaScript" 234 | ] 235 | }, 236 | { 237 | "name": "YAML", 238 | "type": "language", 239 | "desc": "YAML Ain't Markup Language dans sa version 1.1, est un format de représentation de données par sérialisation Unicode", 240 | "require": [] 241 | }, 242 | { 243 | "name": "Webpack", 244 | "type": "tool", 245 | "desc": "Webpack est un packager open-source pour JavaScript", 246 | "require": [ 247 | "NodeJS" 248 | ] 249 | }, 250 | { 251 | "name": "Google Chrome", 252 | "type": "tool", 253 | "desc": "Chrome est un navigateur web propriétaire développé par Google basé sur le projet libre Chromium", 254 | "require": [] 255 | }, 256 | { 257 | "name": "MobX", 258 | "type": "library", 259 | "desc": "MobX est une solution de gestion d'état simple et évolutive", 260 | "require": [ 261 | "JavaScript" 262 | ] 263 | }, 264 | { 265 | "name": "Goaccess", 266 | "type": "tool", 267 | "desc": "Kibana est un greffon de visualisation de données pour Elasticsearch", 268 | "require": [ 269 | "Unix" 270 | ] 271 | }, 272 | { 273 | "name": "Kibana", 274 | "type": "tool", 275 | "tutorials": [], 276 | "require": [ 277 | "Elasticsearch" 278 | ] 279 | }, 280 | { 281 | "name": "Materialize", 282 | "type": "framework", 283 | "desc": "Materialise est un framework CSS moderne et responsive basé sur Material Design by Google", 284 | "require": [ 285 | "CSS" 286 | ] 287 | }, 288 | { 289 | "name": "Yarn", 290 | "type": "tool", 291 | "desc": "Yarn est un gestionnaire de package pour JavaScript", 292 | "require": [ 293 | "NodeJS" 294 | ] 295 | }, 296 | { 297 | "name": "Foundation", 298 | "type": "framework", 299 | "desc": "Foundation est un framework CSS responsive", 300 | "require": [ 301 | "CSS" 302 | ] 303 | }, 304 | { 305 | "name": "Notepad++", 306 | "type": "tool", 307 | "desc": "Notepad++ est un éditeur de code source qui prend en charge plusieurs langages", 308 | "require": [] 309 | }, 310 | { 311 | "name": "Visual Studio Code", 312 | "type": "tool", 313 | "desc": "Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et OS X", 314 | "require": [] 315 | }, 316 | { 317 | "name": "IntelliJ IDEA", 318 | "type": "tool", 319 | "desc": "IntelliJ IDEA est un IDE Java commercial développé par JetBrains", 320 | "require": [] 321 | }, 322 | { 323 | "name": "PayPal", 324 | "type": "tool", 325 | "desc": "PayPal est un service de paiement en ligne qui permet de payer des achats, de recevoir des paiements, ou d’envoyer et de recevoir de l’argent", 326 | "require": [] 327 | }, 328 | { 329 | "name": "SSH", 330 | "type": "tool", 331 | "desc": "Secure Shell est à la fois un programme informatique et un protocole de communication sécurisé", 332 | "require": [ 333 | "Unix" 334 | ] 335 | }, 336 | { 337 | "name": "Ngrok", 338 | "type": "tool", 339 | "desc": "Ngrok est un outil qui va vous permettre de partager simplement votre environnement de développement local", 340 | "require": [] 341 | }, 342 | { 343 | "name": "InDesign", 344 | "type": "tool", 345 | "desc": "InDesign, développé par Adobe, est un logiciel spécialisé dans la création d'affiches, magazines, brochures, etc..", 346 | "tutorials": [], 347 | "require": [] 348 | }, 349 | { 350 | "name": "Chrome", 351 | "type": "tool", 352 | "desc": "Moteur de recherche développé par Google", 353 | "require": [] 354 | }, 355 | { 356 | "name": "Adobe Premiere Pro", 357 | "type": "tool", 358 | "desc": "Adobe Premiere Pro, anciennement appelé Adobe Premiere, est un logiciel de montage vidéo", 359 | "require": [] 360 | }, 361 | { 362 | "name": "MariaDB", 363 | "type": "tool", 364 | "desc": "MariaDB est un système de gestion de base de données édité sous licence GPL", 365 | "require": [ 366 | "SQL" 367 | ] 368 | }, 369 | { 370 | "name": "Less", 371 | "type": "language", 372 | "desc": "Less est un langage dynamique de génération de CSS conçu par Alexis Sellier", 373 | "require": [ 374 | "CSS" 375 | ] 376 | }, 377 | { 378 | "name": "Angular JS", 379 | "type": "framework", 380 | "desc": "AngularJS est un framework JavaScript libre et open source développé par Google", 381 | "require": [ 382 | "JavaScript" 383 | ] 384 | }, 385 | { 386 | "name": "Wordplate", 387 | "type": "framework", 388 | "desc": "Wordplate est un outil qui vous permet d'installer et de travailler avec Wordpress d'une manière plus organisée", 389 | "require": [ 390 | "WordPress" 391 | ] 392 | }, 393 | { 394 | "name": "Nginx", 395 | "type": "tool", 396 | "desc": "Nginx est un logiciel libre de serveur Web ainsi qu'un proxy inverse", 397 | "require": [ 398 | "Unix" 399 | ] 400 | }, 401 | { 402 | "name": "Yeoman", 403 | "type": "tool", 404 | "desc": null, 405 | "require": [ 406 | "NodeJS" 407 | ] 408 | }, 409 | { 410 | "name": "Grunt", 411 | "type": "tool", 412 | "desc": null, 413 | "require": [ 414 | "NodeJS" 415 | ] 416 | }, 417 | { 418 | "name": "VirtualBox", 419 | "type": "tool", 420 | "desc": "Oracle VM VirtualBox est un logiciel libre de virtualisation publié par Oracle.", 421 | "require": [] 422 | }, 423 | { 424 | "name": "Browserify", 425 | "type": "library", 426 | "desc": "Browserify est un outil permettant d'écrire des modules à la manière de NodeJS coté navigateur", 427 | "require": [ 428 | "NodeJS" 429 | ] 430 | }, 431 | { 432 | "name": "SVG", 433 | "type": "language", 434 | "desc": null, 435 | "require": [] 436 | }, 437 | { 438 | "name": "Photoshop", 439 | "type": "tool", 440 | "desc": null, 441 | "require": [] 442 | }, 443 | { 444 | "name": "Compass", 445 | "type": "library", 446 | "desc": null, 447 | "require": [ 448 | "SASS" 449 | ] 450 | }, 451 | { 452 | "name": "PHP", 453 | "type": "language", 454 | "desc": "PHP est un langage compilé à la volée. Il est très abordable et permet de créer un site dynamique simplement. ", 455 | "require": [ 456 | "Algorithmique", 457 | "HTML" 458 | ] 459 | }, 460 | { 461 | "name": "Meteor", 462 | "type": "framework", 463 | "desc": "Meteor est un framework NodeJS", 464 | "require": [ 465 | "NodeJS" 466 | ] 467 | }, 468 | { 469 | "name": "PostCSS", 470 | "type": "tool", 471 | "desc": null, 472 | "require": [ 473 | "CSS" 474 | ] 475 | }, 476 | { 477 | "name": "Slides.com", 478 | "type": "tool", 479 | "desc": "Slides.com est un outil permettant de créer des présentations sous forme de diapositives à la manière de PowerPoint", 480 | "require": [] 481 | }, 482 | { 483 | "name": "Zend Expressive", 484 | "type": "framework", 485 | "desc": "Zend Expressive est un micro framework PHP", 486 | "require": [ 487 | "Composer", 488 | "PHP" 489 | ] 490 | }, 491 | { 492 | "name": "Ruby", 493 | "type": "language", 494 | "desc": "Ruby est un langage de programmation interprété et orienté objet. C'est un langage que l'on retrouvera dans différents outils.", 495 | "require": [ 496 | "Algorithmique" 497 | ] 498 | }, 499 | { 500 | "name": "ufw", 501 | "type": "tool", 502 | "desc": null, 503 | "require": [ 504 | "Unix" 505 | ] 506 | }, 507 | { 508 | "name": "SEO", 509 | "type": "tool", 510 | "desc": null, 511 | "require": [ 512 | "HTML" 513 | ] 514 | }, 515 | { 516 | "name": "Python", 517 | "type": "language", 518 | "desc": "Python est un langage interprété orienté objet", 519 | "require": [ 520 | "Algorithmique" 521 | ] 522 | }, 523 | { 524 | "name": "Parcel", 525 | "type": "tool", 526 | "desc": null, 527 | "require": [ 528 | "NodeJS" 529 | ] 530 | }, 531 | { 532 | "name": "RSS", 533 | "type": "language", 534 | "desc": null, 535 | "require": [] 536 | }, 537 | { 538 | "name": "Flash", 539 | "type": "tool", 540 | "desc": null, 541 | "require": [] 542 | }, 543 | { 544 | "name": "i3wm", 545 | "type": "tool", 546 | "desc": null, 547 | "require": [ 548 | "Unix" 549 | ] 550 | }, 551 | { 552 | "name": "Docker", 553 | "type": "tool", 554 | "desc": null, 555 | "require": [ 556 | "Unix" 557 | ] 558 | }, 559 | { 560 | "name": "Elasticsearch", 561 | "type": "tool", 562 | "desc": null, 563 | "require": [ 564 | "Unix" 565 | ] 566 | }, 567 | { 568 | "name": "Bower", 569 | "type": "tool", 570 | "desc": null, 571 | "require": [ 572 | "NodeJS" 573 | ] 574 | }, 575 | { 576 | "name": "Redux", 577 | "type": "library", 578 | "desc": null, 579 | "require": [ 580 | "React" 581 | ] 582 | }, 583 | { 584 | "name": "lodash", 585 | "type": "library", 586 | "desc": null, 587 | "require": [ 588 | "JavaScript" 589 | ] 590 | }, 591 | { 592 | "name": "Postman", 593 | "type": "tool", 594 | "desc": null, 595 | "require": [] 596 | }, 597 | { 598 | "name": "FTP", 599 | "type": "tool", 600 | "desc": "File Transfer Protocol (protocole de transfert de fichier), ou FTP, est un protocole de communication destiné au partage de fichiers sur un réseau TCP/IP. ", 601 | "require": [] 602 | }, 603 | { 604 | "name": "Ansible", 605 | "type": "tool", 606 | "desc": null, 607 | "require": [ 608 | "Unix" 609 | ] 610 | }, 611 | { 612 | "name": "Logstash", 613 | "type": "tool", 614 | "desc": null, 615 | "require": [ 616 | "Unix" 617 | ] 618 | }, 619 | { 620 | "name": "Brackets", 621 | "type": "tool", 622 | "desc": "Brackets est un éditeur de texte développé par Adobe", 623 | "require": [] 624 | }, 625 | { 626 | "name": "VueX", 627 | "type": "library", 628 | "desc": "Vuex est une librairie pour VueJS permettant de gérer facilement vos states", 629 | "require": [ 630 | "VueJS" 631 | ] 632 | }, 633 | { 634 | "name": "DeepIn", 635 | "type": "tool", 636 | "desc": null, 637 | "require": [] 638 | }, 639 | { 640 | "name": "Ungit", 641 | "type": "tool", 642 | "desc": null, 643 | "require": [ 644 | "Git" 645 | ] 646 | }, 647 | { 648 | "name": "Gulp", 649 | "type": "tool", 650 | "desc": null, 651 | "require": [ 652 | "NodeJS" 653 | ] 654 | }, 655 | { 656 | "name": "React", 657 | "type": "library", 658 | "desc": null, 659 | "require": [ 660 | "JavaScript" 661 | ] 662 | }, 663 | { 664 | "name": "Redis", 665 | "type": "tool", 666 | "desc": null, 667 | "require": [ 668 | "Unix" 669 | ] 670 | }, 671 | { 672 | "name": "Markdown", 673 | "type": "language", 674 | "desc": null, 675 | "require": [ 676 | "HTML" 677 | ] 678 | }, 679 | { 680 | "name": "Slim", 681 | "type": "framework", 682 | "desc": "Slim est un micro framework PHP", 683 | "tutorials": [], 684 | "require": [ 685 | "Composer", 686 | "PHP" 687 | ] 688 | }, 689 | { 690 | "name": "Lumen", 691 | "type": "framework", 692 | "desc": "Lumen est un micro framework PHP inspiré de Laravel", 693 | "tutorials": [], 694 | "require": [ 695 | "PHP", 696 | "Composer" 697 | ] 698 | }, 699 | { 700 | "name": "Laravel", 701 | "type": "framework", 702 | "desc": "Framework php très populaire pour le développement d'applications web", 703 | "tutorials": [], 704 | "require": [ 705 | "PHP", 706 | "Composer" 707 | ] 708 | }, 709 | { 710 | "name": "Babel", 711 | "type": "tool", 712 | "desc": null, 713 | "require": [ 714 | "JavaScript", 715 | "NodeJS" 716 | ] 717 | }, 718 | { 719 | "name": "Travis CI", 720 | "type": "tool", 721 | "desc": null, 722 | "require": [ 723 | "Unix", 724 | "Git" 725 | ] 726 | }, 727 | { 728 | "name": "Titanium", 729 | "type": "library", 730 | "desc": null, 731 | "require": [ 732 | "JavaScript" 733 | ] 734 | }, 735 | { 736 | "name": "Affinity Designer", 737 | "type": "tool", 738 | "desc": null, 739 | "require": [] 740 | }, 741 | { 742 | "name": "Atom", 743 | "type": "tool", 744 | "desc": "Atom est un éditeur de texte développé par Github", 745 | "require": [] 746 | }, 747 | { 748 | "name": "WebRTC", 749 | "type": "framework", 750 | "desc": null, 751 | "require": [] 752 | }, 753 | { 754 | "name": "Apache", 755 | "type": "tool", 756 | "desc": null, 757 | "require": [ 758 | "Unix" 759 | ] 760 | }, 761 | { 762 | "name": "Jekyll", 763 | "type": "tool", 764 | "desc": null, 765 | "require": [ 766 | "Ruby", 767 | "YAML" 768 | ] 769 | }, 770 | { 771 | "name": "Golang", 772 | "type": "language", 773 | "desc": "Go est un langage compilé développé par Google", 774 | "require": [ 775 | "Algorithmique" 776 | ] 777 | }, 778 | { 779 | "name": "Make", 780 | "type": "tool", 781 | "desc": null, 782 | "require": [ 783 | "Unix" 784 | ] 785 | }, 786 | { 787 | "name": "Filezilla", 788 | "type": "tool", 789 | "desc": null, 790 | "require": [ 791 | "FTP" 792 | ] 793 | }, 794 | { 795 | "name": "Vim", 796 | "type": "tool", 797 | "desc": null, 798 | "require": [ 799 | "Unix" 800 | ] 801 | }, 802 | { 803 | "name": "Let's Encrypt", 804 | "type": "tool", 805 | "desc": null, 806 | "require": [ 807 | "Unix" 808 | ] 809 | }, 810 | { 811 | "name": "Internet Explorer", 812 | "type": "tool", 813 | "desc": null, 814 | "require": [] 815 | }, 816 | { 817 | "name": "ReactNative", 818 | "type": "framework", 819 | "desc": null, 820 | "require": [ 821 | "React" 822 | ] 823 | }, 824 | { 825 | "name": "NativeScript", 826 | "type": "framework", 827 | "desc": null, 828 | "require": [ 829 | "Angular" 830 | ] 831 | }, 832 | { 833 | "name": "PHPStorm", 834 | "type": "tool", 835 | "desc": "PHPStorm est un IDE de la suite JetBrains spécialisé dans le développeent PHP", 836 | "require": [] 837 | }, 838 | { 839 | "name": "Algorithmique", 840 | "type": "language", 841 | "desc": null, 842 | "require": [] 843 | }, 844 | { 845 | "name": "VueJS", 846 | "type": "framework", 847 | "desc": null, 848 | "require": [ 849 | "JavaScript" 850 | ] 851 | }, 852 | { 853 | "name": "Dploy", 854 | "type": "tool", 855 | "desc": null, 856 | "require": [] 857 | }, 858 | { 859 | "name": "Maildev", 860 | "type": "tool", 861 | "desc": null, 862 | "require": [ 863 | "NodeJS" 864 | ] 865 | }, 866 | { 867 | "name": "BrowserSync", 868 | "type": "tool", 869 | "desc": null, 870 | "require": [ 871 | "NodeJS" 872 | ] 873 | }, 874 | { 875 | "name": "Semantic UI", 876 | "type": "framework", 877 | "desc": null, 878 | "require": [ 879 | "CSS" 880 | ] 881 | }, 882 | { 883 | "name": "Komodo IDE", 884 | "type": "tool", 885 | "desc": null, 886 | "require": [] 887 | }, 888 | { 889 | "name": "JavaScript", 890 | "type": "language", 891 | "desc": null, 892 | "require": [ 893 | "HTML", 894 | "Algorithmique" 895 | ] 896 | }, 897 | { 898 | "name": "Ruby on Rails", 899 | "type": "framework", 900 | "desc": "Ruby on Rails est un framework web pour le langage Ruby", 901 | "require": [ 902 | "SQL", 903 | "Ruby" 904 | ] 905 | }, 906 | { 907 | "name": "Prepros", 908 | "type": "tool", 909 | "desc": null, 910 | "require": [ 911 | "SASS" 912 | ] 913 | }, 914 | { 915 | "name": "Coda", 916 | "type": "tool", 917 | "desc": null, 918 | "require": [ 919 | "MacOS" 920 | ] 921 | }, 922 | { 923 | "name": "Preact", 924 | "type": "library", 925 | "desc": null, 926 | "require": [ 927 | "Webpack", 928 | "JavaScript" 929 | ] 930 | }, 931 | { 932 | "name": "CoffeeScript", 933 | "type": "language", 934 | "desc": null, 935 | "require": [ 936 | "JavaScript" 937 | ] 938 | }, 939 | { 940 | "name": "Angular", 941 | "type": "framework", 942 | "desc": null, 943 | "require": [ 944 | "TypeScript" 945 | ] 946 | }, 947 | { 948 | "name": "Git", 949 | "type": "tool", 950 | "desc": "Git est un outil de versioning", 951 | "require": [] 952 | }, 953 | { 954 | "name": "GitKraken", 955 | "type": "tool", 956 | "desc": null, 957 | "require": [ 958 | "Git" 959 | ] 960 | }, 961 | { 962 | "name": "CakePHP", 963 | "type": "framework", 964 | "desc": null, 965 | "require": [ 966 | "PHP" 967 | ] 968 | }, 969 | { 970 | "name": "Github", 971 | "type": "tool", 972 | "desc": null, 973 | "require": [ 974 | "Git" 975 | ] 976 | }, 977 | { 978 | "name": "Merise", 979 | "type": "tool", 980 | "desc": null, 981 | "require": [] 982 | }, 983 | { 984 | "name": "Phinx", 985 | "type": "library", 986 | "desc": null, 987 | "require": [ 988 | "PHP", 989 | "Composer" 990 | ] 991 | }, 992 | { 993 | "name": "Firebug", 994 | "type": "tool", 995 | "desc": null, 996 | "require": [ 997 | ] 998 | }, 999 | { 1000 | "name": "Merise", 1001 | "type": "tool", 1002 | "desc": null, 1003 | "require": [] 1004 | }, 1005 | { 1006 | "name": "After Effects", 1007 | "type": "tool", 1008 | "desc": null, 1009 | "require": [] 1010 | }, 1011 | { 1012 | "name": "HTML", 1013 | "type": "language", 1014 | "desc": null, 1015 | "require": [] 1016 | }, 1017 | { 1018 | "name": "Stripe", 1019 | "type": "tool", 1020 | "desc": null, 1021 | "require": [] 1022 | }, 1023 | { 1024 | "name": "TypeScript", 1025 | "type": "language", 1026 | "desc": "Le TypeScript est un langage de programmation open-source développé par Microsoft.", 1027 | "require": [ 1028 | "JavaScript" 1029 | ] 1030 | }, 1031 | { 1032 | "name": "REST", 1033 | "type": "framework", 1034 | "desc": null, 1035 | "require": [] 1036 | }, 1037 | { 1038 | "name": "Vagrant", 1039 | "type": "tool", 1040 | "desc": null, 1041 | "require": [ 1042 | "VirtualBox" 1043 | ] 1044 | }, 1045 | { 1046 | "name": "Symfony", 1047 | "type": "framework", 1048 | "desc": "Framework php très populaire pour le développement d'applications web", 1049 | "tutorials": [], 1050 | "require": [ 1051 | "SQL", 1052 | "Composer", 1053 | "PHP", 1054 | "YAML" 1055 | ] 1056 | }, 1057 | { 1058 | "name": "Elixir", 1059 | "type": "language", 1060 | "desc": "Elixir est un langage de programming fonctionnel développé par Jose Valim", 1061 | "require": [ 1062 | "Algorithmique" 1063 | ] 1064 | }, 1065 | { 1066 | "name": "MacOS", 1067 | "type": "tool", 1068 | "desc": null, 1069 | "require": [] 1070 | }, 1071 | { 1072 | "name": "SQL", 1073 | "type": "language", 1074 | "desc": null, 1075 | "require": [] 1076 | }, 1077 | { 1078 | "name": "MySQL", 1079 | "type": "tool", 1080 | "desc": null, 1081 | "require": [ 1082 | "SQL" 1083 | ] 1084 | }, 1085 | { 1086 | "name": "MariaDB", 1087 | "type": "tool", 1088 | "desc": null, 1089 | "require": [ 1090 | "SQL" 1091 | ] 1092 | }, 1093 | { 1094 | "name": "PostgreSQL", 1095 | "type": "tool", 1096 | "desc": null, 1097 | "require": [ 1098 | "SQL" 1099 | ] 1100 | }, 1101 | { 1102 | "name": "SQLite", 1103 | "type": "tool", 1104 | "desc": null, 1105 | "require": [ 1106 | "SQL" 1107 | ] 1108 | }, 1109 | { 1110 | "name": "SourceTree", 1111 | "type": "tool", 1112 | "desc": null, 1113 | "require": [ 1114 | "Git" 1115 | ] 1116 | }, 1117 | { 1118 | "name": "Nodepad++", 1119 | "type": "tool", 1120 | "desc": null, 1121 | "require": [] 1122 | }, 1123 | { 1124 | "name": "Trello", 1125 | "type": "tool", 1126 | "desc": null, 1127 | "require": [] 1128 | }, 1129 | { 1130 | "name": "Avocode", 1131 | "type": "tool", 1132 | "desc": null, 1133 | "require": [ 1134 | "Photoshop" 1135 | ] 1136 | }, 1137 | { 1138 | "name": "Socket.io", 1139 | "type": "library", 1140 | "desc": null, 1141 | "require": [ 1142 | "NodeJS" 1143 | ] 1144 | }, 1145 | { 1146 | "name": "Bootstrap", 1147 | "type": "framework", 1148 | "desc": "Framework CSS développé par Twitter", 1149 | "require": [ 1150 | "CSS" 1151 | ] 1152 | }, 1153 | { 1154 | "name": "MySQL Workbench", 1155 | "type": "tool", 1156 | "desc": null, 1157 | "require": [ 1158 | "MySQL" 1159 | ] 1160 | }, 1161 | { 1162 | "name": "Sinatra", 1163 | "type": "library", 1164 | "desc": null, 1165 | "require": [ 1166 | "Ruby" 1167 | ] 1168 | }, 1169 | { 1170 | "name": "Netbeans", 1171 | "type": "tool", 1172 | "desc": null, 1173 | "require": [] 1174 | }, 1175 | { 1176 | "name": "Ubuntu", 1177 | "type": "tool", 1178 | "desc": null, 1179 | "require": [] 1180 | }, 1181 | { 1182 | "name": "Unix", 1183 | "type": "tool", 1184 | "desc": null, 1185 | "require": [] 1186 | }, 1187 | { 1188 | "name": "C", 1189 | "type": "language", 1190 | "desc": null, 1191 | "require": [ 1192 | "Algorithmique" 1193 | ] 1194 | }, 1195 | { 1196 | "name": "C++", 1197 | "type": "language", 1198 | "desc": null, 1199 | "require": [ 1200 | "Algorithmique", 1201 | "C" 1202 | ] 1203 | }, 1204 | { 1205 | "name": "ExpressJS", 1206 | "type": "framework", 1207 | "desc": "ExpressJS est un micro framework NodeJS pour le développement d'application web", 1208 | "require": [ 1209 | "NodeJS" 1210 | ] 1211 | }, 1212 | { 1213 | "name": "AdonisJS", 1214 | "type": "framework", 1215 | "desc": "AdonisJS est un framework NodeJS inspiré de Laravel et Ruby on Rails", 1216 | "require": [ 1217 | "NodeJS" 1218 | ] 1219 | }, 1220 | { 1221 | "name": "MongoDB", 1222 | "type": "tool", 1223 | "desc": null, 1224 | "require": [] 1225 | }, 1226 | { 1227 | "name": "C#", 1228 | "type": "language", 1229 | "desc": null, 1230 | "require": [ 1231 | "Algorithmique" 1232 | ] 1233 | }, 1234 | { 1235 | "name": "ASP.net", 1236 | "type": "framework", 1237 | "desc": "Un framework web pour le langage C#", 1238 | "require": [ 1239 | "C#" 1240 | ] 1241 | }, 1242 | { 1243 | "name": "Java", 1244 | "type": "language", 1245 | "desc": null, 1246 | "require": [ 1247 | "Algorithmique" 1248 | ] 1249 | }, 1250 | { 1251 | "name": "Kotlin", 1252 | "type": "language", 1253 | "desc": null, 1254 | "require": [ 1255 | "Algorithmique" 1256 | ] 1257 | }, 1258 | { 1259 | "name": "Dart", 1260 | "type": "language", 1261 | "desc": "Dart est un langage développé par Google", 1262 | "require": [ 1263 | "Algorithmique" 1264 | ] 1265 | }, 1266 | { 1267 | "name": "Flutter", 1268 | "type": "framework", 1269 | "desc": "Flutter est un framework développé par Google qui permet d'écrire des applications mobiles cross-platform avec le langage Dart.", 1270 | "require": [ 1271 | "Dart" 1272 | ] 1273 | }, 1274 | { 1275 | "name": "Django", 1276 | "type": "framework", 1277 | "desc": "Django est un framework open-source permettant d'utiliser python dans des projets web", 1278 | "require": [ 1279 | "Python", 1280 | "SQL" 1281 | ] 1282 | }, 1283 | { 1284 | "name": "Flask", 1285 | "type": "framework", 1286 | "desc": "Flask est un framework open-source permettant d'utiliser python dans des projets web", 1287 | "require": [ 1288 | "Python", 1289 | "SQL" 1290 | ] 1291 | }, 1292 | { 1293 | "name": "Sphinx", 1294 | "type": "tool", 1295 | "desc": "Sphinx est une librairie permettant de générer de la documentation", 1296 | "require": [ 1297 | "Python" 1298 | ] 1299 | }, 1300 | { 1301 | "name": "Django Rest Framework", 1302 | "type": "framework", 1303 | "desc": "Framework permettant la création d'API REST en python", 1304 | "require": [ 1305 | "Django", 1306 | ] 1307 | }, 1308 | ] 1309 | } 1310 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": true, 3 | "compilerOptions": { 4 | "lib": [ 5 | "es2016", 6 | "dom" 7 | ], 8 | "module": "es6", 9 | "target": "es6", 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports": true, 12 | "noImplicitAny": true, 13 | "sourceMap": true 14 | }, 15 | "exclude": [ 16 | "node_modules" 17 | ] 18 | } 19 | --------------------------------------------------------------------------------