Early 2023 I redesigned the universities events web application and university email called Messenger. This is the daily campus distributed email. Faculty, students and staff recieve this email every morning. The goal is to inform everyone of the university related events going on around campus.<\/p>\n
I worked with marketing department who provided the initial drafts of the desktop and email designs of Messenger. My job was to implement those designs into our web application. The web application used Angular to build out the website and email template. I wrote the CSS and HTML into the Angular template. This template would build out to the web application. The other Angular template build was for the email that gets sent to all university faculty, students and staff inboxes. I also write the HTML and CSS for that template.<\/p>\n
Other work I provided was helping troubleshoot some logic in Angular to detect the state of the user type in order to output the correct data depending if the user was a faculty member, student or staff.<\/p>\n
Related announcements regarding the new UTRGV Messenger.<\/p>\n
- \n
- Introducing: Messenger 2.0!<\/a><\/li>\n
- COMING SOON: A Whole NEW Messenger Experience!<\/a><\/li>\n<\/ul>\n", "date_published": "Wed, 31 Jan 2024 11:58:00 +0000", "tags": "Projects" }, { "id": "https://www.czepeda.com/posts/utrgv-parking-spaces-available-widget", "url": "https://www.czepeda.com/posts/utrgv-parking-spaces-available-widget", "title": "UTRGV Parking Spaces Available Widget", "content_html": "
This was a fun project that brought a lot of relief to students looking for parking spots in the different parking lots around the UTRGV campus. I worked with the Parking department to find a solution using the hardware data they had installed in the parking lots.<\/p>\n
My coworker Chris converted that data into a JSON endpoint that I could then use with the fetch API<\/a>. The fetch API is the modern replacement of XMLHttpRequest. No framework was needed for this. I wrote plain JavaScript. Fetch API is pretty simple to work with. The CSS and HTML was also plain and simple. No need to get fancy. Of course it was responsive. The department wanted to place the widgets all over their website and on the universities iOS and Android applications.<\/p>\n
First I made the request to store the JSON data into
getLots()<\/code>. Also note that the fetch API is promise-based. This gives us the flexibility to present the completion of the operation or failure and how to handle each.<\/p>\nasync function getLots() {\n let url = '...\/api\/parking';\n try {\n let response = await fetch(url);\n return await response.json();\n } catch (error) {\n console.log(error);\n }\n}\n<\/code><\/pre>\nThen its formating the JSON data into HTML. I made use of template literals to make it easier to write the HTML as I normally would and insert the expressions in their respective places.<\/p>\n
async function renderLots() {\n let parkingLots = await getLots();\n let html = '';\n\n\tparkingLots.forEach(parkingLot => {\n \n const lots = `\n \t\t<div class="parking_lot ${parkingLot.location_name}">\n \t<div>${parkingLot.location_name} - Zone #<\/div>\n <div>${parkingLot.location_addres}<\/div>\n <div>${parkingLot.total_spaces}<\/div>\n ... \/\/ grab the rest of the items.\n \t<\/div>\n `;\n html += lots;\n const container = document.querySelector('.parkingWidget');\n container.innnerHTML = html;\n }\n )}\n renderLots(); \n<\/code><\/pre>\nFinally the HTML selector to insert the parking spaces into.<\/p>\n
<div class="parkingWidget">...<\/div>\n<\/code><\/pre>\n", "date_published": "Sat, 03 Feb 2024 00:36:07 +0000", "tags": "Projects, javascript" }, { "id": "https://www.czepeda.com/posts/the-code-breaker-jennifer-doudna-gene-editing-and-the-future-of-the-human-race", "url": "https://www.czepeda.com/posts/the-code-breaker-jennifer-doudna-gene-editing-and-the-future-of-the-human-race", "title": "The Code Breaker: Jennifer Doudna, Gene Editing, and the Future of the Human Race", "content_html": "Very insightful view into the world of biochemistry, collaboration, competition and the awful continuation of patents.<\/p>\n
This book presented me the perspective of Jennifer Doudna and her history on how she got to where she ended getting awarded the Nobel Prize. Along the way were introduced to her influences and inspirations that led her to the journey to discovering CRISPR.<\/p>\n
The biggest thing I got out of the book was her partnerships with her colleagues and the competition she faced along the way. I knew the existence of competition in this field of scientific inventions, but this book definitely put me at the front row viewing on how it all transpires.<\/p>\n
One last thing is a lot of teasing I suppose of what's to come out of this invention (CRISPR) and some of the ideas being worked on now, like flu detection and curing of diseases. Of course the controversial and moral decision of what's to be of human gene editing. There was no clear answer as to what is to be done. The story of He Jiankui<\/a> and all the scandal that came with it.<\/p>\n
In conclusion this book kept me very interested all the way through. But it definitely leaves you wanting to know more about CRISPR and what is being worked on now. I'd recommend this book definitely to students. It really presents an entire journey of a scientist, from beginning of studies to winning the Nobel Prize. That's a pretty nice observation to be able to look into.<\/p>\n", "date_published": "Sun, 04 Feb 2024 00:06:58 +0000", "tags": "Books" }, { "id": "https://www.czepeda.com/posts/json-to-yaml-to-markdown-file-shell-script", "url": "https://www.czepeda.com/posts/json-to-yaml-to-markdown-file-shell-script", "title": "JSON to YAML to Markdown file Shell Script", "content_html": "
I currently have a pinboard.in<\/a> account which will expire soon. I've had that account since the formation of pinboard back in 2008. It's been a great service but now that I've got my website going again. I thought I'd start importing all those bookmarks into my website.<\/p>\n
Pinboard.in provides exporting the bookmarks in JSON, XML and HTML. If I want to import it into Statamic I'd need to convert that JSON data into YAML data and then make that document into Markdown. Luckily, JSON and YAML save their data in a key\/value pair structure, e.g.
key: value<\/code>. For me this was a plus because my first thought was create a shell script to convert each JSON object into a separate YAML\/Markdown file. Each Pinboard.in bookmark is saved into it a JSON object like so.<\/p>\n[\n {\n "href": "https:\\\/\\\/teamrv-mvp.sos.texas.gov\\\/MVP\\\/back2HomePage.do",\n "description": "My Voter Portal",\n "extended": "",\n "meta": "f37ee28f61e35f5db09c653a4d3c82ac",\n "hash": "99aba043d80c1b0765802fd7e6284a86",\n "time": "2024-01-31T16:18:56Z",\n "shared": "yes",\n "toread": "no",\n "tags": "texas voting"\n },\n {\n "href": "https:\\\/\\\/publicdomainreview.org\\\/collection\\\/flammarion-engraving\\\/",\n "description": "Wheels Within Wheels: The \\u201cFlammarion Engraving\\u201d (ca. 1888) \\u2013 The Public Domain Review",\n "extended": "",\n "meta": "4b9ed2dd7330962794ca45fe901fba72",\n "hash": "b864adf2c9eb1f92ba1ad8aa43b23d8e",\n "time": "2024-01-30T06:22:42Z",\n "shared": "yes",\n "toread": "no",\n "tags": "art history"\n },\n {\n "href": "https:\\\/\\\/www.contemporist.com\\\/an-exterior-of-vertical-wood-siding-helps-this-house-blend-into-the-surrounding-forest\\\/",\n "description": "An Exterior Of Vertical Wood Siding Helps This House Blend Into The Surrounding Forest",\n "extended": "",\n "meta": "188364b64f99012a1ab86a4901bb2452",\n "hash": "b3e724498141b8426c05ae0933b98520",\n "time": "2024-01-26T15:21:10Z",\n "shared": "yes",\n "toread": "no",\n "tags": "home"\n }\n]\n<\/code><\/pre>\nFirst thing I tackled was extracting each object from JSON and convert it to a Markdown file. I'm using jq command-line JSON processor<\/a> to format the data as needed. This part of the script checks first if jq is installed, find the
.json<\/code> file to work with, create a directory to create the markdown files into, use the.time<\/code> and.description<\/code> key property to use for naming the markdown file. I also had to format the JSON key\/value pair into a YAML structure. This was easy enough with exception to thetags<\/code> property to list thevalue<\/code>'s in a listed structure. I tackled this in the second part of the shell script. Originally I created all these parts of the shell script in separate scripts in order to keep testing simple and easy to manage.<\/p>\n#!\/bin\/bash\n\n# CREATE MARKDOWN FILES FROM JSON\n\n# Check if jq is installed\nif ! command -v jq &> \/dev\/null; then\n echo "Please install jq before running this script."\n exit 1\nfi\n\n# Input JSON file\ninput_json="\/path\/to\/file\/test.json"\n\n# Output directory for Markdown files\noutput_dir="output_markdown"\n\n# Create output directory if it doesn't exist\nmkdir -p "$output_dir"\n\n# Extract each object from JSON and convert to Markdown\njq -c '.[]' "$input_json" | while read -r obj; do\n # Generate a unique filename based on some property of the JSON object\n # filename="$output_dir\/$(echo "$obj" | jq -r '"\\(.time).\\(.description)"').md"\n filename="$output_dir\/$(echo "$obj" | jq -r '"\\(.time|tostring|fromdate|strftime("%Y-%m-%d")).\\(.description | ascii_downcase | gsub("\\""; "\\""))" | gsub(" "; "-") | gsub("\\\\("; "") | gsub("\\\\)"; "") | gsub("\\\\\\""; "") | gsub("\u201c"; "") | gsub("\u201d"; "") | gsub(":"; "")').md"\n \n # Convert JSON object to Markdown and save it to the file\n echo -e "$obj" | jq -r '["---"] + (to_entries | map("\\(.key): \\(.value)")) + ["---"] | join("\\n")' > "$filename"\n\n echo "Converted and saved to: $filename"\ndone\n\n# END CREATE MARKDOWN FILES FROM JSON\n<\/code><\/pre>\nThis is the shell script that handled converting the
tags<\/code> propertyvalue<\/code>'s to be listed. The reason I needed it to be listed was because in Statamic creates an index page listing all posts related tohistory<\/code> or any tag that gets created out of thetags<\/code> key propertyvalue<\/code>.<\/p>\nThis part of the script will create a variable for the directory where all the markdown files got created. Create a variable for a space that will be used to detect the different tags values. Check if the directory exists. Then go through each markdown file and format it in a YAML structure. It will detect the
tags<\/code> key property and detect thevalue<\/code>s and list them.<\/p>\n# FORMAT MARKDOWN FILES\n\n# Directory containing Markdown files\ndirectory="\/path\/to\/directory\/output_markdown"\n\n# Separator used in the tags field\ntags_separator=" "\n\n# Check if the directory exists\nif [ ! -d "$directory" ]; then\n echo "Directory not found: $directory"\n exit 1\nfi\n\n# Process each Markdown file in the directory\nfor file in "$directory"\/*.md; do\n # Check if the file is a regular file\n if [ -f "$file" ]; then\n # Process the Markdown file and create a temporary file\n temp_file=$(mktemp)\n awk -v sep="$tags_separator" -F': ' ' \n $1 == "tags" {\n # Convert the values into a list format\n printf "%s:\\n", $1\n n = split($2, tags, sep)\n for (i = 1; i <= n; i++) {\n printf " - %s\\n", tags[i]\n }\n }\n $1 != "tags" { \n # For other lines, print as is\n print\n }\n ' "$file" > "$temp_file"\n\n # Replace the original file with the updated content\n mv "$temp_file" "$file"\n echo "Updated: $file"\n fi\ndone\n\n# END FORMAT MARKDOWN FILES\n<\/code><\/pre>\nFinal part of this shell script was optional. But I wanted to wrap specific
key<\/code> propertyvalue<\/code>s in single quotes. First I define what values I want to target. Created a directory variable to locate the markdown files. Loop through thekey<\/code>'s and append the single quotes to thevalue<\/code>'s that are specified in thetarget_keys<\/code> variable.<\/p>\n# ADD SINGLE TICKS TO SPECIFIED KEYS\n\n# Specify the keys for which values should be enclosed in single quotes\ntarget_keys=("href" "description" "time")\n\n# Directory containing Markdown-like files\ndirectory="\/path\/to\/directory\/output_markdown"\n\n# Loop through each file in the directory\nfor file in "$directory"\/*.md; do\n # Check if the file is a regular file\n if [ -f "$file" ]; then\n # Loop through target keys and add single quotes around values\n for key in "${target_keys[@]}"; do\n sed -E "s\/^$key: (.*)$\/$key: '\\1'\/" "$file" > "$file.temp"\n mv "$file.temp" "$file"\n done\n\n echo "Single quotes added to specified keys in: $file"\n fi\ndone\n\necho "Update complete."\n\n# END ADD SINGLE TICKS TO SPECIFIED KEYS\n<\/code><\/pre>\nLast thing to do as you should with all shell scripts that you run, make it writeable! Do this by running the following code:
chmod +x json-to-yaml-to-markdown-file.sh<\/code>. You can check that is wrote the command as specified by running the following command to show the file permissions, you'll know its writeable by thex<\/code> a the last part of the permissions:ls -la<\/code>. e.g.-rwxr-xr-x 1 computerName staff 996 Feb 7 12:58 json-to-yaml-to-markdown-file.sh<\/code>.<\/p>\nOnce its writeable, run the script and watch the magic happen:
.\/json-to-yaml-to-markdown-file.sh<\/code>.<\/p>\n", "date_published": "Fri, 09 Feb 2024 01:43:16 +0000", "tags": "Projects, blog" }, { "id": "https://www.czepeda.com/posts/escaping-a-single-quote-using-jq-gsub-method-and-a-unicode-escape", "url": "https://www.czepeda.com/posts/escaping-a-single-quote-using-jq-gsub-method-and-a-unicode-escape", "title": "Escaping a single quote using jq gsub method and a unicode escape", "content_html": "I spent way to much time asking ChatGPT 3.5 and always reliable Google search how to escape a single quote using
jq<\/code>,gsub()<\/code> method.<\/p>\nUnicode Escape for the win:
\\u0027<\/code>!<\/p>\nThis is a short piece of my code to specifically show how the Unicode Escape works:<\/p>\n
gsub("\\u0027"; "")<\/code><\/p>\nWell that's how I was able to solve this prickly issue!<\/p>\n", "date_published": "Fri, 16 Feb 2024 01:01:17 +0000", "tags": "jq, shell-script" }, { "id": "https://www.czepeda.com/posts/nngroup-podcast-episode-36-ai-ux-innovations-challenges-and-impact", "url": "https://www.czepeda.com/posts/nngroup-podcast-episode-36-ai-ux-innovations-challenges-and-impact", "title": "NNgroup Podcast Episode 36. AI & UX: Innovations, Challenges, and Impact", "content_html": "
The rarity to find actual substance and value about Artificial Intelligence ("AI")! Today I added episode 36 from the NNgroup YouTube channel<\/a> to my Watch Later playlist. Usually when I see ANYTHING with the word "AI" I tread carefully. Mostly because I run into articles talking about a magical computer doing super duper things for humans and scarying the crap out of them. Rather than what it actually is, computers learning based on databases with programs to guide it.<\/p>\n
Anyways, I don't want to rant about the hyperbole part of "AI". I want to document this great episode on how the company Perplexity.ai<\/a> is going about their business with "AI". Throw that in with the wizards of UX, you get a great conversation and questions to learn from.<\/p>\n", "date_published": "Sat, 17 Feb 2024 01:16:00 +0000", "tags": "Links" }, { "id": "https://www.czepeda.com/posts/xb-maintenance-mass-air-flow-sensor-spark-plugs-and-engine-code-p0301-issues", "url": "https://www.czepeda.com/posts/xb-maintenance-mass-air-flow-sensor-spark-plugs-and-engine-code-p0301-issues", "title": "xB - Maintenance: Mass Air flow Sensor, Spark Plugs and Engine Code P0301 Issues", "content_html": "
It all started with high idling revs. I recall seeing on YouTube as any modern respectable self-taught wannabe mechanic does informs themselves. I saw someone say that cleaning your Mass Air flow Sensor sometimes does the trick on fixing it.<\/p>\n
First thing I do is connect my BLCKTEC Diagnostic Tool<\/a> (I bought it at $28.99 August 2023) and see what magical engine codes this produces. P0301<\/a> is what I get. Along with a brief description: "Cylinder 1 Misfire Detected DTC Severity 2 of 3: This fault may pose damage to components and should be repaired as soon as possible". Great! Cylinder 1 is where the first of four spark plugs is located.<\/p>\n
\n ![\"BLCKTEC](\"\/assets\/blog\/xb\/p0301-engine-code.webp\")
\n BLCKTEC Diagnostic Tool<\/figcaption>\n<\/figure>\n I start by checking the MAF sensor and it was a little bit dirty but not much to really be causing any issues. I had previously purchased Mass Air Flow Sensor Cleaner<\/a> ($12.49) to do this task but waited until today! The high idling revs is still doing its thing. I clear the engine codes on the diagnostic tool. Rerun and same response.<\/p>\n
- COMING SOON: A Whole NEW Messenger Experience!<\/a><\/li>\n<\/ul>\n", "date_published": "Wed, 31 Jan 2024 11:58:00 +0000", "tags": "Projects" }, { "id": "https://www.czepeda.com/posts/utrgv-parking-spaces-available-widget", "url": "https://www.czepeda.com/posts/utrgv-parking-spaces-available-widget", "title": "UTRGV Parking Spaces Available Widget", "content_html": "