An Introduction to REST APIs and fetching data from Yelp Part 1


Master the Basics: A Beginner’s Guide to APIs, HTTP Methods, and Data Integration!

Note: This is part of a tutorial series. I am currently working to separate tutorials out to their own section, but for now just posting in my blog. Part 2 also needed a few adjustments due to changes with the Yelp API, please stay tuned for this. However the following article still contains a great overview into getting started with Webservices and APIs for beginners.

What is an API?

Application Programming Interface: A set of definitions and protocols for building and integrating application software. (source: https://www.redhat.com/en/topics/api/what-is-a-rest-api)

Why an API?

In order for our website to get information from an external provider the two systems must talk to each other in a language they understand. An API facilitates this communication in a standardized manner.

Deeper Dive into what an API is

An API serves as the intermediary layer that allows different software applications to communicate with each other. By defining a set of rules and specifications, APIs enable developers to access and interact with external software components, services, or platforms efficiently.

They abstract the complexity of accessing these services directly, providing a simplified way for developers to integrate diverse systems and functionalities into their applications.

It’s sometimes referred to as a contract between an information provider and an information user—establishing the content required from the consumer (the call) and the content required by the producer (the response).

The Remote Control Analogy

Television RemoteAPI (Application Programming Interface)
FunctionControls devices like TV, lights, and fansManages interactions with software applications/platforms
OperationPress a button to send signals (infrared, Bluetooth, WiFi) to devices.Send a request to endpoints using HTTP methods for actions like retrieving or updating data.
AbstractionHides the complexity of devices; simple interface for complex actions.Conceals server and database complexities; straightforward interface for intricate operations.


Common Principle
: Both serve as intermediaries that abstract technical complexities, offering streamlined control and interaction without the need for deep understanding of the underlying mechanisms.

Use Cases of an API:

  • Data Sharing Between External Organizations (Our Use Case)
    • Scenario: A company requires integration with third-party services for enhanced functionality, such as payment processing (PayPal, Stripe), social media interactions (Twitter, Facebook), and cloud storage solutions (AWS S3, Google Cloud Storage).
    • Role of API: Enables the business to seamlessly incorporate these external services into its operations, allowing for efficient data exchange and access to specialized functionalities without the need for direct system-to-system integration.
  • Integration & Data Sharing Within an Organization
    • Example: DMV Online Services
    • Scenario: A public-facing website allows individuals to renew their driver’s licenses online. The site interacts with a statewide database containing driver information across New York State.
    • Role of API: Facilitates secure and selective data exchange between the public website and the driver database, ensuring that users can access or update their records without exposing sensitive information or enabling access to another individual’s records.

Additional Use Cases

  • Mobile Application Development
    • Enables features like user authentication, data synchronization, and push notifications.
  • Automation
    • Facilitates workflows between tools, e.g., integrating email submissions into a CRM to start the admissions process in educational institutions.
  • IoT (Internet of Things)
    • Connects devices like smart speakers to personal accounts for seamless daily updates, ensuring secure data exchange.
  • E-commerce
    • Syncs the internal inventory system with the website to reflect current stock levels, enabling dynamic ordering and stock management based on user activity.

How will we make our API request?

We will use javascript and make a request over HTTP.

HTTP

What is HTTP?

HTTP (HyperText Transfer Protocol) is the protocol used for transmitting web pages over the internet. It is the foundation of data communication for the World Wide Web.

How APIs and HTTP Work Together

APIs often use HTTP protocols to facilitate communication between client applications and web servers. When you interact with a web API, you typically send an HTTP request to a specific URL, and the server responds with the requested data or an appropriate status code.

HTTP Methods

These define the action to be performed on the resource

GET

Used to retrieve data from a server

Common things we will retrieve with GET

  • A webpage or HTML file.
  • An image or video.
  • A JSON document.
  • A CSS file or JavaScript file.
  • An XML file.

The GET method shouldn’t change the state of any resource on the server

POST

The POST HTTP request method sends data to the server for processing.

The data sent to the server is typically in the following form:

  • Input fields from online forms.
  • XML or JSON data.
  • Text data from query parameters.

So what does this allow us to do as developers?

  • Make a post to social media or a web forum
  • Save data from a form to a database (ex: a contact us form)
  • Calculate a result based on user input
    • Ex: a pizza ordering page. Sales tax can be calculated on the server based upon size and toppings picked and added to the total price.

HEAD

The HTTP HEAD method simply returns metadata about a resource on the server.

Why is this useful for Developers? What can we do with it?

  • Determine The size of a resource on the server.
  • Check to see If a resource exists on the server or not.
  • Check The last-modified date of a resource.
  • Validate a cached resource on the server.

Additional HTTP Methods

Version 1.1 of the Hypertext Transfer Protocol introduced five new HTTP verbs. We will not go over these today

  • PUT.
  • DELETE.
  • OPTIONS.
  • TRACE.
  • CONNECT.

HTTP Status Codes

These codes indicate the result of the HTTP request.

200 OK: The request was successful.

201 Created: The resource was successfully created.

400 Bad Request: The server could not understand the request due to invalid syntax.

401 Unauthorized: Authentication is required and has failed or has not yet been provided.

404 Not Found: The requested resource could not be found.

500 Internal Server Error: The server encountered an unexpected condition.

REST APIs vs Regular APIs

This is also an important topic to discuss but will be left out of the 15 minute presentation due to time constraints.

Connecting this to our scenario

When a visitor navigates to the Tully’s restaurant page from JP’s Restaurant Search, an interesting behind-the-scenes interaction takes place. As soon as the page loads, our site initiates a request to Yelp’s RESTful API. This isn’t just any request; it’s specifically crafted to retrieve the three latest reviews for Tully’s.

  1. ​​Initiating the Request: The moment Tully’s page is accessed, Rochester Pulse sends out a call to Yelp’s API. This call is made using HTTP
  2. Yelp’s API at Work: Yelp’s API, designed to handle such requests efficiently, recognizes our need for the latest Tully’s reviews. It immediately queries Yelp’s extensive database for the most recent feedback left by diners.
  3. Data Preparation: Once found, these reviews aren’t sent over as-is. Instead, Yelp’s API translates them into JSON (JavaScript Object Notation), a lightweight and easy-to-parse data format. This ensures compatibility with a wide range of platforms, including our website.
  4. Receiving the Data: Our website, now on the receiving end of this JSON-formatted data, is ready for the next step. It parses the JSON, extracting the relevant review information.
  5. Displaying the Reviews: Finally, with the data decoded, our site dynamically updates the Tully’s restaurant page to showcase these fresh, real-time reviews.

JSON

Note: This is a quick review from the earlier unit where we covered JSON. This won’t be discussed very much in the 15 minute presentation

As mentioned above, many REST API’s will return the data we need in JSON format. Let’s take a quick look into what JSON is

JSON stands for JavaScript Object Notation

JSON is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. (https://www.json.org/json-en.html)

Here is a very simple JSON string: ‘{“name”:”John”, “age”:30, “car”:null}’

It defines an object with 3 properties:

  1. name
  2. age
  3. Car

(example borrowed from W3schools: https://www.w3schools.com/js/js_json_intro.asp)

In the example above, name=John, age=30, and car=null.

Most programming languages should provide or have libraries you can use to interpret JSON, and use the data sent in the string in our programs. Javascript and PHP have built in ways to do this. Other languages like Python have a module you can import like: import json. In theory you could do the parsing yourself, but I would not recommend this path as this problem has likely already been solved for you.

Guide to integrating with many external APIs

We’re set to dive into some exciting work! Here’s a straightforward guide (set of 6 steps) to integrating almost any web service into your website. Though it might seem daunting at first, mastering the process with one service, like fetching Yelp’s latest reviews, simplifies future endeavors, such as retrieving the latest tweets.
  1. Find & sign up on the developer page.
  2. Obtain a key
  3. Review Documentation and Plan Requests (find endpoints needed etc..)
  4. ​​Initiate the Request
  5. Receive The Data
  6. Display The Results

Step 1 – Find & sign up on the developer page.

Generally this may be found by googling the name of source, plus the word(s) developer or API.

Examples:

We will be using the Yelp Fusion API.

Step 2 – Obtain a key!

Accessing data from various services usually requires a form of authentication. This is predominantly achieved through the use of an API key, although other methods exist.

Why do services like Yelp/Google/Instagram make us go through this step?
Some Reasons Include:

  • Request Monitoring: API keys enable service providers to monitor the number of requests made by each user. Running servers incurs costs, and to manage resources efficiently, providers often set limits on the frequency of data requests.
  • Access Control: Authentication acts as a gatekeeper, determining what data a user can access. For instance, accessing specific information on LinkedIn might require prior approval. The service provider reviews the data being requested to ensure it’s used appropriately, a practice that has gained emphasis following incidents like the Facebook/Cambridge Analytica scandal.

Another Consideration at this time may be an approval Process: Depending on the service, obtaining an API key may involve a preliminary approval process. For platforms like LinkedIn, you might need to submit an application detailing your app’s purpose, the data fields you require, and how you intend to use the data. This process ensures that applications adhere to the service’s usage policies and data protection standards.

Step 3 – Review Documentation & Plan Requests (find endpoints needed etc..)

.

We will likely need to interact with various Yelp endpoints to get the data we need. Until we review the documentation for that specific source we won’t know how to do this!

  • To get general business information like phone number, location and hours we will need to use the Businesses Endpoint
  • To then get reviews from a specific business we will then need to use the Reviews Endpoint

For today’s demonstration we will focus on just getting the existing reviews from a business, therefore we will be using the Reviews Endpoint

Step 4 – ​​Initiate the Request

Initiating a request to a RESTful web service is a crucial step in the process of integrating external data or functionalities into our website. This can be done either from client-side JavaScript or using a server-side tool. Here’s a brief overview of both methods:

Javascript:

When using client-side JavaScript, you make an HTTP request directly from the user’s browser. This is often done using the fetch API or XMLHttpRequest.

Server Side Tools (PHP):

in PHP, you might use curl or another HTTP client library to make the request.

Step 5 – Receive The Data

The next step is to receive and process the data, typically formatted as JSON. This process involves waiting for the response from the API, parsing the JSON data, and then using it within your application.

Using Javascript Fetch methods this may entail:

  • Wait for the Response: After sending the request, use the .then() method to wait for the API to respond. The fetch API returns a promise that resolves with a Response object.
  • Parse the JSON: The Response object contains a method .json() that returns another promise. This promise resolves with the result of parsing the body text as JSON.
  • Use the Data: Once the JSON data is parsed, you can use it within another .then() method. This is where you would implement logic to display the data on your webpage or further process it as needed.

Step 6 – Display The Results

Using the methods we have already learned earlier this semester such as: document.getElementById(), innerHTML, and more we can then update various parts on our website. I will demo this part.

Next Steps

Part 2 of this tutorial is currently being revamped, as I need to update the instructions to work directly with the Yelp API. Should be published by October 25, 2024 so please check back soon if interested!

Tagged Skills

API HTML / CSS JavaScript PHP

Creating an AI-Driven Portfolio Builder


The Thought Process Behind Creating an AI-driven portfolio builder

One of my recent projects leverages GPT models to create an AI-driven portfolio builder. The idea behind it was to help individuals, especially those without HTML/CSS experience, build a professional website portfolio without the time commitment required by other solutions like Wix or custom page builders.

You can check out the tool and read more about the project at AI Portfolio Builder – Project Queen

The Concept

This project was inspired by faculty members at universities, many of whom have biographical paragraphs used for various purposes—applying for jobs, submitting papers, or presenting at conferences. These bios are great for print or email, but they’re not always suited for the web, which benefits from more structured content like sections, lists, and headings.

Transforming a plain biography into a well-organized web portfolio can be time-consuming, even for those experienced with web development. My goal was to automate this process, converting long paragraphs into a digestible format for the web.

How It Works

The process is simple: users paste their biography into the portfolio builder. There’s also a free-form area where they can add notes or instructions in plain English, such as:

  • “Add a section for hobbies and call it ‘Life Outside of Work.'”
  • “Combine all my data science experience into one section.”

These notes help guide the AI to better format the content.

After clicking “Submit,” the content is uploaded to the OpenAI model for processing. The key differentiator with this tool is that it doesn’t just generate text—it structures the content into a standardized format that can be exported as HTML. The result is a website-ready portfolio that can be easily tweaked, even by users with no HTML experience.

Editor.js Integration

To make this possible, I integrated Editor.js, a block-style editor designed for rich media stories. Unlike traditional WYSIWYG editors, Editor.js outputs clean data in JSON instead of cluttered HTML markup. It also allows for an API-extendable and pluggable interface, perfect for building custom content generation workflows.

Some key features of Editor.js include:

  • Clean data output: No unnecessary HTML tags.
  • API pluggable: Extendable with additional features.
  • Block-styled editing: Intuitive content creation with a block-based approach, preventing common issues like misaligned images or erratic formatting seen in traditional content editors.

Using Editor.js, users can further tweak their portfolios after the initial AI generation, adding sections or adjusting layouts without worrying about breaking the design. While the current version doesn’t allow for further AI-driven adjustments once the portfolio is in the editor, this feature is in development.

Future Enhancements

Currently, once the portfolio is finalized in the editor, users can download the website in HTML format, which is accessible, standards-compliant, and easy to upload to their preferred hosting platform. I’m also working on providing instructions for deploying to GitHub or other cloud services, as well as the option to host the site directly within the builder itself.

One upcoming feature I’m excited about is image support. I want users to be able to upload an image (like a profile photo) and have it included in their portfolio. However, since my server has limited storage and the service is free, I’m investigating cost-effective hosting options for the images.

In the future, I plan to implement user accounts so people can store their progress, manage updates to their portfolio, and even deploy their site to different platforms with ease.

Behind the Scenes

Developing this project was a fascinating technical challenge. When a user uploads their text to the OpenAI API, the AI has to reformat it, converting long paragraphs into lists, headings, and sections suitable for a web layout. The AI then returns this content in a standardized format that integrates with our block editor.

One challenge I faced was finding the right AI model. Initially, I used the GPT-4 model, but it quickly became cost-prohibitive, with each portfolio generation costing several cents. After experimenting with different models, I settled on the 4o-mini model, which has proven to be incredibly cost-efficient. I’ve generated over 50 portfolios so far, and the cost hasn’t even reached a penny.

Conclusion

This project aims to make website portfolio creation accessible to anyone, regardless of technical experience. By combining AI-driven content generation with a user-friendly block editor, I’ve created a tool that not only builds beautiful portfolios but also simplifies the editing and export process. Stay tuned for more updates as I continue to enhance the tool with image support and additional deployment options!

Photo Gallery

Tagged Skills

HTML / CSS

Synced Patterns in WordPress with Overrides and Unsupported Blocks


Streamline WordPress Synced Patterns with SCSS Styling Workarounds

One of the exciting features of WordPress is the ability to create synced patterns, allowing you to reuse design blocks across your site while maintaining consistency. However, not all blocks in the Gutenberg editor work smoothly with synced patterns—one notable example is the Cover block.

The Cover block is excellent for hero sections and other large visual elements, but when you attempt to make it a synced pattern, you might notice a limitation: the cover block doesn’t support overrides. This can be frustrating if you’re using the Cover block in multiple places, like for hero sections with custom images on different pages and want to keep the overall look and feel consistent. If your site has dozens or hundreds of pages keeping these in sync would be hard. Although you could build your own block to achieve this I am always trying to do as much as I can with native blocks.

The Challenge

Take this scenario: you have several hero sections across your site, each using a Cover block with a nested structure of rows, columns, and other blocks. You want to sync the structure and styles across all of them but still have the flexibility to change the background image. Unfortunately, with the current Gutenberg functionality, the Cover block’s can be made a synced pattern; but all the text in every instance across your pages would be the same, meaning any changes to it will apply across all instances of that pattern.

This limitation can lead to a lot of manual updates, especially if your site has dozens or even hundreds of Cover blocks. And if you’re like me, you may have added a lot of custom Bootstrap classes (like pt-5, pb-3, etc.) to get everything looking perfect, which can become tedious to manage across multiple pages.

A Workaround

Here’s a solution I’ve found: instead of syncing the entire Cover block, you can create a synced pattern for the inner content (text, buttons, etc.), and then use an unsynced Cover block around it. This allows you to reuse the pattern for the content while keeping the Cover block and its background image unique to each instance.

But what about all those custom classes for padding, margins, and spacing? Manually adding and updating those classes for each block instance can be time-consuming and error-prone, especially for non-developers.

Simplifying with SCSS

A great way to streamline this process is by creating a custom class in SCSS that bundles all your common spacing and layout styles. For example, instead of applying individual classes like pt-3, pb-4, ps-2, etc., you can define a single class that encapsulates all these styles.

So the equivalent to doing this:

<div class=”pt-3 pt-md-6 pb-4 pb-md-5 ps-2 ps-lg-0 pe-2 ps-md-0”>My Cool Cover Hero</div>

Can now be done using a single class

<div class=”my_cool_cover”>My Cool Cover Hero</div>

If you create this using scss:

// Define the custom class
.hp-cover-block-half-right {
  padding-top: map-get($spacers, 3); // pt-3 equivalent
  padding-bottom: map-get($spacers, 4); // pb-4 equivalent
  padding-left: map-get($spacers, 2); // ps-2 equivalent
  padding-right: map-get($spacers, 2); // pe-2 equivalent

  @media (min-width: map-get($grid-breakpoints, md)) {
    padding-top: map-get($spacers, 6); // pt-md-6 equivalent
    padding-bottom: map-get($spacers, 5); // pb-md-5 equivalent
    padding-left: 0; // ps-md-0 equivalent
    padding-right: 0; // pe-md-0 equivalent
  }

  @media (min-width: map-get($grid-breakpoints, lg)) {
    padding-left: 0; // ps-lg-0 equivalent
  }
}

Tagged Skills

CMS HTML / CSS Open Source WordPress

AI Portfolio Builder – Project Queen


Generate a website using AI and edit it afterwards with no knowledge of html

Portfolio Queen is a web tool that allows users to generate a functional website by simply pasting a couple of paragraphs of text, such as a biography, into a text box. After submitting, the tool renders a webpage that users can further edit through an intuitive, WYSIWYG-like interface. Though the ability to export as HTML is still in development, the tool provides a simple proof of concept that works especially well for faculty bios used in conference proceedings. Users can also give suggestions for custom formatting, such as adding lists or hobby sections.

Read More about the project on the blog post Creating an AI-Driven Portfolio Builder

Photo Gallery

Tagged Skills

API HTML / CSS

Web and Mobile I ISTE-140


An introduction to internet and web technologies, and to development on Macintosh/UNIX computer platforms

Syllabus: Download

Class Reviews

  • I really appreciate how well-kept mycourses is. This is the only class where I actually trusted the "Work to do" tab in mycourses. This prof was also very forgiving with deadlines which I definitely appreciate. Perhaps a little too forgiving.
  • Takats is a very calm and understanding professor who you can tell genuinely wants to see his students succeed.
  • Personally Professor Takats, helped enhance my understanding of web and mobile completely. The way that he ran his class was perfect for my learning style and helped me with my time management skills this semester as well. Along with being available outside of his normal office hours (due to our conflicting schedules) he was able to make time to help me when I needed it. He's very organized on my courses and used the textbook as a huge asset, I thought it was very useful and I dislike paying for textbooks. He's overall a very chill professor and it was a pleasure to work with him.

Official Course Description

This course provides students with an introduction to internet and web technologies, and to development on Macintosh/UNIX computer platforms. Topics include HTML and CSS, CSS3 features, digital images, web page design and website publishing. Emphasis is placed on fundamentals, concepts and standards. Additional topics include the user experience, mobile design issues, and copyright/intellectual property considerations.

Curriculum Development

  • 2022 – Major revamp and new interactive textbook integration (ZyBook). Began as a pilot over the summer, to be ready to launch in Fall 2022 to over 10 sections with 6 instructors all teaching ISTE-140 on the Rochester campus of RIT simultaneously. Added custom material not found in ZyBook and adapted 10 ZyLabs.
  • 2021 Creation of a new sequence of projects. Here is an example of one
  • 2020 – Conversion of in person class to an online asynchronous course. Recorded dozens of videos (listed in section above) to create an online asynchronous version of web and mobile 1 that has since been offered in subsequent summers.

Course Coordination & More on Zybook Implementation: This class will often have at least 8 sections in a single fall semester, and is offered in multiple countries (RIT Dubai, RIT Croatia) so significant coordination efforts need to be spent here. As described in the section above, another area I helped coordinate this course being offered around the world was when I implemented the virtual textbook (zybook). This video goes over how the zylabs work and I give a few demos (for summer 2024): https://www.youtube.com/watch?v=1VNT5z3p8Yg

Tagged Skills

HTML / CSS JavaScript

Foundations of Web Technologies II


Advanced Web Development for Graduate Students

Group Project for Local Non-Profit Organization Initiative

  • Overview: Traditionally, students in the course (ISTE-646 Foundations of Web Technologies II) are tasked with developing a design document and a small website, complete with dynamic features such as web forms and database-driven content. However, recognizing the potential for real-world impact, I initiated an initiative to engage genuine clients, primarily from the Rochester non-profit sector. This strategic shift not only offered students a tangible connection to industry practices but also aimed to enhance the web presence of small organizations with very limited resources.

News article w/ video on RIT website: https://www.rit.edu/spotlights/code-community-weaving-real-world-non-profit-projects-web-technologies-course

  • Organizations we have helped: 
    • Marketview heights (a community service organization committed to improving the quality of life in Rochester through underscoring the need for decent housing that is affordable to low and moderate income people):
    • South Lyon Cardio Drumming
    • Additional Organizations we have helped but not a finished website to show are: Britton Rd. Cemetery, UPSTAT Statistics Conference Mastermind (an academic quiz bowl for middle school and high school students).

Additional Initiatives and Development:

  • Content Management Systems Added to curriculum. Since the class is composed of graduate students, many of whom are not actually going into Full Stack Development it wasn’t a requirement to learn as many of the basics. This allowed me to implement several content management systems the students could use in their group project including: WordPress, Joomla, Get Simple CMS.

Syllabus: Download

Times Taught: 5

Class Reviews

  • Professor Takats is kind, patient, and understanding when it comes to teaching the course material. He's very experienced as a web developer and he does his best to translate that into his teaching. He always tries to be available outside of class and will respond to questions at all hours of the day. He also put in a lot of time and effort to ensure we had real clients to work with for our group projects, and that alone has given me an invaluable experience in web work and project management. He really tries to go above and beyond, and secured a bunch of extra software to try preparing us for developing in real-world settings. I took a previous class with him, and went out of my way to take another because I appreciated his attitude and effort.
  • This was by far the best class I've taken at RIT. Although the material being taught, and my desire to learn web development may have played a part in how much I enjoyed taking this course, I believe that the biggest reason however was Prof. Takats. The manner in which he taught, explained with patience, promoted discussions and a positive learning environment, and how he was always available to meet with were things I genuinely appreciated. Also, the individual project and the group project setups were great.
  • I think Professor Takats did a good job organizing the massive amount of material in this course into manageable lessons. He provided helpful feedback on assignments and was always available for questions and assistance, especially after the switch to online learning. It is clear from taking this course that Professor Takats cares about his students and strives to help them learn material that is interesting and beneficial to them. He took a difficult course and helped us understand the material in a meaningful way.

Official Course Description

This course builds on the basic aspects of web page development that are presented in the first course and extends that knowledge to focus on issues and technologies related to the design and development of web sites. Topics include advanced internet technologies (including, but not limited to: AJAX, server-side programming, database use and access, client libraries, server frameworks, and creating and consuming information services).

Curriculum Development

Group Project for Local Non-Profit Organization Initiative

  • Overview: Traditionally, students in the course (ISTE-646 Foundations of Web Technologies II) are tasked with developing a design document and a small website, complete with dynamic features such as web forms and database-driven content. However, recognizing the potential for real-world impact, I initiated an initiative to engage genuine clients, primarily from the Rochester non-profit sector. This strategic shift not only offered students a tangible connection to industry practices but also aimed to enhance the web presence of small organizations with very limited resources.

News article w/ video on RIT website: https://www.rit.edu/spotlights/code-community-weaving-real-world-non-profit-projects-web-technologies-course

  • Organizations we have helped:
    • Marketview heights (a community service organization committed to improving the quality of life in Rochester through underscoring the need for decent housing that is affordable to low and moderate income people):
    • South Lyon Cardio Drumming
    • Additional Organizations we have helped but not a finished website to show are: Britton Rd. Cemetery, UPSTAT Statistics Conference Mastermind (an academic quiz bowl for middle school and high school students).

Additional Initiatives and Development:

  • Content Management Systems Added to curriculum. Since the class is composed of graduate students, many of whom are not actually going into Full Stack Development it wasn’t a requirement to learn as many of the basics. This allowed me to implement several content management systems the students could use in their group project including: WordPress, Joomla, Get Simple CMS.

Tagged Skills

API CMS HTML / CSS JavaScript MySQL PHP

Foundations of Web Technologies I


A class for Graduate HCI students to learn about the Building Blocks of the Web

Syllabus: Download

Times Taught: 2

Class Reviews

  • For me this course became very helpful as professor was always available via office hours and during lecture as well. I can't thank enough for clearing my all doubts and guiding me. Thank you so much professor.
  • Cared about our learning journey
  • Professor Takats had enthusiasm and patience teaching the course materials. I really appreciated the speed of the course as an HCI student with no experience in web development; I would imagine the course is fairly slow for Software Engineering students or others with a coding-heavy background, however. I also appreciated that he's honest when he's not sure about a particular question, and welcomes learning opportunities from students as well, many of whom have experience working in Web careers.
  • I absolutely loved how Professor Takats taught the class. Maybe it is because I needed a refresher on web development, but I appreciated the pace of the class.
  • He was supportive in and out of class. He provided resources when needed and was willing to assist the student at all times. Overall, he was a mentor figure for me.

Official Course Description

This class provides an introduction to internet and web technologies. Topics include an introduction to the internet and basic internet technologies (including, but not limited to: SSH, SFTP, UNIX, XHTML, CSS, Client-Side programming, and website publishing)

Curriculum Development

  • 2021 – Implemented progressive enhancement principles into the course and wireframing.
  • 2021 – Designed and added a team project to create a multi-disciplinary design document. View the instructions I developed here: View Document
  • 2020 – Implemented an interactive textbook into the course (Zybook, a similar setup as described in ISTE-140 but with some differences for graduate level students).

Tagged Skills

HTML / CSS PHP

@Accelerate Media – Website Launch – Ferris Agency


A Collaborative Effort with Accelerate Media

New Website Launch for Ferris Agency: A Collaborative Effort with Accelerate Media

I’m excited to announce the launch of the brand new website for Ferris Agency, an insurance agency based in Rochester. This project was a team effort alongside the talented folks at Accelerate Media. While I was responsible for the website development, I want to give a huge shout-out to the incredible team who worked on the graphic design. Their work laid a strong foundation, and I couldn’t have completed the development without their support.

This relaunch marks a drastic improvement in Ferris Agency’s web presence, and though we’re still in phase one, the progress is already significant. The site was built using custom React Gutenberg blocks and follows the latest best practices for WordPress development, entirely within the block editor.

One of the accomplishments I’m particularly proud of is the site’s stellar performance, consistently achieving a 100% PageSpeed score. While WP Rocket certainly played a role, I spent considerable time minimizing and compressing CSS, implementing lazy loading for images, and ensuring different images were served to different devices for optimal performance.

Some of the more challenging parts of the build included crafting a chevron arrow. It took some creative HTML and CSS to stack two elements and overlap them correctly. After much trial and error, I found CSS clip-path to be the best solution, though it involved carefully cutting out the chevron shape, applying a red background with the same clip-path, and layering everything over an image. JavaScript then helped tie it all together.

Here is what part of the CSS looks like for the effect:

.chevron-container:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--wp--preset--color--deep-red);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(50% + 39px) calc(100% - 42px), 50% 100%, calc(50% - 39px) calc(100% - 42px), 0 calc(100% - 42px));
    z-index: -1;
}

