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

Skylarity

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:

Skylarity

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

Skylarity

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]

Skylarity

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

Skylarity

Twist vs. Slack

Threading

This is the main point of contention, I feel.

Slack

Right now, threads can be one of two things:

Skylarity

Offline Leaflet Maps (should carry over to Mapbox too)

Image setup

1. 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
2. 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()

Skylarity

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

Skylarity

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 👻

Windows

Skylarity

Adding Users

As any user:

-G sudo gives user sudo privileges, omit this for users who do not need this

$ sudo useradd -m -c "Firstname Lastname" -g users -G sudo username_here

Create password for sudo privileges

$ passwd username_here