Posts

Simple JavaScript Countdown Timer

Image
This tutorial will go over a simple dynamic countdown timer using JavaScript. Example of a countdown timer using the code below HTML + JavaScript <p id="showDate"></p>     <script>         var countDownDate = new Date("Jun 18, 2019 17:37:00").getTime();         var x = setInterval(function () {         var now = new Date().getTime();         var distance = countDownDate - now;         var days = Math.floor(distance / (1000 * 60 * 60 * 24));         var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));         var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));         var seconds = Math.floor((distance % (1000 * 60)) / 1000);         document.getElementById("showDate").innerHTML = days + "d " + hours + "h "   ...
1 comment
Read more

Creating a Blockquote

Image
Creating a blockquote can make a more impactful article by drawing visual attention to important information in a stylistic and professional way. Example of a blockquote CSS blockquote{     display:block;     background: #fff;     padding: 15px 20px 15px 45px;     margin: 0 0 20px;     position: relative;     font-size: 14px;     line-height: 1.2;     color: #666;     border-left-style: solid;     border-left-width: 15px;     border-right-style: solid;     border-right-width: 2px; } blockquote::before{     content: "\201C";     font-family: Georgia, serif;     font-size: 60px;     font-weight: bold;     color: #FF9540;     position: absolute;     left: 10px;     top:5px; } blockquote::after{     content: "\201D";     font-family: Geo...
2 comments
Read more

Using Flickr API

Image
There are numerous fun things you can explore with the extensive Flickr API (Application Program Interface) , like requesting images based on tags. Click here for a full list of Flickr API services. This example is a highly primitive request that doesn't require an authorization key (or API key) to work, which you can acquire here . This request does have some serious limitations, however, like only being able to randomly request an image based on the user's query. This is still a good introduction to web-based APIs and using the JSON (JavaScript Object Notation) data format. Example of using Flickr API to pull up an image of a 'cute cat' The code below is all that was used for the example image above. The code will take the query in the textbox (txtSearch), which in this example is 'Cute cats', as a tag to request the image, which will be finally set as the source image to be displayed (selectedImage). Of course, you can get a lot more complicated w...
1 comment
Read more

Button Revealing Popup (Modal)

Image
This post will go over the very minimum of creating a popup (modal) for mobile and desktop displays. To download the full example click here What we'll go over Create a clickable button that scrolls with the user Clicking the button will reveal some hidden HTML content Any content behind the modal element will be gray Allow the user to close the modal Example of active modal element Creating the clickable button CSS #contactButton{ position: fixed; bottom: 100px; right: 30px; } #contactButton_image:hover{ filter: brightness(50%); } The CSS code for creating the button is really simple. The position of the button is set to fixed , meaning the location that we set it to on the screen will not move (even when the user scrolls) unless otherwise stated. That fixed location is at the bottom-right. When the user hovers over the button using :hover , we apply a filter to the image turning the brightness down to 50%. HTML <div id=...
Post a Comment
Read more

Lazy Loading Images for Site Optimization

Image
Lazy Loading is a practice to reduce page load time by only loading critical or on-screen images when they are either needed or the page has directly scrolled over them. The website only needs to load the temporary image for all images until they are requested. Below is an example of Lazy Loading on  SCAD District . Lazy Loading can be easily achieved via plugins on WordPress. The one used for SCAD District is called BJ Lazy Loading and can be easily configured with custom thumbnails for the temporary images.
Post a Comment
Read more

What is a CDN and Why Should I Use It?

Image
A CDN (Content Delivery Network) allows for images to be stored in multiple locations domestically or internationally. A CDN increases the accessibility of images and files when a visitor wants to visit your site. To load information, the website needs to ping a server and retrieve and render images and scripts in realtime, which can take time, especially when that server is located far away from where the visitor is viewing your site from. Image Source Google Cloud and multiple other services offer CDN services, which can be used for not just images but files and scripts. Many scripts services like jQuery additionally offer CDN links, so a file can stay up to date and be fully optimized ( https://code.jquery.com/ )
Post a Comment
Read more

SCAD Stylesheet Reference & Blog Intro

The stylesheet reference for articles and posts is up for viewing. All the CSS code has been added to all sites, so you just need to use the code mentioned in this sheet to make it work. More stylistic elements will be added in the future (this is a live document). I'll be around to answer any questions you may have, so feel free to shoot me an email (valiqu20@student.scad.edu). This blog will contain basic web development information for editors, photographers, and anyone else contributing to the SCAD sites who want to know more and optimize content. SCAD Stylesheet Reference (Live) https://drive.google.com/drive/folders/1czGPzn-ZnkB1KCLekq6paHooZ9rZGHBd?usp=sharing
2 comments
Read more