41 tweets
17 min read
Thread by @levelsio: "Starting on the website for ✈ http://airlinelist.co now, I will log the full development right here in this thread 👇"
Archive to PDF: This thread can be removed from Twitter at anytime.
Archive this thread to PDF, save and print. It is a premium feature and costs $5 per month.
Starting on the website for ✈ http://airlinelist.co now, I will log the full development right here in this thread 👇
I always start like this in my code editor, just raw HTML code, no styling (yet), to get the basic functionality down
I'm also adding a BOOK FLIGHT option, which gets the flights from an API like @kiwicom247 and rates each flight by service, comfort, on-time and safety
Now I need to get the data from the Google sheet I made into my SQLite database, for that I use this script (I took it from Nomad List's code), it goes over the sheet and inserts all data into the db
Google Docs
I've added database-style column names in the sheet, these have to correspond with the SQLite table structure I'm gonna make now...
I use phpLiteAdmin, a light-weight editor for SQLite databases that runs on PHP. Let's make airlines.db!
Inside airlines.db I make the table airlines (I always use one table per .db file to keep it simple)
Here's my airlines table structure, I can always add/edit later so it doesn't have to be perfect immediately. I use "epoch" as a seconds since 1970-01-01 (epoch) field to save when it's last updated
Here's the code which puts it into SQLite, it's a bit ugly, but makes sure every value I want goes in there. I can make it dynamic later, but for now this is easiest to make.
Yay, it worked 😙 the spreadsheet data is now in a SQLite db called airlines.db, now I will try access it from the site...
To test if it worked I load the DB on /index.php and do
echo json_encode($airlines);
This prints the data into JSON, so I can see if it's readable by my site.
I can now start putting in a <table>
echo json_encode($airlines);
This prints the data into JSON, so I can see if it's readable by my site.
I can now start putting in a <table>
Now I put it in a foreach($airlines as $airline) loop inside <table> HTML, here's how it looks if you open it
I made all this on my laptop, so now I want to deploy it to http://airlinelist.co so you can see it too.
I go to @namecheap to DNS and add my server's IP as an A/AA record. It was a URL redirect before to the Google spreadsheet, that ends now.
I go to @namecheap to DNS and add my server's IP as an A/AA record. It was a URL redirect before to the Google spreadsheet, that ends now.
Now I have to wait for an hour for the name servers to update. Meanwhile I've added some styling to the buttons, and made them toggle-able with jQuery.
I'll go over all the filter buttons to find which one are pressed and then do a call to the server to filter airlines!
I'll go over all the filter buttons to find which one are pressed and then do a call to the server to filter airlines!
^ the color of the button I picked from the ✈️ airplane emoji on MacOS. Emojis are a nice way to find colors ^_^
I did some more <style>'ing so now it looks like this. I centered the page by adding a <div class="container"> which wraps around all the elements. It's set to max-width:1000px; and centered with margin:0 auto;
Now for some logic. I want the filters to actually do something. So I define each filter inside the button with 3 data tags:
data-key
data-operator
data-value
For ex. safe airline should be
"safety_score"
greater-than
3
(where 3 is out of 5)
data-key
data-operator
data-value
For ex. safe airline should be
"safety_score"
greater-than
3
(where 3 is out of 5)
Here's the JS code for it. It collects each filter's data attributes key, operator and value. Puts them in a data array. This array we will then AJAX to the server where PHP receives it, filters, and sends back the airlines.
Yay! It works. JS collects the filters successfully, sends them as AJAX to server and PHP reads the filters accurately.
Meanwhile the DNS has propagated. So now we can get a @letsencrypt https SSL certificate. I use an app called CERTBOT for it. If you type CERTBOT CERTONLY it lets you authorize a server. I had to kill my NGINX server for it (I know I'm noob) when doing it for a 30 secs. But works
On the server, I edit /etc/nginx/sites/airlinelist.co, which is my virtual host config file for NGINX. It lets the server know I want to have a website with http://airlinelist.co and the server should respond with files from /srv/http/airlinelist.co like index.php!
It's not opening here yet BUT it is on the server. So it can show up any time now. DNS can takes hours, sometimes days to update on all people's providers.
While we're waiting for that, I've made the filters work. Every click is an AJAX request with the active filters (see tweets above), and the PHP sends the airlines as <tr><td></td></tr> table rows back! JS then puts that in the <table><tbody>. Very simple.
Okay it seems to be working for some people: try it 👉
Airline List
Added a disclaimer so I don't get sued by airlines + region filters
This took 6 hours from start to here! Now I'm gonna take a bit of a break and see if I can come up with more stuff. I'd like to:
- make the table less ugly
- add some kind of sexy header
- add favicon
- add social media cards
But yay at least we're live!
- make the table less ugly
- add some kind of sexy header
- add favicon
- add social media cards
But yay at least we're live!
Can't say I really like this, but it's a start
I made it better! <div class="container"></div> has a white bg now which covers the sky background
Okay another pic now from @unsplash!
🌅 Good morning! Time to continue.
I want to make a social media image card that looks nice. Now I don't use/have Photoshop anymore cause Adobe is a POS.
Luckily we can make it in just bare HTML and CSS!
I want to make a social media image card that looks nice. Now I don't use/have Photoshop anymore cause Adobe is a POS.
Luckily we can make it in just bare HTML and CSS!
I screenshotted it into a PNG it but it's 2.5MB, need to resize and then convert to JPG, again without Photoshop (f* Photoshop)
Now we add <meta> tags for Twitter and Facebook (og:) so that it shows up as an image. You can test it at
What's fun about making your social media image as an HTML file and not a Photoshop image, is that you can re-use it later for individual pages, like in my case, an airline:
Now let's add ✈️ airline logos, luckily we can use @clearbit for that:
logo. clearbit .com / airline .com
Will return its logo, if available. When it's not available, it 404's and <img> runs onerror="http://this.style.display='none'" which hides the broken image.
logo. clearbit .com / airline .com
Will return its logo, if available. When it's not available, it 404's and <img> runs onerror="http://this.style.display='none'" which hides the broken image.
Added @SpaceX stats too and 🛰 Space region filter
Bit stuck now, so I moved the filters to the left. I don't really know how to improve this now, so I'll switch to working on the Flight Search part of Airline List. I want to let people search flights and rate each flight based on my airline data!
Added colors for the scores!
Now for a favicon, I took the plane departing from @Emojipedia and saved it as logo.png, and added it as an icon meta tag
OK so I thought the colors above sucked a bit, so I took the ones from the Google sheet color scale and starting to look better...
Added fixed <thead> now! It sets the width of each cell precisely:
i=0;
$('table thead th').each(function() {
$(this).css('width',$(this).width()+'px');
$('table tr td:nth-child('+i+')').css('width',$(this).width()+'px');
i++;
});
i=0;
$('table thead th').each(function() {
$(this).css('width',$(this).width()+'px');
$('table tr td:nth-child('+i+')').css('width',$(this).width()+'px');
i++;
});
Added sorting:
$('body').on('click','table thead th',function() {
<?if($_GET['asc']){?>
window.location.href='/?by='+$(this).data('sort')+'&desc=1';
<?} else {?>
window.location.href='/?by='+$(this).data('sort')+'&asc=1';
<?}?>
});
$('body').on('click','table thead th',function() {
<?if($_GET['asc']){?>
window.location.href='/?by='+$(this).data('sort')+'&desc=1';
<?} else {?>
window.location.href='/?by='+$(this).data('sort')+'&asc=1';
<?}?>
});
