BA

Ide

@BasileM

Inf

Née le 1988-10-11

Membre Getin depuis le 10-04-19

Bio

Getin's dad 👶, geek assumé 👾, main verte 🌱 In permanent beta : learning, discovering, practicing in tech environment and new technology uses ! 🏴🏔

What is a Webhook?

A simple way to define a webhook is to say it is the opposite of an API.The doorbell metaphorLet’s take another metaphor. When you expect guests at home for dinner, you don’t go to the door every 5 minutes to see if someone has arrived. There is a doorbell for guests to use when they arrive. In this metaphor, the doorbell acts as the webhook.We saw that an API is an external service that exposes a service, and your program can consume it by calling it with an HTTP request.Webhooks do the opposite: it’s the external service that triggers a piece of code the developer writes in his application when a specific event happens.Webhooks optimize automationsLet’s take an example to show how webhooks can be useful.Imagine you built a form using Typeform, and you want to display answers in your own application (in a custom dashboard for instance). You could do the work manually: sign in on Typeform, see if there are new answers, then copy paste them in your database. That would be painful, time consuming and prone to errors. In a word: inefficient.You know that Typeform has an API, so you could also write some code that just makes a request every hour to see if a new form has been submitted. It’s a first way to solve the problems of the manual solution. But you want to your dashboard to be up-to-date each time you consult it. So you could reduce the interval, and make an API call every 10 seconds.But this solution is not ideal either, because it will generate many useless requests to Typeform’s API, because there will not be new answers to collect each time you call the API. This will increase the server load of your application, and also Typeform’s server load, and even if you both can manage this load technically and financially, it remains structurally unoptimal and doesn’t scale really well.Webhook = event + urlWhen this pattern occurs, it becomes interesting for all parties to opt for a webhook. The idea is to subscribe to a webhook on Typeform, and select the triggering event. In our case it would be each time a form is filled, and we can imagine that Typeform webhook in that particular case sends a JSON with (i) all the questions and (ii) the answers submitted.When you create the webhook on Typeform, you also need to give the url at which they should send the new answers (the data the webhook sends is often called the payload). Now you need to write the piece of code in your application that will be run on your server each time this url is called by Typeform, i.e. each time the event occurs on Typeform’s server. In this piece of code, you will create the new answers in your database, and now your database is updated in real time with the answers collected through the form.This way you will decrease server usage on both sides, and your application will be optimal. Each change will be communicated to your database in real time, and you never have to make an API call that would end up being useless.

02.06.21

🔍 10 vues

1. Getting started

During today’s workshop you will code your first website from scratch 🚀 In order to do so you’ll need to install a few things on your computer:Install Chrome Browser to visualize your webpage. It also comes with a great developer tool to inspect the code behind a webpage.Install Sublime Text, which is a text editor specially made for writing code, you’ll see it comes with lots of short cuts which will help you develop faster.Download the boilerplate, which will help you kickstart the landing page (click onlanding-page-master.zipand then rename the folderlandingand put the folder on your desktop).After that’s done you can open the boilerplate files in Sublime by dragging and dropping the folder into Sublime like this:Then drag and drop yourindex.htmlfile in Chrome to display the page.You can write some code inside thebodyof theindex.htmlfile, save your file (Cmd + SorCtrl + S) and then refresh your browser to see the result (Cmd + RorCtrl + R). Your setup should look exactly like this:👍 Good practicesNaming conventionChoose right names for your files and folders. No accents, no space, no special characters. Ideally:name-you-projectlike this.Andname-your-file.htmlorname-your-file.csslike that.Otherwise you will quickly get lost if you don’t respect strict naming conventions.⚠️ Always save your filesBeginners often forget to save their files any time they change their code. Therefore, they can loose a lot of time looking for an error while it’s just theirhtmlfile which is not saved 😬. So remember:Cmd + SorCtrl + Sanytime you change the code in Sublime Text.Cmd + RorCtrl + Rto refresh the browser.These two shortcuts are your best friends !

02.06.21

🔍 9 vues

2. HTML content

Open yourmy-landing/index.htmlfile. As you can see we’re nice, we’ve already built the skeleton of your page (head/body).Don’t worry about design and the background image here, all you have to do is add the relevant HTML tags and content in thebody:Banner Sectionadd ah1with the name of your product / service.add apunderneath with your tagline.add aaas your call to action redirecting somewhere.Cards Sectionadd ah2with the name of your second section.addimgusing one of the images inside theimagesfolder (or use a url).add ah3to describe the image above.repeat to have three pairs ofimg&h3.Footer Sectionadd aptag with your footer text.When you’re done your page should look like this (don’t worry we’ll add some design soon 😅).<body> <!-- Code your Banner section --> <h1>Change your life, learn to code</h1> <p>Le Wagon brings technical skills to creative people</p> <a href="https://www.lewagon.com/">Apply now</a> <!-- Code your Cards section --> <h2>Discover our campuses</h2> <img src="images/shanghai.jpg" alt="Shanghai" width="200"> <h3>Shanghai</h3> <p>Learn to code with us in Shanghai.</p> <img src="images/london.jpg" alt="London" width="200"> <h3>London</h3> <p>Learn to code with us in London.</p> <img src="images/paris.jpg" alt="Paris" width="200"> <h3>Paris</h3> <p>Learn to code with us in Paris.</p> <!-- Code your Footer section --> <p>Website made with ❤️ at Le Wagon</p></body>

