Stop the press – The NewsWidget

Stop the press – The NewsWidget

UPDATE: I should post something on why you need to get money upfront for freelance based projects. (aka Technologists make lousy business people). Sigh. Live and learn.


Another interesting project. I was first approached about this back in November ’16 but wasn’t able to give the it the focus that it deserved due to time constraints. It was interesting to revisit this with fresh eyes and I think a better solution has emerged given the passage of time. In any case, thanks for your patience, James.

The Brief

The brief was to create a widget that would publish a list of links to the web based on the following requirements and constraints:

  1. A Javascript solution is desired – definitely no iFrame / HTML combination (which the client had ended up with even though that’s not what he wanted. Argh!)
  2. Keep the content contained within the area defined with no pop outs, overs, under, sounds or other means that reach beyond the area defined
  3. Don’t implement any end viewer targeting or information gathering beyond general view count and click counts
  4. Keep the content simple and fast loading so it does not impact page performance – in the event of a com failure what does the script load?
  5. An option to add a small picture before each text and another large banner at the bottom.


Gotta cut code to whip these up ..

Measure a thousand times, cut once

Early on in a project, your time is best spent thinking – not coding.

These were my first thoughts on the issue, which I relayed to the client:

The way I see it, you need some type of data repository from which the links are created. This could range from a simple text file to a database. Having said that, using a DB may well be overkill in this instance.

Generally speaking, it is not considered ‘good practice’ to have Javascript link directly to a database. Web to DB connectivity sits in the realm of ‘server-side processing’ and PHP or some type of API is typically used to query the DB and sent the resulting data back to the web client.

When I finally got around to cutting some code, it was interesting to read those words again. My thoughts on the solution hadn’t changed at all. In essence I kept thinking – “What’s the simplest thing that could work?” Simple tends to be robust and elegant.

So what components do we need?

  • A webserver and a webpage. They’re a given, of course.
  • As for the datasource – I have settled on a text file but the type is yet to be determined. I still think it’s overkill to use a database and even though there are options for connecting via JS (localforage, IndexedDB, etc) this will surely add to page load time. Best to avoid if possible.
  • Some type of ‘front-end’ for the client to create the text file.

Enter JSON and jQuery

The lingua franca of the web when it comes to data interchange these days is JSON – Javascript Object Notation. Along with jQuery, it reared it’s head early on as a solid contender among the solution space, and fits nicely within the given constraints – pretty much everything has jQuery support these days so I could easily couple it with an ajax call to load the data, no?

When it comes to JSON and Javascript there’s a few things that you need to get your head around:

  • parseJSON()Takes a well-formed JSON string and returns the resulting JavaScript value.What is the resulting js value, you ask? Good question – it would appear to be an array of objects.
  • JSON.stringify()method converts a JavaScript value to a JSON string
  • As for object enumeration, I settled on this which worked well
  • As for the ajax call keep in mind that .getJSON is merely a wrapper for .ajax and the dataType param is important when it comes to handling the resulting payload.

A few breadcrumbs, but you’ll learn by doing in this instance. You won’t find the JS code used in the solution in this post – sorry.

Putting it all together

So I’m using a CSV file as the data payload, which the client will need to transmit to the server using FTP. I’ll recommend FileZilla for this, my preferred FTP client. Now we need some type of front end to create the CSV file. Personally I’d just use a text editor, but some folks may not feel comfortable doing that so I’ll include the steps required for Google Sheets to handle this task:

BTW – If you’re ever throwing together anchor links in a spreadsheet this formula will come in handy

The solution provided has three steps and isn’t reliant on anyone else except the end-user:

  1. Create the CSV file using either a text editor or Google Sheets
  2. Upload the file (with the correct filename) using an FTP client
  3. Eyeball the results after a page refresh on the target site

Newswidget Googlesheet

The NewsWidget sheet is used to provide the table definition and create the CSV output file.

Download the sheet as per the link provided and save a local copy. Then start editing (Ensure you are on the first sheet titled CSV)

