My Ulog Continues: Practising D. R. Y on XSLT designs.steemCreated with Sketch.

in #development5 years ago (edited)

Ok, here comes my second, nerdy Ulog on developing progress.

So for those who noticed my previous no photos post (which is kind of rare for me), here comes some (to much normal people) much drier subject (pun unintended) coding and learning updates from my day job where I started implementing the D. R. Y (Don't Repeat Yourself) minimalising coding concept on my work.

This took me the whole afternoon to make sure I researched it as thoroughly much as I can in the implementation of templates in an xlst document.

For those who has the slightest idea what the heck XSLT is, in the layman term, it helps make your Web page display your data with xml (non database connection) files where you can speed up your work with dynamic data.

Which means, you don't have to rewrite a lot of designs when all it changes is the content.

And when it comes to HTML (or even mark down), you will appreciate the clean up writing and just change the contents on the fly.

My Experiment

Today I attempted to make this calendar (I have not beautify it just yet) from scratch that is based on the xml data that I have extracted from my office database straight into an XML file; and this is based on march.

If you have to painstakingly use the HTML (Hypertext Markup Language) to make these little cubes, it could probably take you forever even though you have the standard web CSS (cascading style sheets) styles preset for you.

And if you want to say, make another month, which is the next month, the month of April, you will probably have to change every single darn cell content just to get it displayed properly.

Those who does HTML coding before, especially on a notepad will know how a nightmare it can be if you miss out one closing tag

Before I began this XSLT coding, I have already created special "tiny little helpers" (database functions) to automatically build and entire calendar structure based on a 7(columns) x 5 (rows) structure that you usually could see on a table calendar.

With one simple Stored Function to run
select Calendar.dbo.GetMonthCalendar('2019-03-01');

I could create a whole data in xml ready for action with just one sentence.


The tricky part, simple mathematics.

From the data compiled with the pre-determined template that it is going to be in a 7x5 matrix set, I used the simple formula of modulus calculation with the first populated matrix cell number.

For example if 1 March 2019 actually happens to start on cell 6, it should continuously populate till 35 cells and spills over back to row 1 if that happens.

This situation is rather rare but it is not impossible. Just so happened that the month of March shows it. If you don't believe me you can find a table calendar with a pre-determined 7x5 squares display and flip to see if that's true.


And the experiment continues today: 28 March 2019...

Since I got the calculation working that whenever there is a complete modulus of 7 that returns 0,
value mod 7 = 0
it goes to the next row....

Now, I wanted to make the whole calendar table resizes at 2 values changed only; the height and the width of the box.

You see, in a normal HTML design, every bloody single element if you want it custom made nicely, you will need to specify its shape, size, colours, borders... whatever you need.


This is when height and width has the value of 60

And to bloody repeat 35 times every time you are going to change it, will definitely get you nuts if you miss out one of the designs.

Hence that is why D.R.Y. is important for every front end web designer / developer to remember

As @superoo7 had nicely mentioned.

I didn't use the suggested application that was recommended by him. I am quite of a manual old-timer here that does full control coding (back in the machine language days)

Now... don't look at me like some fossil please...

So what do you do under the D.R.Y practice?

You just centralised a set of value that you can change, and let everyone else reference back to that set of value you / whoever modifies the codes will do.

kids-with-variables.png

Thought I'd make the experience a little more fun to help non-geeky readers to understand how it is; with the help of royalty free Vector Stocks

kids-with-variables-2.png

To make you understand clearer you will see if I do it in coding, only the (kids) with the names of height, width and pady (padding) will have their value modified and everything else reset by itself.


And this is when the values of height, width and pady changed their values to what the kids are holding.

if you watch closely (on a browser, your phone might show differently), the date font sizes never change.

I hope you had fun reading this post to see how the D.R.Y. (non redundant) concept works and how one thing can be be reused over and over again; so that nothing gets repeated and the whole developing experience (and maintenance) can be upkeep easily.


Doesn't this sound a little like mix and match clothes? You don't have to buy the same set of clothes with different colours and just wear as "suggested", but mixing and matching producing a new look with the same set of tops and bottoms or one pieces you have makes the clothes bought more purposeful?


I'll try to show you the whole codes in maybe github later when I perfected it; because it still lacks a whole lot of information to make it run properly. Right now this is just a skeleton table calendar; wait until when I place relevant information inside to make it more usable and meaningful in the near future.

That's all folks!

Until Then

mini-jess-smile-128.png
Thank You for Your Time

Posted using Partiko Android

Sort:  

You got voted by @curationkiwi thanks to littlenewthings! This bot is managed by KiwiJuce3 and run by Rishi556, you can check both of them out there. To receive upvotes on your own posts, you need to join the Kiwi Co. Discord and go to the room named #CurationKiwi. Submit your post there using the command "!upvote (post link)" to receive upvotes on your post. CurationKiwi is currently supported by donations from users like you, so feel free to leave an upvote on our posts or comments to support us!

This post has been curated by TeamMalaysia Community :-

To support the growth of TeamMalaysia Follow our upvotes by using steemauto.com and follow trail of @myach

Vote TeamMalaysia witness bitrocker2020 using this link vote for witness

This post has received a 3.13 % upvote from @drotto thanks to: @curationkiwi.

Coin Marketplace

STEEM 0.17
TRX 0.13
JST 0.027
BTC 58397.49
ETH 2619.60
USDT 1.00
SBD 2.42