README by acmCSUF

README

by ACM at CSUF

The official ACM at CSUF blog.RSS feed logo

Filter by Tags
algo dev git release svelte
  • 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 ā€¢ 6 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 ā€¢ 5 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 ā€¢ 10 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