Nathan Wailes - Blog - GitHub - LinkedIn - Patreon - Reddit - Stack Overflow - Twitter - YouTube
Website (Web) Development
Table of contents
Child pages
- A/B Testing
- Ajax (Web Development)
- Bootstrap.js
- Performance / Speed / Optimization / Monitoring (Web development)
- Reputation systems
- SPAs / Single-Page Applications
- Static websites / assets (web development)
- Tools (Web Development)
- UI / UX / Design (Web apps)
- URL Structure (Web Development)
- Cloud hosting / VPSes / Digital Ocean / PaaS / Dokku
Related pages
- Phone / Smartphone / Mobile Development (Programming)
- Web languages:
- Terms of Service / Privacy Policies (Law)
- Tools (Business / Entrepreneurship)
Interesting Info
- Quora: What consumer Internet companies had a large number of users but failed to monetize?
- Quora - How do modern websites check user passwords without storing the clear-text password in the database?
- Quora - How is Facebook's search speed so fast?
- Yahoo - Best Practices for Speeding Up Your Web Site
- http://www.quora.com/What-are-the-best-UI-elements-controls-patterns-etc-that-have-cropped-up-in-modern-web-sites-and-web-apps-recently
All-in-one Courses
- Udemy - The Complete Web Developer in 2018: Zero to Mastery
- As of 2018.01.08, it's rated 4.9 with 230 reviews.
- Tech taught:
- HTML5, CSS, Bootstrap 4, Javascript, React, Git + GitHub, Node.js, Express.js, NPM, PostgresSQL, SQL
Analytics
- Hotjar
- used by Pieter Levels, apparently.
General
Career advice
Courses
- Udemy
- Running a Web Development Business: The Complete Guide - 4.6 stars, 710 ratings
CDNs
CloudFlare
- Pieter Levels wants to use CloudFlare but he has a problem where Namecheap doesn't let you use its email-forwarding feature if you have your nameservers with a different company (and CloudFlare requires you switch your nameservers to them).
- Search his Twitter feed for "CloudFlare" to see what he's said about it.
- CloudFlare is apparently totally free for "average Joe's" because they get useful data and relationships from it, and they then make most of their money from big corporate clients. It's like the "whale" strategy in free-to-play games.
HTTP
Books
- 2012 - What Every Web Developer Should Know About HTTP
- 2015.03.09 - Ruslan's Blog - Let’s Build A Web Server
HTTP/2
- http2.github.io - FAQ
- Google - Introduction to HTTP/2
- Google - Best Practices - Uses HTTP/2 For Its Own Resources
- Setting up HTTP/2
- Before I go into detail with all the different webservers, you can use CloudFlare to get HTTP/2 without touching your backend at all. CloudFlare have enabled support for HTTP/2 a while ago. Since CloudFlare works as a caching proxy in front of your infrastructure, it doesn’t care about your actual server technology, complexity or topology. In my opinion, this is currently the easiest way to get HTTP/2 while still reaping most of the benefits. In April 2016, CloudFlare even added support for HTTP/2 push.
- Building HTTP 2 server in Python
- HTTP/1.1 and HTTP/2: A Performance Comparison for Python
The short answer, at least for me, is that HTTP/2 is underwhelming. For effectively-serial clients like Requests doing web-scraping (or any form of work where the response body is the major component of bandwidth use), HTTP/2 is a bust. The overhead in terms of complexity and network usage is massive, and any gains in efficiency are eliminated if HTTP/1.1 is deployed in any sensible way (allowing gzip and connection reuse). For clients that are more parallel, HTTP/2 has the potential to have some advantages: it limits the number of sockets you need to create, it more efficiently uses TCP connections and it avoids the need for complex connection-pooling systems. However, it does so at the price of tremendous complexity. The computational workload is substantial compared to HTTP/1.1, and ends up providing relatively limited benefits to the client.
Who're the big winners from HTTP/2, then? Two answers: browsers and servers. For servers, they have to handle fewer concurrent connections (so tying up fewer system resources) and can more effectively distribute resources to clients (thanks to server push). For browsers, they can avoid the current limit on the number of concurrent connections per host, while taking advantage of complex flow-control and prioritisation schemes to maximise the efficiency of their bandwidth usage. This is difficult for a generic non-browser client to do in any intelligent way without pushing the burden of those decisions onto their user, and even if it worked, most non-browser clients don't have these specific problems.
- https://blog.cloudflare.com/http-2-for-web-developers/
- Really good info here
MVC
- 2013.11 - ASP.NET - Single-Page Applications: Build Modern, Responsive Web Apps with ASP.NET
- This is a good explanation of Single-Page Applications (SPAs).
- It also has a helpful explanation of MVC.
- "The MVC pattern dates back to the 1980s and early graphical UIs. The goal of MVC is to factor the code into three separate responsibilities. MVC has many variants, and the literature on MVC is often confusing and contradictory. Perhaps that’s not surprising for a design pattern that started with Smalltalk-76 and is still being used in modern Web apps. So even though it’s good to know the theory, the main thing is to understand the particular MVC framework you’re using."
Payments
No coding required
- GumRoad.com
- Looks very interesting...
- I found out about it from this guy: http://javebratt.com/ionic-starters/
- He's selling code via gumroad...very interesting.
- SimpleGoods.co
- This is what Real Python uses. It looks really cool.
Coding required
General
PayPal
- How to charge credit-card holders periodically even if they don't have a PayPal account:
- PayPal - Enhanced Recurring Payments for PayPal Payments Standard
- $19.99 monthly fee
- No setup charge
- No monthly minimum
- No cancellation charge
- Transaction fee: $0 to $3,000 in sales - 2.9% + $0.30
- PayPal - Enhanced Recurring Payments for PayPal Payments Standard
- TheSiteWizard - How to Put an Order Form or Buy Now Button on Your Website Using PayPal
- WikiHow - How to Cancel a Recurring Payment in PayPal
- Can My Customers Use Paypal Without An Account?
- How to work with Instant Payment Notifications:
- 2009.03.04 - Using PayPal's Instant Payment Notification with PHP
- This seems like a pretty good guide. It has lots of pictures.
- This guide also shows what code to include to create a new user account when the person's purchase is successful.
- 2011.09.10 - PayPal IPN with PHP
- This was a very helpful guide. It includes a link to a library (php file) which apparently makes the whole process a lot more streamlined.
- Here's the library it links to: https://github.com/Quixotix/PHP-PayPal-IPN
- 2012.07.12 Change the IPN url on existing subscription
- Very important to know: Unfortunately, there is NO WAY to change the IPN url for existing customers/subscriptions.
- That means that if you have multiple products / websites on the same web host and want your IPN listener on that web host, you must share a single IPN listener between all of them.
- Troubleshooting
- Problem: PayPal Sandbox IPN Not Inserting Into Database - This was a problem I was having.
- Paypal IPN Sandbox - IPN Listener - no verified or invalid
- 2009.03.04 - Using PayPal's Instant Payment Notification with PHP
Stripe
- How to set up "card on file" purchases:
- Background
- The idea here is to make it possible for your customer to make purchases with their credit card without needing to enter their credit card information. So it's basically like what PayPal does, except for people who don't have PayPal.
- This is very, very useful because you then don't need to charge your customer a big amount all-at-once; you can instead charge them a bunch of smaller charges, as they continue to use the service. This lowers the initial psychological barrier that the user will feel to making a purchase, and gets the user into the habit of making purchases from you.
- Examples: Amazon Kindle books, Steam games, GOG
- Articles
- Stripe API - Tokens
- to store card or bank account information for later use, create Customer objects or Custom accounts. In addition, Radar, our integrated solution for automatic fraud protection, only supports integrations that make use of client-side tokenization.
- Stripe API - Tokens
- Background
OAuth
Usage advice
- Consider only allowing users to sign in with OAuth from sites where you can benefit from their sharing your content.
- For example, Pieter Levels only allows OAuth sign-ins from Twitter and Facebook. Those two sites are also great places to have your users share information about your website. But if you allow users to sign in with Google or GitHub, then they may choose to do that instead and you won't have as easy a time getting them to help you spread the word.
- Consider automatically having new users follow you on the site that they've used OAuth for.
- For example, if you sign into NomadList with Twitter, Pieter has you automatically follow the NomadList Twitter account. You could do the same thing with Facebook pages.
Resources
- Wikipedia - OAuth
- OAuth is an open standard for access delegation, commonly used as a way for Internet users to grant websites or applications access to their information on other websites but without giving them the passwords.
Fakebook Login
- How to set up a test account
- How to use the JavaScript SDK
REST (Representational state transfer)
Security
- https://httpsecurityreport.com
- rec'd here
- you can scan your website to find problems
SSL / HTTPS
- Does My Site Need HTTPS?
- 2015.05.01 - Levels.io - Now is probably the time to make HTTPS the default on all your sites and apps
General
Tutorials
- PythonAnywhere
- How to get HTTPS set up: https://help.pythonanywhere.com/pages/LetsEncrypt/
- How to force HTTPS: https://help.pythonanywhere.com/pages/ForcingHTTPS
Sessions
Tutorials
- Wikipedia - Session (computer science)
- Stack Overflow - What are sessions? How do they work?
- 2013.10.29 - MachinesAreDigging.com - How does a web session work?
- Summary
- Use of a session
- A session is the different states of an application during the time a user is interacting with it, it is specific to the user. In other words, it's an instance of the interaction of a user with an application.
- A web session is a data structure that an application uses to store temporary data that is useful only during the time a user is interacting with the application. It is also specific to the user.
- Think of it as a volatile memory quickly accessible that is allocated to each user who is using the application, and when the user quits, it is destroyed.
- This temporary storage could be on the file system in text files, on a database or in the internal memory of the program executing the application.
- Structure of a session
- The session is a key-value pair data structure.
- Think of it as a hashtable where each user gets a hashkey to put their data in. This hashkey would be the “session id”.
- When you say “my session” you're referring to your entry in the session object.
- The session can be stored on the server, or on the client.
- If it’s on the client, it will be stored by the browser, most likely in cookies.
- If it is stored on the server, the session ids are created and managed by the server.
- The session is a key-value pair data structure.
- How does a server-side session work?
- You, as the client, give the server your session id, and in return the server grants you access to your session data if it finds your session id stored in its session datastore.
- Logged in state
- Debugging server-side session problems
- Why would a page reset a server-side session? Reasons for session reset?
- Bad session replication
- Transmission problem
- Session reset in code
- Session expired
- Use of a session
- Summary
Articles
- 2013.10.30 - MachinesAreDigging.com - Rings, bells and victory (debugging a session bug)
WebP
Detecting WebP support
- https://css-tricks.com/using-webp-images/
- https://stackoverflow.com/questions/16251004/use-webp-images-on-website
- https://stackoverflow.com/questions/5573096/detecting-webp-support
- https://modernizr.com/download/?setclasses