DEV Community: Brian Dys Sahagun

Automating file organization via PowerShell

Brian Dys Sahagun — Thu, 26 Oct 2023 03:24:16 +0000

My process in sharing and archiving event media (aka the numerous pictures and videos that I take in various formal and informal events) is to, first, download the file from the memory card and sort them out according to the date and type of event. This is a tedious task especially if a batch consists of several days of events, or worse, several weeks. You can imagine that I would copy the folder from the memory card to my personal computer and that folder would contain all the raw files of the pictures that I took — they are not organized in folders initially.

The next step would be to categorize them in folders according to the date of the event they were taken. For the folder names, I’m using the ISO representation of date format, for example the date 2 October 2023 would be 2023-10-02. In this way, it’s easy to sort the folders chronologically; and even without the day or month, sorting still makes sense. Of course, I have done this manually for a very long time, until I’ve thought of using a batch file in creating all the dates of the year. The batch file approach helped a lot because it setup the folders with dates for all of 2023. With this approach, I simply check the files’ dates and drag them to their respective folders that were created by the batch file.

I still felt that it could be better — my current process was tedious than it’s supposed to be. So I searched for a batch file program that will automatically distribute the files into folders that have their respective dates. Where I arrived in my shallow search is at PowerShell.

Check out the script and complete steps in my blog.

Form Actions - In-Content or Sticky?

Brian Dys Sahagun — Thu, 13 Jun 2019 03:31:11 +0000

In mobile apps, which implementation of the form action do you prefer: in-content (form 1) or sticky (form 2)?

RE:Creation - Intermediate - Google.com

Brian Dys Sahagun — Sat, 08 Jun 2019 09:00:39 +0000

Recap from Basic

In the Basic level of recreating Google.com, we have approached it in a 3-step manner:

Convert content into Plain Text
- We limited the content inventory to its 1st level grouping only—not digging deeper for subgroups
- We did not bother with interaction to reveal other content and UIs
Markup the Plain Text in HTML
- We used simple HTML elements like <a>, <img>, <button>, <input>
- We used SVG via data URI (instead of an absolute URL)—we can actually use any image type like PNG or JPG—we just have to encode it
Style the HTML elements in CSS
- We limited the use of CSS properties within the following: padding, margin, width, height, background-color, color
- Font properties were left to the default browser styles
- Styling which involves interaction such as hover were not yet tackled

The result is a rather "unfinished-looking" web page. See for yourself:

Still, not bad for someone who is just beginning to gain knowledge in HTML and CSS—that's why we're pushing this to Intermediate level!

Ready? Let's Begin!

Recreating Google.com basically has 3 steps:

Convert content into Plain Text
Markup the Plain Text in HTML
Style the HTML elements in CSS

This is the mockup that we are recreating:

Each step has 3 rounds, so there's a total of 9 examples I made in CodePen:

Step 1: Plain Text

Step 1, Round 1: Content Inventory

Step 1, Round 2: Grouping and Labelling

Step 1, Round 3: Structure

Step 2: HTML

Step 2, Round 1: Structure Markup

Step 2, Round 2: Group Markup

Step 2, Round 3: Individual Markup

Step 3: CSS

Step 3, Round 1: Individual Style

Step 3, Round 2: Group Style

Step 3, Round 3: Structure Style

Here's the screenshot of the final state of our activity:

Again, there are still lots of room for improvement and we will tackle those in Advanced level.

What's Next?

We'd probably go straight to Advanced level in the next post.

Thanks for reading!

~ Brian Dys

RE:Creation - Basic - Google.com

Brian Dys Sahagun — Thu, 06 Jun 2019 09:53:54 +0000

Update: 8 June 2019

I made some updates on Step 3 - CSS namely:

Limited the CSS properties to padding, margin, width, height, background-color, color, display: block, inline-block, inline; text-align, and vertical-align.
I realized that we are in Basic level—so to keep things simple, I removed the presence of subcontainers in HTML and "next-level" CSS properties in CSS such as display: grid, flex, etc. We'll tackle them in the next level.

What is RE:Creation?

RE:Creation is a design activity in which we reverse engineer and recreate the HTML & CSS components of a chosen web page.

RE:Creation is short for Reverse Engineering Creation. It involves both discovery (theoretical) and delivery (technical) processes.

Objective

RE:Creation’s objective is to promote the fundamentals in designing digital products such as websites and web apps.

These fundamentals revolve around design disciplines such as Information Architecture, Interaction Design, User Interface Design, Visual Design & Accessibility, and Frontend Design.

Requirements

The requirements to participate in a RE:Creation are simple: first, basic knowledge of HTML & CSS and second, a computer with these software:

Text Editor (TextEdit, Notepad)
Web Browser (Chrome, Firefox)

Using these software for RE:Creation does not require internet connection.

Alternatively, a web app called CodePen could be used online. It functions both as Text Editor and Web Browser for editing and displaying web documents, respectively.

Ready? Let's begin!