├── .editorconfig ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .netlify └── state.json ├── .rubocop.yml ├── .rubocop_todo.yml ├── .ruby-gemset ├── .ruby-version ├── Gemfile ├── Gemfile.lock ├── LICENSE.md ├── README.md ├── config.rb ├── data ├── achievements.yml ├── books.yml ├── courses.yml ├── gifts.yml ├── mentors.yml ├── newsletters.yml ├── pricing.yml ├── projects.yml ├── settings.yml ├── social.yml ├── sublime.yml ├── tools.yml ├── tree.yml └── work.yml ├── helpers ├── active_nav_helper.rb └── images_helper.rb ├── lib └── svg.rb ├── package-lock.json ├── package.json └── source ├── 404.html.slim ├── CNAME ├── about.html.slim ├── assets ├── Snazzy.itermcolors ├── Solarized Darcula.itermcolors ├── david-leuliette-certificate-ai-demystified.pdf ├── davidleuliette-React-Academy.pdf ├── davidleuliette-certification-google.pdf ├── davidleuliette-cv.pdf ├── davidleuliette-emberjs.pdf ├── images │ ├── atom-logo.svg │ ├── bg-hero.svg │ ├── blog │ │ ├── 2012 │ │ │ └── type-scale.png │ │ ├── 2014 │ │ │ ├── foundation │ │ │ │ ├── foundation-accordion.gif │ │ │ │ ├── sublime-add-source.png │ │ │ │ ├── sublime-install-package.png │ │ │ │ └── sublime-preference-package.png │ │ │ ├── post-psd │ │ │ │ ├── death-to-bullshit.jpg │ │ │ │ ├── facebook-desktop.jpg │ │ │ │ ├── facebook-mobile.jpg │ │ │ │ ├── layout-kickstarter.jpg │ │ │ │ ├── mobile-vs-photoshop.jpg │ │ │ │ ├── pape-2005.jpg │ │ │ │ └── pape-2013.jpg │ │ │ └── social-button │ │ │ │ ├── csscount.png │ │ │ │ ├── htmlcount.png │ │ │ │ └── response.png │ │ ├── 2019 │ │ │ ├── Colors.png │ │ │ ├── Colors3.png │ │ │ ├── codestats.png │ │ │ └── timing.png │ │ ├── legacy │ │ │ ├── 2011 │ │ │ │ ├── 11 │ │ │ │ │ └── pixelWindow.png │ │ │ │ └── 12 │ │ │ │ │ ├── 20111205-154304.jpg │ │ │ │ │ ├── ACPE_logo.jpg │ │ │ │ │ ├── AE_logo.jpg │ │ │ │ │ ├── AE_officiel_logo.jpg │ │ │ │ │ ├── Adobe-logo-120x120.png │ │ │ │ │ ├── Adobe-logo-400x230.png │ │ │ │ │ ├── Adobe-logo.png │ │ │ │ │ ├── CCI_logo.jpg │ │ │ │ │ ├── Evernote-Logo.png │ │ │ │ │ ├── Filezilla-logo.jpg │ │ │ │ │ ├── Mozilla_Thunderbird_logo.png │ │ │ │ │ ├── Sublime_Text_Logo.png │ │ │ │ │ ├── Zend-Studio-logo.png │ │ │ │ │ ├── aideEn_logo.jpg │ │ │ │ │ ├── balsamiq-mockups-app-icon.png │ │ │ │ │ ├── bestAE_logo.jpg │ │ │ │ │ ├── blog.webDesignInc_logo.png │ │ │ │ │ ├── brackets_logo.png │ │ │ │ │ ├── brefban.jpg │ │ │ │ │ ├── cfe_logo.jpg │ │ │ │ │ ├── cipav_logo.jpg │ │ │ │ │ ├── cma_logo.jpg │ │ │ │ │ ├── cma_logo1.jpg │ │ │ │ │ ├── coeur.jpg │ │ │ │ │ ├── comptable_logo.jpg │ │ │ │ │ ├── github_logo.png │ │ │ │ │ ├── guideguide_logo.gif │ │ │ │ │ ├── histoire.jpg │ │ │ │ │ ├── illustration-graphique-unikmedia.jpg │ │ │ │ │ ├── image.jpg │ │ │ │ │ ├── impot_logo.jpg │ │ │ │ │ ├── indigo-studio.png │ │ │ │ │ ├── infogreffe_logo.jpg │ │ │ │ │ ├── legifrance_logo.jpg │ │ │ │ │ ├── lire.jpg │ │ │ │ │ ├── logo_axure.jpg │ │ │ │ │ ├── pixelWindow_logo.jpg │ │ │ │ │ ├── pme_logo.jpg │ │ │ │ │ ├── pme_logo1.jpg │ │ │ │ │ ├── pnggauntlet_logo.png │ │ │ │ │ ├── pointvue.jpg │ │ │ │ │ ├── poleEmploi_logo.jpg │ │ │ │ │ ├── publier_site_internet.jpg │ │ │ │ │ ├── rsi_logo.jpg │ │ │ │ │ ├── salonEntrepreneur_logo.jpg │ │ │ │ │ ├── salonentreprise_logo.jpg │ │ │ │ │ ├── servicepublic_logo.jpg │ │ │ │ │ ├── tventrepreneur.jpg │ │ │ │ │ └── urssaf_logo.jpg │ │ │ ├── 2012 │ │ │ │ ├── 10 │ │ │ │ │ └── question_wireframe.png │ │ │ │ ├── 11 │ │ │ │ │ ├── 750g-mobile.png │ │ │ │ │ ├── Capture.jpg │ │ │ │ │ ├── Capture1.jpg │ │ │ │ │ ├── briefing.jpg │ │ │ │ │ ├── ensavoirplus.png │ │ │ │ │ ├── rate.png │ │ │ │ │ ├── remonter.png │ │ │ │ │ ├── retour.png │ │ │ │ │ ├── service-public-mobile-lecteur.png │ │ │ │ │ ├── service-public-mobile-site.png │ │ │ │ │ ├── service-public-mobile.png │ │ │ │ │ ├── smartappbanner.png │ │ │ │ │ └── sortir.png │ │ │ │ ├── 12 │ │ │ │ │ ├── button-layout.png │ │ │ │ │ ├── button-mozilla.png │ │ │ │ │ ├── github-dangerzone.png │ │ │ │ │ ├── openduweb-calm.jpg │ │ │ │ │ ├── openduweb-helloworld.jpg │ │ │ │ │ ├── openduweb-participant.jpg │ │ │ │ │ └── tweet.png │ │ │ │ ├── 01 │ │ │ │ │ └── grillePixelPhotoshop.png │ │ │ │ ├── 03 │ │ │ │ │ ├── 1.png │ │ │ │ │ ├── font.png │ │ │ │ │ ├── fonte.png │ │ │ │ │ ├── imgCode1.png │ │ │ │ │ ├── imgCode2.png │ │ │ │ │ ├── imgCode2_1.png │ │ │ │ │ ├── imgCode2_css.png │ │ │ │ │ ├── imgCode3_css.png │ │ │ │ │ ├── imgCode4.png │ │ │ │ │ ├── mokup1.png │ │ │ │ │ ├── mokup2.png │ │ │ │ │ ├── mokup3.png │ │ │ │ │ └── mokup4.png │ │ │ │ ├── 06 │ │ │ │ │ ├── 1.default.jpg │ │ │ │ │ ├── 2.gitBash.jpg │ │ │ │ │ ├── 3.changeURL.jpg │ │ │ │ │ ├── 4.newRoot.jpg │ │ │ │ │ ├── Sans-titre-1.png │ │ │ │ │ ├── alt-400x189.png │ │ │ │ │ ├── alt.png │ │ │ │ │ ├── entityHTML.png │ │ │ │ │ ├── hotmail.png │ │ │ │ │ ├── link.png │ │ │ │ │ ├── opera-mobile-emulator.png │ │ │ │ │ ├── ovh_momi1.png │ │ │ │ │ ├── voirlaversionenligne.png │ │ │ │ │ └── webmail.png │ │ │ │ ├── 07 │ │ │ │ │ ├── 480149483_67804f313c.jpg │ │ │ │ │ ├── 5382639043_b671f6f3da.jpg │ │ │ │ │ ├── Capture.png │ │ │ │ │ ├── Capture1.png │ │ │ │ │ ├── Capture2.png │ │ │ │ │ ├── Capture3.png │ │ │ │ │ ├── Capture4.png │ │ │ │ │ ├── fever.png │ │ │ │ │ ├── netvibes.png │ │ │ │ │ ├── photo.png │ │ │ │ │ └── wordpress_wallpaper.jpg │ │ │ │ └── 08 │ │ │ │ │ ├── 1_Kreon_PT+Sans.jpg │ │ │ │ │ ├── 2_Arvo_PT+Sans.jpg │ │ │ │ │ ├── 3_Oswald_Lora.jpg │ │ │ │ │ ├── 4_Ubuntu_rokkitt.jpg │ │ │ │ │ ├── 5_Merriweather_News+Cycle.jpg │ │ │ │ │ ├── 6_Cuprum_Junge.jpg │ │ │ │ │ ├── Capture.png │ │ │ │ │ ├── lift_calendar.png │ │ │ │ │ ├── lift_superGuerrier.png │ │ │ │ │ ├── photo-3.png │ │ │ │ │ ├── photo-31.png │ │ │ │ │ └── tumblr_m8flbaz9F81rxxfg5o1_1280.png │ │ │ └── 2013 │ │ │ │ ├── 11 │ │ │ │ ├── guide_js.jpg │ │ │ │ ├── interchange_large.png │ │ │ │ ├── interchange_small.png │ │ │ │ └── this-is-the-web.png │ │ │ │ ├── 01 │ │ │ │ ├── Capture.png │ │ │ │ ├── SOA.jpg │ │ │ │ ├── applause.png │ │ │ │ ├── badge.jpg │ │ │ │ ├── blackmesa.png │ │ │ │ ├── code.png │ │ │ │ ├── firefox-marketplace-USB.jpg │ │ │ │ ├── frenchGuysRocks.jpg │ │ │ │ ├── import.png │ │ │ │ ├── jqueryOS.png │ │ │ │ ├── logo.png │ │ │ │ ├── logo_takeoffconf.png │ │ │ │ ├── meteor.png │ │ │ │ ├── mozilla-conf.jpg │ │ │ │ ├── next.web_.jpg │ │ │ │ ├── nobrain-app.jpg │ │ │ │ ├── quote.png │ │ │ │ ├── takeoff_badge.jpg │ │ │ │ ├── utf8.png │ │ │ │ └── welcome.png │ │ │ │ ├── 02 │ │ │ │ ├── 1.adaptatifvsmobile.png │ │ │ │ ├── 2.mobilevsnatif.png │ │ │ │ ├── 3.adaptatifvsnatif.png │ │ │ │ └── Versus.png │ │ │ │ ├── 05 │ │ │ │ ├── iceberg.jpg │ │ │ │ ├── progressive-disclosure.png │ │ │ │ ├── responsiv.png │ │ │ │ ├── side-content.png │ │ │ │ ├── toggle-search.png │ │ │ │ └── tumblr.png │ │ │ │ └── 08 │ │ │ │ ├── DNS-github.png │ │ │ │ ├── gh-pages.png │ │ │ │ └── ovh.png │ │ └── simplicity.jpeg │ ├── foundation.svg │ ├── front │ │ ├── books │ │ │ ├── nicolas-froidure-js.jpg │ │ │ ├── sitepoint-jump-start-responsive.jpg │ │ │ ├── smashing-mobile.jpg │ │ │ └── smashing-redesign.jpg │ │ ├── homepage │ │ │ ├── logo-chtijs.svg │ │ │ ├── logo-opensource.png │ │ │ ├── logo-react-finland.svg │ │ │ ├── logo-react-native-london.jpg │ │ │ ├── logo-ruby-nord.png │ │ │ └── logo-takeofftalks.png │ │ ├── init-npm-install.gif │ │ ├── keyboard │ │ │ ├── alt.png │ │ │ ├── arrow-down.png │ │ │ ├── arrow-left.png │ │ │ ├── arrow-right.png │ │ │ ├── arrow-up.png │ │ │ ├── cmd.png │ │ │ ├── ctrl.png │ │ │ ├── d.png │ │ │ ├── g.png │ │ │ ├── l.png │ │ │ ├── p.png │ │ │ ├── pointer.png │ │ │ ├── shift.png │ │ │ ├── slash.png │ │ │ └── tab.png │ │ ├── product-hunt-david-leuliette.png │ │ ├── responsive-design-tron-grid.jpg │ │ ├── south-park-browser.jpg │ │ ├── sublime-macosx.jpg │ │ ├── takeoff-conf-2014.jpg │ │ ├── tools │ │ │ ├── atom.png │ │ │ ├── evernote.png │ │ │ ├── firefox.png │ │ │ ├── frog.png │ │ │ ├── front-end-papier-crayon.jpg │ │ │ ├── github.png │ │ │ ├── gitx.png │ │ │ ├── imagealpha.png │ │ │ ├── imageoptim.png │ │ │ ├── iterm2.png │ │ │ ├── jpegmini.png │ │ │ ├── licecap.png │ │ │ ├── logo-firefox-dev-edition.png │ │ │ ├── pixelwindow.png │ │ │ ├── postico.png │ │ │ ├── recordit.png │ │ │ ├── rename.png │ │ │ ├── sequelpro.png │ │ │ ├── sipapp.png │ │ │ ├── spectacleapp.gif │ │ │ ├── sublimetext.png │ │ │ ├── validator-sac.png │ │ │ └── virtualbox.png │ │ ├── web-mobile-vs-desktop.png │ │ ├── windows-95.jpg │ │ ├── work │ │ │ ├── coaching.jpg │ │ │ └── kanban.jpg │ │ └── youtube-growth-hack.png │ ├── hero-wave.svg │ ├── icons │ │ ├── animat-customize-color.gif │ │ ├── animat-diamond.gif │ │ ├── animat-image-color.gif │ │ ├── animat-lightbulb-color.gif │ │ ├── animat-linechart-color.gif │ │ ├── animat-pencil-color.gif │ │ ├── animat-responsive-color.gif │ │ ├── animat-rocket-color.gif │ │ └── animat-search-color.gif │ ├── middleman.svg │ ├── nextjs-logo.svg │ ├── retailshake │ │ ├── no-preview.png │ │ ├── no-preview@2x.png │ │ └── no-preview@3x.png │ └── star-bg.svg ├── javascripts │ ├── application.js.coffee │ ├── front │ │ └── about.js.coffee │ ├── topbar.js.coffee │ └── vendor │ │ ├── pizza.js │ │ └── snapsvg.js └── stylesheets │ ├── _code.scss │ ├── _colors.scss │ ├── _custom-typeplate.scss │ ├── _settings-custom.scss │ ├── _typeplate-mixins.scss │ ├── application.css.scss │ ├── components │ ├── _buttons.scss │ ├── _callout.scss │ ├── _hero-banner.scss │ ├── _magellan.scss │ ├── _pizza.scss │ ├── _sections.scss │ ├── _topbar.scss │ └── _typography.scss │ ├── error.css.scss │ └── pages │ ├── _about.scss │ ├── _blog.scss │ ├── _footer.scss │ ├── _good-practice.scss │ ├── _homepage.scss │ ├── _styleguide.scss │ └── _webdesign.scss ├── blog ├── articles │ ├── 2011-11-28-framework-php.html.md │ ├── 2011-12-05-declaration-autoentrepreneur.html.md │ ├── 2011-12-05-mesure-pixel.html.md │ ├── 2011-12-27-liste-ultime-de-site-internet-pour-les-auto-entrepreneurs.html.md │ ├── 2012-01-11-afficher-masquer-la-grille-des-pixels-en-zoom-photoshop.html.md │ ├── 2012-03-16-webdesign-adaptatif-5-astuces-indispensables.html.md │ ├── 2012-06-08-windows-repertoire-git.html.md │ ├── 2012-06-22-integration-emails.html.md │ ├── 2012-07-02-favicon.html.md │ ├── 2012-07-13-igoogle-xml-opml.html.md │ ├── 2012-07-31-creez-rapidement-votre-portfolio-en-6-etapes.html.md │ ├── 2012-08-06-typographie-google-font.html.md │ ├── 2012-08-10-prix-site-internet.html.html.md │ ├── 2012-08-27-twitter-a-change-votre-vie-essayez-lift.html.md │ ├── 2012-10-16-question-wireframe.html.md │ ├── 2012-11-08-redaction-briefing.html.md │ ├── 2012-11-21-banniere-application-mobile.html.md │ ├── 2012-11-23-tarif-webdesigner.html.md │ ├── 2012-12-08-open-du-web-lille.html.md │ ├── 2012-12-20-choix-lien-bouton.html.md │ ├── 2013-01-09-formation-print-web.html.md │ ├── 2013-01-11-zendstudio-todo-installation.html.md │ ├── 2013-01-23-takeoff-conf-2013.html.md │ ├── 2013-01-29-test-firefoxosappdays.html.md │ ├── 2013-02-25-webdesign-adaptatif-vs-site-mobile-vs-application-native.html.md │ ├── 2013-05-31-base-design-adaptatif.html.md │ ├── 2013-06-14-css-evolutif.html.html.md │ ├── 2013-08-14-breakpoint.html.md │ ├── 2013-08-16-hebergement-gratuit-ovh.html.md │ ├── 2013-11-15-javascript.html.md │ ├── 2013-11-26-esprit-web.html.md │ ├── 2013-12-13-foundation-breakpoint.html.md │ ├── 2014-01-08-briefing-creatif.html.md │ ├── 2014-01-13-firefox-2014.html.md │ ├── 2014-01-17-favicon-middleman.html.md │ ├── 2014-01-24-foundation5-interchange.html.md │ ├── 2014-01-28-foundation5-snippet.html.md │ ├── 2014-02-07-takeoff-conf-2014.html.md │ ├── 2014-02-11-foundation5-architecture-interchange.html.md │ ├── 2014-02-20-client-idiot.html.md │ ├── 2014-02-25-fin-psd.html.md │ ├── 2014-03-31-conseil-dev.html.md │ ├── 2014-04-01-easter-egg-april.html.md │ ├── 2014-04-02-louvrelens.html.md │ ├── 2014-04-14-migration-wordpress.html.md │ ├── 2014-05-21-site-obese.html.md │ ├── 2014-05-27-import-sass.html.md │ ├── 2014-07-30-grille-semantique.html.md │ ├── 2014-08-03-metier-integrateur-web.html.md │ ├── 2014-08-06-github-ninja.html.md │ ├── 2014-08-18-foundation-love.html.md │ ├── 2014-08-24-guide-sublime-text.html.md │ ├── 2014-09-07-template-ruby.html.md │ ├── 2014-09-23-paris-web-2014.html.md │ ├── 2014-12-21-conseils-sketchnoting.html.md │ ├── 2015-02-01-fosdem-2015.html.md │ ├── 2015-02-27-foundation-mixin.html.md │ ├── 2015-02-27-grille-impair-centre.html.md │ ├── 2015-04-23-sublime-package.html.md │ ├── 2015-06-08-outil-analyse-front-end.html.md │ ├── 2015-06-25-webperf.html.md │ ├── 2015-07-01-typography-sass.html.md │ ├── 2015-07-20-wireframe-font.html.md │ ├── 2015-08-26-truncate.html.md │ ├── 2015-09-21-365-jours-de-code.html.md │ ├── 2015-10-03-paris-web-2015.html.md │ ├── 2015-10-06-offthegrid.html.md │ ├── 2016-02-08-online.html.md │ ├── 2016-02-14-openclassroom-integrateur-web.html.md │ ├── 2016-03-04-svg-helper-ruby.html.md │ ├── 2016-03-10-mobile-first-webdesign.html.md │ ├── 2016-03-25-takeoffconf-code-promo.html.md │ ├── 2016-03-29-npm-init-config.html.md │ ├── 2016-05-04-gitshot.html.md │ ├── 2016-06-14-certification-google.html.md │ ├── 2016-12-11-indonesia.html.md │ ├── 2017-02-06-fosdem-2017.html.md │ ├── 2017-03-13-jamstack.html.md │ ├── 2017-05-11-atom.html.md │ ├── 2017-06-01-london.html.md │ ├── 2017-08-25-react-native.html.md │ ├── 2017-09-01-fabriks.html.markdown │ ├── 2017-09-29-euruko2017.html.md │ ├── 2018-01-02-2017.html.md │ ├── 2018-04-25-react-finland.html.md │ ├── 2018-06-09-takeoff-conf-2018.html.md │ ├── 2018-07-11-shell-in-nodejs.html.md │ ├── 2019-04-13-reactamsterdam.html.md │ ├── 2019-05-28-fonts-google.html.md │ ├── 2019-09-24-reactlive.html.md │ └── 2019-12-31-2019.html.md └── index.html.slim ├── browserconfig.xml ├── clients.html.slim ├── contact.html.slim ├── cv.html.slim ├── design-engineer.html.slim ├── design ├── typography.html.slim └── webdesign.html.slim ├── dev ├── git.html.slim ├── setup.html.slim └── sublime.html.slim ├── favicon_base.png ├── feed.xml.builder ├── forge ├── chapitres │ ├── 0-1-evolution.html.md │ ├── 1-1-technique.html.md │ ├── 1-2-lecture.html.md │ ├── 1-3-architecture.html.md │ ├── 1-4-publicite.html.md │ ├── 1-5-details.html.md │ └── 2-1-manifeste-refonte.html.md └── index.html.slim ├── gifts.html.slim ├── gnu.html.slim ├── human.txt ├── index.html.slim ├── keybase.txt ├── layouts ├── _author.html.slim ├── _quick-contact.html.slim ├── _share.html.slim ├── _social.html.slim ├── _stalk.html.slim ├── _update-post.html.slim ├── blog_layout.html.slim ├── commons │ ├── _favicon.html.slim │ ├── _footer.html.slim │ ├── _hero-banner.html.slim │ ├── _open_graph.html.slim │ └── _topbar.html.slim ├── error_layout.html.slim ├── forge │ └── _summary.html.slim ├── forge_layout.html.slim ├── layout.html.slim └── styleguide │ ├── _buttons.html.slim │ ├── _callout.html.slim │ ├── _colors.html.slim │ ├── _icons.html.slim │ ├── _typography.html.slim │ └── forms.html.slim ├── learn ├── books.html.slim ├── formations.html.slim └── newsletter.html.slim ├── legal.html.slim ├── manifesto.html.slim ├── mentors.html.slim ├── pricing.html.slim ├── robots.txt ├── sitemap.html.slim ├── styleguide.html.slim ├── thankyou.html.slim ├── uses.html.slim └── workflow ├── chatbot.html.slim ├── coaching.html.slim ├── growth-hacking.html.slim ├── index.html.slim └── work.html.slim /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.md] 14 | [*.html.md] 15 | [*.markdown] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .bundle 2 | .sass-cache 3 | .DS_Store 4 | .npm-debug.log 5 | 6 | /build 7 | /bower_components 8 | /node_modules 9 | -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "ba1747eb-b02b-4ee6-b778-3bd080ba695f" 3 | } -------------------------------------------------------------------------------- /.rubocop.yml: -------------------------------------------------------------------------------- 1 | inherit_from: .rubocop_todo.yml 2 | 3 | Layout/SpaceAroundEqualsInParameterDefault: 4 | EnforcedStyle: space 5 | -------------------------------------------------------------------------------- /.ruby-gemset: -------------------------------------------------------------------------------- 1 | davidl 2 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.6.2 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # Core 4 | gem 'middleman', '4.2.1' 5 | gem 'middleman-autoprefixer', '~> 2.10.0' 6 | gem 'middleman-blog' 7 | gem 'middleman-favicon-maker' 8 | gem 'middleman-google-analytics', '~> 3.0' 9 | gem 'middleman-minify-html', '~> 3.4.1' 10 | gem 'middleman-navtree' 11 | gem 'middleman-sitemap-ping' 12 | gem 'middleman-syntax' 13 | 14 | # -- NEEDS FIX -- not yet compatible with middleman 4.x 15 | # gem 'middleman-sitemap', '~> 0.0.13' # FIXME: wait for this PR to be merged https://github.com/statonjr/middleman-sitemap/pull/10 16 | gem 'middleman-sitemap', git: 'https://github.com/matsu911/middleman-sitemap', branch: 'master' 17 | # Add webpack for dependencies3 18 | gem 'middleman-sprockets' 19 | 20 | # Templating Engines 21 | gem 'nokogiri', '~> 1.10', '>= 1.10.5' 22 | gem 'builder' 23 | gem 'oga', '~> 3.0' 24 | gem 'slim', '~> 4.0.0' 25 | 26 | # Debug 27 | # gem 'html-proofer' 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Yet another [front-end dev website](https://archive.davidl.fr) • [![Netlify Status](https://api.netlify.com/api/v1/badges/ba1747eb-b02b-4ee6-b778-3bd080ba695f/deploy-status)](https://app.netlify.com/sites/davidl/deploys) 2 | 3 | Handcrafted with [Middleman](http://middlemanapp.com) & [codeless](https://github.com/flexbox/codeless) template. 4 | 5 | ## Author 6 | 7 | | [![twitter/flexbox_](https://gravatar.com/avatar/66ecc55f1bc2e5863eb516ee6f20794e?s=70)](https://twitter.com/flexbox_ "Follow @flexbox_ on Twitter") | 8 | |---| 9 | | [David Leuliette](https://archive.davidl.fr/) | 10 | -------------------------------------------------------------------------------- /data/gifts.yml: -------------------------------------------------------------------------------- 1 | learn: 2 | - 3 | name: OpenClassrooms 4 | link: http://clic.reussissonsensemble.fr/click.asp?ref=760613&site=13881&type=text&tnb=5 5 | win: Formez-vous à l’intégration web 6 | - 7 | name: Création de site web 8 | link: http://bit.ly/1IAMjKX 9 | win: Le Wagon on Demand - 30€ de réduction, créez et designez votre site avec HTML/CSS et Bootstrap. 10 | - 11 | name: Développeur front-end 12 | link: http://bit.ly/1BDE1ow 13 | win: Le Wagon on Demand - 30€ de réduction, maitrisez JavaScript 14 | - 15 | name: SitePoint Premium 16 | link: https://www.sitepoint.com/premium/refer/flexbox 17 | win: 25€ de réduction, sur tout le catalogue 18 | work: 19 | - 20 | name: Mailchimp 21 | link: http://eepurl.com/O9G7H 22 | win: 30$ de crédit pour vos premiers tests 23 | - 24 | name: HelloCommet 25 | link: https://app.hellocomet.co/freelancer?referralCode=r1t00EDBM&refSource=copy 26 | win: Accès à la plus belle communauté de freelances tech & data 27 | - 28 | name: Dropbox 29 | link: https://db.tt/fQ4OCyZHyQ 30 | win: 1 Go d‘espace de stockage supplémentaire 31 | - 32 | name: Typeform 33 | link: http://referral.typeform.com/mzclYBD 34 | win: -10% de réduction à vie sur votre facture 35 | - 36 | name: RescueTime 37 | link: https://www.rescuetime.com/ref/1486380 38 | win: Pro account pour 1 mois 39 | - 40 | name: Hello Bonsai 41 | link: https://app.hellobonsai.com/invite/0f66b59d 42 | win: Pro account pour 1 mois 43 | - 44 | name: Trello 45 | link: https://trello.com/flexbox/recommend 46 | win: Pro account pour 1 mois 47 | - 48 | name: Airtable 49 | link: https://airtable.com/invite/r/C9rp2zWJ 50 | win: $10 de credit pour un compte premium 51 | 52 | travel: 53 | - 54 | name: Airbnb 55 | link: https://www.airbnb.fr/c/dleuliette 56 | win: 35€ de réduction sur votre premier voyage 57 | - 58 | name: Booking 59 | link: https://www.booking.com/s/27_8/dleuli60 60 | win: Réduction de 10% sur votre réservation 61 | - 62 | name: Revolut 63 | win: Makes currency exchange totally free 64 | link: https://revolut.com/r/davidgp1 65 | - 66 | name: UberEATS 67 | link: http://ubr.to/EatsGiveGet 68 | win: 5€ de réduction avec le code eats-dqrkhue 69 | - 70 | name: Hopper 71 | link: https://sharing.hopper.com/m/QRaAlQ 72 | win: Download the Hopper app to save up to 40% off your next flight. 73 | -------------------------------------------------------------------------------- /data/newsletters.yml: -------------------------------------------------------------------------------- 1 | - 2 | title: JavaScript Weekly 3 | description: 'Cette newsletter me permet d’être à jour sur tout ce qui est important dans la communauté JavaScript.' 4 | icon: 'code' 5 | url: http://javascriptweekly.com/ 6 | - 7 | title: React status 8 | description: 'A weekly roundup of the latest React and React Native links and tutorials.' 9 | icon: 'atom' 10 | url: https://react.statuscode.com/ 11 | - 12 | title: React Native Newsletter 13 | description: 'A curated, fun to read newsletter all about React Native.' 14 | icon: 'atom' 15 | url: http://reactnative.cc/ 16 | - 17 | title: The UX newsletter 18 | description: 'Articles de fond sélectionnés et rédigés par l’équipe de MailChimp' 19 | icon: 'picture-o' 20 | url: http://www.theuxnewsletter.com/ 21 | - 22 | title: The Smashing Newsletter 23 | description: 'Recevez deux fois par mois des conseils, astuces et ressources pour designer et développeur.' 24 | icon: 'picture-o' 25 | url: http://www.smashingmagazine.com/the-smashing-newsletter/ 26 | -------------------------------------------------------------------------------- /data/settings.yml: -------------------------------------------------------------------------------- 1 | site: 2 | title: 'davidl • design & développement' 3 | author: David Leuliette 4 | description: 'Je crée des sites internet et des applications web qui fonctionnent à merveille sur n’importe quel appareil. Designer spécialisé Ruby, HTML, CSS et JavaScript basé à Lille' 5 | url: 'https://archive.davidl.fr' 6 | logo: 'https://archive.davidl.fr/apple-touch-icon.png' 7 | active_navigation_item_class: 'is-active' 8 | analytics_id: 'UA-46684635-1' 9 | analytics_domain_name: 'davidl.fr' 10 | 11 | social: 12 | google_plus: https://plus.google.com/+DavidLeulietteWeb 13 | twitter: 14 | url: https://twitter.com/flexbox_ 15 | name: '@flexbox_' 16 | github: https://github.com/flexbox 17 | linkedin: https://www.linkedin.com/in/david-leuliette-456701121 18 | email: dleuliette@gmail.com 19 | rss: 20 | url: /feed.xml 21 | mailchimp: '//davidl.us3.list-manage.com/subscribe/post?u=b72e60a9116993dde8d1547fe&id=e99fbeb8ad' 22 | -------------------------------------------------------------------------------- /data/social.yml: -------------------------------------------------------------------------------- 1 | - 2 | title: Amazon 3 | icon: fa-gift 4 | url: https://www.amazon.fr/registry/wishlist/2DD1UFSWC721E/ 5 | description: Me souhaiter un joyeux anniversaire. 6 | - 7 | title: GitHub 8 | icon: fa-github 9 | url: 'https://github.com/flexbox' 10 | description: Partage de projets libre avec toute la communauté. 11 | - 12 | title: LinkedIn 13 | icon: fa-linkedin 14 | url: 'https://www.linkedin.com/in/david-leuliette/' 15 | description: Si vous souhaitez en savoir plus sur mon parcours. 16 | - 17 | title: Twitter 18 | icon: fa-twitter 19 | url: 'https://twitter.com/flexbox_' 20 | description: Je découvre et partage chaque jour de nouveaux liens. 21 | -------------------------------------------------------------------------------- /data/work.yml: -------------------------------------------------------------------------------- 1 | dev: 2 | - 3 | link: /dev/git.html 4 | icon: fa-code-fork 5 | title: git 6 | description: Installation de git et configuration avec GitHub. 7 | - 8 | link: /dev/setup.html 9 | icon: fa-terminal 10 | title: Setup 11 | description: Configurer une véritable machine de hacker avec Linux ou macOS. 12 | - 13 | link: /dev/sublime.html 14 | icon: fa-file-text-o 15 | title: Sublime Text 16 | description: Astuces pour devenir expert avec les raccourcis et utiliser de façon efficace un bon éditeur de texte. 17 | - 18 | link: /dev/tools.html 19 | icon: fa-apple 20 | title: Tools 21 | description: Outils ou applications que j’utilise quotidiennement en tant que développeur front-end. 22 | design: 23 | - 24 | link: /design/typography.html 25 | icon: fa-font 26 | title: Typographie 27 | description: Améliorer l’expérience de lecture grâce au CSS. 28 | - 29 | link: /design/webdesign.html 30 | icon: fa-mobile 31 | title: Responsive 32 | description: 'De nos jours, votre design doit pensé pour vos utilisateurs mobiles.' 33 | - 34 | link: https://www.flickr.com/photos/geekgrunge/albums/72157644681767590 35 | icon: fa-file-image-o 36 | title: Sketchnoting 37 | description: La facilitation graphique favorise les échanges et les réflexions au sein d’un groupe pour construire une vision commune. 38 | learn: 39 | - 40 | link: /learn/formations.html 41 | icon: fa-users 42 | title: Formations 43 | description: 'Je donne des formations sur l’agilité, les technologies front-end et le travail collaboratif avec git & GitHub.' 44 | - 45 | link: /learn/newsletter.html 46 | icon: fa-send 47 | title: Newsletter 48 | description: Apprenez les techniques des développeurs senior. 49 | workflow: 50 | - 51 | link: /workflow/coaching.html 52 | icon: fa-coffee 53 | title: Coaching 54 | description: Je peux vous aider à améliorer votre produit ou vos processus de travail. 55 | - 56 | link: /workflow/growth-hacking.html 57 | icon: fa-line-chart 58 | title: Growth-Hacking 59 | description: Accélérer rapidement et significativement la croissance de votre start-up. 60 | - 61 | link: /workflow/work.html 62 | icon: fa-columns 63 | title: Styleguide 64 | description: Découvrez pourquoi vous devez travailler avec un designer dans votre équipe. 65 | - 66 | link: http://courses.davidl.fr/programs/robotsinmarch.html 67 | icon: fa-android 68 | title: Chatbot 69 | description: Cela fait des années que j’automatise ma vie, et puis j’ai découvert les chatbots. 70 | -------------------------------------------------------------------------------- /helpers/active_nav_helper.rb: -------------------------------------------------------------------------------- 1 | module ActiveNavHelper 2 | # Returns a CSS class if the filename is part of the current URL 3 | # 4 | # == Parameters 5 | # 6 | # @param filename [String] of the page to look up 7 | # 8 | # == Usage 9 | # 10 | # {nav_active("page.html")} 11 | 12 | 13 | def active_navigation_item_class 14 | data.settings.site.active_navigation_item_class 15 | end 16 | 17 | def nav_active(url) 18 | if (url.instance_of? String) 19 | if current_resource.url == url_for(url) 20 | {class: active_navigation_item_class} 21 | else 22 | {} 23 | end 24 | elsif (url.instance_of? Array) 25 | if url.map { |url| url_for(url) }.include?(current_resource.url) 26 | {class: active_navigation_item_class} 27 | else 28 | {} 29 | end 30 | else 31 | {} 32 | end 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /helpers/images_helper.rb: -------------------------------------------------------------------------------- 1 | require 'lib/svg' 2 | require 'digest/md5' 3 | 4 | module ImagesHelper 5 | def svg_tag(filename, options={}) 6 | root = Middleman::Application.root 7 | file_path = File.join(root, 'source', config[:images_dir], filename) 8 | return '(SVG img not found)' unless File.exists?(file_path) 9 | 10 | SVG.inline(file_path, options) 11 | end 12 | 13 | def gravatar_for(email) 14 | hash = Digest::MD5.hexdigest(email.chomp.downcase) 15 | "https://www.gravatar.com/avatar/#{hash}?size=250" 16 | end 17 | 18 | def fa(name) 19 | return "" 20 | end 21 | 22 | def fa_stack(name, background) 23 | return " 24 | 25 | 26 | " 27 | end 28 | 29 | end 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "davidl", 3 | "version": "1.0.0", 4 | "description": "Another front-end dev website", 5 | "repository": "git@github.com:flexbox/davidl.git", 6 | "author": "David Leuliette ", 7 | "license": "MIT", 8 | "private": false, 9 | "dependencies": { 10 | "foundation-sites": "6.6.2", 11 | "headroom.js": "0.11.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /source/404.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: La page demandée est introuvable 3 | layout: error_layout 4 | --- 5 | 6 | .m-topbar role="banner" 7 | .m-topbar--form 8 | = link_to '← Homepage', data.settings.site.url 9 | 10 | .error-wrapper 11 | .error-content 12 | h1.error--title data-text="404 Not Found" 404 Not Found 13 | h2.error--emphasis Sorry, this page does not exist anymore 😢 14 | p 15 | = link_to 'Go home', data.settings.site.url, class: 'button-cta' 16 | 'or 17 | = link_to 'read the blog', '/blog/' 18 | -------------------------------------------------------------------------------- /source/CNAME: -------------------------------------------------------------------------------- 1 | davidl.fr 2 | -------------------------------------------------------------------------------- /source/assets/david-leuliette-certificate-ai-demystified.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/david-leuliette-certificate-ai-demystified.pdf -------------------------------------------------------------------------------- /source/assets/davidleuliette-React-Academy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/davidleuliette-React-Academy.pdf -------------------------------------------------------------------------------- /source/assets/davidleuliette-certification-google.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/davidleuliette-certification-google.pdf -------------------------------------------------------------------------------- /source/assets/davidleuliette-cv.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/davidleuliette-cv.pdf -------------------------------------------------------------------------------- /source/assets/davidleuliette-emberjs.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/davidleuliette-emberjs.pdf -------------------------------------------------------------------------------- /source/assets/images/atom-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /source/assets/images/blog/2012/type-scale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2012/type-scale.png -------------------------------------------------------------------------------- /source/assets/images/blog/2014/foundation/foundation-accordion.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/foundation/foundation-accordion.gif -------------------------------------------------------------------------------- /source/assets/images/blog/2014/foundation/sublime-add-source.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/foundation/sublime-add-source.png -------------------------------------------------------------------------------- /source/assets/images/blog/2014/foundation/sublime-install-package.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/foundation/sublime-install-package.png -------------------------------------------------------------------------------- /source/assets/images/blog/2014/foundation/sublime-preference-package.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/foundation/sublime-preference-package.png -------------------------------------------------------------------------------- /source/assets/images/blog/2014/post-psd/death-to-bullshit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/post-psd/death-to-bullshit.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/2014/post-psd/facebook-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/post-psd/facebook-desktop.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/2014/post-psd/facebook-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/post-psd/facebook-mobile.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/2014/post-psd/layout-kickstarter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/post-psd/layout-kickstarter.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/2014/post-psd/mobile-vs-photoshop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/post-psd/mobile-vs-photoshop.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/2014/post-psd/pape-2005.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/post-psd/pape-2005.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/2014/post-psd/pape-2013.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/post-psd/pape-2013.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/2014/social-button/csscount.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/social-button/csscount.png -------------------------------------------------------------------------------- /source/assets/images/blog/2014/social-button/htmlcount.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/social-button/htmlcount.png -------------------------------------------------------------------------------- /source/assets/images/blog/2014/social-button/response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2014/social-button/response.png -------------------------------------------------------------------------------- /source/assets/images/blog/2019/Colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2019/Colors.png -------------------------------------------------------------------------------- /source/assets/images/blog/2019/Colors3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2019/Colors3.png -------------------------------------------------------------------------------- /source/assets/images/blog/2019/codestats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2019/codestats.png -------------------------------------------------------------------------------- /source/assets/images/blog/2019/timing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/2019/timing.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/11/pixelWindow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/11/pixelWindow.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/20111205-154304.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/20111205-154304.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/ACPE_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/ACPE_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/AE_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/AE_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/AE_officiel_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/AE_officiel_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/Adobe-logo-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/Adobe-logo-120x120.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/Adobe-logo-400x230.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/Adobe-logo-400x230.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/Adobe-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/Adobe-logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/CCI_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/CCI_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/Evernote-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/Evernote-Logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/Filezilla-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/Filezilla-logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/Mozilla_Thunderbird_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/Mozilla_Thunderbird_logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/Sublime_Text_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/Sublime_Text_Logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/Zend-Studio-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/Zend-Studio-logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/aideEn_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/aideEn_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/balsamiq-mockups-app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/balsamiq-mockups-app-icon.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/bestAE_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/bestAE_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/blog.webDesignInc_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/blog.webDesignInc_logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/brackets_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/brackets_logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/brefban.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/brefban.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/cfe_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/cfe_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/cipav_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/cipav_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/cma_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/cma_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/cma_logo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/cma_logo1.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/coeur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/coeur.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/comptable_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/comptable_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/github_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/github_logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/guideguide_logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/guideguide_logo.gif -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/histoire.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/histoire.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/illustration-graphique-unikmedia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/illustration-graphique-unikmedia.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/image.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/impot_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/impot_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/indigo-studio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/indigo-studio.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/infogreffe_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/infogreffe_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/legifrance_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/legifrance_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/lire.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/lire.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/logo_axure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/logo_axure.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/pixelWindow_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/pixelWindow_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/pme_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/pme_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/pme_logo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/pme_logo1.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/pnggauntlet_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/pnggauntlet_logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/pointvue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/pointvue.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/poleEmploi_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/poleEmploi_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/publier_site_internet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/publier_site_internet.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/rsi_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/rsi_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/salonEntrepreneur_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/salonEntrepreneur_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/salonentreprise_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/salonentreprise_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/servicepublic_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/servicepublic_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/tventrepreneur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/tventrepreneur.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2011/12/urssaf_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2011/12/urssaf_logo.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/01/grillePixelPhotoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/01/grillePixelPhotoshop.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/1.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/font.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/fonte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/fonte.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/imgCode1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/imgCode1.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/imgCode2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/imgCode2.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/imgCode2_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/imgCode2_1.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/imgCode2_css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/imgCode2_css.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/imgCode3_css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/imgCode3_css.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/imgCode4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/imgCode4.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/mokup1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/mokup1.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/mokup2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/mokup2.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/mokup3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/mokup3.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/03/mokup4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/03/mokup4.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/1.default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/1.default.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/2.gitBash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/2.gitBash.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/3.changeURL.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/3.changeURL.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/4.newRoot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/4.newRoot.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/Sans-titre-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/Sans-titre-1.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/alt-400x189.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/alt-400x189.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/alt.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/entityHTML.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/entityHTML.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/hotmail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/hotmail.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/link.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/opera-mobile-emulator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/opera-mobile-emulator.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/ovh_momi1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/ovh_momi1.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/voirlaversionenligne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/voirlaversionenligne.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/06/webmail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/06/webmail.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/480149483_67804f313c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/480149483_67804f313c.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/5382639043_b671f6f3da.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/5382639043_b671f6f3da.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/Capture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/Capture.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/Capture1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/Capture1.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/Capture2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/Capture2.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/Capture3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/Capture3.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/Capture4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/Capture4.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/fever.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/fever.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/netvibes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/netvibes.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/photo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/07/wordpress_wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/07/wordpress_wallpaper.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/1_Kreon_PT+Sans.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/1_Kreon_PT+Sans.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/2_Arvo_PT+Sans.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/2_Arvo_PT+Sans.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/3_Oswald_Lora.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/3_Oswald_Lora.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/4_Ubuntu_rokkitt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/4_Ubuntu_rokkitt.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/5_Merriweather_News+Cycle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/5_Merriweather_News+Cycle.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/6_Cuprum_Junge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/6_Cuprum_Junge.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/Capture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/Capture.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/lift_calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/lift_calendar.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/lift_superGuerrier.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/lift_superGuerrier.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/photo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/photo-3.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/photo-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/photo-31.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/08/tumblr_m8flbaz9F81rxxfg5o1_1280.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/08/tumblr_m8flbaz9F81rxxfg5o1_1280.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/10/question_wireframe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/10/question_wireframe.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/750g-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/750g-mobile.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/Capture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/Capture.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/Capture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/Capture1.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/briefing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/briefing.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/ensavoirplus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/ensavoirplus.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/rate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/rate.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/remonter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/remonter.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/retour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/retour.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/service-public-mobile-lecteur.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/service-public-mobile-lecteur.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/service-public-mobile-site.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/service-public-mobile-site.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/service-public-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/service-public-mobile.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/smartappbanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/smartappbanner.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/11/sortir.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/11/sortir.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/12/button-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/12/button-layout.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/12/button-mozilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/12/button-mozilla.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/12/github-dangerzone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/12/github-dangerzone.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/12/openduweb-calm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/12/openduweb-calm.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/12/openduweb-helloworld.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/12/openduweb-helloworld.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/12/openduweb-participant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/12/openduweb-participant.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2012/12/tweet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2012/12/tweet.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/Capture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/Capture.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/SOA.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/SOA.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/applause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/applause.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/badge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/badge.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/blackmesa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/blackmesa.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/code.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/firefox-marketplace-USB.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/firefox-marketplace-USB.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/frenchGuysRocks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/frenchGuysRocks.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/import.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/jqueryOS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/jqueryOS.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/logo.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/logo_takeoffconf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/logo_takeoffconf.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/meteor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/meteor.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/mozilla-conf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/mozilla-conf.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/next.web_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/next.web_.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/nobrain-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/nobrain-app.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/quote.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/takeoff_badge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/takeoff_badge.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/utf8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/utf8.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/01/welcome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/01/welcome.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/02/1.adaptatifvsmobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/02/1.adaptatifvsmobile.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/02/2.mobilevsnatif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/02/2.mobilevsnatif.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/02/3.adaptatifvsnatif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/02/3.adaptatifvsnatif.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/02/Versus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/02/Versus.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/05/iceberg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/05/iceberg.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/05/progressive-disclosure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/05/progressive-disclosure.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/05/responsiv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/05/responsiv.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/05/side-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/05/side-content.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/05/toggle-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/05/toggle-search.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/05/tumblr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/05/tumblr.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/08/DNS-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/08/DNS-github.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/08/gh-pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/08/gh-pages.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/08/ovh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/08/ovh.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/11/guide_js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/11/guide_js.jpg -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/11/interchange_large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/11/interchange_large.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/11/interchange_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/11/interchange_small.png -------------------------------------------------------------------------------- /source/assets/images/blog/legacy/2013/11/this-is-the-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/legacy/2013/11/this-is-the-web.png -------------------------------------------------------------------------------- /source/assets/images/blog/simplicity.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/blog/simplicity.jpeg -------------------------------------------------------------------------------- /source/assets/images/front/books/nicolas-froidure-js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/books/nicolas-froidure-js.jpg -------------------------------------------------------------------------------- /source/assets/images/front/books/sitepoint-jump-start-responsive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/books/sitepoint-jump-start-responsive.jpg -------------------------------------------------------------------------------- /source/assets/images/front/books/smashing-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/books/smashing-mobile.jpg -------------------------------------------------------------------------------- /source/assets/images/front/books/smashing-redesign.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/books/smashing-redesign.jpg -------------------------------------------------------------------------------- /source/assets/images/front/homepage/logo-opensource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/homepage/logo-opensource.png -------------------------------------------------------------------------------- /source/assets/images/front/homepage/logo-react-native-london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/homepage/logo-react-native-london.jpg -------------------------------------------------------------------------------- /source/assets/images/front/homepage/logo-ruby-nord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/homepage/logo-ruby-nord.png -------------------------------------------------------------------------------- /source/assets/images/front/homepage/logo-takeofftalks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/homepage/logo-takeofftalks.png -------------------------------------------------------------------------------- /source/assets/images/front/init-npm-install.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/init-npm-install.gif -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/alt.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/arrow-down.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/arrow-left.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/arrow-right.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/arrow-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/arrow-up.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/cmd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/cmd.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/ctrl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/ctrl.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/d.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/g.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/l.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/p.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/pointer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/pointer.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/shift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/shift.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/slash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/slash.png -------------------------------------------------------------------------------- /source/assets/images/front/keyboard/tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/keyboard/tab.png -------------------------------------------------------------------------------- /source/assets/images/front/product-hunt-david-leuliette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/product-hunt-david-leuliette.png -------------------------------------------------------------------------------- /source/assets/images/front/responsive-design-tron-grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/responsive-design-tron-grid.jpg -------------------------------------------------------------------------------- /source/assets/images/front/south-park-browser.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/south-park-browser.jpg -------------------------------------------------------------------------------- /source/assets/images/front/sublime-macosx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/sublime-macosx.jpg -------------------------------------------------------------------------------- /source/assets/images/front/takeoff-conf-2014.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/takeoff-conf-2014.jpg -------------------------------------------------------------------------------- /source/assets/images/front/tools/atom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/atom.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/evernote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/evernote.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/firefox.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/frog.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/front-end-papier-crayon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/front-end-papier-crayon.jpg -------------------------------------------------------------------------------- /source/assets/images/front/tools/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/github.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/gitx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/gitx.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/imagealpha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/imagealpha.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/imageoptim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/imageoptim.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/iterm2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/iterm2.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/jpegmini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/jpegmini.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/licecap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/licecap.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/logo-firefox-dev-edition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/logo-firefox-dev-edition.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/pixelwindow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/pixelwindow.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/postico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/postico.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/recordit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/recordit.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/rename.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/rename.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/sequelpro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/sequelpro.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/sipapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/sipapp.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/spectacleapp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/spectacleapp.gif -------------------------------------------------------------------------------- /source/assets/images/front/tools/sublimetext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/sublimetext.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/validator-sac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/validator-sac.png -------------------------------------------------------------------------------- /source/assets/images/front/tools/virtualbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/tools/virtualbox.png -------------------------------------------------------------------------------- /source/assets/images/front/web-mobile-vs-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/web-mobile-vs-desktop.png -------------------------------------------------------------------------------- /source/assets/images/front/windows-95.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/windows-95.jpg -------------------------------------------------------------------------------- /source/assets/images/front/work/coaching.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/work/coaching.jpg -------------------------------------------------------------------------------- /source/assets/images/front/work/kanban.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/work/kanban.jpg -------------------------------------------------------------------------------- /source/assets/images/front/youtube-growth-hack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/front/youtube-growth-hack.png -------------------------------------------------------------------------------- /source/assets/images/hero-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /source/assets/images/icons/animat-customize-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-customize-color.gif -------------------------------------------------------------------------------- /source/assets/images/icons/animat-diamond.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-diamond.gif -------------------------------------------------------------------------------- /source/assets/images/icons/animat-image-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-image-color.gif -------------------------------------------------------------------------------- /source/assets/images/icons/animat-lightbulb-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-lightbulb-color.gif -------------------------------------------------------------------------------- /source/assets/images/icons/animat-linechart-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-linechart-color.gif -------------------------------------------------------------------------------- /source/assets/images/icons/animat-pencil-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-pencil-color.gif -------------------------------------------------------------------------------- /source/assets/images/icons/animat-responsive-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-responsive-color.gif -------------------------------------------------------------------------------- /source/assets/images/icons/animat-rocket-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-rocket-color.gif -------------------------------------------------------------------------------- /source/assets/images/icons/animat-search-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/icons/animat-search-color.gif -------------------------------------------------------------------------------- /source/assets/images/middleman.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /source/assets/images/nextjs-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | 10 | 16 | 19 | 22 | 25 | 29 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /source/assets/images/retailshake/no-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/retailshake/no-preview.png -------------------------------------------------------------------------------- /source/assets/images/retailshake/no-preview@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/retailshake/no-preview@2x.png -------------------------------------------------------------------------------- /source/assets/images/retailshake/no-preview@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/assets/images/retailshake/no-preview@3x.png -------------------------------------------------------------------------------- /source/assets/javascripts/application.js.coffee: -------------------------------------------------------------------------------- 1 | #= require "headroom.js/dist/headroom" 2 | #= require "topbar" 3 | 4 | $(document).foundation() 5 | -------------------------------------------------------------------------------- /source/assets/javascripts/front/about.js.coffee: -------------------------------------------------------------------------------- 1 | #= require "vendor/snapsvg" 2 | #= require "vendor/pizza" 3 | 4 | $(window).load -> 5 | Pizza.init() 6 | -------------------------------------------------------------------------------- /source/assets/javascripts/topbar.js.coffee: -------------------------------------------------------------------------------- 1 | toggleNavigation = -> 2 | button = $('#js-topbar--button') 3 | button.click (event) -> 4 | event.preventDefault() 5 | $('.js-topbar--list').toggleClass('is-on-viewport','is-away') 6 | 7 | toggleSearch = (event) -> 8 | event.preventDefault() 9 | form = $('#js-topbar--form form') 10 | icon = $('#js-topbar--form .l-action') 11 | button = $('#js-topbar--button') 12 | 13 | icon.toggleClass('is-hidden') 14 | button.toggleClass('is-hidden') 15 | form.toggleClass('is-hidden','is-expanded') 16 | 17 | searchBar = -> 18 | $('#js-topbar--search').click (event) -> 19 | event.preventDefault() 20 | toggleSearch(event) 21 | $('#js-search-input').focus() 22 | 23 | $('#js-topbar--close').click (event) -> 24 | event.preventDefault() 25 | toggleSearch(event) 26 | 27 | launchHeadroom = -> 28 | header = document.getElementById('js-topbar') 29 | headroom = new Headroom(header, 30 | offset: 300 31 | tolerance: 10 32 | classes: 33 | initial: 'animated' 34 | pinned: 'headroom--pinned' 35 | unpinned: 'headroom--unpinned' 36 | ) 37 | headroom.init() 38 | 39 | $ -> 40 | launchHeadroom() 41 | searchBar() 42 | toggleNavigation() 43 | -------------------------------------------------------------------------------- /source/assets/stylesheets/_colors.scss: -------------------------------------------------------------------------------- 1 | $white: #ffffff; 2 | $black: #1a1a1a; 3 | 4 | $gray-light: #fff9eb; 5 | $gray: #fbf3df; 6 | $gray-blue: #888fab; 7 | $gray-dark: #3f3f44; 8 | 9 | $blue: #1c56fb; 10 | $blue-light: #2196f3; 11 | $blue-dark: #11256c; 12 | 13 | $turquoise: #24ccdf; 14 | $pink: #f53fc7; 15 | $yellow: #fff637; 16 | 17 | $foundation-palette: ( 18 | primary: $blue, 19 | secondary: $pink, 20 | success: #259b24, 21 | warning: #ff5722, 22 | alert: #e51c23, 23 | ); 24 | $light-gray: $gray-light; 25 | $medium-gray: $gray; 26 | $dark-gray: $gray-dark; 27 | 28 | $primary-color: $blue; 29 | $secondary-color: $pink; 30 | 31 | 32 | 33 | // Hover colors 34 | // - - - - - - - - - - - - - - - - - - - - - - - - - 35 | 36 | $color-amazon: #e47911; 37 | $color-twitter: #1da1f2; 38 | $color-facebook: #3b5998; 39 | $color-linkedin: #0077b5; 40 | $color-github: #333333; 41 | $color-html: #f06529; 42 | $color-css: #3399ff; 43 | $color-js: #f0db4f; 44 | 45 | 46 | 47 | // Hover colors 48 | // - - - - - - - - - - - - - - - - - - - - - - - - - 49 | 50 | @mixin color-hover($color, $color-hover) { 51 | color: $color; 52 | 53 | &:hover, 54 | &:focus { 55 | color: $color-hover; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /source/assets/stylesheets/_custom-typeplate.scss: -------------------------------------------------------------------------------- 1 | // $BaseType 2 | // -------------------------------------// 3 | 4 | $typl8-prefixes: -webkit-, -moz-, -ms-, '' !default; 5 | 6 | 7 | 8 | // $Paragraphs 9 | // -------------------------------------// 10 | // Controls paragraphs vertical whitespace 11 | // for subsequent paragraphs. 12 | // 13 | // $typl8-paragraph-spacing [<'false'> | <'true'>] 14 | 15 | $typl8-paragraph-spacing: true; 16 | $typl8-indent-val: rem-calc(16); 17 | 18 | 19 | 20 | // $Color 21 | // -------------------------------------// 22 | 23 | $typl8-heading-color: $header-color; 24 | $typl8-copy-color: $body-font-color; 25 | 26 | 27 | 28 | // $Ampersands 29 | // -------------------------------------// 30 | 31 | $typl8-amp-fontface: Ampersand; 32 | $typl8-amp-fontfamily: Verdana, sans-serif; 33 | $typl8-amp-src: local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua'); 34 | $typl8-amp-fallback: local('Georgia'); 35 | 36 | 37 | 38 | // $DropCap 39 | // -------------------------------------// 40 | 41 | $typl8-dropcap-font-size: rem-calc(88); 42 | $typl8-dropcap-margin: rem-calc(-10 0 0 -30); 43 | $typl8-dropcap-padding: rem-calc(11); 44 | $typl8-dropcap-color: $secondary-color; 45 | -------------------------------------------------------------------------------- /source/assets/stylesheets/_settings-custom.scss: -------------------------------------------------------------------------------- 1 | // 1. Global 2 | // --------- 3 | 4 | $global-font-size: 120%; 5 | $global-width: rem-calc(1200); 6 | $global-lineheight: 1.6; 7 | 8 | $font-weight-normal: 400; 9 | $global-weight-bold: 900; 10 | $font-weight-black: 900; 11 | $global-flexbox: true; 12 | $global-radius: 2px; 13 | 14 | $body-background: $gray-light; 15 | $body-font-color: $blue-dark; 16 | 17 | $font-family-sans-serif: 'Lato', Helvetica, Roboto, Arial, sans-serif; 18 | $body-font-family: $font-family-sans-serif; 19 | 20 | $speed: 200ms; 21 | 22 | 23 | 24 | // 4. Base Typography 25 | // ------------------ 26 | 27 | $header-font-family: 'Chivo', sans-serif; 28 | $header-font-weight: $font-weight-black; 29 | $font-family-monospace: 'Ubuntu Mono', 'Monaco', monospace; 30 | 31 | $code-font-weight: normal; 32 | $code-background: transparent; 33 | $code-border: none; 34 | 35 | $header-color: $body-font-color; 36 | $header-lineheight: 1.1; 37 | $header-styles: ( 38 | small: ( 39 | 'h1': ('font-size': 24), 40 | 'h2': ('font-size': 20), 41 | 'h3': ('font-size': 19), 42 | 'h4': ('font-size': 18), 43 | 'h5': ('font-size': 17), 44 | 'h6': ('font-size': 16), 45 | ), 46 | medium: ( 47 | 'h1': ('font-size': 60), 48 | 'h2': ('font-size': 48), 49 | 'h3': ('font-size': 36), 50 | 'h4': ('font-size': 24), 51 | 'h5': ('font-size': 21), 52 | 'h6': ('font-size': 18), 53 | ), 54 | ); 55 | $header-small-font-color: $gray-blue; 56 | $hr-border: 1px solid rgba($gray-blue, 0.4); 57 | 58 | $anchor-color: $blue-dark; 59 | $anchor-color-hover: $white; 60 | $anchor-text-decoration: none; 61 | $anchor-text-decoration-hover: none; 62 | 63 | $blockquote-color: $gray-blue; 64 | $blockquote-padding: 1rem 1rem 0.5rem 4rem; 65 | $blockquote-border: 0; 66 | $cite-font-size: rem-calc(14); 67 | $cite-color: $turquoise; 68 | 69 | 70 | 71 | // Forms 72 | 73 | $form-spacing: rem-calc(26); 74 | $input-placeholder-color: $gray-blue; 75 | $input-font-family: $font-family-monospace; 76 | $input-border: 2px solid $gray-blue; 77 | $input-border-focus: 2px solid $primary-color; 78 | $input-shadow: none; 79 | $input-shadow-focus: 0 0 0 3px rgba($primary-color, 0.4); 80 | $input-transition: box-shadow $speed, border-color 0.25s ease-in-out; 81 | 82 | 83 | 84 | // 13. Callout 85 | // ----------- 86 | 87 | $callout-background: rgba($white, 0.4); 88 | $callout-background-hover: $white; 89 | $callout-background-fade: 0%; 90 | $callout-border: none; 91 | 92 | 93 | 94 | // 56. Xy Grid 95 | // ----------- 96 | 97 | $xy-grid: false; 98 | -------------------------------------------------------------------------------- /source/assets/stylesheets/application.css.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import "foundation-sites/scss/util/unit"; 4 | @import "colors"; 5 | @import "settings-custom"; 6 | @import "foundation-sites/scss/foundation"; 7 | 8 | @mixin foundation-everything( 9 | $flex: true 10 | ) { 11 | @if $flex { 12 | $global-flexbox: true !global; 13 | } 14 | 15 | @include foundation-global-styles; 16 | @if not $flex { 17 | @include foundation-grid; 18 | } 19 | @else { 20 | @if $xy-grid { 21 | @include foundation-xy-grid-classes; 22 | } 23 | @else { 24 | @include foundation-flex-grid; 25 | } 26 | } 27 | @include foundation-typography; 28 | @include foundation-forms; 29 | @include foundation-button; 30 | @include foundation-callout; 31 | @include foundation-menu; 32 | @include foundation-responsive-embed; 33 | @include foundation-media-object; 34 | @include foundation-title-bar; 35 | @include foundation-sticky; 36 | @include foundation-visibility-classes; 37 | 38 | @if $flex { 39 | @include foundation-flex-classes; 40 | } 41 | } 42 | 43 | @include foundation-everything($flex: true); 44 | 45 | @import "custom-typeplate"; 46 | @import "typeplate-mixins"; 47 | 48 | @import "components/typography"; 49 | @import "components/topbar"; 50 | @import "components/hero-banner"; 51 | @import "components/callout"; 52 | @import "components/pizza"; 53 | @import "components/sections"; 54 | @import "components/buttons"; 55 | @import "code"; 56 | 57 | @import "pages/about"; 58 | @import "pages/blog"; 59 | @import "pages/homepage"; 60 | @import "pages/webdesign"; 61 | @import "pages/good-practice"; 62 | @import "pages/footer"; 63 | @import "pages/styleguide"; 64 | 65 | // Need to refactor for menu 66 | // @import "foundation/scss/foundation/components/side-nav"; 67 | @import "components/magellan"; 68 | -------------------------------------------------------------------------------- /source/assets/stylesheets/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin button-style($color) { 2 | color: $white; 3 | border: 2px solid $color; 4 | background-color: $color; 5 | 6 | &:hover, 7 | &:focus { 8 | background-color: $body-background; 9 | border-color: $color; 10 | color: $color; 11 | } 12 | 13 | } 14 | 15 | .button { 16 | font-family: $font-family-monospace; 17 | letter-spacing: -1px; 18 | transition: background 150ms ease-in-out; 19 | position: relative; 20 | @include button-style($primary-color); 21 | 22 | &.secondary { 23 | @include button-style($secondary-color); 24 | } 25 | &.button-tweet { 26 | @include button-style($color-twitter); 27 | } 28 | 29 | &.button-icon { 30 | &::after { 31 | transition: all 200ms ease-in-out; 32 | position: absolute; 33 | opacity: 0; 34 | margin-left: -1em; 35 | left: auto; 36 | display: inline-block; 37 | content: attr(data-icon); 38 | // font: normal normal normal 14px/1 FontAwesome; 39 | } 40 | &:hover { 41 | &::after { 42 | left: auto; 43 | margin-left: .3em; 44 | opacity: 1; 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /source/assets/stylesheets/components/_hero-banner.scss: -------------------------------------------------------------------------------- 1 | @keyframes rainbow { 2 | 0% { background-position: 0 82%; } 3 | 50% { background-position: 100% 19%; } 4 | 100% { background-position: 0 82%; } 5 | } 6 | 7 | .hero-banner { 8 | background: linear-gradient(124deg, $blue, $blue, $blue, $blue-light, $blue-dark, $blue-dark); 9 | background-size: 1800% 1800%; 10 | animation: rainbow 16s ease infinite; 11 | 12 | margin-bottom: rem-calc(30); 13 | padding-top: $topbar-height; 14 | padding-bottom: $topbar-height; 15 | text-align: center; 16 | position: relative; 17 | 18 | @include breakpoint(small) { 19 | padding-top: ($topbar-height * 2.5); 20 | } 21 | 22 | .title, 23 | .emphasis { 24 | color: $white; 25 | text-shadow: 0 1px 2px rgba(0,0,0,0.3); 26 | } 27 | 28 | .title { 29 | font-size: rem-calc(40); 30 | padding: rem-calc(20 10 10 10); 31 | margin-bottom: 0; 32 | letter-spacing: -1px; 33 | } 34 | .emphasis { 35 | padding-left: rem-calc(10); 36 | padding-right: rem-calc(10); 37 | margin-bottom: rem-calc(60); 38 | } 39 | 40 | .wave-picture { 41 | position: absolute; 42 | bottom: 0; 43 | left: 0; 44 | } 45 | } 46 | 47 | .hero-contact { 48 | padding-top: $topbar-height; 49 | h1 { 50 | font-size: rem-calc(40); 51 | margin-top: 0; 52 | @include breakpoint(small) { 53 | margin-top: rem-calc(20); 54 | margin-bottom: 0; 55 | } 56 | } 57 | .callout { 58 | margin-top: 0; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /source/assets/stylesheets/components/_magellan.scss: -------------------------------------------------------------------------------- 1 | .menu-magellan { 2 | .title { 3 | padding: 0.7rem 1rem; 4 | text-transform: uppercase; 5 | font-family: $font-family-monospace; 6 | } 7 | a { 8 | font-weight: $font-weight-normal; 9 | border-bottom: 0; 10 | background: transparent; 11 | @include color-hover($gray-blue,$primary-color); 12 | } 13 | a.is-active { 14 | color: $turquoise; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /source/assets/stylesheets/components/_pizza.scss: -------------------------------------------------------------------------------- 1 | // Pie Chart Variables 2 | $pie-color: $primary-color; 3 | 4 | // number of items in your list 5 | $items-in-list: 6; 6 | $items-font-size: rem-calc(22); 7 | 8 | //Adjusts the Hue 9 | // @function -modify-color($color, $counter, $depth: $items-in-list) { 10 | // @return adjust_hue($pie-color, $i * ($items-in-list * 3)); 11 | // } 12 | 13 | //Adjusts the Saturation. 14 | @function -modify-color($color, $counter, $depth: ($items-in-list + 1)) { 15 | @return lighten($pie-color, $i * ($items-in-list + 1)); 16 | } 17 | 18 | // The loop that steps through the li's and assigns them a different color 19 | $i: 0; 20 | @while $i < ($items-in-list + 1) { 21 | [data-pie-id] li:nth-child(#{$i}) { 22 | color: -modify-color($pie-color, $i); 23 | } 24 | $i: $i + 1; 25 | } 26 | 27 | ul[data-pie-id] { 28 | list-style: none; 29 | padding: rem-calc(10); 30 | margin-top: rem-calc(60); 31 | li { 32 | cursor: pointer; 33 | font-size: $items-font-size; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /source/assets/stylesheets/components/_sections.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | margin: rem-calc(60) 0 rem-calc(80); 3 | padding: rem-calc(40) 0; 4 | &.l-light { 5 | background-color: $gray; 6 | margin: 0; 7 | padding: rem-calc(60 0); 8 | } 9 | &.l-lighter { 10 | background-color: $white; 11 | margin: 0; 12 | padding: rem-calc(60 0); 13 | } 14 | &.secondary { 15 | margin: 0; 16 | background-color: $secondary-color; 17 | padding: rem-calc(60 0); 18 | text-shadow: 0 1px 2px rgba(0,0,0,0.2); 19 | 20 | h1, 21 | h2, 22 | h3, 23 | h4, 24 | h5, 25 | h6 { 26 | color: $yellow; 27 | } 28 | 29 | a, 30 | p { 31 | color: $white; 32 | } 33 | } 34 | } 35 | 36 | .section--inverse { 37 | background-color: $blue-dark; 38 | background-image: image-url('star-bg.svg'); 39 | background-repeat: repeat-x; 40 | background-position: center 0; 41 | background-size: 100% auto; 42 | 43 | padding: rem-calc(40 20); 44 | margin: rem-calc(40 0); 45 | box-shadow: rem-calc(-500) 0 0 0 $blue-dark; 46 | @include typl8-hyphens(none); 47 | 48 | p { 49 | color: $white; 50 | margin: rem-calc(0 0 20 0); 51 | @include breakpoint(small) { 52 | margin: 0; 53 | } 54 | } 55 | 56 | .button { 57 | margin: 0; 58 | } 59 | 60 | .l-title { 61 | margin: rem-calc(0 0 10 0); 62 | color: $white; 63 | text-shadow: 0px 1px 2px rgba(0,0,0,0.6); 64 | font-size: 40px; 65 | 66 | } 67 | .l-baseline { 68 | opacity: 0.6; 69 | } 70 | 71 | .l-link { 72 | margin: rem-calc(20 0); 73 | text-align: center; 74 | a { 75 | color: $white; 76 | border-color: $white; 77 | } 78 | } 79 | } 80 | 81 | .section--card { 82 | display: flex; 83 | align-items: center; 84 | justify-content: center; 85 | @include breakpoint(small only) { 86 | flex-direction: column; 87 | } 88 | .l-icon { 89 | width: rem-calc(96); 90 | text-align: center; 91 | i { 92 | margin: 0 rem-calc(5); 93 | } 94 | } 95 | 96 | .l-content { 97 | flex-grow: 1; 98 | p, pre { 99 | margin-bottom: 0; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /source/assets/stylesheets/components/_typography.scss: -------------------------------------------------------------------------------- 1 | @mixin truncate($width: 100%) { 2 | max-width: $width; 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | white-space: nowrap; 6 | } 7 | 8 | .truncate { 9 | @include truncate(); 10 | } 11 | 12 | h1, 13 | h2 { 14 | letter-spacing: -3px; 15 | } 16 | 17 | h3 { 18 | letter-spacing: -1px; 19 | } 20 | 21 | h1, 22 | h2, 23 | h3 { 24 | @include typl8-hyphens(none); 25 | @include breakpoint(small only) { 26 | letter-spacing: 0; 27 | } 28 | } 29 | 30 | *::selection { 31 | background: rgba($black, 0.1); 32 | } 33 | 34 | .ampersand { 35 | @include typl8-ampersand($typl8-amp-fontface, $typl8-amp-fontfamily); 36 | } 37 | 38 | pre { 39 | *::selection { 40 | background: rgba($white, 0.6); 41 | } 42 | } 43 | 44 | blockquote { 45 | font-weight: $global-weight-bold; 46 | position: relative; 47 | 48 | &::before { 49 | color: $gray-blue; 50 | font-family: "FontAwesome"; 51 | content: "\f10d"; 52 | position: absolute; 53 | top: -30px; 54 | left: -5px; 55 | font-size: rem-calc(64); 56 | opacity: 0.1; 57 | } 58 | 59 | cite { 60 | color: $gray-blue; 61 | } 62 | } 63 | 64 | .emperor { @extend h1; } 65 | .vador { @extend h2; } 66 | .maul { @extend h3; } 67 | .sith { @extend h4; } 68 | .acolyte { @extend h5; } 69 | 70 | a { 71 | font-weight: $font-weight-black; 72 | padding: rem-calc(2); 73 | border-bottom: 3px solid $blue-light; 74 | transition: color 100ms, background-color 100ms; 75 | 76 | &:hover, 77 | &:focus { 78 | background-color: $blue-light; 79 | border-bottom-color: $blue-light; 80 | } 81 | } 82 | 83 | [href^="http://"]:not([href*="davidl.fr"])::after, 84 | [href^="https://"]:not([href*="davidl.fr"])::after { 85 | font-family: FontAwesome; 86 | padding-left: rem-calc(5); 87 | content: "\f08e"; 88 | font-size: 13px; 89 | } 90 | 91 | .link-reset { 92 | border-bottom: 0; 93 | 94 | &:hover { 95 | background-color: transparent; 96 | color: inherit; 97 | } 98 | 99 | &::after { 100 | content: none !important; 101 | padding: 0; 102 | } 103 | } 104 | 105 | .text-tiny { 106 | font-size: rem-calc(13); 107 | font-weight: $font-weight-normal; 108 | margin-bottom: rem-calc(19); 109 | color: $gray-dark; 110 | } 111 | 112 | .mr-0.ml-0 { 113 | margin-left: 0; 114 | margin-right: 0; 115 | } 116 | -------------------------------------------------------------------------------- /source/assets/stylesheets/pages/_about.scss: -------------------------------------------------------------------------------- 1 | .text-html { 2 | color: $color-html; 3 | } 4 | .text-css { 5 | color: $color-css; 6 | } 7 | .text-js { 8 | color: $color-js; 9 | } 10 | 11 | .m-photo-album img { 12 | border: 5px solid $white; 13 | box-shadow: 0px 1px 1px rgba($black, 0.3); 14 | 15 | transition: transform $speed ease-in-out; 16 | border-radius: 100%; 17 | max-height: rem-calc(200); 18 | margin-bottom: rem-calc(20); 19 | 20 | &:hover { 21 | transform: scale(1.1); 22 | } 23 | } 24 | 25 | .about-badges { 26 | img { 27 | max-width: 150px; 28 | margin-bottom: rem-calc(20); 29 | } 30 | .colums { 31 | display: flex; 32 | flex: 1; 33 | flex-direction: column; 34 | align-items: center; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /source/assets/stylesheets/pages/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer-navigation { 2 | padding-top: rem-calc(40); 3 | padding-bottom: rem-calc(40); 4 | background-color: $turquoise; 5 | position: relative; 6 | z-index: 90; 7 | font-size: rem-calc(16); 8 | 9 | .footer-links { 10 | @include menu-base; 11 | @include menu-direction(vertical); 12 | 13 | a { 14 | font-weight: $font-weight-normal; 15 | @include color-hover($gray-dark, $primary-color); 16 | background: transparent; 17 | border-bottom: 0; 18 | } 19 | .title { 20 | padding: rem-calc(14); 21 | text-transform: uppercase; 22 | font-family: $font-family-monospace; 23 | color: $yellow; 24 | font-weight: $global-weight-bold; 25 | } 26 | } 27 | } 28 | 29 | 30 | .footer { 31 | background-color: #24292e; 32 | background-image: image-url('star-bg.svg'), linear-gradient(#191c20, #24292e 15%); 33 | background-repeat: repeat-x; 34 | background-position: center 0, 0 0, 0 0; 35 | background-size: 100% auto; 36 | 37 | 38 | padding: rem-calc(40 0); 39 | position: relative; 40 | z-index: 90; 41 | 42 | p { 43 | color: $white; 44 | } 45 | 46 | label { 47 | color: $white; 48 | margin-bottom: rem-calc(10); 49 | } 50 | a { 51 | border: none; 52 | } 53 | .title-subscribe { 54 | @extend h4; 55 | margin-top: rem-calc(40); 56 | color: $secondary-color; 57 | font-weight: $font-weight-black; 58 | } 59 | 60 | .colophon { 61 | text-align: center; 62 | margin-top: rem-calc(40); 63 | } 64 | } 65 | 66 | -------------------------------------------------------------------------------- /source/assets/stylesheets/pages/_good-practice.scss: -------------------------------------------------------------------------------- 1 | .good-practice { 2 | .fa-thumbs-o-up { 3 | color: $success-color; 4 | & + span { 5 | color: $success-color; 6 | } 7 | } 8 | .fa-thumbs-o-down { 9 | color: $alert-color; 10 | & + span { 11 | color: $alert-color; 12 | } 13 | } 14 | 15 | .l-spacing { 16 | letter-spacing: rem-calc(1); 17 | } 18 | 19 | &--shorcut { 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | justify-content: space-around; 24 | padding: rem-calc(10 0); 25 | img { 26 | max-height: 60px; 27 | } 28 | i { 29 | padding: rem-calc(10); 30 | } 31 | } 32 | 33 | &--sublime { 34 | border: 3px solid rgba($black,.1); 35 | border-bottom: 0; 36 | border-radius: 5px 5px 0 0; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /source/assets/stylesheets/pages/_homepage.scss: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | from { 3 | opacity: 0; 4 | } 5 | 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @mixin fade-in-animation() { 12 | animation-name: fadeIn; 13 | animation-duration: 1s; 14 | animation-fill-mode: both; 15 | animation-delay: 500ms; 16 | } 17 | 18 | .hero-homepage { 19 | @include fade-in-animation(); 20 | 21 | background-repeat: repeat-x; 22 | background-position: center top; 23 | background-size: 110% auto; 24 | background-image: image-url('bg-hero.svg'), linear-gradient(to right, $blue-light 0%, $primary-color 80%); 25 | 26 | display: flex; 27 | padding-bottom: $topbar-height; 28 | padding-top: $topbar-height; 29 | color: $white; 30 | 31 | h1 { 32 | text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 33 | color: $yellow; 34 | } 35 | p { 36 | text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 37 | } 38 | em { 39 | letter-spacing: -2px; 40 | font-size: 2.7rem; 41 | } 42 | @include breakpoint(medium) { 43 | padding-top: ($topbar-height * 2); 44 | } 45 | } 46 | 47 | .homepage-picture { 48 | max-width: 130px; 49 | max-height: 130px; 50 | border-radius: 5px; 51 | margin-bottom: 1rem; 52 | } 53 | -------------------------------------------------------------------------------- /source/assets/stylesheets/pages/_styleguide.scss: -------------------------------------------------------------------------------- 1 | // This file is only for the styleguide 2 | 3 | $color-list-box-size: rem-calc(100); 4 | 5 | @mixin color-list-box($bg) { 6 | background-color: $bg; 7 | 8 | // This find the lightness percentage of the background color. 9 | $bg-lightness: lightness($bg); 10 | @if $bg-lightness > 70% { 11 | color: $black; 12 | text-shadow: 0px 2px rgba($white,0.4); 13 | } 14 | @else { 15 | color: $white; 16 | text-shadow: 0px 2px rgba($black,0.4); 17 | } 18 | } 19 | 20 | .color-list { 21 | &--box { 22 | height: $color-list-box-size; 23 | width: $color-list-box-size; 24 | border: 5px solid $white; 25 | text-align: center; 26 | padding: rem-calc(10); 27 | padding-top: rem-calc(15); 28 | 29 | &.primary { 30 | @include color-list-box($primary-color); 31 | } 32 | &.secondary { 33 | @include color-list-box($secondary-color); 34 | } 35 | &.alert { 36 | @include color-list-box($alert-color); 37 | } 38 | &.success { 39 | @include color-list-box($success-color); 40 | } 41 | 42 | &.light-gray { 43 | @include color-list-box($light-gray); 44 | } 45 | &.medium-gray { 46 | @include color-list-box($medium-gray); 47 | } 48 | &.dark-gray { 49 | @include color-list-box($dark-gray); 50 | } 51 | &.black { 52 | @include color-list-box($black); 53 | } 54 | &.white { 55 | @include color-list-box($white); 56 | } 57 | 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /source/assets/stylesheets/pages/_webdesign.scss: -------------------------------------------------------------------------------- 1 | .template-grid { 2 | padding: rem-calc(5); 3 | background-color: $white; 4 | 5 | span { 6 | margin: rem-calc(5); 7 | display: block; 8 | background-color: $gray-blue; 9 | height: rem-calc(50); 10 | } 11 | } 12 | 13 | .m-webdesign, 14 | .m-manifest { 15 | .fa { 16 | color: $turquoise; 17 | &.l-large { 18 | font-size: rem-calc(80); 19 | margin: rem-calc(20 0); 20 | } 21 | } 22 | } 23 | 24 | .m-webdesign { 25 | .hero-banner { 26 | position: relative; 27 | overflow: hidden; 28 | background-color: #3D779A; 29 | min-height: 60vh; 30 | 31 | .row { 32 | position: relative; 33 | z-index: 100; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /source/blog/articles/2011-11-28-framework-php.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2011-11-28 3 | slug: framework-php 4 | title: Choix du framework Symfony, CodeIgniter, cakePHP, or FuelPHP ? 5 | page_title: Choisir son framework php 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | __Update__ Je ne peux plus travailler avec du php. Pendant des années j'ai essayé… en vain…
11 | J'ai découvert [Ruby on Rails](https://github.com/flexbox) et c'est — selon moi — la meilleure technologie pour faire __sérieusement du développement Front-end__. 12 | 13 | --- 14 | 15 | Pour le développement de la [nouvelle version de mon studio de création](https://archive.davidl.fr) je me suis posé beaucoup de questions : 16 | 17 | - Webdesign ou développement lourd ? 18 | - Site statique or not ? 19 | - Je reprends ce que je connais déjà ? 20 | - Il est temps d'en apprendre un nouveau ? 21 | - WTF with [Ruby on Rail](http://fr.wikipedia.org/wiki/Ruby_on_Rails) ? 22 | 23 | Après réflexion nous sommes au XXIème siècle : ce sont les dinosaures qui codaient des sites full HTML. Je me suis lancé dans la recherche d'un framework Php pour me permettre de gagner du temps, je ne vais tout de même pas réinventer la roue :) . 24 | 25 | Un petit tour sur wikipédia : je trouve une liste (surement pas à jour mais on fait avec) pour commencer mes investigations dans [le choix de mon framework php](http://fr.wikipedia.org/wiki/Liste_de_frameworks_PHP). 26 | 27 | Je retrouve dans mes bookmarks une réflexion de @babozor qui se[ posait les mêmes questions existentielles](http://www.travailleursduweb.com/2008/04/29/le-difficile-choix-dun-framework-php.html)… 28 | 29 | C'est à partir de ce moment que ça deviens compliqué. 30 | Je lance un petit tweet, je découvre le petit dernier qui m'est inconnu :[ Fuel PHP.](http://fuelphp.com/) 31 | 32 | Résultat : j'ai passé 3 heures à lire les dernières informations à son sujet… 33 | 34 | Finalement j'ai choisi [codeIngniter](http://codeIngniter.com) pour plusieurs raisons : 35 | 36 | - Je ne connais pas ce framework, c'est une bonne occasion pour creuser le sujet 37 | - Architecture de [programmation Modèle Vue Contrôleur](http://fr.wikipedia.org/wiki/Mod%C3%A8le-Vue-Contr%C3%B4leur) 38 | - Solution simple et légère 39 | - [Documentation ](http://www.codeigniter.fr/user_guide/)claire et exhaustive 40 | - Communauté est importante 41 | - J'aime bien leur logo (comme quoi le marketing ça fonctionne) 42 | 43 | La suite au prochain épisode ! 44 | 45 | Bonus : je vous partage une [introduction au framework codeIgniter](http://www.siteduzero.com/tutoriel-3-370694-codeigniter-le-framework-au-service-des-zeros.html), et une bonne dizaines d'heures de [formation vidéo](http://net.tutsplus.com/sessions/codeigniter-from-scratch/) sur le sujet. 46 | -------------------------------------------------------------------------------- /source/blog/articles/2011-12-05-declaration-autoentrepreneur.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2011-12-05 3 | slug: declaration-autoentrepreneur 4 | title: 'Déclaration pour obtenir un SIRET' 5 | page_title: 'Auto-entrepreneur : Déclaration et numéro SIRET' 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | > Pour devenir auto-entrepreneur tout se fait par internet... 11 | > 12 | > Ra's al Ghul 13 | 14 | 15 | A l'aube de l'année 2012 Il y a encore du chemin à parcourir ! (si vous avez besoin de quelqu'un pour faire une refonte du site n'hésitez pas [à me contacter](https://archive.davidl.fr/contact.html)) 16 | 17 | Je vais vous exposer mon parcours chaotique pour devenir auto-entrepreneur : 18 | 19 | Déclaration sur le site officiel le 28 octobre 2011. 20 | J'attends les [15 jours de délai](http://lentreprise.lexpress.fr/statut-auto-entrepreneur/auto-entrepreneur-comment-faire-votre-premiere-teledeclaration_19670.html) maximum : toujours pas de nouvelles... 21 | 22 | Je vous passe les nombreux coups de téléphones donnés à l'[URSSAF ](http://www.urssaf.fr/)et à la [Chambre de Commerce](http://www.grand-lille.cci.fr/) qui sont incapables de me dire si ma candidature est bien prise en compte... 23 | 24 | Je patiente... 25 | 26 | Je reçois finalement mon numéro SIRET par la poste le 05 Décembre, soit 37 jours après. 27 | 28 | Moralité : 37 jours en temps normal cela représente un siècle en temps internet non ? 29 | 30 | Je partage les bookmarks que j'ai eu le temps de lire et de relire pendant mes jours d'attente : 31 | 32 | 33 | 34 | 35 | * Le [numéro SIRET](http://fr.wikipedia.org/wiki/Syst%C3%A8me_d%E2%80%99identification_du_r%C3%A9pertoire_des_%C3%A9tablissements) quézako ? 36 | 37 | 38 | * Le[ portail officiel](http://www.lautoentrepreneur.fr/index.htm) des auto-entrepreneurs 39 | 40 | 41 | * Description du [statut ](http://www.gouvernement.fr/gouvernement/le-statut-de-l-auto-entrepreneur)de l'auto-entrepreneur 42 | 43 | 44 | * Le[ Centre de Formalité des Entreprises](http://www.grand-lille.cci.fr/2011/08/25/le-centre-de-formalites-des-entreprises/#CFE) de Lille pour savoir à qui vous adresser (ce qui est dans mon cas une bonne blague les personnes contactées n'ont jamais pu me répondre) 45 | 46 | 47 | * Une bonne [FAQ claire et lisible](http://www.cci.fr/web/auto-entrepreneur) 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /source/blog/articles/2011-12-05-mesure-pixel.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2011-12-05 3 | slug: mesure-pixel 4 | title: Mesurer les pixels de l'écran 5 | page_title: Mesurer la taille de son écran 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Dans la vie de l'intégrateur Web on a besoin de mesurer un peu, beaucoup, passionnément, à la folie les pixels de l'écran. 11 | Pendant que certains font ça au double décimètre moi j'utilise [Pixel Window](http://www.pixelwindowapp.com/). 12 | Ce petit logiciel fonctionne grâce à Adobe Air, il est disponible pour Linux, Windows et MacOS. 13 | 14 | ![Mesurer taille écran](blog/legacy/2011/11/pixelWindow.png?raw=true) 15 | -------------------------------------------------------------------------------- /source/blog/articles/2012-01-11-afficher-masquer-la-grille-des-pixels-en-zoom-photoshop.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2012-01-11 3 | slug: afficher-masquer-la-grille-des-pixels-en-zoom-photoshop 4 | title: Photoshop afficher la grille des pixels 5 | page_title: Tutoriel Photoshop 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Depuis Photoshop CS5 une fonctionnalité permet d'afficher les pixels. 11 | Pratique ? pas toujours, dans certains cas de retouche cela peut être dérangeant. 12 | 13 | ## Comment afficher / masquer la grille des pixels ? 14 | 15 | `Menu` > `Affichage` / `Afficher` / `Grille des pixels` 16 | 17 | ![La grille des pixels avec Photoshop](blog/legacy/2012/01/grillePixelPhotoshop.png?raw=true) 18 | -------------------------------------------------------------------------------- /source/blog/articles/2012-06-08-windows-repertoire-git.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2012-06-08 3 | slug: windows-repertoire-git 4 | title: "Astuce Windows : changer le répertoire par défaut de git" 5 | page_title: git & windows 6 | changefreq: monthly 7 | priority: 0.4 8 | --- 9 | 10 | Si vous utilisez un outil de versioning comme git avec windows, vous avez du courage, je vais vous montrer comment gagner du temps en évitant de parcourir vos répertoires à la main. 11 | 12 | ~~~zsh 13 | c: 14 | cd web 15 | cd www 16 | cd projet1 17 | ... 18 | ~~~ 19 | 20 | ## Lancement par défaut 21 | 22 | ![Le répertoire par défaut de git](blog/legacy/2012/06/1.default.jpg?raw=true) 23 | _Le répertoire par défaut de git_ 24 | 25 | ## Git Bash 26 | 27 | Ouvrez le menu démarrer : 28 | 29 | 1. Rechercher "git bash" 30 | 2. Clic droit / Propriétés sur l'icone 31 | 32 | ![Git Bash](blog/legacy/2012/06/2.gitBash.jpg?raw=true) 33 | 34 | 35 | ## Changer le répertoire 36 | 37 | Choisissez le répertoire cible de votre projet -> Démarrer dans : 38 | 39 | ![Changer le répertoire cible](blog/legacy/2012/06/3.changeURL.jpg?raw=true) 40 | 41 | _Changez le répertoire cible_ 42 | 43 | ## Et voila! 44 | 45 | ![Ready to commit](blog/legacy/2012/06/4.newRoot.jpg?raw=true) 46 | 47 | _Ready to commit_ 48 | -------------------------------------------------------------------------------- /source/blog/articles/2012-07-13-igoogle-xml-opml.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2012-07-13 3 | slug: igoogle-xml-opml 4 | title: 'iGoogle va fermer : sauvez vos flux RSS !' 5 | page_title: "Exporter ses flux RSS" 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | ![iGoogle](blog/legacy/2012/07/480149483_67804f313c-300x127.jpg?raw=true) 11 | 12 | iGoogle va fermer. 13 | Je trouve ça moche. 14 | J'utilise ce service depuis le début, étant fan de la simplicité de ce lecteur de flux RSS. 15 | Mais toutes les belles choses ont une fin, j'ai du trouver une solution pour pouvoir continuer à suivre l'actualité de mes sites préférés. 16 | 17 | Dans cet article vous apprendrez comment : 18 | 19 | 1. Exporter vos flux RSS 20 | 2. Convertir le format XML en OPML 21 | 3. Trouver un nouvel agrégateur RSS 22 | 23 | ## Sauvegarder vos flux 24 | 25 | 26 | 27 | 28 | ## Convertir le format iGoogle 29 | 30 | 31 | Le format de base pour l'importation / exportation de flux RSS des agrégateurs est le OPML. 32 | 33 | iGoogle propose un export en XML. (C'est peut être pour ça que le service ferme #troll) 34 | Voici un site qui vous permettra de faire l'export : [Export iGoogle Feeds to OPML](http://googlesystem.blogspot.fr/2008/07/export-igoogle-feeds-to-opml.html). 35 | 36 | Si vous rencontrez des problèmes lors de l'export vous pouvez [construire entièrement votre fichier OPML](http://reader.feedshow.com/goodies/opml/OPMLBuilder-create-opml-from-rss-list.php). Il vous suffit d'avoir les URL de vos  flux RSS. 37 | -------------------------------------------------------------------------------- /source/blog/articles/2012-10-16-question-wireframe.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2012-10-16 3 | slug: question-wireframe 4 | title: 4 questions à se poser pendant la création de wireframe 5 | page_title: Comment commencer un projet web ? 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Pour créer un site web certains webdesigners démarrent directement Photoshop pour jouer avec les pixels. 11 | Je fait parti de ceux qui prennent un chemin diamétralement opposé : j’éteins mon PC et je prends un papier et du crayon. 12 | 13 | Je dessine un schéma qui défini les différentes zones de la page web. Cela me permet d'être concentré uniquement sur la mise en page et la disposition du contenu. 14 | 15 | ![Identifiez les zones de votre site](blog/legacy/2012/10/question_wireframe.png?raw=true) 16 | 17 | 18 | Pendant la création de votre wireframe (ou maquette fil de fer) vous devriez vous posez 4 questions : 19 | 20 | * Quel est le contenu de cette page ? 21 | * Comment les différents éléments de contenu sont liés les un aux autres ? 22 | * Comment pourraient-ils éventuellement être organisés ? 23 | * Comment l'utilisateur peut interagir avec ce contenu ? 24 | 25 | 26 | C'est tout. 27 | 28 | 29 | Si vous êtes déjà en train de réfléchir à propos des polices et des images c'est que vous êtes déjà sorti de cette étape. Vous n'êtes plus concentré sur le contenu et la structure. 30 | -------------------------------------------------------------------------------- /source/blog/articles/2012-11-23-tarif-webdesigner.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2012-11-23 3 | slug: tarif-webdesigner 4 | title: Quel est le tarif horaire d'un webdesigner ? 5 | page_title: Fixer son tarif en freelance 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | En freelance, fixer un tarif horaire et surtout évaluer [combien coûte un site internet](/blog/prix-site-internet.html) est très compliqué. 11 | 12 | Beaucoup de clients me reprochent d'être trop cher. 13 | Ils ont surement vu une publicité à la TV pour la création de [site gratuit chez 1&1](http://siteweb.1and1.fr/?linkId=AC:default.ct.tab.mywebsite.business&ucuoId=PUAC:default.WH.FR-20121123110049-DADD8F3DD0360B8DB9330779E136A072.TCpfix146a&ac=OM.FR.FRd13K41345T7073a) et pensent qu'en claquant des doigt je peux pondre un site web à partir d'un contenu tenant sur un ticket de métro. 14 | 15 | > J'ai une super idée de site ! ce serait une copie de tel site mais en changeant 2 ou 3 choses 16 | > 17 | > Le client type du XXIème siècle 18 | 19 | Je suis pédagogue, j'explique simplement qu'avoir une idée c'est bien, avoir du contenu c'est mieux et plus constructif. 20 | 21 | Pour les plus plus débrouillards qui n'ont pas forcement le budget je les oriente vers [squarespace](http://www.squarespace.com/). Pour 15$ par mois les fonctionnalités proposées sont simplement hallucinantes (nom de domaine + site adaptatif + analyses de trafic + commentaires ...) 22 | 23 | En tant que travailleur indépendant mon tarif s'explique simplement, j'ai plusieurs charges inhérentes à chaque projet : 24 | 25 | * Acheter des logiciels (La master collection d'Adobe est à 3600€) 26 | * Se former (Environ 50$ par mois en achat d'[ebook](http://products.sitepoint.com/) ou de [livres](https://shop.smashingmagazine.com/)) 27 | * Les 33% de charges pour votre assurance maladie 28 | * Les 33% de charges pour l'urssaff 29 | * ... 30 | 31 | 32 | ## Solution pour un calcul rapide 33 | 34 | 35 | ![Calculer simplement son tarif horaire](blog/legacy/2012/11/rate.png?raw=true) 36 | 37 | [Your Rate](http://www.yourrate.co/) est un site simple d'accès (et en plus il est adaptatif). 38 | Il y a 3 champs à remplir : 39 | 40 | * Le salaire à atteindre 41 | * Le nombre d'heures travaillées 42 | * Le nombre de jours de repos 43 | 44 | 45 | Ce n'est pas la solution ultime mais ce site permet de se faire rapidement une idée de son tarif horaire. 46 | 47 |
48 |
49 |

50 | Vous souhaitez évaluer le prix de votre site internet ? 51 | consultez mes tarifs concernant ​​l'intégration et le développement front-end. 52 |

53 |
54 | -------------------------------------------------------------------------------- /source/blog/articles/2013-01-09-formation-print-web.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-09 3 | slug: formation-print-web 4 | title: Formation du print vers le web 5 | page_title: Formation développement et intégration web à Lille 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Récemment j'ai réalisé avec l'équipe de [VLC3 FORMATION](http://www.vlc3.com/) un programme pédagogique sur l'évolution des projets web. 11 | Retour sur ces 2 jours de formation intense qui explique toutes les étapes de la création de site web au XXième siècle. 12 | 13 | 14 | ## VCL 3 ? 15 | 16 | 17 | ![VLC3 formation](blog/legacy/2013/01/logo.png?raw=true) 18 | 19 | Cet organisme de formation propose des programmes à la cartes à ses clients. 20 | Nous avons construis un programme simple avec de multiplies exemples concrets. 21 | 22 | 23 | ## Objectif 24 | 25 | 26 | Accompagner des profils travaillant dans le monde du print pour leur donner une vision globale de la création de site web. 27 | 28 | Mon principal défi ? Changer leur habitudes et leur donner le déclic pour créer des sites web responsive (adapté à n'importe quelle résolution). 29 | 30 | De nos jours il faut adopter un mode de pensée out-of-the-box : voir le web comme un flux et non de manière statique. 31 | 32 | 33 | ## Le programme 34 | 35 | 36 | 5 axes principaux avec un découpage des étapes de toute création de site web : 37 | 38 | * Brainstorming 39 | * Conception / Ergonomie 40 | * Design 41 | * Intégration / Développement 42 | * Mise en production 43 | 44 | 45 | ![Conception des pages](blog/legacy/2013/01/Capture.png?raw=true) 46 | 47 | Vous souhaiter découvrir le contenu de la formation en live : [http://davidleuliette.com/formation/](http://davidleuliette.com/formation/) 48 | 49 | Utilisez la touche échap pour avoir accès eu plan et les flèches pour naviguer dans le contenu 50 | 51 | 52 | ## Intéressé ? 53 | 54 | 55 | La version animée de cette formation vous intéresse ? 56 | 57 | Je vous invite à prendre contact avec loic.lebez@vlc3.com ou visiter leur [site internet](http://www.vlc3.com/). 58 | -------------------------------------------------------------------------------- /source/blog/articles/2013-08-14-breakpoint.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-08-14 3 | slug: breakpoint 4 | title: Utiliser des breakpoint en CSS pour votre site responsive 5 | page_title: Ne fixez pas vos breakpoint en javascript 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Nous avons un problème dans la conception adaptative : Les breakpoint sont fixés en CSS et nous devons exécuter certaines actions en javascript. 11 | pokemonbreakpoint est une façon amusante de faire le lien entre les 2 mondes. 12 | 13 | ## Une règle pour les attraper tous 14 | 15 | Avoir une convention de nommage est crucial pour votre application. 16 | 17 | Il faut définir vos variables dans un fichier. J'utilise sass qui me permets d'utiliser des variables et généralement je nomme ce fichier `_settings.scss`. 18 | 19 | $small-screen: 641px; 20 | $medium-screen: 1280px; 21 | $large-screen: 1440px; 22 | 23 | Maintenant, nous devons trouver un emplacement pour l'élément qui accueillera votre variable. Vous pouvez choisir l'élement `body:after` mais pour être plus identifiable j'ai décidé de l'associer à un id `#media-query--name`. 24 | 25 | Dans votre fichier `_breakpoint.scss` remplacez `#media-query--name:after` par votre nouveau naming explicite 26 | 27 | @media #{$small} { 28 | #media-query--name:after{ 29 | content: "reptincel"; 30 | } 31 | } 32 | 33 | 34 | ## Comment ça fonctionne ? 35 | 36 | 1. Ouvrez [pokemonbreakpoint](http://flexbox.github.io/pokemon-breakpoint/) dans un nouvel onglet 37 | 2. Identifiez l'élément animé avec des flames `#media-query--name`. 38 | 3. Maintenant on passe au javascript 39 | 40 | En cliquant sur le lien vous lancez la fonction `pokeball()` ... 41 | 42 | if (pokemon == '"reptincel"') { 43 | alert("Je suis le pokemon " + pokemon + " correspondant à une tablette"); 44 | } 45 | 46 | ... qui extrait les informations définies dans `gottaCatchThemAll(element)`. 47 | 48 | function gottaCatchThemAll(element){ 49 | var media_query = document.getElementById(element); 50 | var css_prop = window.getComputedStyle(media_query,':after').getPropertyValue('content'); 51 | return css_prop; 52 | } 53 | 54 | 55 | ## Le code source 56 | 57 | C'est hébergé sur [github](https://github.com/flexbox/pokemon-breakpoint). N'hésitez pas à me faire un retour si vous rencontrez des bugs. 58 | -------------------------------------------------------------------------------- /source/blog/articles/2013-08-16-hebergement-gratuit-ovh.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-08-16 3 | slug: hebergement-gratuit-ovh 4 | title: Hébergement site internet gratuit avec un nom de domaine chez OVH 5 | page_title: Hébergement gratuit chez GitHub 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Récemment le bigboss de chez OVH à fait une déclaration : il a [interdit github](http://www.ovh.com/fr/a1136.interview-github-octave-klaba-ovh) au seing de son entreprise. 11 | 12 | Interdire github, pour des développeurs, au XXIème siècle ... 13 | Je suis un fervent partisan de la fondation mozilla et de ses principes qui considèrent que c'est le partage de connaissance qui est bénéfique pour le web, je n'ai pas trop compris la démarche. "Interdire" github à des développeurs. 14 | 15 | En attendant mes nombreux side project avec un nom de domaine prit chez ovh sont hébergés gratuitement chez github #ettoc 16 | Je vais vous expliquer dans cet article comment réaliser cette manipulation. 17 | 18 | 19 | ## Connectez vous à votre interface 20 | 21 | 22 | ![Le manager OVH](blog/legacy/2013/08/ovh.png?raw=true) 23 | 24 | Si vous avez choisi d'acheter votre nom de domaine sans hébergement vous pouver changer l'URL de destination pour la faire pointer vers les serveurs de github. 25 | 26 | ![Modifier votre DNS](blog/legacy/2013/08/DNS-github.png?raw=true) 27 | 28 | Pour un domaine comme exemple.fr vous devez utiliser un enregistrement de type A et le faire pointer sur `192.30.252.153` 29 | 30 | 31 | ## Créer un fichier CNAME 32 | 33 | 34 | Si vous effectuez ces modifications vous devriez avoir une belle erreur 404. 35 | 36 | Pour afficher votre nouveau site il suffit de suivre ces 2 étapes : 37 | 38 | ![La branche gh-pages est importante](blog/legacy/2013/08/gh-pages.png?raw=true) 39 | 40 | 1. Créer une branche 'gh-pages' et commitez vos modifications sur cette branche. 41 | 2. Créer un fichier `CNAME` avec l'adresse de votre site (ici c'est pokemonbreakpoint) 42 | 43 | Il ne vous reste plus qu'a attendre une dizaine de minutes de propagation et vous voici avec votre nouveau site gratuit en hébergement. 44 | -------------------------------------------------------------------------------- /source/blog/articles/2014-01-28-foundation5-snippet.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2014-01-28 3 | slug: foundation5-snippet 4 | title: Foundation 5 snippet HTML pour Sublime Text 5 | page_title: Développer votre HTML vitesse lumière avec Foundation 5 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | Si vous avez visité ma sélection d'[outils pour développeur front-end](/uses.html), vous savez que j'utilise (selon moi) le meilleur éditeur de code : Sublime Text. 10 | 11 | Le principal avantage de cet éditeur de code est son système de paquets, qui permet une personnalisation poussée de l’éditeur. 12 | 13 | ## Snippets pour Foudation 5 14 | 15 | C'est ce [repo sur github](https://github.com/zurb/foundation-5-sublime-snippets) qui vous permettra de développer plus vite votre HTML. 16 | 17 | Un simple `zf-accordion` + `tab` génère le marquage suivant : 18 | 19 | ![Accordion zurb foundation](blog/2014/foundation/foundation-accordion.gif?raw=true) 20 | 21 | ## Installation 22 | 23 | Tout se passe dans les `Preference` > `Package control` 24 | 25 | ![Sublime Text preference](blog/2014/foundation/sublime-preference-package.png?raw=true) 26 | 27 | La première étape est d’ajouter une nouvelle source (raccourci `cmd` + `shift` + `P`) : 28 | 29 | Package Control: Add Channel 30 | 31 | https://github.com/zurb/foundation-5-sublime-snippets.git 32 | 33 | ![Sublime Text ajouter source](blog/2014/foundation/sublime-add-source.png?raw=true) 34 | 35 | Recherchez la commande `Package Control: Install Package` 36 | 37 | ![Sublime Text installation](blog/2014/foundation/sublime-install-package.png?raw=true) 38 | 39 | Il ne reste plus qu’a rechercher `Foundation-5-snippet`, et voila! 40 | -------------------------------------------------------------------------------- /source/blog/articles/2014-02-07-takeoff-conf-2014.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2014-02-07 3 | slug: takeoff-conf-2014 4 | title: "Takeoff conference 2014 résumé en une image" 5 | page_title: "Une image pour les gourverner toutes" 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Le [takeoff](http://takeoffconf.com/2014) est un festival organisé par des développeurs, pour des développeurs. Pendant deux jours, cet évènement de plus de 250 personnes présente différents sujets d’actualité axé sur le Web. 11 | 12 | - Comment notre plate-forme technologique évoluera dans les mois à venir ? 13 | - Quelles sont les technologies qui fonctionnent ? 14 | - Comment s’organiser pour travailler plus efficacement ? 15 | 16 | Apprenez tout ce que les meilleures sources de l’industrie - les membres de la communauté qui font tous la magie. 17 | 18 | ## Synthèse des 2 jours 19 | 20 | J’ai profité ce cette conférence pour expérimenter une chose : ma capacité de concentration. Je remarque que cela fonctionne beaucoup mieux sans aucune source de distration (tablette ou ordinateur allumé). Pendant les conférences je me suis contenté d’un carnet et de crayons, __c’est tout__. 21 | 22 | Grâce à cette méthode j’ai pu réaliser de bons croquis pour résumer ces 2 jours -[avec un certain succès](https://medium.com/p/20102acc5c28). 23 | 24 | [![takeoff conf sketch](https://farm4.staticflickr.com/3816/12342105995_062d650f8e_c.jpg)](http://www.flickr.com/photos/geekgrunge/12342105995/) 25 | 26 | Si vous souhaitez un contenu détaillé je vous invite à [lire le blog de Silicon Salad](http://www.siliconsalad.com/blog/takeoff-conf-les-tendances-2014-pour-le-developement-front-end/). 27 | 28 | L’année prochaine je serais mieux préparé grâce à ce livre : [The sketchnote Handbook](https://www.amazon.fr/gp/product/0321857895/ref=as_li_ss_tl?ie=UTF8&camp=1642&creative=19458&creativeASIN=0321857895&linkCode=as2&tag=davidl-21). J’espère pourvoir produire un contenu de meilleure qualité pour les développeurs qui ne peuvent se rendre à cette incroyable conférence qu’il ne faut absolument pas manquer si vous habitez le nord de la France. 29 | -------------------------------------------------------------------------------- /source/blog/articles/2014-04-01-easter-egg-april.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2014-04-01 3 | slug: easter-egg-april 4 | title: "La mediaquery du 01 Avril" 5 | page_title: C'est un piège 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Visible uniquement pour les tablettes, si vos visiteurs retournent leur appareil, le site fait une rotation. Si ils retournent leur tablettte, ... 11 | 12 | ~~~ css 13 | @media only screen and (min-width: 350px) and (max-width: 1025px) { 14 | body { 15 | transform : rotate(180deg); 16 | } 17 | } 18 | ~~~ 19 | 20 | Voir la [vidéo sur vine](https://vine.co/v/MeDj23XKT3T). 21 | -------------------------------------------------------------------------------- /source/blog/articles/2015-08-26-truncate.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2015-08-26 3 | slug: truncate 4 | title: 'Sass truncate mixin pour ajouter ... à vos textes' 5 | description: 'Avec les déclaration CSS text-overflow: ellipsis; et overflow: hidden; vous pourrez masquer facilement le textes qui dépassent sur plusieurs lignes' 6 | image: https://farm6.staticflickr.com/5772/21107859806_4250069f6a_b.jpg 7 | page_title: Tronquer des caractères en CSS avec Ellipsis 8 | page_emphasis: Éviter que votre texte ne passe sur plusieurs lignes 9 | changefreq: monthly 10 | priority: 0.5 11 | --- 12 | 13 | Il m’arrive souvent de rencontrer ce problème : un titre trop long passe sur plusieurs lignes ce qui casse la mise en page. Il est possible de [tronquer le texte après une ceraine taille](http://apidock.com/rails/String/truncate) dans un framework comme rails, mais le texte n’est plus indexable. 14 | 15 | La solution est d’utiliser du CSS. Voici un exemple de `mixin` Sass réutilisable : 16 | 17 | ~~~scss 18 | @mixin truncate($width: 100%) { 19 | max-width: $width; 20 | overflow: hidden; 21 | text-overflow: ellipsis; 22 | white-space: nowrap; 23 | } 24 | ~~~ 25 | 26 | ## Utilisation 27 | 28 | __Sass__ 29 | 30 | ~~~scss 31 | .card { 32 | &-title { 33 | @include truncate(); 34 | } 35 | } 36 | ~~~ 37 | 38 | __CSS__ 39 | 40 | ~~~css 41 | .card-title { 42 | max-width: 100%; 43 | overflow: hidden; 44 | text-overflow: ellipsis; 45 | white-space: nowrap; 46 | } 47 | ~~~ 48 | 49 | ## Démonstration 50 | 51 | Voici un exemple avant / après 52 | 53 | ![Truncate mixin sass exemple](https://lh3.googleusercontent.com/CcvmerZO3gO0yR4hsad7IcX3p0vfP39ma0Hbu092nEo=w615-h289-no) 54 | 55 | __Protip :__ Il est possible de changer la taille directement avec `@include truncate(50%);` 56 | -------------------------------------------------------------------------------- /source/blog/articles/2016-03-25-takeoffconf-code-promo.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2016-03-25 3 | slug: takeoffconf-code-promo 4 | title: "Gagne ta place Early-bird pour la prochaine takeoffconf" 5 | description: "Gagnez votre place pour la prochaine grosse conférence organisée par des dev et pour les dev dans le Nord de la France à Lille" 6 | image: https://c2.staticflickr.com/2/1536/25936271932_433d27b0c3_b.jpg 7 | page_title: Distribution de code promo pour takeoffconf 8 | page_emphasis: Réserver votre siège pour en savoir plus sur l’actualité des devs en 2017 9 | changefreq: monthly 10 | priority: 0.5 11 | --- 12 | 13 | Ajourd’hui c’est un bonne journée pour plusieurs raisons : c’est vendredi et en tant que leader de communauté tech dans le nord de la France, j’ai eu la chance d’avoir des billets pour la prochaine grande conférence à ne manquer sous aucun prétexte : [Takeoffconf](http://takeoffconf.com/). 14 | 15 | ![Code promo takeoffconf](https://c2.staticflickr.com/2/1536/25936271932_433d27b0c3_b.jpg) 16 | 17 | ## Pourquoi aller à cette conférence ? 18 | 19 | Le programme n’est pas définitif mais voici pourquoi vous devez venir : 20 | 21 | - En octobre il n’y a rien à faire d’autre 22 | - Cette année c'est 3 jours qui sont prévus ! (Du Jeudi 06 octobre au Samedi 08 Octobre 2016) 23 | - La soirée sur la Gare Saint Sauveur est top ! 24 | - Vous __pourrez me voir en 3D__ 25 | - Vous rencontrerez [pleins développeurs du futur](https://twitter.com/takeoffconf/status/429257447866662912) 26 | - Au tarif __early-bird la place n’est pas chère__ 27 | - Qui a besoin d’un programme avec une baseline comme “_Les sujets qui feront l’actualité des devs en 2017_ ” 28 | 29 | 30 | ## C’est par où la glissade ? 31 | 32 | Comme chaque année cela se passe dans l’un des plus gros incubateur de France, à Euratechnologies. 33 | 34 | ![Réserver votre place au takeoffconf avec David Leuliette](https://c2.staticflickr.com/6/5012/5455442855_2062c40e12_b.jpg) 35 | 36 | __Euratechnologies__ 37 | 165 Avenue de Bretagne 38 | 59000 Lille, France 39 | 40 | ## Comment participer au concours ? 41 | 42 | C’est facile ! Tout se passe sur Twitter 43 | 44 | Vous devez mentionner [@takeoffconf](https://twitter.com/TakeOffConf) et [@flexbox_](https://twitter.com/flexbox_) et dire pourquoi vous souhaitez venir à cette super conférence. Comme je sais que certains ont la puissance de la flème j’ai même préparé un tweet en avance : 45 | 46 | > En Octobre je participe @takeoffconf grâce à @flexbox_ qui sera parmi nous ? 47 | 48 | 49 | 50 | Seulement les 8 premiers pourront bénéficier d’un tarif préférenciel alors battez-vous :P 51 | 52 | -------------------------------------------------------------------------------- /source/blog/articles/2016-03-29-npm-init-config.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2016-03-29 3 | slug: npm-init-config 4 | title: "Configurer les valeurs par défaut de Node.js" 5 | description: "Gagner du temps lors de l’initialisation de vos nouveaux projets avec node.js en configurant les valeures par défaut" 6 | image: https://c2.staticflickr.com/2/1704/25505829834_b3995d8225_b.jpg 7 | page_title: Pimp your npm init 8 | page_emphasis: Gagnez du temps pour vos nouveaux projets 9 | changefreq: monthly 10 | priority: 0.5 11 | --- 12 | 13 | Je viens d’installer une nouvelle machine et en parcourant la documentation de [npm init](https://docs.npmjs.com/cli/init) j’ai remarqué que l’on pouvait __utiliser des valeurs par défaut pour les nouveaux projets__. 14 | 15 | Je voulais simplement partager la configuration avec ceux qui ne l’ont pas encore fait et conserver une référence pour moi même : 16 | 17 | ~~~shell 18 | $ npm config set init.author.name "David Leuliette" 19 | $ npm config set init.author.email dleuliette@gmail.com 20 | $ npm config set init.author.url https://archive.davidl.fr 21 | $ npm config set init.license MIT 22 | ~~~ 23 | 24 | La prochaine fois que vous utiliserez `npm init` ces valeurs seront déjà par défaut. Un __gain de temps considérable__ ! 25 | 26 | ## Encore une petite chose 27 | 28 | Si vous souhaitez en savoir plus sur votre configuration `npm config list` vous affichera des informations utiles. Si vous souhaitez aller plus loin vous pourvez lire les pages du manuel avec `npm help config`. 29 | 30 | Bonne lecture ! 31 | -------------------------------------------------------------------------------- /source/blog/articles/2018-07-11-shell-in-nodejs.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-07-11 3 | slug: shell-in-nodejs 4 | title: Executer un script unix en Node.js 5 | description: Automatiser ses script de release avec Node.js 6 | image: https://lh3.googleusercontent.com/OuE0HXCKkR8P4B0ehi5ibNBnY_om_jPequ3-wNtfb7AQYI2-weP6hnhRKfHywX1-5PEARpAEblOjqWVXl3gnuRwOanDwLFyBdpC9CF1fJ3rwxz_KRL_1qG55HzVLeF9hHjWSqnznpQmWaQ3lx_5xLj09hOTTsvGdaTgN4TbhXu8eECX2UPQbRZqnj6DPfHMKujNZo0U8kbQOAfmi74mpEG9vJIWn7DKLj_z6uac3EuNy89E_jay5NceZNsJTLjTzhZ0z1m2MbmOdNAE4r9TgbNUtunuZjyIFBkjJJ1gpmZaug5HPSHiva7PG7ka78FwJQuBkWAsBA7jYM-K296m5uC-e1oCd1Hf4SZzSq2mHVS0KA6odqbgQbGHzpf9dXMznH8xMI6hIneTfMBIczOnOd4rsVoiCb32T7gxMjAXKwmKHRakzUopVshk8whoi6rocaQsy5otJ7okkg6YSGDfzUBdhXyB3Q-5g9aXKMfymW5rV9F0P-OhDORo0B-DO11kvLRcC65O5lGdsZvtCrPJ8NmIaZJCGyL_ULRhcWW9oNoj5PFKmIPeIKFK0NvQW-93pEqNVXpg3bVgyNtXZHLgJ1irS5pW0EhKkVVxMHEE7=w1024-h512-no 7 | page_title: I have a script for that™️ 8 | page_emphasis: Le terminal c'est la vie 9 | --- 10 | 11 | J'ai récemment publié un article sur medium : [Comment déployer votre application React Native avec Expo](https://medium.com/@flexbox/react-native-expo-1734e6d7891). Afin d'automatiser mon script de release j‘ai perdu pas mal de temps sur stackoverflow en faisant des copier / coller de scripts bash. 12 | 13 | Et puis j'ai réfléchi 2 minutes : 14 | 15 | > Je ne suis pas un nerd qui fait du bash avec vim, je fais du front-end sur sublime text.
16 | > Je devrais utiliser Node.js" 17 | 18 | Si vous souhaitez __utiliser JavaScript pour exécuter des commandes UNIX__ depuis un terminal voici un petit snippet qui vous sera utile. 19 | 20 | ~~~javascript 21 | #!/usr/bin/env node 22 | 23 | const exec = require('child_process').exec; 24 | function puts(error, stdout, stderr) { console.log(stdout) } 25 | 26 | exec('ls -l', puts); 27 | ~~~ 28 | -------------------------------------------------------------------------------- /source/blog/articles/2019-05-28-fonts-google.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-05-28 3 | slug: fonts-google 4 | title: Mon choix de Google font pour mon prochain side project 5 | description: 6 | image: https://lh3.googleusercontent.com/OuE0HXCKkR8P4B0ehi5ibNBnY_om_jPequ3-wNtfb7AQYI2-weP6hnhRKfHywX1-5PEARpAEblOjqWVXl3gnuRwOanDwLFyBdpC9CF1fJ3rwxz_KRL_1qG55HzVLeF9hHjWSqnznpQmWaQ3lx_5xLj09hOTTsvGdaTgN4TbhXu8eECX2UPQbRZqnj6DPfHMKujNZo0U8kbQOAfmi74mpEG9vJIWn7DKLj_z6uac3EuNy89E_jay5NceZNsJTLjTzhZ0z1m2MbmOdNAE4r9TgbNUtunuZjyIFBkjJJ1gpmZaug5HPSHiva7PG7ka78FwJQuBkWAsBA7jYM-K296m5uC-e1oCd1Hf4SZzSq2mHVS0KA6odqbgQbGHzpf9dXMznH8xMI6hIneTfMBIczOnOd4rsVoiCb32T7gxMjAXKwmKHRakzUopVshk8whoi6rocaQsy5otJ7okkg6YSGDfzUBdhXyB3Q-5g9aXKMfymW5rV9F0P-OhDORo0B-DO11kvLRcC65O5lGdsZvtCrPJ8NmIaZJCGyL_ULRhcWW9oNoj5PFKmIPeIKFK0NvQW-93pEqNVXpg3bVgyNtXZHLgJ1irS5pW0EhKkVVxMHEE7=w1024-h512-no 7 | page_title: Modern Design Stack 8 | page_emphasis: La typographie c'est important 9 | --- 10 | 11 | J'utilise Figma depuis plus de 2 ans et je dois dire que ce logicial de design c'est 🔥🔥🔥 12 | 13 | ![Figma colors](blog/2019/Colors3.png?raw=true) 14 | 15 | ## Titres 16 | 17 | ### Roboto 18 | 19 | - HEADLINE ROBOTO BLACK 48PX 20 | - SUBTITLE ROBOTO REGULAR 24PX 21 | - BUTTON ROBOTO BOLD 20PX 22 | 23 | ## Texte 24 | 25 | ### Source Sans 26 | 27 | - ARTICLE BODY SOURCE SANS REGULAR 18PX 28 | - TITLE SOURCE SANS LIGHT 48PX 29 | - META SOURCE SANS REGULAR 16PX 30 | 31 | ### Open Sans 32 | 33 | - ARTICLE BODY SOURCE SANS REGULAR 18PX 34 | - TITLE SOURCE SANS LIGHT 48PX 35 | - META SOURCE SANS REGULAR 16PX 36 | 37 | Et pour les couleurs 38 | 39 | ![Figma colors](blog/2019/Colors.png?raw=true) 40 | -------------------------------------------------------------------------------- /source/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | #F5F5F5 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /source/contact.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contacter David Leuliette développeur front-end 3 | description: Vous cherchez à me joindre rapidement ? Je vous invite à visiter cette page qui regroupe toutes mes informations de contact. Je peux vous aider à avoir un meilleur site internet 4 | changefreq: monthly 5 | priority: 0.5 6 | --- 7 | 8 | .hero-contact 9 | .row.align-center 10 | .medium-6.columns 11 | br 12 | h1 Contacter David Leuliette 13 | = partial 'layouts/quick-contact' 14 | 15 | .row.align-center 16 | .medium-5.columns 17 | markdown: 18 | ## Envoyer un message 19 | 20 | - Si vous cherchez un __formateur sur les technologies web__. 21 | - __Mettre en ligne un MVP__ et valider votre idée de startup. 22 | - Organiser un __co–voiturage pour la prochaine conférence__ abordant la thématique du web. 23 | - Vous pouvez aussi me donner des nouvelles, je lis __tous mes emails__. 24 | 25 | .medium-5.columns 26 | markdown: 27 | ## Coordonnées 28 | 29 | - __David Leuliette__ est enregistré au registre des commerces et des sociétés 30 | - __Activité__ Programmation informatique 31 | - __SIRET__ 538 202 235 00023 32 | 33 | section.section 34 | .row.align-center 35 | .medium-10.columns 36 | h2.text-center Ailleurs sur le web 37 | = partial 'layouts/social' 38 | -------------------------------------------------------------------------------- /source/favicon_base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/davidl/94883d2cb077beb19b9f6f42e8edb9d74e74efc0/source/favicon_base.png -------------------------------------------------------------------------------- /source/feed.xml.builder: -------------------------------------------------------------------------------- 1 | xml.instruct! 2 | xml.feed "xmlns" => "http://www.w3.org/2005/Atom" do 3 | site_url = "#{data.settings.site.url}/blog/" 4 | xml.title "#{data.settings.site.title}" 5 | xml.subtitle "#{data.settings.site.description}" 6 | xml.id URI.join(site_url, blog('blog').options.prefix.to_s) 7 | xml.link "href" => URI.join(site_url, blog('blog').options.prefix.to_s) 8 | xml.link "href" => URI.join(site_url, current_page.path), "rel" => "self" 9 | xml.updated(blog('blog').articles.first.date.to_time.iso8601) unless blog('blog').articles.empty? 10 | xml.author { xml.name "#{data.settings.site.author}" } 11 | 12 | blog('blog').articles[0..5].each do |article| 13 | xml.entry do 14 | xml.title article.title 15 | xml.link "rel" => "alternate", "href" => URI.join(site_url, article.url) 16 | xml.id URI.join(site_url, article.url) 17 | xml.published article.date.to_time.iso8601 18 | xml.updated File.mtime(article.source_file).iso8601 19 | xml.author { xml.name "#{data.settings.site.title}" } 20 | xml.content article.body, "type" => "html" 21 | end 22 | end 23 | end 24 | -------------------------------------------------------------------------------- /source/forge/chapitres/1-1-technique.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2014-03-17 3 | slug: 1-1-technique 4 | title: "Comment refondre son site internet ?" 5 | page_title: Flexibilité 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | À l’heure actuelle, votre site doit être techniquement compatible avec tous les navigateurs du marché (Internet Explorer, Chrome, Safari, Opera & Firefox). 11 | Demain, votre site devra être compatible avec tous les différents types d’appareils connectés qui [possèdent chacun leurs résolutions d’écrans](http://opensignal.com/reports/fragmentation-2013/). Le marché des navigateurs sur ces appareils est lui aussi fragmenté car chaque système possède ses propres navigateurs (Opera mini, Dolphin, Atomic web ...) 12 | 13 | __C’est un changement des règles du jeu__. 14 | 15 | ![android screen size](https://farm8.staticflickr.com/7348/13238262083_6caa9794ef_o.png) 16 | 17 | ## Le monde du multi écran 18 | 19 | Avec ce changement des règles, vous devez vous faire à l’idée de n’être compatible qu’avec les derniers navigateurs modernes. 20 | 21 | __C’est tout__. 22 | 23 | Être compatible avec internet explorer 6 n’a pas de sens au XXIème siècle. Vous souhaitez faire la refonte de votre site pour être compatible avec le futur, pas pour corriger les erreurs du passé. 24 | 25 | Le contenu de votre site sera toujours accessible aux ancien navigateurs mais avec une expérience dégradée. 26 | Essayez aussi de vous faire à l’idée que votre site internet ne s’affichera pas de la même manière suivant son mode de consommation et c’est parfaitement normal. L’expérience utilisateur n’a rien à voir entre un écran 27" et un smartphone. 27 | 28 | Dans un contexte de navigation mobile, privilégiez vos efforts sur la stabilité et la performance de votre site. 29 | 30 | - Peu de JavaScript 31 | - Design minimaliste 32 | - Peu d’images 33 | 34 | Ces différents points permettent de charger votre site plus rapidement. N’oubliez pas que nous sommes revenus à l’ère du 56k en ce qui concerne le web mobile : débits lents, perte de connexion ... 35 | 36 | > Votre périple commence par l’abandon du contrôle et l’adoption de la flexibilité. 37 | -------------------------------------------------------------------------------- /source/forge/chapitres/1-2-lecture.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2014-03-24 3 | slug: 1-2-lecture 4 | title: Typographie et expérience de lecture 5 | page_title: "L’expérience de lecture" 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | Google, le site le plus visité au monde, indexe du texte. Il est donc vital, pour avoir des visites, d’avoir un minimum de contenu texte sur votre site. 11 | 12 | > 95% de l’information sur le web est du texte.
Il est logique de dire qu’un web designer doit avoir une formation dans la discipline principale de mise en forme des informations : la Typographie. 13 | > 14 | > Oliver Reichenstein 15 | 16 | Doucement, mais surement le web entre dans une [nouvelle période](http://informationarchitects.net/blog/the-web-is-all-about-typography-period/) : Un retour aux sources en ce qui concerne les polices de caractères utilisés dans l’industrie du print avec ses codes et ses règles. 17 | 18 | Pendant votre processus de refonte, concentrez-vous sur l’expérience de lecture. 19 | Une importance particulière doit être accordée à la typographie. 20 | 21 | Prenons l’exemple d’un site d’actualité. Votre expérience utilisateur doit être de qualité pour que les internautes visitent votre site. Si votre mise en page est bancale, pénible à scanner et remplie de saloperies, vos abonnés accèderont à votre contenu grâce à des solutions alternatives : 22 | 23 | - Lecteur de flux RSS 24 | - Instapaper 25 | - Google reader 26 | - ... 27 | 28 | Votre nombre de page vues s’écroule, ce qui entraîne une chute des revenus publicitaires. 29 | 30 | J’ai une anecdote à ce sujet : 31 | Il m’arrive régulièrement de parcourir des sites où la navigation est exécrable avec un menu de navigation et police de caractère de petite taille. 32 | Je modifie volontairement avec firebug la mise en page de certains sites. `display : none;` pour les blocks de pub hideux. Je change aussi la taille des caractères de base en `14px` ou `16px` même si je ne porte pas de lunettes. Je n’imagine même pas le calvaire que doivent endurer certaines personnes au quotidien. 33 | 34 | Cela peut aller beaucoup plus loin. De plus en plus d’utilisateurs installent ad-block. Cette extension pour navigateur supprime l’intégralité des pubs sur internet. Si votre business model est axé intégralement sur la publicité vous perdez une partie de vos revenus. 35 | 36 | Pour toutes ces raisons essayez de garder à l’esprit ce qui se fait dans le monde de l’édition. Lire un livre est beaucoup plus agréable si un certain travail typographique est accordé au contenu. Le même soin doit être accordé aux textes de votre site. 37 | -------------------------------------------------------------------------------- /source/forge/chapitres/1-4-publicite.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2014-04-11 3 | slug: 1-4-publicite 4 | title: Publicité et responsive design 5 | page_title: Les limites de la publicité 6 | changefreq: monthly 7 | priority: 0.8 8 | --- 9 | 10 | J'emploie le mot publicité au sens large. Cette notion peut être adaptée à toutes les mises en avant de contenu. 11 | 12 | Pour ne pas vous retrouver avec un site qui donne une impression de brouillon et qui agresse vos visiteurs, vous devez établir un format d'affichage simple et clair. Des zones identifiables rapidement, par vos utilisateurs, qui ne dégradent pas le confort de lecture. 13 | Il y a un autre facteur à prendre en compte, depuis des années la taille des bannières de publicité est fixe. Cette approche n'a pas de sens dans une conception adaptative multi-écrans. 14 | 15 | ![advertising fail](https://farm4.staticflickr.com/3833/13777449814_2e59809dfb.jpg) 16 | 17 | Les kits de bannières ont pendant longtemps régné en maître absolu pour les publicités. 18 | 19 | - Problème : comment est il possible de redimensionner une image avec texte incrusté à l'intérieur ? 20 | - Réponse : c'est impossible sans avoir une image inutilisable sur un écran petit ou moyen. 21 | 22 | C'est pour cette raison que je conseille d'utiliser un système comme [carbon-ads](http://carbonads.net/index.php) ou un texte personnalisé. 23 | Le choix d'un simple texte présente plusieurs avantages : 24 | 25 | - Plus attractif pour les annonceurs. 26 | - Plus acceptable pour les utilisateurs. 27 | - Se charge beaucoup plus rapidement qu'une animation type flash. 28 | - Google utilise ce système depuis des années avec succès. 29 | 30 | Ne cédez pas à la tentation d'un célèbre site de e-commerce connu pour ses prix discount. Sa page synonyme de surenchère n'a qu'un seul effet : presser vos visiteurs vers un autre site. 31 | 32 | Pour un créer un système efficace vous devez prioriser votre contenu, et sortir du schéma classique avec un unique emplacement publicitaire. Le célèbre designer Mark Boulton à déjà réfléchi à un [modèle de publicité flexible]( http://www.markboulton.co.uk/journal/responsive-advertising ). 33 | 34 | ![reponsive advertising](https://farm8.staticflickr.com/7124/13777101153_2d6ab4385a_z.jpg) 35 | 36 | Le schéma doit être simple et clair, pour vos annonceurs et pour vos utilisateurs. Dans cet exemple le premier prix démarre avec l'option A (visible sur tout les supports) et plus vos accordez d'importance à la publicité plus elle est chère. Ces différentes zones permettent de mettre plusieurs contenus en avant pour voir celui qui fonctionne le mieux. Cela est aussi plus acceptable pour vos utilisateurs car il est plus facile de mettre une "publicité" avec un contenu directement associé (exemple: Vendre un livre dans le contenu d'un site) 37 | -------------------------------------------------------------------------------- /source/gifts.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | .truncatetitle: Programme d'affiliation 3 | description: Apprenez à coder 4 | page_title: Code promotion 5 | page_emphasis: Inscrivez vous à ces services et bénéficiez de cadeaux 6 | --- 7 | 8 | section.section 9 | .row.align-center 10 | .medium-10.columns 11 | h2 Voyages 12 | .row.small-up-1.medium-up-2 13 | - data.gifts.travel.each do |t| 14 | .columns 15 | = link_to t.link, class: 'callout-link' do 16 | .callout.truncate 17 | h3 = t.name 18 | p = t.win 19 | code = t.link 20 | 21 | section.section.l-light 22 | .row.align-center 23 | .medium-10.columns 24 | h2 Travailler efficacement 25 | .row.small-up-1.medium-up-2 26 | - data.gifts.work.each do |w| 27 | .columns 28 | = link_to w.link, class: 'callout-link' do 29 | .callout.truncate 30 | h3 = w.name 31 | p = w.win 32 | code = w.link 33 | 34 | section.section. 35 | .row.align-center 36 | .medium-10.columns 37 | h2 Apprendre de nouvelles choses 38 | .row.small-up-1.medium-up-2 39 | - data.gifts.learn.each do |w| 40 | .columns 41 | = link_to w.link, class: 'callout-link' do 42 | .callout.truncate 43 | h3 = w.name 44 | p = w.win 45 | code = w.link 46 | -------------------------------------------------------------------------------- /source/gnu.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Question générales sur la licence GNU GPL 3 | description: Le contenu de ce site, ainsi que son code source, sont publiés sous licence GNU 4 | page_title: GNU GPL — FAQ 5 | page_emphasis: Comprendre simplement les licences sur le logiciel libre 6 | changefreq: yearly 7 | priority: 0 8 | --- 9 | 10 | section.section 11 | .row.align-center 12 | .medium-8.columns 13 | markdown: 14 | ## En quelques mots 15 | 16 | ### Vous êtes libres 17 | 18 | - D'inclure la même licence avec vos travaux dérivés 19 | - D'inclure une licence comme la MIT, BSD ou [d'autres licences similaires](http://choosealicense.com/). Vous pouvez consulter la liste des [licences compatibles avec GNU](https://www.gnu.org/licenses/license-list.fr.html) 20 | 21 | ### Vous devez publier 22 | 23 | - Cette licence aux utilisateurs 24 | - Vos travaux dérivés pour les utilisateurs avec le “code source” (exemple : un lien vers ce site) 25 | 26 | ### Acheter une licence commerciale 27 | 28 | - Pour montrer votre soutient à la communauté 29 | - Pour contribuer au développement de ce site 30 | - Si vous voulez vendre un contenu commercial et ne voulez pas publier vos travaux dérivés 31 | 32 | ## Questions fréquentes et réponses 33 | 34 | ### GNU GPL ? Qu'est ce que cela signifie ? 35 | 36 | Cela signifie que les utilisateurs seront toujours autorisés à utiliser cette licence, et même à en changer, selon les termes de la GPLv2. 37 | Pour plus d'information vous pouvez consulter [la FAQ de la GPL](http://www.gnu.org/licenses/gpl-faq.html). 38 | 39 | ### Je souhaite distribuer le contenu gratuitement. Suis-je autorisé à le faire ? 40 | 41 | Oui, vous pouvez et je vous encourage à le faire. Cela fait partie du logiciel libre. Pour cela vous devez lire la section correspondante sur le site [GNU](http://www.gnu.org/philosophy/selling.html). 42 | -------------------------------------------------------------------------------- /source/human.txt: -------------------------------------------------------------------------------- 1 | 2 | ___ ___ _ _ _ ___ _ 3 | | . \| . || | || || . \| | 4 | | | || || ' || || | || |_ 5 | |___/|_|_||__/ |_||___/|___| 6 | 7 | Code a la main depuis 2013 8 | 9 | Humans TXT: Nous Sommes Des Humains, Pas Des Machines 10 | 11 | _______________________________________________________________________________ 12 | 13 | TEAM 14 | 15 | Ce site est code a la main par David Leuliette. 16 | Developpeur front-end 17 | https://archive.davidl.fr/about.html 18 | 19 | _______________________________________________________________________________ 20 | 21 | TECHNOLOGIE 22 | 23 | Middleman 24 | http://middlemanapp.com/ 25 | 26 | Foundation 27 | http://foundation.zurb.com/ 28 | 29 | SASS 30 | http://sass-lang.com/ 31 | 32 | Github 33 | https://github.com/ 34 | 35 | _______________________________________________________________________________ 36 | 37 | RESSOURCES GRAPHIQUES 38 | 39 | Droid Serif (font) 40 | http://www.google.com/fonts/specimen/Droid+Serif 41 | 42 | Lato (font) 43 | http://www.google.com/fonts/specimen/Lato 44 | 45 | Font Awesome (icons) 46 | http://fontawesome.io/ 47 | 48 | Atom Logo 49 | http://commons.wikimedia.org/wiki/File:Atom_editor_logo.svg 50 | _______________________________________________________________________________ 51 | 52 | PHOTOGRAPHIES 53 | 54 | Photos libres de droits 55 | http://www.raumrot.com/10/ 56 | http://www.pexels.com/ 57 | -------------------------------------------------------------------------------- /source/layouts/_author.html.slim: -------------------------------------------------------------------------------- 1 | .blog-author itemprop="author" itemscope="" itemtype="http://schema.org/Person" role="complementary" 2 | .avatar 3 | = image_tag gravatar_for(data.settings.social.email), itemprop: 'image', alt: 'Avatar Aperture Science front-end developer' 4 | p 5 | a href="#{data.settings.social.google_plus}?rel=author" itemprop="name" class="name" David Leuliette 6 | = link_to data.settings.social.twitter.url, class: 'twitter-link' do 7 | = fa 'fa-fw fa-twitter' 8 | = data.settings.social.twitter.name 9 | 10 | p 11 | 'David est 12 | strong> itemprop="jobTitle" développeur freelance. 13 | br 14 | 'Il aime Ruby, JavaScript, GitHub, React Native et le Growth Hacking… mais pas nécessairement dans cet ordre. 15 | -------------------------------------------------------------------------------- /source/layouts/_quick-contact.html.slim: -------------------------------------------------------------------------------- 1 | .callout.callout-border 2 | p.lead 3 | 'Vous cherchez à me contacter ? La façon la plus rapide est de me mentionner sur twitter 4 | = link_to data.settings.social.twitter.name, data.settings.social.twitter.url 5 | p 6 | 'Pour les demandes de plus de 140 caractères je vous invite à m'envoyer un email à 7 | = link_to data.settings.social.email, "mailto:#{data.settings.social.email}?subject=Demande%20contact&body=Bonjour%20David%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AActuellement%20mon%20plus%20grand%20d%C3%A9fi%20c%27est%20%0D%0A%0D%0AJ%27ai%20entendu%20parler%20de%20ton%20site%20sur%20" 8 | -------------------------------------------------------------------------------- /source/layouts/_share.html.slim: -------------------------------------------------------------------------------- 1 | - post_url = "#{data.settings.site.url}/blog/#{current_page.data.slug}.html" 2 | 3 | .callout-share 4 | em Partager cet article 5 | p.article-title 6 | = current_page.data.title 7 | = link_to "//twitter.com/intent/tweet?text=#{current_page.data.title}+#{data.settings.social.twitter.name}+#{post_url}", class: 'button large expanded button-tweet', target: '_blank' do 8 | = fa 'fa-fw fa-twitter' 9 | |Tweet 10 | -------------------------------------------------------------------------------- /source/layouts/_social.html.slim: -------------------------------------------------------------------------------- 1 | .row.small-up-1.medium-up-2 2 | - data.social.each_with_index do |social| 3 | .columns 4 | = link_to social.url, class: 'callout-link' do 5 | .callout.callout-social 6 | i class="fa #{social.icon}" 7 | h3 8 | = social.title 9 | p 10 | = social.description 11 | -------------------------------------------------------------------------------- /source/layouts/_stalk.html.slim: -------------------------------------------------------------------------------- 1 | .acolyte Stalkez votre prochain 2 | .m-blog--follow-list 3 | = link_to data.settings.social.twitter.url, class: 'twitter' do 4 | = fa 'fa-twitter' 5 | = link_to data.settings.social.linkedin, class: 'linkedin' do 6 | = fa 'fa-linkedin' 7 | = link_to data.settings.social.github, class: 'github' do 8 | = fa 'fa-github' 9 | = link_to data.settings.social.rss.url, class: 'rss' do 10 | = fa 'fa-rss' 11 | -------------------------------------------------------------------------------- /source/layouts/_update-post.html.slim: -------------------------------------------------------------------------------- 1 | - post_url = "#{data.settings.site.url}/blog/#{current_page.data.slug}.html" 2 | 3 | h2 Ce n’est pas fini 4 | p 5 | 'Ai-je manqué quelque chose? Le contenu n'est plus à jour? 6 | 'Contactez 7 | = link_to data.settings.social.twitter.name, "//twitter.com/intent/tweet?text=#{current_page.data.title}+#{data.settings.social.twitter.name}+#{post_url}" 8 | br 9 | 'Je met continuellement à jour ces guides afin d’avoir un contenu le plus précis et le plus à jour sur le Web. 10 | -------------------------------------------------------------------------------- /source/layouts/blog_layout.html.slim: -------------------------------------------------------------------------------- 1 | = wrap_layout :layout do 2 | article.row.m-blog-row itemtype="http://schema.org/BlogPosting" itemscope="" role="article" 3 | aside.small-12.medium-4.columns.small-order-2.medium-order-1 4 | = partial 'layouts/author' 5 | hr 6 | .section 7 | = partial 'layouts/stalk' 8 | hr 9 | .section 10 | .acolyte Recevoir des nouvelles par email 11 | form action="#{data.settings.social.mailchimp}" method="post" name="mc-embedded-subscribe-form" target="_blank" 12 | .row.collapse 13 | .small-8.columns 14 | input type="email" name="EMAIL" id="js-mailchimpemail" placeholder="youare@weso.me" required="" autocapitalize="none" autocorrect="off" 15 | .hide 16 | input type="text" name="b_b72e60a9116993dde8d1547fe_e99fbeb8ad" 17 | .small-4.columns 18 | button type="submit" name="subscribe" id="mc-embedded-subscribe" class="button postfix" 19 | 'GO 🚀 20 | 21 | 22 | hr 23 | .section 24 | .acolyte Derniers articles 25 | ul.m-blog--post-list 26 | - page_articles[0..4].each do |article| 27 | li 28 | = link_to article, class: 'blog-post-link truncate' do 29 | = fa 'fa-fw fa-caret-right' 30 | = article.title 31 | hr 32 | .section 33 | .acolyte Recherche sur le blog 34 | form action="https://www.google.com/search" method="get" 35 | input name="q" placeholder="Ex : Responsive design" type="search" 36 | input name="sitesearch" value="#{data.settings.site.url}/blog/" type="hidden" 37 | .small-12.medium-8.columns.m-blog--article.small-order-1.medium-order-2 itemprop="articleBody" 38 | .row style="padding: 30px;" 39 | .medium-10.columns 40 | p.emperor = current_page.data.title 41 | p.m-blog--article-infos 42 | span.text-tiny> Le 43 | time> datetime="#{current_page.data.date}" pubdate="" 44 | = current_page.data.date.strftime('%d %B %Y') 45 | span.text-tiny> Par 46 | => link_to 'David Leuliette', '/about.html' 47 | span.text-tiny> — 48 | = link_to "https://github.com/flexbox/davidl/blob/master/source/blog/articles/#{current_page.data.date}-#{current_page.data.slug}.html.md", target: '_blank' do 49 | |Modifier l’article 50 | 51 | == yield 52 | = partial 'layouts/update-post' 53 | section.section 54 | .row.align-center 55 | .small-12.medium-8 56 | = partial 'layouts/share' 57 | -------------------------------------------------------------------------------- /source/layouts/commons/_favicon.html.slim: -------------------------------------------------------------------------------- 1 | - unless environment == :development 2 | / Add to homescreen for Chrome on Android 3 | meta name="mobile-web-app-capable" content="yes" 4 | meta name="application-name" content="#{data.settings.site.title}" 5 | link rel="icon" sizes="192x192" href="/chrome-touch-icon-192x192.png" 6 | 7 | / Add to homescreen for Safari on iOS 8 | meta name="apple-mobile-web-app-capable" content="yes" 9 | meta name="apple-mobile-web-app-status-bar-style" content="black" 10 | meta name="apple-mobile-web-app-title" content="#{data.settings.site.title}" 11 | link rel="apple-touch-icon" href="/apple-touch-icon.png" 12 | 13 | / Tile icon for Win8 (144x144 + tile color) 14 | meta name="msapplication-TileImage" content="ms-touch-icon-144x144-precomposed.png" 15 | meta name="msapplication-TileColor" content="#607D8B" 16 | meta name="theme-color" content="#607D8B" 17 | 18 | / Classic favicons 19 | link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" 20 | link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" 21 | link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" 22 | link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" 23 | link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" 24 | -------------------------------------------------------------------------------- /source/layouts/commons/_hero-banner.html.slim: -------------------------------------------------------------------------------- 1 | - if current_page.data.page_title.present? 2 | header.hero-banner.rainbow 3 | .row 4 | .column 5 | h1.title 6 | = current_page.data.page_title 7 | - if current_page.data.page_emphasis.present? 8 | p.emphasis = current_page.data.page_emphasis 9 | = svg_tag 'hero-wave.svg', class: 'wave-picture' 10 | -------------------------------------------------------------------------------- /source/layouts/commons/_open_graph.html.slim: -------------------------------------------------------------------------------- 1 | meta property="dc:creator" content="#{data.settings.site.author}" 2 | meta property="dc:format" content="text/html" 3 | meta property="dc:language" content="fr-FR" 4 | 5 | meta property="og:site_name" content="#{data.settings.site.title}" 6 | meta property="og:type" content="website" 7 | meta property="og:url" content="#{data.settings.site.url + current_resource.url}" 8 | meta property="og:title" content="#{current_page.data.title || data.settings.site.title}" 9 | meta property="og:description" content="#{current_page.data.description || data.settings.site.description}" 10 | meta property="og:image" content="#{current_page.data.image}" 11 | 12 | meta name="geo.position" content="50.629250;3.057256" 13 | meta name="geo.placename" content="Lille, Nord" 14 | meta name="geo.region" content="FR-59" 15 | 16 | meta name="twitter:site" content="#{data.settings.social.twitter.name}" 17 | meta name="twitter:title" content="#{current_page.data.title || data.settings.site.title}" 18 | meta name="twitter:description" content="#{current_page.data.description || data.settings.site.description}" 19 | 20 | - if current_page.data.image 21 | meta name="twitter:card" content="summary_large_image" 22 | meta name="twitter:image:src" content="#{current_page.data.image}" 23 | meta name="twitter:creator" content="#{data.settings.social.twitter.name}" 24 | - else 25 | meta name="twitter:card" content="summary" 26 | meta name="twitter:image" content="#{current_page.data.image}" 27 | 28 | meta itemprop="name" content="#{current_page.data.title || data.settings.site.title}" 29 | meta itemprop="description" content="#{current_page.data.description || data.settings.site.description}" 30 | meta itemprop="image" content="#{current_page.data.image}" 31 | 32 | meta name="p:domain_verify" content="91d66d0000fa49e8b4847bd46a399d25" 33 | 34 | link rel="publisher" href="#{data.settings.social.google_plus}" 35 | link rel="alternate" href="#{data.settings.social.rss.url}" type="application/rss+xml" title="#{data.settings.site.title}" 36 | -------------------------------------------------------------------------------- /source/layouts/commons/_topbar.html.slim: -------------------------------------------------------------------------------- 1 | div.m-topbar-archive 2 | 'Vous consultez un contenu archivé qui ne sera plus mis à jour par l'auteur. Vous pouvez 3 | a href="https://davidl.fr" consulter le nouveau site → 4 | 5 | header.m-topbar role="banner" 6 | nav role="navigation" aria-label="Primary" class="m-topbar--list js-topbar--list is-away" 7 | = link_to '/', class: 'm-topbar--logo', title: 'Retour à l’accueil' do 8 | = svg_tag 'atom-logo.svg', alt: 'Développeur front-end & Intégrateur web lille' 9 | = link_to '⚡ Articles', '/blog/', nav_active('/blog/') 10 | = link_to '📘 Guides', '/workflow/', nav_active('/workflow/') 11 | a class="m-topbar--button" href="https://airtable.com/shryVoJ3nzyeq2P4s" 🤓 Book a dev 12 | 13 | #js-topbar--form.m-topbar--form 14 | = link_to '#', id: 'js-topbar--button', class: 'l-menu' do 15 | span Menu 16 | 17 | form class="l-search-form is-hidden" action="https://www.google.com/search" method="get" 18 | input name="q" placeholder="Ex : Sublime text" type="search" id="js-search-input" 19 | input name="sitesearch" value="#{data.settings.site.url}" type="hidden" 20 | = link_to '#', id: 'js-topbar--search', class: 'l-action' do 21 | i.fa.fa-search 22 | = link_to '#', id: 'js-topbar--close', class: 'l-action is-hidden' do 23 | i.fa.fa-close 24 | = link_to 'https://twitter.com/intent/follow?screen_name=flexbox_', target: '_blank', class: 'l-twitter-link' do 25 | i.fa.fa-1x.fa-twitter 26 | -------------------------------------------------------------------------------- /source/layouts/error_layout.html.slim: -------------------------------------------------------------------------------- 1 | doctype html 2 | html lang="fr" 3 | head prefix="og: http://ogp.me/ns# dc: http://purl.org/dc/terms/" 4 | meta charset="utf-8" 5 | meta name="viewport" content="width=device-width,initial-scale=1" 6 | 7 | title = current_page.data.title ? current_page.data.title : data.settings.site.title 8 | meta name="description" content="#{current_page.data.description}" 9 | meta name="robots" content="noindex, nofollow" 10 | = partial 'layouts/commons/open_graph' 11 | 12 | = partial 'layouts/commons/favicon' 13 | = stylesheet_link_tag 'error' 14 | 15 | body class="#{current_page.data.page_class}" 16 | == yield 17 | 18 | = google_analytics_tag 19 | -------------------------------------------------------------------------------- /source/layouts/forge/_summary.html.slim: -------------------------------------------------------------------------------- 1 | .callout 2 | ol 3 | li 4 | = link_to 'Le monde change', '/forge/0-1-evolution.html' 5 | h2 Objectifs 6 | ol 7 | li 8 | = link_to 'Pré-requis technique', '/forge/1-1-technique.html' 9 | li 10 | = link_to 'L’expérience de lecture', '/forge/1-2-lecture.html' 11 | li 12 | = link_to 'Architecture du contenu', '/forge/1-3-architecture.html' 13 | li 14 | = link_to 'Limites de la publicité', '/forge/1-4-publicite.html' 15 | li 16 | = link_to 'Attention aux détails', '/forge/1-5-details.html' 17 | 18 | 19 | h2 Manifeste de refonte 20 | ol 21 | li 22 | = link_to 'Préparation', '/forge/2-1-manifeste-refonte.html' 23 | li Par où commencer ? 24 | li Importance de la navigation 25 | li Choisir sa typographie 26 | li Un attribut clef les mesures 27 | li Concevoir directement dans le navigateur 28 | li Penser mobile 29 | li Construire une mise en page adaptative 30 | li Détails techniques 31 | li Point de rupture 32 | 33 | h2 Principaux challenges 34 | ol 35 | li Navigation 36 | li Publicité 37 | li Évolution du design 38 | li Test d'usage / utilisation 39 | li Conception d'usages / interaction des pages 40 | li L'affichage de votre site internet 41 | li Re - lancement 42 | li Phase de test finale 43 | -------------------------------------------------------------------------------- /source/layouts/forge_layout.html.slim: -------------------------------------------------------------------------------- 1 | = wrap_layout :layout do 2 | article.row itemtype="http://schema.org/BlogPosting" itemscope="" role="article" 3 | .medium-2.columns 4 | = previous_link data.tree 5 | .medium-8.columns.m-blog--article itemprop="articleBody" 6 | == yield 7 | div style="margin-top: 100px;" 8 | = partial 'layouts/author' 9 | .medium-2.columns 10 | = next_link data.tree 11 | -------------------------------------------------------------------------------- /source/layouts/layout.html.slim: -------------------------------------------------------------------------------- 1 | doctype html 2 | html prefix="og: http://ogp.me/ns#" lang="#{current_page.data.lang ? current_page.data.lang : 'fr'}" class="no-js" 3 | head profile="http://dublincore.org/documents/dcq-html/" 4 | meta charset="utf-8" 5 | meta name="viewport" content="width=device-width,initial-scale=1" 6 | 7 | title = current_page.data.title ? current_page.data.title : data.settings.site.title 8 | meta name="description" content="#{current_page.data.description}" 9 | meta name="robots" content="index, follow" 10 | = partial 'layouts/commons/open_graph' 11 | 12 | - unless environment == :development 13 | = google_analytics_tag 14 | 15 | = partial 'layouts/commons/favicon' 16 | = stylesheet_link_tag 'application' 17 | = stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Chivo:900|Lato:400,900' 18 | = stylesheet_link_tag 'https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' 19 | 20 | body class="#{current_page.data.page_class} #{page_classes}" 21 | - unless current_page.url == '/' 22 | = partial 'layouts/commons/topbar' 23 | div role="main" 24 | = partial 'layouts/commons/hero-banner' 25 | #js-maincontent 26 | == yield 27 | - unless current_page.url == '/' 28 | = partial 'layouts/commons/footer' 29 | 30 | = javascript_include_tag 'https://code.jquery.com/jquery-2.2.4.min.js' 31 | = javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/js/foundation.min.js' 32 | = javascript_include_tag 'application' 33 | = yield_content :javascripts 34 | -------------------------------------------------------------------------------- /source/layouts/styleguide/_buttons.html.slim: -------------------------------------------------------------------------------- 1 | .row 2 | .columns 3 | = link_to 'Hire me', '#', class: 'button expanded' 4 | .columns 5 | = link_to 'Hire me', '#', class: 'button expanded secondary' 6 | .columns 7 | = link_to 'Hire me', '#', class: 'button expanded hollow' 8 | .columns 9 | = link_to 'Hire me', '#', class: 'button expanded hollow secondary' 10 | 11 | .row 12 | .columns 13 | = link_to '#', class: 'button button-icon expanded', data: {icon: '▸'} do 14 | 'Hire me 15 | .columns 16 | = link_to '#', class: 'button button-icon expanded secondary', data: {icon: '▸'} do 17 | 'Hire me 18 | .columns 19 | = link_to '#', class: 'button button-icon expanded hollow', data: {icon: '▸'} do 20 | 'Hire me 21 | .columns 22 | = link_to '#', class: 'button button-icon expanded hollow secondary', data: {icon: '▸'} do 23 | 'Hire me 24 | 25 | .row 26 | .columns 27 | = link_to 'Shop later', '#', class: 'button expanded disabled' 28 | .columns 29 | = link_to 'Shop later', '#', class: 'button expanded secondary disabled' 30 | .columns 31 | = link_to 'Shop later', '#', class: 'button expanded hollow disabled' 32 | .columns 33 | = link_to 'Shop later', '#', class: 'button expanded hollow secondary disabled' 34 | -------------------------------------------------------------------------------- /source/layouts/styleguide/_callout.html.slim: -------------------------------------------------------------------------------- 1 | section.section 2 | .row.expanded 3 | .medium-4.columns 4 | .callout 5 | h3 Title 6 | p Description 7 | .medium-4.columns 8 | .callout 9 | h4 title 10 | = link_to '#' do 11 | 'shop now 12 | i.icon.icon-medium.icon-chevron-black 13 | .medium-4.columns 14 | .callout 15 | .section--card 16 | .l-icon 17 | i.fa.fa-2x.fa-windows 18 | .l-content 19 | markdown: 20 | [babun](http://babun.github.io/){:target="_blank"} le “moins pire” qu’on puisse faire sur Windows et la seule façon de survivre si l’on est obligé de bosser avec cet os. 21 | 22 | section.section 23 | .row 24 | - data.work.design.each do |w| 25 | .columns 26 | = link_to w.link, class: 'callout-link' do 27 | .callout 28 | .l-icon-card 29 | = fa "#{w.icon} fa-2x" 30 | .l-icon-content 31 | h3 = w.title 32 | p = w.description 33 | -------------------------------------------------------------------------------- /source/layouts/styleguide/_colors.html.slim: -------------------------------------------------------------------------------- 1 | .row 2 | .columns.shrink 3 | .color-list--box.primary 4 | .columns.shrink 5 | .color-list--box.secondary 6 | .columns.shrink 7 | .color-list--box.success 8 | .columns.shrink 9 | .color-list--box.alert 10 | 11 | .row 12 | .columns.shrink 13 | .color-list--box.light-gray 14 | .columns.shrink 15 | .color-list--box.medium-gray 16 | .columns.shrink 17 | .color-list--box.dark-gray 18 | .columns.shrink 19 | .color-list--box.black 20 | .columns.shrink 21 | .color-list--box.white 22 | -------------------------------------------------------------------------------- /source/layouts/styleguide/_icons.html.slim: -------------------------------------------------------------------------------- 1 | .row 2 | .columns 3 | = fa_stack 'fa-terminal', 'fa-square' 4 | 5 | 6 | 7 | 8 | 9 | 10 | = fa 'fa-gamepad' 11 | 12 | = fa 'fa-html5' 13 | = fa 'fa-css3' 14 | = fa 'fa-jsfiddle' 15 | 16 | = fa 'fa-trophy' 17 | -------------------------------------------------------------------------------- /source/layouts/styleguide/forms.html.slim: -------------------------------------------------------------------------------- 1 | form class="l-search-form" action="https://www.google.com/search" method="get" 2 | input name="q" placeholder="Ex : Sublime text" type="search" id="js-search-input" 3 | input name="sitesearch" value="#{data.settings.site.url}" type="hidden" 4 | 5 | 6 | form action="#{data.settings.social.mailchimp}" method="post" name="mc-embedded-subscribe-form" target="_blank" 7 | .row.collapse 8 | .small-8.columns 9 | input type="email" name="EMAIL" id="js-mailchimpemail" placeholder="youare@weso.me" required="" autocapitalize="none" autocorrect="off" 10 | .hide 11 | input type="text" name="b_b72e60a9116993dde8d1547fe_e99fbeb8ad" 12 | .small-4.columns 13 | button type="submit" name="subscribe" id="mc-embedded-subscribe" class="button postfix" 14 | 'GO 🚀 15 | 16 | footer.footer 17 | form action="#{data.settings.social.mailchimp}" method="post" name="mc-embedded-subscribe-form" target="_blank" 18 | .row 19 | .small-12.columns 20 | label for="js-mailchimpemail" 21 | 'Abonnez-vous et commencez votre voyage pour devenir un expert 22 | 23 | .row.expanded 24 | .small-8.columns 25 | input type="email" name="EMAIL" id="js-mailchimpemail" class="m-mailchimpemail" placeholder="youare@weso.me" required="" autocapitalize="none" autocorrect="off" 26 | .hide 27 | input type="text" name="b_b72e60a9116993dde8d1547fe_e99fbeb8ad" 28 | .small-4.columns 29 | button type="submit" name="subscribe" id="mc-embedded-subscribe" class="button postfix" 30 | 'Apprendre 31 | -------------------------------------------------------------------------------- /source/learn/formations.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Formation git, HTML, CSS et développement front-end Lille 3 | description: "Workshop d’un consultant développeur front-end, qui partage son expértise en intégration HTML, développement avec Ruby, Sass et Node.js" 4 | page_title: Formation 5 | page_emphasis: Apprendre à construire des systèmes modulaires 6 | --- 7 | 8 | .row.align-center 9 | .medium-10.columns 10 | - data.courses.each_with_index do |date| 11 | section.section 12 | p.lead.text-center = date.year 13 | hr 14 | - date['content'].each do |course| 15 | .row 16 | .medium-3.columns 17 | p 18 | = fa 'fa-fw fa-building' 19 | => course.provider 20 | br 21 | = fa 'fa-fw fa-map-pin' 22 | => course.place 23 | .medium-9.columns 24 | h2 25 | = course.title 26 | p 27 | = course.description 28 | br 29 | - if course['url'].present? 30 | = link_to 'Consulter le programme', course.url 31 | 32 | section.section.l-light 33 | .row.align-center 34 | .medium-10.columns 35 | h2.text-center Embauchez moi en tant que formateur 36 | .text-center 37 | = link_to "mailto:#{data.settings.social.email}?subject=Demande%20contact&body=Bonjour%20David%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AActuellement%20mon%20plus%20grand%20d%C3%A9fi%20c%27est%20%0D%0A%0D%0AJ%27ai%20entendu%20parler%20de%20ton%20site%20sur%20", class: 'button secondary' do 38 | 'Contact 39 | -------------------------------------------------------------------------------- /source/learn/newsletter.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Newsletter de David Leuliette — développement front-end & Hacking" 3 | description: "Newsletter gratuite sur le design et le développement front-end : articles sur le CSS, le JavaScript & les outils." 4 | page_title: Inscrivez–vous aujourd’hui 5 | page_emphasis: Je sélectionne le meilleur contenu du web 6 | --- 7 | 8 | .row.align-center 9 | .medium-8.columns 10 | markdown: 11 | ## Apprenez les techniques des développeurs senior 12 | 13 | Recevez une fois par mois des informations sur le __design__ & le __développement front-end__ : articles, outils, conseils, tutoriaux et liens. 14 | Je passe des heures à sélectionner le meilleur contenu sur le web. J’écris des articles pour partager mon expérience avec vous : succès comme échecs. Ne vous inquétez pas je déteste le spam, il suffit d’un clic pour se désabonner. 15 | 16 | form action="#{data.settings.social.mailchimp}" method="post" name="mc-embedded-subscribe-form" target="_blank" 17 | .hide 18 | input type="text" name="b_b72e60a9116993dde8d1547fe_e99fbeb8ad" 19 | .row.collapse 20 | .small-8.columns 21 | input type="email" name="EMAIL" placeholder="youare@weso.me" required="" 22 | .small-4.columns 23 | input type="submit" value="S’inscrire" name="subscribe" class="button secondary postfix" 24 | 25 | p 26 | 'Je sais que votre email est précieux. C’est pourquoi il est gardé secret. Il sera toujours utilisé pour vous envoyer des informations utiles pour vous tenir au courant de ce qui se passe, sans avoir à passer des heures à le trouver. 27 | 28 | 29 | 30 | section.section.l-light 31 | section.section.text-center 32 | = fa 'fa-send fa-5x' 33 | .row.align-center 34 | .medium-8.columns 35 | markdown: 36 | ## 5 newsletters qui rendent ma vie meilleure 37 | 38 | Il est facile de vous abonner à des dizaines de listes de diffusion, dont beaucoups partent directement à la poubelle. 39 | 40 | Mais pour moi, il y en a quelques-unes — qui ne font pas que rester dans ma boîte de réception, mais qui me donnent le sourire quand elles arrivent. 41 | 42 | ul.m-blog--post-list 43 | - data.newsletters.each do |newsletter| 44 | li 45 | i class="fa fa-#{newsletter.icon} fa-2x fa-block" 46 | = link_to newsletter.title, newsletter.url, class: 'blog-post-link' 47 | em 48 | = newsletter.description 49 | hr 50 | -------------------------------------------------------------------------------- /source/legal.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mentions légales 3 | page_title: Mentions légales 4 | changefreq: yearly 5 | priority: 0 6 | --- 7 | 8 | .row.align-center 9 | .medium-8.columns 10 | markdown: 11 | 12 | ## Propriété du site 13 | 14 | Vous êtes actuellement connecté au site web davidl.fr. Le nindô du propriétaire est le logiciel libre, les sources appartiennent donc à tout le monde et à personne. 15 | 16 | ## [Licence](/gnu.html) 17 | 18 | Le contenu est sous licence [GNU](http://www.gnu.org/philosophy/free-sw.html). Vous êtes libre de __copier, diffuser, remixer ou pirater__ ce site, à condition de me distribuer une copie modifiée pour __bénéficier à tous__. 19 | 20 | ## Crédits Photographiques 21 | 22 | Les photos libres de droits viennent du [site de Markus Spiske](http://www.raumrot.com/10/). 23 | 24 | ## Directeur de la publication 25 | 26 | Loi du 29 juillet 1982 sur l’audiovisuel, loi 2000-79 du 1er août 2000. 27 | 28 | Monsieur David Leuliette, en qualité d'administrateur, développeur front-end et sauveur du monde de niveau 2. 29 | 30 | ## Hébergement 31 | 32 | Loi du 1er août 2000 articles 43-8 à 43-10. 33 | 34 | GitHub 35 | -------------------------------------------------------------------------------- /source/mentors.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Améliorer ses compétences d’intégration CSS & développemnt frontend" 3 | description: "Depuis des années je me forme de façon autodidacte. Si vous choisissez ce chemin vous devez vous entourer des bonnes personnes." 4 | page_title: Les maîtres Jedi du web 5 | page_emphasis: Des personnes qui m’inpirent et que j’admire 6 | --- 7 | 8 | .row.align-center 9 | .medium-8.columns 10 | markdown: 11 | À travers les années, j’ai appris de plusieurs personnes. 12 | 13 | Internet a apporté un énorme avantage pour notre génération parce que vous pouvez __choisir vos mentors__. 14 | 15 | La capacité à choisir quelles informations vous souhaitez lire ou appronfondir, en provenance de la plus grande bibliothèque jamais assemblée —nommée internet, est une de mes choses préférées sur le web. 16 | 17 | 18 | Certaines de ces personnes savent que je les regarde comme des mentors, d’autres non, mais ils ont __tous eu un impact important__ sur ​​la façon dont je pense et travaille. 19 | 20 | h2 21 | 'Mes mentors 22 | small Sans ordre de classement 23 | 24 | ul 25 | - data.mentors.each_with_index do |mentor| 26 | li 27 | strong 28 | = link_to mentor.name, mentor.url 29 | - if mentor['image'].present? 30 | = image_tag mentor.image 31 | p 32 | = mentor.description 33 | 34 | hr 35 | 36 | p.lead 37 | strong 38 | 'Si vous avez appris quelque chose de nouveau, lisez mon 39 | => link_to 'blog sur ​​l’intégration et le développement front-end', '/blog/' 40 | '. 41 | 42 | p J’écris dans le but de partager mes connaissances et qui sais je deviendrais peut être votre mentor ? 43 | -------------------------------------------------------------------------------- /source/pricing.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tarif développeur et designer web freelance 3 | description: 4 | page_title: Grille de tarification 5 | page_emphasis: Trouver une solution qui vous correspond 6 | page_class: m-pricing 7 | changefreq: monthly 8 | priority: 0.6 9 | --- 10 | 11 | .row.align-center 12 | .medium-8.columns 13 | markdown: 14 | ## Pourquoi ? 15 | 16 | Le but de cette grille de tarification est de __proposer différentes gammes de budget__ pour mes services de freelance. 17 | Ces évaluations ne sont pas des bugdets définitifs, mais peuvent êtres considérés comme point de départ pour vous aider à choisir la meilleure solution possible en fonction de votre budget. 18 | 19 | ### Comment lire cette grille ? 20 | 21 | Les grilles ont différentes options disponibles comme le __code front-end__ et le __responsive design__. 22 | 23 | ### Encore des petites choses 24 | 25 | - Dans tous les cas, considérez que la cession des droits est comprise dans les tarifs. 26 | - Certains type de travaux __ne sont pas inclus__ dans les budgets : stratégie du contenu, recherches, et autres types de travail préparatoire. Je considère que cela est déjà effectué en partie par mes clients. Si ce n'est pas le cas il est possible de réaliser une évaluation séparée pour ça. 27 | - Chaque catégorie est illustrée __par un exemple réel__ de réalisation. 28 | 29 | .row.align-center 30 | .medium-10.columns 31 | - data.pricing.each do |item| 32 | section.section 33 | h2.text-center = item.title 34 | hr 35 | .row 36 | .medium-6.columns 37 | h3.small = item.baseline 38 | p 39 | = Kramdown::Document.new(item.description).to_html 40 | .medium-6.columns 41 | .callout.callout-border 42 | - if item['delivers'].present? 43 | ul 44 | - item['delivers'].each do |subitem| 45 | li = subitem.content 46 | h4.small = item.price 47 | 48 | section.section.l-light 49 | .row.align-center 50 | .medium-10.columns.text-center 51 | markdown: 52 | ## Réussir votre prochain projet 53 | Je peux vous aider le temps d’une journée ou plus. 54 | a class="button secondary" href="https://airtable.com/shryVoJ3nzyeq2P4s" Rencontrer David Leuliette 55 | -------------------------------------------------------------------------------- /source/robots.txt: -------------------------------------------------------------------------------- 1 | User-Agent: * 2 | Allow: / 3 | 4 | Sitemap: https://archive.davidl.fr/sitemap.xml 5 | -------------------------------------------------------------------------------- /source/sitemap.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plan du site 3 | description: Retrouvez les liens vers les pages importantes du site. Vous cherchez un lien vers les projets open-source d’un développeur front-end ? Découvrez également ma méthode de travail et les outils que j’utilise. 4 | page_title: Plan du site 5 | page_emphasis: Retrouvez toutes les pages et les rubriques du site. 6 | --- 7 | 8 | .row.align-center 9 | .medium-8.columns 10 | p.typl8-drop-cap 11 | 'J’ai créé un bon nombre de pages web pour enseigner aux visiteurs les bonnes pratiques du développement front-end. Pour vous aider à trouver ce que vous cherchez, j’ai organisé ces pages en groupes. 12 | 13 | hr 14 | markdown: 15 | ## [Blog d’un développeur / designer front-end](/blog/) 16 | 17 | Sur mon blog, vous trouverez des articles sur le développement front-end, l'informatique, le hacking et le design en général. Mes langages préférés : JavaScript, HTML5, CSS3 et Ruby. 18 | 19 | - - - 20 | 21 | ### Contenu du site 22 | 23 | Découvrez tous mes essais en accès libre. 24 | 25 | ul 26 | = tree_to_html data.tree 27 | 28 | section.section.text-center 29 | h2 En savoir plus sur moi 30 | p Découvrez plus d’informations sur les technologies que j’utilise, mes lectures, mes compétences et mes langages de programmation de prédilection. 31 | = link_to 'À propos', '/about.html', class: 'button secondary' 32 | -------------------------------------------------------------------------------- /source/styleguide.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Guide des styles 3 | description: Bibliothèques des composants HTML, CSS et Javascript 4 | page_title: Styleguide 5 | page_emphasis: The most important starting point for any project is a set of guidelines 6 | --- 7 | 8 | .row.align-center 9 | .medium-10.columns 10 | section.section 11 | h1 = data.settings.site.title 12 | p = data.settings.site.description 13 | 14 | section.section 15 | h2 Colors 16 | = partial 'layouts/styleguide/colors' 17 | 18 | section.section 19 | h2 Icon list 20 | = partial 'layouts/styleguide/icons' 21 | 22 | section.section 23 | h2 Buttons style 24 | = partial 'layouts/styleguide/buttons' 25 | .callout style="padding-top: 2rem;" 26 | = partial 'layouts/styleguide/buttons' 27 | .section.section--inverse style="padding-top: 2rem;" 28 | = partial 'layouts/styleguide/buttons' 29 | 30 | section.section 31 | h3 Typography 32 | = partial 'layouts/styleguide/typography' 33 | 34 | section.section 35 | h3 Forms 36 | = partial 'layouts/styleguide/forms' 37 | 38 | section.section 39 | h2 Callout 40 | = partial 'layouts/styleguide/callout' 41 | = partial 'layouts/social' 42 | .row.align-center 43 | .medium-6.column 44 | = partial 'layouts/quick-contact' 45 | -------------------------------------------------------------------------------- /source/thankyou.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Merci 3 | description: "Le contenu de ce site, ainsi que son code source, sont publiés sous licence GNU" 4 | page_title: Merci beaucoup ! 5 | page_emphasis: J’ai bien reçu votre demande 6 | --- 7 | 8 | .row.align-center 9 | .medium-8.columns 10 | p.lead Je vais recevoir votre question par email et je m’engage à y répondre dans les meilleurs délais. 11 | 12 | markdown: 13 | ![Thank you gif](https://media.giphy.com/media/9yGa9mD2gyUnu/giphy.gif) 14 | 15 | En attendant vous pouvez vous [inscrire à la newsletter](/learn/newsletter.html), ou consulter mes dernier [articles de blog sur le développement front-end](/blog/). 16 | -------------------------------------------------------------------------------- /source/uses.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: "La toolbox du developpeur front-end / intégrateur web - Outils" 3 | description: Pour travailler efficacement un artisan a besoin de bons outils. C’est la même chose pour la programation web. Voici une sélection d’application macOS indispensables à tout dev front-end 4 | page_title: Les meilleures applications pour développeurs front-end 5 | page_emphasis: Cette liste rassemble tous les outils pour être efficace sur macOS 6 | --- 7 | 8 | section.section 9 | .row.align-center 10 | .medium-12.columns 11 | markdown: 12 | __Note :__ J'ai publié un [Mindmapping des applications macOS](https://github.com/flexbox/macos-front-end) que j'utilise sur GitHub car la maintenace est plus rapide. 13 | h2 Dev 14 | .row.small-up-1.medium-up-2 15 | - data.tools.dev.each do |tool| 16 | .columns 17 | = link_to tool.url, class: 'callout-link' do 18 | .callout 19 | .row 20 | .small-4.columns 21 | = image_tag "front/tools/#{tool.image}", alt: "Logo #{tool.name}" 22 | .small-8.columns 23 | h3 24 | = tool.name 25 | p 26 | = tool.description 27 | 28 | section.section.l-light 29 | .row.align-center 30 | .medium-12.columns 31 | h2 Design 32 | .row.small-up-1.medium-up-2 33 | - data.tools.design.each do |tool| 34 | .columns 35 | = link_to tool.url, class: 'callout-link' do 36 | .callout 37 | .row 38 | .small-4.columns 39 | = image_tag "front/tools/#{tool.image}", alt: "Logo #{tool.name}" 40 | .small-8.columns 41 | h3 = tool.name 42 | p = tool.description 43 | 44 | section.section 45 | .row.align-center 46 | .medium-12.columns 47 | h2 Divers 48 | .row.small-up-1.medium-up-2 49 | - data.tools.misc.each do |tool| 50 | .columns 51 | = link_to tool.url, class: 'callout-link' do 52 | .callout 53 | .row 54 | .small-4.columns 55 | = image_tag "front/tools/#{tool.image}", alt: "Logo #{tool.name}" 56 | .small-8.columns 57 | h3 = tool.name 58 | p = tool.description 59 | -------------------------------------------------------------------------------- /source/workflow/chatbot.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction au Chatbot - Lille 3 | description: 4 | image: 5 | page_title: Création d’application conversationnelles 6 | page_emphasis: 7 | --- 8 | 9 | .row 10 | .small-12.columns 11 | markdown: 12 | 13 | 14 | HOME OF THE CHATBOT REVOLUTION 15 | 16 | 17 | Chatbot Summit Berlin is the second international Chatbot Summit destined to bring together the leading players of the newly formed Chatbot economy. 18 | 19 | Chatbot developers, A.I. and machine learning experts, UX designers, product managers, Chatbot platform and tools providers, startups, investors and industry thought leaders. We are all going to come together in this industry-defining event. 20 | 21 | Great Speaking Sessions. Exciting Panels. Hands-on Sessions. Networking. Partying. 22 | -------------------------------------------------------------------------------- /source/workflow/coaching.html.slim: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Coaching développement frontend HTML, CSS & JavaScript' 3 | description: 4 | image: 5 | page_title: 'Coaching & conseils' 6 | page_emphasis: 'Faire grandir votre projet, étape après étape' 7 | changefreq: yearly 8 | priority: 0.6 9 | --- 10 | 11 | .row 12 | .medium-5.columns 13 | = image_tag 'front/work/coaching.jpg', alt: 'Coaching & revue de code developement front-end' 14 | .medium-7.columns 15 | markdown: 16 | ## Comment ça fonctionne ? 17 | 18 | Une session de coaching commence par une __compréhension de vos besoins et de vos objectifs__, suivi par une évaluation des compétences pour voir comment je peux vous aider et vous apporter le plus de valeur. 19 | 20 | Nous __travaillons ensemble__ pour déterminer les meilleurs activités à réaliser pour atteindre vos objectifs personnels et organisationnels. À la fin, nous réalisons une évalution & des “Devoirs à la maison” pour être certain d’aquérir vos nouvelles compétences. 21 | 22 | ## Discutons-en ! 23 | 24 | Expliquez-moi dès aujourd’hui, quel problème je pourrais résoudre. Je peux vous aider en partageant mon expérience avec votre équipe. 25 | 26 | = link_to 'Contactez–moi', "mailto:#{data.settings.social.email}", class: 'button secondary' 27 | 28 | .row 29 | .medium-12.columns 30 | .row.small-up-1.medium-up-3 31 | .columns 32 | markdown: 33 | ### Pair programming 34 | 2 cerveaux valent mieux qu’un particulièrement quand on travaille sur un problème difficile. Je peux vous aider à découvrir les points complexes et les problèmes __avant que le code se retrouve en production__. 35 | .columns 36 | markdown: 37 | ### Organisation du code 38 | Si votre base de code devient de plus en plus __difficile à maintenir__, j’utiliserai mon expérience en construction d’application web pour vous remettre sur le droit chemin. 39 | .columns 40 | markdown: 41 | ### Méthode de travail 42 | Beaucoup de tâches en développement front-end sont répétitives & compliquées. Je peux vous aider à mettre en place des outils — comme un [styleguide](http://flexbox.github.io/foundation-boilerplate/) — pour automatiser les tests, la construction & le déployement. 43 | 44 | .row 45 | .medium-12.columns.text-center 46 | a class="button large" href="https://airtable.com/shryVoJ3nzyeq2P4s" Work 47 | --------------------------------------------------------------------------------