Note the following wrt the NewsWidget sheet:

  • Row 1 contains the headers (these should not be changed)
  • Rows 2..n are data rows and are used to define object types, being:
    ► header – an image used as a header. Specify the path to the image within the ImageURL column.
    ► link – input required to build the <a>tag. Here ImageURL specifies an icon image used to precede the link (optional). Markup can be used within the LinkText entry using standard HTML tags such as <strong> and <em>. Pretty cool, eh?
    Commas, OTOH, must not be used anywhere when defining the linktext.
    ► hrule – an HTML <hr> element (Horizontal Rule)
    ► footer – image used as a footer
  • There is an unused column titled Blank (this is intentional and should not be changed) Why you ask? See picture below

Create the CSV file

Remind me to explain why it’s hard to get screenshots of pop-up menus. Had to steal someone else’s. On the sheet select Download as from the File menu then hop to the right and choose Comma-separated values (.cvs, current sheet)

Save the file to your local drive. By default the file will be called NewsWidget – CSV.csv Rename the file and upload as per provided FTP instructions.

Anything else?

Additionally, the client needs to ensure that any image files used for the header, footer and icons are present on the server. This may require further FTP uploads. I will also suggest that the client separate the CSS out, which is currently within an HTML file.

Enter Borat

Enter the test site, so I can get this solution ‘out in the wild’ and sort out any bugs. Additionally the client can see that the solution doesn’t contain any ‘smoke and mirrors‘. What can I say, I’m a sucker for a little bit of Borat.

The curse of CSS

I’m not that fond of coding CSS, so I’ve discovered.
Having said that, I find this CSS1 incredibly useful and use it all the time

For simplicity I do like the aptly named Simple CSS WordPress plugin, which adds a box to the visual editor and makes injecting per post/page CSS a cinch!

Firstly, pass me the cache-buster! Especially when using external style sheets with WordPress it’s mandatory to have some type of cache-busting2 in place as otherwise you will end up smashing your head against a wall. Trust me on that front.

I prefer enqueueing via functions.php using the wp_enqueue_style fn:

If you use the above you do NOT need to link to the stylesheet using the traditional <link> tag – therein lies the magic.

I can’t escape with a completely external CSS solution – need to style some elements in-line when rendering the HTML table. Guess I’ll just have to upset the purists! (hey, whatever works, right?)

Our final CSS will look something like this (and for coding standards I agree with this post)

CSS Elements to note

margin-top: 0.1em;
When applied to the p elt of the table it will create more spacing hence the <div> elt may require more vertical real estate.

overflow: none;

When applied to the <div> elt causes the content to be cropped if it exceeds the container dimensions and hidden. You may wish to omit this if you can ensure all content will be kept within it’s boundaries.

Styling the <td> elt of the table

 The image on the left is styled with

margin-top: 0.1em

  while the image on the right is styled with

margin-top: 0.6em

Over to you James – time to do some testing, and let me know if you’re happy with the way the CSS is looking!

Deployment

As far as deployment goes you need to do the following:

 Create a <div> elt for the JS to target. This elt should have an id of tsx-nbx When using WordPress you can simply place the following into a text widget: <div id="tsx-nbx"></div>

 Ensure that jquery is loaded. Should be, but you may need to add the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 Deploy the Javascript file

 Deploy the css file

 Ensure FTP account is setup on production site

 Upload link data file via FTP

Requirements Re-visited

How did I do against the initial requirements?

• A Javascript solution is desired – definitely no iFrame / HTML combination (which the client had ended up with even though that’s not what he wanted. Argh!) Done – used Javascript and jQuery
• Keep the content contained within the area defined with no pop outs, overs, under, sounds or other means that reach beyond the area defined Think I’m OK here
• Don’t implement any end viewer targeting or information gathering beyond general view count and click counts Not done anything in this regard
• Keep the content simple and fast loading so it does not impact page performance – in the event of a com failure what does the script load? As a fallback for any file i/o problems I’ve hard-coded some links
• An option to add a small picture before each text and another large banner at the bottom. Done


Footnotes
1. Source: http://stackoverflow.com/questions/501671/superscript-in-css-only
2. Otherwise it may be a while until you see your changes filter through.
3. Love those fontawesome icons – see here

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz