Skye Ash Skylarity

General Plan

Project spin-up

Vue CLI

We use npx to initialize our project, because it downloads the latest version of the package you're using in order to ensure you're always up-to-date. This process may take several minutes.

npx @vue/cli create my-project

General

Prettier
Make sure there is a .prettierrc file in the project root

VS Code

Install the Vetur extension
Make sure that these settings are in your user settings:

Good UI/UX

Reddit Sync - A third-party reddit mobile app
- UI
  - Uses Google's Material Design design guidelines
  - Customizable layout and theme enables any user to browse the app in a way that is most intuitive to them
  - Automatic night mode changes the UI theme to a darker or black theme between sunset and sunrise
- UX
  - Card layout provides news and entertainment in an easy-to-digest, concise manner
Swipe interactions make switching between areas of the app super easy and intuitive

D3.js

D3.js is a JavaScript library for manipulating documents based on data. ^[source]

D3 allows the user to dynamically create and update content in a web browser by looping through a data set (or multiple) and applying data-driven styles and transformations to either DOM elements or an HTML5 canvas.

Canvas

Added in HTML5, the HTML element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering. ^[source]

Twist vs. Slack (listed in no particular order whatsoever)

Twist

Pros

Threading (this is the big one)
"Inbox" feature, which compiles a list of every thread you are a part of
Much better search filtering

Twist vs. Slack

Threading

This is the main point of contention, I feel.

Slack

Right now, threads can be one of two things:

Offline Leaflet Maps (should carry over to Mapbox too)

Image setup

Take a screenshot of the map in the position you need it in (ideally this shot would contain all sections of map that are relevant to the visualization)
- Open the page in fullscreen and remove all elements that obstruct the map view, then screenshot
Get the coordinates of the current view's bounding box
1. Open devtools in a separate window. Make sure the map is still fullscreened.
  - This is important because otherwise the window size will be different than the screenshot size
2. In the console, run map.getBounds()

You seem to be at the pont where beginner tutorials dip down and advanced tutorials pick up (and are currently experiencing the general lack of intermediate level tutorials), so I think what I'd recommend doing actually is just "building stuff". I know that's an unsatisfying answer though, so maybe I can point you towards some specific things that are necessary in most web applications, that way as you're "building stuff" you have some specific goals to work towards learning.

In no particular order:

AJAX (Asynchronous Javascript And XML)
- To quote MDN (which, by the way, is a fantastic resource: https://developer.mozilla.org/en-US/) "In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files."
- Basically if you want to talk to other severs (such as with APIs, detailed below), you'll need to use AJAX
APIs (Application Programming Interfaces)
- Pick your favorite site (Twitte

Server Admin Crash Course

Logging in

SSH

SSH stands for Secure Shell. It's a network protocol by which you can operate devices remotely over the World Wide Web. 👻 spooky 👻

	function draw_pos_fixed(surface, top_left_x, top_left_y, top_right_x, top_right_y, bottom_right_x, bottom_right_y, bottom_left_x, bottom_left_y, colour, alpha) {

	var cx, cy, s, t, q, v_buffer;

	var texture = surface_get_texture(surface);
	var uvs = texture_get_uvs(texture);

	var ax = top_right_x - bottom_left_x;
	var ay = top_right_y - bottom_left_y;
	var bx = top_left_x - bottom_right_x;