02.06.21

🔍 5 vues

3. Fonts and colors in CSS

Add nice fonts and colors 😎Copy/paste the following CSS code intostyle.cssand change it to see what each property does:/* style.css */body { font-family: Overpass; color: #404042; font-size: 18px;}h1, h2, h3 { font-family: Chivo;}a { color: #1A48E3; font-weight: bold; text-decoration: none; transition: .3s;}a:hover { color: #CE2FAE;}Once you’ve selected your fonts onGoogle Fonts don’t forget to add import them into yourindex.htmllike this :<!-- index.html --><head> <!-- [...] --> <link href="https://fonts.googleapis.com/css?family=Chivo:700|Overpass:400,700&display=swap" rel="stylesheet"> <!-- [...] --></head>When you’re done your page should look like this.Change the fonts and colors thanks to these resources:For fonts use Google FontsFor colors use Colorzilla Chrome plugin to pick colors from other websites

02.06.21

🔍 12 vues

4. Div structure

Let’s structure the content of your page, you should add some HTML in theindex.htmlfile and you should have:One<div>for the banner section.Three<div>for each campus card.One<div>for the campuses section (wrapping altogether theh2and all campus cards).One<div>for the footer section.When you’re done your page should look like this. Don’t see anything different? Open theinspector(right click andinspect) and you should see something has changed 😉.SOLUTION 👇<body> <!-- Div for banner section --> <div> <h1>Change your life, learn to code</h1> <p>Le Wagon brings technical skills to creative people</p> <a href="https://www.lewagon.com/">Apply now!</a> </div> <!-- Div for campuses section --> <div> <h2>Discover our campuses</h2> <!-- Div for Shanghai card --> <div> <img src="images/shanghai.jpg" alt="Shanghai" width="200"> <h3>Shanghai</h3> <p>Learn to code with us in Shanghai.</p> </div> <!-- Div for London card --> <div> <img src="images/london.jpg" alt="London" width="200"> <h3>London</h3> <p>Learn to code with us in London.</p> </div> <!-- Div for Paris card --> <div> <img src="images/paris.jpg" alt="Paris" width="200"> <h3>Paris</h3> <p>Learn to code with us in Paris.</p> </div> </div> <!-- Div for footer section --> <div> <p>Website made with ❤️ at Le Wagon</p> </div></body>

02.06.21

🔍 2 vues

5. Custom Design

For this part you’ll have to first add the relevant classes in your HTML fileindex.htmlfile and then add the CSS styling to those same elements instyle.css. You should add the following:abannerclass.abutton-blueclass.acard-whiteclass.afooterclass.acontainerclass.When you’re done your page should look like this. Don’t worry about the alignement of the card, we will see how we can put them next to each other in the next section.HTML SOLUTION 👇<body> <!-- Banner section --> <div class="banner"> <h1>Change your life, learn to code</h1> <p>Le Wagon brings technical skills to creative people</p> <a href="https://www.lewagon.com/" class="button-blue">Apply now!</a> </div> <!-- Container (with left/right automatic margins) --> <div class="container"> <h2>Discover our campuses</h2> <!-- Shanghai card --> <div class="card-white"> <img src="images/shanghai.jpg" alt=""> <h3>Shanghai</h3> <p>Learn to code with us in Shanghai.</p> </div> <!-- London card --> <div class="card-white"> <img src="images/london.jpg" alt=""> <h3>London</h3> <p>Learn to code with us in London.</p> </div> <!-- Paris card --> <div class="card-white"> <img src="images/paris.jpg" alt=""> <h3>Paris</h3> <p>Learn to code with us in Paris.</p> </div> </div> <!-- Code your Footer section --> <div class="footer"> <p>Website made with ❤️ at Le Wagon</p> </div></body>CSS SOLUTION 👇body { font-family: Overpass; margin: 0;}h1, h2, h3 { color: #404042; font-family: Chivo;}p { color: #404042; opacity: .7;}.container { width: 800px; margin: auto;}.banner { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/background.jpg'); background-size: cover; background-position: center; padding: 150px 0; text-align: center;}.banner h1 { color: white; font-size: 45px; margin: 0;}.banner p { color: white; font-size: 24px;}.button-blue { background-color: #1A48E3; color: white; padding: 16px 48px; border-radius: 4px; display: inline-block; text-decoration: none; transition: .3s;}.button-blue:hover { background-color: #0D1EC6; color: white;}.card-white { background: white; box-shadow: 0 0 16px rgba(0,0,0,0.1); border-radius: 4px; width: 200px; text-align: center; padding: 24px; margin: 8px;}.card-white img { width: 180px; height: 180px; object-fit: cover; border-radius: 4px;}.card-white h3 { margin-bottom: 0;}.footer { background: #404042; text-align: center; padding: 24px 0;}.footer p { color: white;}

02.06.21

🔍 2 vues

6. CSS grid

For this challenge you’ll have to first wrap your.card-whitearound another newdivwith thecardsclass.add acardsdiv around your threecard-white.turn thiscardsinto a CSS grid.add 3 columns inside the grid.And your first landing page is now done 🚀it should look like this if you’ve followed each section.HTML SOLUTION 👇<body> <!-- Banner section --> <div class="banner"> <h1>Change your life, learn to code</h1> <p>Le Wagon brings technical skills to creative people</p> <a href="https://www.lewagon.com" target="_blank" class="btn-blue">Apply now</a> </div> <!-- Container --> <div class="container"> <h2>Discover our campuses</h2> <!-- Cards grid --> <div class="cards"> <!-- Shanghai card --> <div class="card-white"> <img src="images/shanghai.jpg" alt=""> <h3>Shanghai</h3> <p>Learn to code with us in Shanghai.</p> </div> <!-- London card --> <div class="card-white"> <img src="images/london.jpg" alt=""> <h3>London</h3> <p>Learn to code with us in London.</p> </div> <!-- Paris card --> <div class="card-white"> <img src="images/paris.jpg" alt=""> <h3>Paris</h3> <p>Learn to code with us in Paris.</p> </div> </div> </div> <!-- Footer section --> <div class="footer"> <p>Website made with ❤️ at Le Wagon</p> </div></body>CSS SOLUTION 👇.cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 16px;}

02.06.21

🔍 5 vues

🚀 Publish your Website

Time to publish your websiteLet’s use GitHub to publish your website. If you are curious about GitHub, check this out: What Exactly Is GitHub Anyway?In this tutorial, we will only use one feature of GitHub: the publishing service. But bear in mind that GitHub is far more than that! By the way, we made a full tutorial about it here: Git and GitHub for Beginners if you want to get further into versioning and team collaboration using git and GitHub 🙂(extra!).1. Create a Github accountLet’s sign up and create your account on Github! Follow the steps below to join the Github’s community:Let’s follow this naming convention for your username:yourfirstname-yourlastname. For instance, John Lenon’s github username would have been:john-lennon🙂. Buttagada59is still a good github username if you really like it!2. Push it online

02.06.21

🔍 4 vues

WP All import

Voici un plugin qui semble assez intéressant pour l'importation de données à partir d'un fichier XML ou CSV.👉 https://www.wpallimport.comUne vidéo de démonstration pour l'importation de données à partir d'un fichier XML.Si un prestataire, vous fournit un fichier de données XML.Exemple : Plateforme e-commerce avec système de revendeurs, passerelle immobilière...With CRON automatisationÉgalement, la planification des importations grâce aux taches CRON.👉 lien vers la doc

28.12.20

🔍 28 vues

Distribution de masques

La Municipalité et le Centre Communal d’Action Sociale de Montfort l’Amaury organisent une distribution de masques lavables en tissu. Afin d’assurer une sécurité sanitaire pour tous, un protocole de distribution strict est mis en œuvre. Merci de le respecter.Afin d’assurer une sécurité sanitaire pour tous, un protocole de distribution strict est mis en œuvre. Merci de le respecter :- Un masque par Montfortois à partir de 15 ans- Seule une personne par foyer doit se rendre sur son secteur de distribution. Les masques de son foyer (personnes de plus de 14 ans) lui seront remis.- Le représentant du foyer devra présenter un justificatif d’identité (carte nationale d’identité, permis de conduire, passeport) et un justificatif de domicile de moins de trois mois.Quand ?- vendredi 8 mai : 10h à 16h- mercredi 13 mai : 10h à 16hOu ?- 7 secteurs, au plus proche des domiciles respectifs.La répartition des secteurs de distribution au format PDF.Comment l'utiliser ?Pour info :- Happy Haus vend aux habitants et associations de Montfort et ses environs des masques lavables en tissu : 1 masque acheté 10 € (+ frais de port) = 3 autres masques offerts.- Une société créée pendant le confinement en territoire montfortois sera en mesure de vendre des masques lavables en tissu d’ici la fin mai. Plus d’informations auprès du CCAS de Montfort.

07.05.20

🔍 74 vues

🍪

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies pour vous assurer une navigation fluide sur Getin, un support client de qualité et réaliser des statistiques de visites.
Pour en savoir plus et pour paramétrer vos cookies, cliquez sur en savoir plus

En savoir plus