We also used custom WordPress query loops, especially for the staff bio section—don’t miss checking out the bio for their cat!

This project is a great example of WordPress’s potential when it’s not overloaded with plugins. In fact, we only used three plugins on the entire site, keeping things fast and efficient!

Photo Gallery

Tagged Skills

CMS HTML / CSS PHP React WordPress

ZyBook Implementation for RIT Class


Integrating an interactive in one of RIT's largest classes

This was done for the class ISTE-140 Web and Mobile I Web and Mobile 1 at RIT typically has at least 8 sections in a single fall semester, and is offered in multiple countries (RIT Dubai, RIT Croatia) so significant coordination efforts need to be spent here. As described in the section above, another area I helped coordinate this course being offered around the world was when I implemented the virtual textbook (zybook). This video goes over how the zylabs work and I give a few demos (for summer 2024): https://www.youtube.com/watch?v=1VNT5z3p8Yg 

Overall the text book i helped implement and customize (the ZyBook) was met with positive feedback for its rollout:

Comments received from students about the interactive textbook:

  • “I enjoyed the zybook that he chose for us. It was interactive and really helped me learn. I liked that he did follow-along demos in the class. Our class was very comfortable with him which made it easy to ask questions. He gave us all the resources and help we could need.”
  • “the code pens and the zybooks helped my understanding and he would reaffirm it during class time”

Photo Gallery

Tagged Skills

HTML / CSS JavaScript

Come to my HTML / CSS Workshop at RIT hosted by WIC


Wednesday, October 5, from 6:30 pm to 8 pm in GOL-2400 (the Golisano Computing College building)

Please join me at RIT’s Women in Computing meeting on October 5th where I will be hosting a Web Development Workshop covering HTML and CSS. If you have not learned HTML and CSS yet or would like to review them quickly feel free to join. It will be on Wednesday, October 5, from 6:30 pm to 8 pm in GOL-2400 (the Golisano Computing College building)

Photo Gallery

Tagged Skills

HTML / CSS