Why shouldn’t we be fans of CSS? It’ constantly revolutionizes itself while trying to strive for its renowned form of simplicity. The end result is the creation of browser functionality that is arguably above and beyond what can be created with just JavaScript. Let’s examine some recent CSS enhancements and insights in the way i can be used. Some examples include blurred borders, setting a dark/ light mode switch (with a little help from JavaScript) and more.
CSS Features That Are Changing Web Design
The design landscape has changed a lot in recent years. We’re equipped with new and powerful tools — CSS custom properties, CSS shapes and CSS writing-mode, blurred borders in CSS, and sophisticated partitioning with CSS Grid – to name a few.
What is sophisticated partitioning with CSS Grid?
In the article written by Rob Weychert, he experimented with CSS grid to create a Tinnitus Tracker. He designed the grid pattern and then he worked on the partitioning of the grid.
These grid patterns mainly have the following 3 objectives:
Maintain a (somewhat) consistent whitespace.
Give the appearance of randomness.
Don’t forget about prime numbers.
Also adding CSS Grid, partitioning and typography as a cherry on top altogether gives a different look to the website and reaches to a different level of advancement. We encourage readers to follow the above link to learn more about how this was accomplished.
Blurred Borders in CSS
If we want to target an element and just visually blur the border of it. There is no simple, built-in feature we can apply. But we can get it done with a little CSS trickery.
After giving a code this effect, one can
enhance it with rounded corners, extend support so it works cross-browser, what
the future will bring in this department and what other interesting results can
get starting from the same idea!
In the article written by Daniel Crisp is about exploring the most exciting new properties coming to CSS. These include:
Fixing layout problems
Exploring feature queries
Use ‘not’ for a cleaner outcome
We encourage readers to follow the above link to learn more. We also came across these resources which may help you better understand how CSS is being used currently.
Every day things change in web design and development. We hope you are excited about these new approaches. CSS has certainly exceeded expectations of what was once considered achievable.
We hope you found these resources and overview useful. We always look forward to your comments and feedback (whether you are a member or not).
After a long break let’s take a look at another Static Generator – Hexo.
Hexo is powered by Node.js and is mostly aimed at blogging. It has a deploy integration for GitHub which makes it a great fit to build a documentation site for a GitHub project as well. If you are a JavaScript developer, the setup should be relatively easy. Like many other general purpose generators, you’ll probably want to write your content in Markdown. The default templating engine is Swig, which is once again well suited for JavaScript developers. However, Hexo is extensible to allow other templating engines to be used if you want.
The Hexo website includes a range of pre-built themes for you to try out, and one especially popular feature of the tool is its support for single-command deployment.
Installation of Hexo
Installing Hexo is quite
easy. However, you do need to have a couple of other things installed first:
We reviewed static site generators when we began this series of articles. If you need a quick review – a static site is a collection of pages contained in basic HTML files. A static site generator (SSG) is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data (such as Markdown files) and templates. The resulting build is transferred to your live server. Static site generators are systems that compile templates into static HTML pages. There is no server processing or rendering, so static websites tend to be very fast and lightweight, saving you and your users precious time and bandwidth. This increased efficiency is reflected in lower costs (including lower maintenance costs) and, potentially, higher revenues.
What is the difference between WordPress and Hexo?
When talking about performance, one must think about caching. Although there are multiple techniques for caching WordPress, this is not usually a straightforward task, unlike caching static files. Serving cached files is more performant than serving actual files from the server and it can save time when loading websites.
Advantages of Hexo
Hexo has
many pros:
it is blazing fast,
it is easy to deploy to GitHub pages or any other host with one deploy command,
it is powerful with solid Markdown support,
it is highly extensible,
it is open source and there are many open source themes, and
there are available free plugins.
With Hexo, one can create markdown files and HTML layouts which will be converted to static HTML files when deployed. Hexo provides a deploy configuration which builds our static files into a GitHub branch. This means one can maintain documentation as markdown in our project’s master branch and deploy it, with one command, to gh-pages.
My experience working with Hexo
I decided to create a blog post for Hexo without any graphics. I found creating the blog post in Hexo to be easier than Jekyll. Readers may recall that I discussed Jekyll as part 2 of this series. The default theme also looks good on the site. I decided to just run the site locally. If time permits, I may post some of these examples on a Web Professionals server and link to them. In the interim, here is a screen capture of the results. I did not encounter any major issues when working with Hexo locally.
Example of Hexo blog post
Final Thoughts
During my course of study as a Web Developer I tried many CMS systems and installed a lot of software. I found working with Hexo a little easier than most. It also has a little learning curve. One must use the command prompt to run different commands. I was able to get desired output to display locally with not that much effort. Each time I made changes I had to run ‘hexo server’ command on command prompt. That is the essence of static site generators (one must remember to constantly update the resulting web pages when changes are made).
One may find it simple and easy to build sites using Hexo or one may face problems initially installing and running and deploying. It all depends how the computer configuration/set up is. I am curious as to your experiences with Hexo. What did you like/ dislike? Please update the comments with your experiences.
Jekyll remains the most widely used static site generator. With Jekyll, you’ll typically work with content in Markdown, a lightweight markup language designed for text formatting. The Liquid templating engine is used to place this Markdown content into the HTML template, and to combine templates representing various parts of a page (say, header, footer and content) in a modular and re-usable manner. It also has support for Sass for those with a preference for CSS pre-processing, and it’ll play fine with libraries like Bootstrap. Also included with Jekyll is an HTTP server which can be used to easily deploy and test your static pages locally.
Importers is a feature which enable an existing site to be migrated to Jekyll with relative ease. For example, you can take an existing WordPress site as a starting point with Jekyll using one of the importers.
If you have a GitHub repository, you’re able to create a GitHub pages site for free using Jekyll. This can be a convenient way to give a polished landing page to your GitHub project.
The big downside of Jekyll – and this applies to most generators – is that it can seem complex at first and is a new technology to master.
You first need to install the Ruby DevKit or you will experience errors. If you are installing Ruby only for the purpose of running Jekyll, Portable Jekyll will give you a full working Jekyll install in less than 5 minutes.
Few easy steps:
To set up your site locally with Jekyll, follow these steps:
Create a local repository for your Jekyll site.
Install Jekyll using Bundler.
(optional): Generate Jekyll site files.
Build your local Jekyll site.
Keep your site up to date with the GitHub Pages gem.
Configure Jekyll.
Does Jekyll generate valid HTML?
Jekyll essentially a parser that converts plain text content written in a special formatting language called Markdown into HTML. These content blocks get inserted into one or more templates to build final output for a static page or a post. Markdown is a styling language used to prepare written content such as blog posts in Jekyll that can eventually be converted into HTML. Markdown allows user to focus on content by using an easy-to-read and easy-to-write plain text format, which can then be converted to valid HTML.
My experience working with Jekyll
Jekyll is widely used Static Generator. I tried working with Jekyll. I followed easy steps to install and run a Jekyll post locally. I first installed Ruby, then used the command prompt to get the desired Jekyll output locally.
Here are some screen captures to get an idea how the site look like. It is a simple blog post without any graphics.
I transferred all generated files and also post I created via FTP to a server. It didn’t give the desired output shown in above images. For example, the link to the CSS file appears to be broken upon transfer.
During my course of study as a Web Developer I tried many different CMS and installed different software, but working with Jekyll is little different. It has a bit of a learning curve and I think someone before working may need someone to have a little technical background. I am still trying to see what I need to change in the background code when it is transferred to a server. Clearly, something did not work properly.
These are my initial observations on using the tool. You may have different experiences and we look forward to your comments. The biggest issue with using any static generator is that you must generate the entire site each time you make updates (so all the links work). You would then need to transfer the appropriate files to the server each time. In my opinion, there are other tools (such as WordPress) which would seem to be more efficient (although less secure as they interact with a database).
A static site is a collection of pages contained in basic HTML files. A static site generator is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data such as Markdown files and templates. The resulting build is transferred to your live web server.
An Introduction to Static Site Generators article was published a few years ago. The basic concept has remained constant. It explains the popularity of static site generator. It also help people of all skill levels understand exactly what static site generators are, acknowledge their advantages, and understand if their limitations are a deal-breaker or if, on the contrary, they can be overcome.
How static sites work?
The proposition of a static site is to shift the heavy load from the moment visitor’s request the content to the moment content actually changes. Using a news kiosk metaphor, think of a scenario where it’s the news agencies who call the kiosk whenever something newsworthy happens.
Cyber security is the practice of protecting systems, networks, and programs from digital attacks. These attacks are usually aimed at accessing, changing, or destroying sensitive information, extorting money from users, or interrupting normal business processes. Implementing effective cyber security measures is particularly challenging today because there are more devices than people, and attackers are becoming more innovative. People often use the same passwords on multiple accounts (and rarely change their passwords unless prompted). Since people are often the “weakest link” in a security program, one should periodically do a security checkup. This applies to individuals as well as organizations.
As you know, a security hacker is someone who seeks to breach defenses and exploit weaknesses in a computer system or network. Hackers may be motivated by a multitude of reasons, such as profit, protest, information gathering, challenge, recreation, or to evaluate system weaknesses to assist in formulating defenses against potential hackers. Once systems have been compromised or passwords leaked, access credentials are often placed on the “dark web.”
PHP is a commonly used language for web sites and web application development. It is a general purpose, server-side scripting language run a web server that’s designed to make dynamic pages and applications. PHP is mainly focused on server-side scripting tasks, such as collecting form data, generating dynamic page content, or tracking session state. PHP also does much more.
A voice-user interface (VUI) makes human interaction with computers possible through a voice/speech platform in order to initiate an automated service or process.” VUI design focuses on the process of interaction design for the user and the voice application system.
Gutenberg is more than an editor. While the editor is the focus right now, the project will ultimately impact the entire publishing experience including customization (the next focus area). Gutenberg looks at the editor as more than a content field, revisiting a layout that has been largely unchanged for almost a decade. This allows us to holistically design a modern editing experience and build a foundation for things to come.
For those who are already thinking about 2019 and what web design trends will be popular, we provide a starting analysis. Technological advancement has revolutionized the way we interact, socialize and do business and there will continue to be significant innovation and improvements in web design in 2019 and beyond. We all want our clients to get greatest and latest when it comes to their sites so it is not too soon to be thinking about 2019 trends in this area.
We found a lot more information about these new design trends in 2019 at Website Trends – 2019.
Solid is an exciting new project led by Prof. Tim Berners-Lee, inventor of the World Wide Web, taking place at MIT. The project aims to radically change the way Web applications work today, resulting in true data ownership as well as improved privacy.
In the article written by Tim Berners-Lee about the Solid Framework, he believes Solid will resonate with the global community of developers, hackers, and internet activists who bristle over corporate and government control of the web. “Developers have always had a certain amount of revolutionary spirit,” he observes. Circumventing government spies or corporate overlords may be the initial lure of Solid, but the bigger draw will be something even more appealing to hackers: freedom. In the centralized web, data is kept in silos–controlled by the companies that build them, like Facebook and Google. In the decentralized web, there are no silos.
