A new program has been added to the Free PHP Encoders, Accelerators and Obfuscators page. This one is a PHP accelerator, and it works by caching scripts in their compiled state on a web server so that subsequent invocations of the script will use the cached copy.
It is so exciting to examine modern website designs and stumble upon tiny things that developers find adorable. “Tiny details make the difference” – we hear this a lot these days.
Indeed, it is true. These small unique solutions and tricks make projects stand out from the crowd. They make experiences original, and make user interfaces thrilling and unforgettable. These days, tiny trends prevail over the big ones.
Developers do not dwell on one big thing; they experiment with many smaller ideas. Therefore, we can witness stunning microscopic solutions that make the web diverse. One of those tiny trends is stacked text blocks on a homepage.
Stacked text blocks can be seen everywhere. But, the problem with them is that sometimes designers can get carried away and include a wealth of information, resulting in TL;DR-like content. No one wants to read that. However, with two lines it is a different story. Brevity is the soul of wit. It always works. Just pick up the keywords, compose a catchy tagline and voila, you are ready to win over clients. It is so elegant, simple and effective. It’s no wonder that many designers fall for this trick.
However, artists do not just rely on smart phrases. They play with its appearance, spicing it up with interesting features and unobtrusively emphasizing it with clever tweaks. Various techniques are put into play, for example:
We are going to examine all of these options, so that you can see the potential of each one and choose the best match for your particular case.
Let’s begin with one of the brightest representatives of this in the mainstream – Nathan Denton’s Denton Design. Created by Rene Hernandez and Ryan Haskell-Glatz, it is a true masterpiece that fascinates with originality and bizarreness.
“Creative Director” are the two words that meet the audience, marking the start of the dialogue. All of the letters are set in uppercase and a relatively big font size. They are painted in two primary colors: White and ruby red. Here, the two-line stacked block is not just a greeting. It is an integral part of the design that completes the ensemble and screams out Nathan’s occupation.
The team behind Multistampa goes for uppercase letters, large sizing and neutral colors that stand in contrast to the background. As a result, the phrase “Printing Life” is a natural focus of attention here that perfectly blends into the geometry-inspired aesthetics.
This is the big name in our collection. Spotify is famous for its pioneering solutions, proof that it is a trendsetter in the web sphere. This latest example shows that duotone and bright coloring still excite the minds of their creative department.
Once again, we can see a two-line stacked text block on their website. There are two blocks placed one above another. The first one is big and prominent, whereas the second is small. yet eye-catching. The beautiful yellow goes well with the Pantone orchid used as the background color. The tagline feels gentle and, at the same time, bold.
The team behind iFly KLM 360 degrees’ design employs the beauty of typographic centerpieces that are unfortunately rare these days. “Round the World with Kiran Jethwa” instantly draws our attention. This artistic take on two-line stacked text is just incredible. Thin, elegant lines of letterforms, big size and intricate play with words make the phrase an absolute winner in our eyes.
If you do not have typography artists at your disposal, Claudia Noronha offers a valid alternative – use a beautiful typeface. Her elegant, smooth and a bit fat typeface nicely interacts with the rest of the content. At the same time, it stays true to the UI’s lady-like aura – nicely contributing to the overall feminine atmosphere. Simple, beautiful and effective.
The team at Heartbeat Labs opts in favor of an old-timey solution that implies the underlining of words. It works great here. Although the size of the font is small, the bright thick line that shines out against a clean, monochrome, dark blue background puts the phrase in the spotlight.
SiR MaRy presents another absolute classic in our collection. Here, the catchphrases are highlighted with bold black lines. Although it may seem a bit brutal and crude in comparison to the examples featured above, nevertheless, the trick gives the slogan a solid base, delineating it effectively.
The team behind Elastos shows us how to use a two-line stacked text block when you have a fancy background. Even though the phrase is set in an ultra-narrow typeface, it still catches the eye. There are several reasons for that.
First of all, the size of the font adds to its prominence. Secondly, the clean background and white space give way to everything on the fore. Third, the phrase is placed to the left – just where we naturally start to read. Finally, the graphics themselves literally point towards the text.
Andres Soler, a multidisciplinary artist, breaks his name into two lines. The two-line concept remains on the smallest device screens as well, so that the first thing that you read on your cell phone is “Andres Soler.” Here, the phrase looks like a bold statement that does not require any visual “supports” or extra entourage.
If you think that trends effect only the essential elements of design, think again. All the components of web design (whether small or large) are subject to the trends. You have to look carefully, paying attention to the most minor details.
Even a boring thing, such as a block of text, will undergo changes and improvements regarding design and user experience. Today, we witnessed a trend of using stacked two-line taglines that are beautifully emphasized.
They hit straight to-the-point and add to the general aesthetic. Most importantly, they correspond to a user’s preference of scanning text on a website rather than reading it. It is a trend that combines both pragmatism and creativity.
The post Making a Statement: The Use of Stacked Text Blocks in Web Design appeared first on Speckyboy Web Design Magazine.
Inline scripts are synchronous. "Well, duh!" you may say. That's a feature, not a bug. Because accessing a variable after an inline script should succeed. And that's fine. But not great.
When is this bad? Well, inline scripts cause stylesheets to be blocking. Wait, what? Steve explained it 10 years ago, and it's still relevant today. Allow me to demonstrate.
Say we have:
<link rel="stylesheet" href="css1.css.php" type="text/css" /> <script src="js1.js" async></script> <link rel="stylesheet" href="css2.css.php" type="text/css"/> <script src="js2.js" async></script>
What we have is a waterfall like this:
... and in the console (where we log DOMContentLoaded and onload too) you see that even though CSS takes forever to load, it only blocks onload. The external JS execution is just fine.
Now what happens when you add an inline script after each external JS? Code:
<link rel="stylesheet" href="css1.css.php" type="text/css" />
<script src="js1.js" async></script>
<script>console.log('inline script 1 ' + (+new Date - start));</script>
<link rel="stylesheet" href="css2.css.php" type="text/css"/>
<script src="js2.js" async></script>
<script>console.log('inline script 2 ' + (+new Date - start));</script>
Now the first external async JS runs fine, but then the inline script and the second external JS are delayed by the slowness of the first CSS file. That's not good. The second inline script is blocked by the second even slower CSS. (And if there were more external JS files they'd be blocked too). DOMContentLoaded is blocked too.
external script 1 87 inline script 1 5184 external script 2 5186 inline script 2 10208 DOMContentLoaded 10216 onload 10227
There's a good reason why browsers do this, e.g. the inline script may request layout info and for that to work, the CSS must be downloaded and applied. But it's less than perfect.
Well, ditch inline scripts, you may say, but that's not always an option. Maybe you need some work that only the server can do (or it's better done by the server) and then made available on the client side.
So how do you prevent the inline scripts from blocking?
If only there was a way to make an inline script appear external to the browser... But yes - make the src point to a data: URL. Doesn't need to be base64-encoded either.
So you take this:
<script>console.log('inline script 1 ' + (+new Date - start));</script>
... and turn it into this:
<script async src="data:text/javascript,console.log%28%27inline%20script%201%20%27%20%2B%20%28%2Bnew%20Date%20-%20start%29%29%3B"></script>
And voila! No more blocking! Sync becomes async! Everybody dance!
inline script 1 2 inline script 2 4 DOMContentLoaded 10 external script 1 271 external script 2 277 onload 10270
Looks weird, but hey, it works! And there days learning from view:source is almost impossible anyway.
I tested this hack in Chrome (Mac/PC), Firefox (Mac/PC), Safari (Mac), Edge (PC). Works everywhere except Edge. Oh well, at least it behaves as if nothing was changed, so it doesn't hurt Edge.
Couple of alternative approaches that didn't work for me were:
defer to the inline script. Steve suggests in his post that it used to work in Firefox 3.1 and some old IE. Not anymore though.async to the inline script - it's not allowed, but didn't hurt to tryThank you all for reading and go externalize!
Unicons – A collection of free vector icons for your next project.
Graphic Design Archive – View key moments in the history of graphic design.
20 Free Mobile UI & Wireframe Kits for Sketch App – Get your project off to a fast start with one of these Sketch resources.
30 Seconds of Knowledge – A collection of snippets to help you grow as a developer.
How to Report Errors in Forms: 10 Design Guidelines – Techniques for clearly identifying errors and allowing users to easily correct them.
Constraint Layout (for Designers) – A guide for handing off responsive layouts to your developer.
CSSans Pro – A free colorful and sassy font.
Code as an Ode to Hackers – A collection of code snippets that pay homage to hacker culture.
Custom Cursor Effects – Resources for creating amazing animated cursor effects.
SocialSizes – Download perfectly-sized templates for social media graphics. Available for Sketch, Adobe XD and Photoshop.
Google Takes Its First Steps Toward Killing the URL – Why long, unintelligible URLs are a security risk.
15 Free Bootstrap 4 UI Kits – Start your Bootstrap-based design right with one of these free UI kits.
Pure CSS lettering, a bad and fun idea – A look at how designers are creating their own fonts in CSS.
Exclusive Design – What if we created websites exclusively for people with disabilities?
CSS Position Sticky – How It Really Works! – An explanation of what position: sticky does and how you can leverage it.
Snippets That Celebrate Old School Tech – Modern developers demonstrate their soft spot for outdated technology.
Remix Icon – A set of free, neutral style icons.
Chinese Material Design – Taking a look at Ant Design, China’s Material alternative.
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) – Apply interaction effects with SVG and a little CSS.
Textblock – A JavaScript tool for displaying continuously responsive typography.
Follow Speckyboy on Twitter or Facebook for a daily does of web design resources and freebies.
The post Weekly News for Designers № 474 appeared first on Speckyboy Web Design Magazine.