Fours Ways To Reduce HTML
Lets face it, HTML is boring to produce; but I can’t make a website without it? The answer: generate the HTML using something less boring. While I won’t be doing any examples of the technology I’m about to tell you about; I do plan on making tutorials on such topics in the future.
Also, this is aimed at non-backend web developers (though PHP is a serverside technology meaning it needs a web-server).
Generate it using Javascript
You can generate HTML using vanilla Javascript. And, you can use something such as Vue, Angular, React, Ractive, this could be a long list… to generate the HTML for you. Tbis is essentially the goal of these tools (frameworks and libraries) which is why they are such great buzzwords among the web development community. And these tools are typically able to run client-side (though sometimes may vary slightly) so an upside is not having to pay for a backend-server (they can however sometimes be a pain to setup from sratch so don’t be afraid to use a boilerplate / starter-kit and you’ll typically be using a command line).
Use PHP
This solution in my opinion isn’t quite as elegant and in some cases may be overkill, but if you’re gping to be hosting your website on a PHP based server, might as well use PHP to save you from repetition. The idea of PHP in this case is that you save your individual “web-components” as PHP files, and load them in using PHP whenever appropriate - you can “drop in and out” of PHP to type the important HTML. Many content management systems (Wordpress, Drupal) are built on PHP, so familliarity with PHP will make your transition into using one of these industry beloved tools much easier (yes, there are non PHP CMSs out there - but PHP is incredibly popular).
Use a Templating Engine
Is PHP overkill? Perhaps this one will work nicely: templating engines are typically compact mini languages designed to work inside HTML that allow you to add logic to the HTML - think Javascript - but not as advanced. They are easy to learn, and work similar to PHP in that you can drop in and out of the templating engine’s “language” whenever need be. There are a quite a few popular ones out there, the ones I’m most experienced with are Handlebars and EJS, but Jade seems pretty interesting. Many backend frameworks generally use a template engine (assuming you don’t swap it for something like React) by default - Rails for example makes good use of ERB (which is similar to EJS). Static site genrators such as Hexo also make good use of templating engines. Wahts also good about templating engines is that they can essentially do what I suggest using PHP to do (above) except that a server isn’t always required.
Emmet
Emmet, is a plugin / extension for popular text-editors such as Atom, VS-Code, Sublime Text etcetera. As there is typically a pattern when it comes to writing HTML, it allows you to put in aliases for the vital parts (such as “.” if you wish to give your element a class) of the HTML and generates the appropriate markup based on the keys you input. There may be other plugins which do this but Emmet is the only one I’ve heard of.
While this was a breif overview of the web-development technologies that can take away painful hours of typing for you, I decided to only focus on the “developer” centric tools and thus didn’t give much thought about content management systems, WYSIWYG editors, and whatever other web-authoring tools that exist among us.
My Relationship With React [So Far]
This blog post is about my relationship with React, why I chose it and why I enjoy it.
I Talk To Myself
You may think its weird, but i talk to myself (more than you would think). And i encourage you to do the same.
I will be noting some of the reasons i talk to myself. Much of this is personal opinion.
Its healthy to express:
Humans are social animals We are wired to want to share things with others [depending on what such things are], its therapeutic for me to share my thoughts and experiences. I usually can’t concentrate if I have too many things bottled up inside nagging at me.
It helps me communicate - and understand, thus teach myself:
Its much easier to understand something if you know the reasoning process which is used. So, often times [when no one is around] i talk as if I am explaining something to someone, and even mimic a conversation by asking myself potentiel questions. Not to mention talking something i have read out loud reinforces my ability to mention it as their are two sources of input for the information [audio - ears, visual - eyes{
Its also possible that no one reads my blog posts but i still continue as i believe it is helping me fill gaps in my knowledge as well as improving my communication ability. And allowing others to see my “work” means they can offer feedback which I can use for improvement.
This blog post was just a quick blog post to accomplish two things: I felt the need to produce + publicise something, and to inform you that you shouldn’t be afraid to do something that helps you because of what other people think - within reason of course.
why-I-like-CSS-utillity-classes
What Are CSS Utillity Classes?
CSS Utillities classes are simply classes which do a specific thing - which typically has nothing to do with the website’s identity but instead how the website behaves. For example “container” - would be a utillity class which wraps a peice of content and likely makes it responsive. Utillities are intended to be combined with other utillities to build the individual components (parts) of your website without you having to use a “pre-determined” component such as “vertical-navigation-bar”, for example, one peice of markup may look like the following:
|
|
You may have used utillity classes before (you probably call them helpers). Please be aware that I’m still a “young” developer so my opinion may change/evolve.
They give me freedom
CSS Utilliy classes give me freedom as I can mix and match them with other CSS tolls such as frameworks, pre-processors etcetera incredibly easily. I can even use other people’s utillities along side my own custom utillities.
And unlike frameworks, they don’t get in my way (compared to other tools I’ve used) since they are typically easy to customize and as I said - they have little to no effect on my website’s overall (visual) identity and thus don’t result in me “using someone else’s creativity”.
They’re predictable
Assuming they are named to my favouring, just by looking at the class-name I can easily predict what they should and shouldn’t do. Thus, I don’t feel “constrained” when it comes to using them. And as I said, if I don’t like it as it comes - chances are I can easily customize it. And I can easily tell if its the utillity or my code giving me issues.
They allow for seperation of concerns
As they typically have nothing to do with the website’s identity - I can have a utillity-section of code for my website and a visual-section of code for my website, this is great as I’m more likely to re-use the utillities without being bogged down by code I don’t need.
They typically require minimal markup
Most times, they don’t depend on a particular HTML tag nor set of tags, and as CSS utillities typically play well with each other when applied to the same tag - I can use the same class-attribute.
Learn more
If you’re keen to delve into the world of CSS utillity classes, here are some resources to help:
- “Tailwind Framework”: https://tailwindcss.com
- The Role of Utilliy Classes in Scalable CSS: http://davidtheclark.com/on-utility-classes/
css grid - keep your older tools & tricks handy
CSS Grid has been announced somewhat recently so I figured I’d attempt to answer answer a very reasonable concern quickly. Sadly this isn’t a tutorial (no as I’ve said before I do intend in making one). And I make the assumption you’re aware of common web development and thus CSS trends.
Twitter Bot - Tweet A Heart Image
In this tutorial we will learn how to make a simple Twitter bot which tweets an image and using the Twit package.
Animate Wordpress Parent Theme With AnimateCSS
In this tutorial we will learn how to animate a Wordpress parent (or master) theme, we will use AnimateCSS (because I’m currently too lazy to make my own animations) but theoretically this method will work with other libraries.
Send HTML Email With PHP
Hello, in this blog we will learn how to send an email which is a HTML file using PHP and the emails we will get from a JSON file - because I really like JSON. Please note that this may only work with a Gmail account.
7 Ways Not To Learn How To Code
There are a ton of �learn how to code�, �how do I learn how to code�, �best way to learn how to code� - and while this blog post is similar to those - it is also different in that it aims to point out those �traps� some people stumble into when pursuing their journey of becoming a developer.
How To Use AnimateCSS
What is animate CSS?
Animate CSS is a library of CSS animations made using the keyframe rule, typically used for animating HTML elements / tags - especially text, thus allowing the website to feel much more alive and interactive - there are various animations designed to attract the users attention. They also keep the user amused during loading time - funilly enough, my 2017 - 2018 blog which is (or was depending on when you�re reading this) powered by Hexo uses Animate CSS.