Categories
CSS JavaScript

The Twitter animation

I like the Twitter animation that you see right when launching the iPhone app.

When you click the Twitter icon, the logo moves to the center of the screen and seamlessly transitions into the splash screen. Then the icon backs off a bit and shoots forward to fill the screen with white as the app fades in.

Very slick.

My version:
https://chriscarey.com/practice/twitter-intro/

Categories
Apple CSS Development iPhone JavaScript

iPhone interface with React

After reading about the new CSS backdrop-filter I decided to see how much work would be involved to create an iPhone like interface using HTML, CSS, and React.

Categories
Development JavaScript

Apache Proxy with CORS headers

You want to have your JavaScript application access a remote API but that remote API does not have CORS headers. What to do?

Instead of pointing to that remote API, point to a location on an Apache server that you have control of, have it connect to that remote API for you, and also add the CORS headers so JavaScript is happy.

Apache can proxy, or hand off the API request for you while also injecting the CORS header Access-Control-Allow-Origin to that remote API response.

Requirements:
Apache mod_proxy
Apache mod_headers

# Proxy for BaseServer
<LocationMatch "/api">
   ProxyPass http://remote-server.com:8000/api/
   Header add "Access-Control-Allow-Origin" "*"
</LocationMatch>

Now instead of pointing my JavaScript to http://remote-server.com:8000/api/, I point it to my Apache server at /api/ and that will serve the data from http://remote-server.com:8000/api/ with the CORS header.

http://enable-cors.org/server_apache.html

If you are using mod_rewrite along with this, you might need the [P] flag which tells mod_rewrite to handle the request with mod_proxy.

https://httpd.apache.org/docs/2.4/rewrite/flags.html