PHPInfo

21Jun

By Chris CoyierNo Comments

CSS Tricks

An Almost Ideal React Image Component

Yes, this is a React component, but regardless if you care about that part or not, the "ideal image component" part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with: Placeholder space (and then flexible responsive styles after loading) Low-quality placeholder images Responsive images syntax (srcset) Image formats (e.g. using WebP when you can) Click-to-load on bad network connections Better UX for loading errors, with translatable copy That's not even all of it. So much to think about with poor little <img>. I enjoyed Alejandro Sanchez's response: The readme file for this component is amazing to teach you how to think like a front-end developer. — Alejandro Sanchez (@alesanchezr) June 12, 2018 Direct Link to Article — P...

21Jun

By Claudio RibeiroNo Comments

PHP

MySQL Performance Boosting with Indexes and Explain

Techniques to improve application performance can come from a lot of different places, but normally the first thing we look at --- the most common bottleneck --- is the database. Can it be improved? How can we measure and understand what needs and can be improved? One very simple yet very useful tool is query profiling. Enabling profiling is a simple way to get a more accurate time estimate of running a query. This is a two-step process. First, we have to enable profiling. Then, we call show profiles to actually get the query running time. Let's imagine we have the following insert in our database (and let's assume User 1 and Gallery 1 are already created): INSERT INTO `homestead`.`images` (`id`, `gallery_id`, `original_filename`, `filename`, `description`) VALUES (1, 1, 'me.jpg', 'm...

21Jun

By Thomas YipNo Comments

CSS Tricks

Using Custom Fonts With SVG in an Image Tag

When we produce a PNG image, we use an <img> tag or a CSS background, and that's about it. It is dead simple and guaranteed to work. PNG is way simpler to use in HTML than SVGUnfortunately, the same cannot be said for SVG, despite its many advantages. Although you're spoiled for choices when using SVG in HTML, it really boils down to inline, <object> and <img>, all with serious gotchas and trade-offs. Problems with inline SVG If you're inlining SVG, you lose the ability to use browser cache, Gzip compression between servers and browsers, and search engine image indexing (inline SVG is not considered as an image). Even though your image may not have changed one bit, they are always reloaded and this causes slower loading times for your website, a trade-off that most are n...

5 Tips for Cleaning Up After a Design Project

21Jun

By Ezequiel BruniNo Comments

Web Tricks

5 Tips for Cleaning Up After a Design Project

As every kid knows, making cool stuff is the fun part. You dump all of your toys on the floor, and sort through them until you find what you want, and make it all fit together to build a spaceship, or something. That’s the part everyone likes. But then someone comes in to tell you that it’s over. It’s done. Now you have to pick up after yourself so Dad doesn’t step on a Lego piece in the dark and shout bad words at 2AM. Few people enjoy this part. But as we get older, most of us realize that cleaning up after ourselves after work or play will save us trouble down the road. Web design is no exception. If you’re new to web design (and yes, this article is for newbies), it might feel like you’re “done” when you upload your HTML files to the server, and the client says it all looks great. And...

21Jun

By No Comments

Web Tricks

Using Google’s Flutter For Truly Cross-Platform Mobile Development

Using Google’s Flutter For Truly Cross-Platform Mobile DevelopmentUsing Google’s Flutter For Truly Cross-Platform Mobile Development Mike Bluestein 2018-06-21T12:45:08+02:00 2018-07-10T16:18:00+00:00 Flutter is an open-source, cross-platform mobile development framework from Google. It allows high-performance, beautiful applications to be built for iOS and Android from a single code base. It is also the development platform for Google’s upcoming Fuchsia operating system. Additionally, it is architected in a way that it can be brought to other platforms, via custom Flutter engine embedders. Why Flutter was Created And Why You Should Use It Cross-platform toolk...

Big news: Google Tag Manager Online Course is Coming Soon

21Jun

By Julius FedoroviciusNo Comments

Google Tag Manager

Big news: Google Tag Manager Online Course is Coming Soon

Lately, I haven’t been very active. Neither on analyticsmania.com, nor on GTM Facebook community. And there’s a reason for that: I’m been building my first Google Tag Manager online course! I’m so thrilled to show it to you guys, however, there’s still a lot of tweaking and polishing needed. Why did I decide to launch a GTM Course? Well, it feels like the time has come I’ve been intensively working on Analytics Mania, as my side project, for more than 1.5 years and the blog has significantly grown since then, so I think I’m ready to gather my knowledge, convert into a course and provide it to those who might want to learn GTM faster. Another reason is that other GTM courses (for beginners) which I’ve seen are either way too long (with unnecessarily too long chapters and intros/pauses),...

20Jun

By Chris CoyierNo Comments

CSS Tricks

What is SVG good for?

Y'all probably wouldn't be surprised if I told you it's pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I'm a fan of just inlining those suckers, particularly when they are pretty simple. But what else? Logos is a classic example! A lot of people dip their toes in this way. You don't have to inline the SVG if you don't want. It could be an <img> or background-image as well. These are really simple things though. At it's heart, SVG is simply a vector-based image format capable of just about anything. Way higher up the complexity scale, Bustle creates incredibly cool flowcharts using SVG. Try clicking around those flowcharts and seeing all the wonderful animation. SVG is very flexibly scalable. In that example above, part of what ...

20Jun

By Chris CoyierNo Comments

CSS Tricks

UTC is Enough for Everyone, Right?

A good candidate for the Blog Post of the Year from Zach Holman. I think Eric Portis' "w descriptors and sizes: Under the hood" is up there too, but perhaps even nerdier. Ooooh, also Frank Chimero's "The Good Room" is up there. But I digress. Zach's article is as educational as it is funny. But yeah, this UTC initialism doesn’t make any sense. Let’s dig into this a little more. So you’ve got a bunch of scientist types around 1960 who are like, hey, time is all screwy we should totes make a standard. And some of them spoke English, and some of them spoke French, which, of course, is the cause of so much conflict over so many generations. (In hindsight, maybe we should have split all those troublemakers up from the start.) The English-speaking folk were like yo, this definitely sounds like...

PHP-level Performance Optimization with Blackfire

20Jun

By Bruno SkvorcNo Comments

PHP

PHP-level Performance Optimization with Blackfire

Throughout the past few months, we've introduced Blackfire and ways in which it can be used to detect application performance bottlenecks. In this post, we'll apply it to our freshly started project to try and find the low-points and low-hanging fruit which we can pick to improve our app's performance. If you're using Homestead Improved (and you should be), Blackfire is already installed. Blackfire should only ever be installed in development, not in production, so it's fine to only have it there. Note: Blackfire can be installed in production, as it doesn't really trigger for users unless they manually initiate it with the installed Blackfire extension. However, it's worth noting that defining profile triggers on certain actions or users that don't need the extension will incur a performa...

20Jun

By Luis ManuelNo Comments

Web Tricks

Building a Fancy Countdown Timer with MomentumSlider.js

Nowadays there are many Javascript libraries to make it easy the task of adding sliders to a website. Most have a host of features, to adapt the slider to the particular needs of each case. However, despite having so many functionalities, sometimes the sliders lack features that would result in a much better user experience. In the case of sliders that implemented the drag and drop functionality, it is hard to see how almost none (not to be absolute) implements the ability to continue the movement that the user has started, adding momentum and deceleration as necessary. In this tutorial we will introduce a new library, specifically to develop sliders with momentum in a simple way. Also we will create a fancy countdown timer, using this excellent design by Oleg Frolov as inspiration: The f...

Centering: The Newest Coolest Way vs. The Oldest Coolest Way

20Jun

By Chris CoyierNo Comments

CSS Tricks

Centering: The Newest Coolest Way vs. The Oldest Coolest Way

This isn't a comprehensive guide to centering things. We have that! This is just a little observation about old and new. One of the trickier things related to centering in CSS is when you need to center both vertically and horizontally and you don't know the width or height of what you are centering. Vertical centering being the extra tricky of the two. Believe it or not, there was a way to do that even in IE 8. (more…)

20Jun

By No Comments

Web Tricks

Don’t Use The Placeholder Attribute

Don’t Use The Placeholder AttributeDon’t Use The Placeholder Attribute Eric Bailey 2018-06-20T13:45:26+02:00 2018-06-20T16:37:38+00:00 Introduced as part of the HTML5 specification, the placeholder attribute “represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.” This seemingly straightforward attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Hopefully, I can convince you to stop using it. Technically Correct Inputs are the gates through which nearly all e-commerce...

20Jun

By SergiuHKRNo Comments

Web Tricks

Turbocharge your DevOps workflow by incorporating databases changes

Accelerate DevOps Momentum by Incorporating Database Changes Surveys indicate you're probably under serious pressure to deploy new releases and application changes at a rapid pace. Many organizations like yours have adopted or are planning to implement DevOps within the next year. But when application updates require Oracle database changes, the DevOps pipeline screeches to a halt. The traditional Oracle database change management process creates a major bottleneck in the agile DevOps workflow. It's time for a better approach. Database, get ready to join the DevOps party! How can you make your database development more agile and responsive to changes? What if you could bring database development into the DevOps process via Continuous Database Integration? Imagine if you could: Ensure all t...

19Jun

By Zoran AntolovicNo Comments

PHP

Building an Image Gallery Blog with Symfony Flex: Data Testing

In the previous article, we demonstrated how to set up a Symfony project from scratch with Flex, and how to create a simple set of fixtures and get the project up and running. The next step on our journey is to populate the database with a somewhat realistic amount of data to test application performance. Note: if you did the “Getting started with the app” step in the previous post, you've already followed the steps outlined in this post. If that's the case, use this post as an explainer on how it was done. As a bonus, we'll demonstrate how to set up a simple PHPUnit test suite with basic smoke tests. More Fake Data Once your entities are polished, and you've had your "That's it! I'm done!" moment, it's a perfect time to create a more significant dataset that can be used for further testin...

Don’t just copy the @font-face out of Google Fonts URLs

19Jun

By Chris CoyierNo Comments

CSS Tricks

Don’t just copy the @font-face out of Google Fonts URLs

I don't think this is an epidemic or anything, but I've seen it done a few times and even advocated for. This is what I mean... You go to Google Fonts and pick a font like Open Sans, and it gives you either a <link> or an @import with a URL there in which to ready this font for usage on your site. You can take a peek in there and see what it returns... It's just some @font-face declarations, of course! Now your performance-minded brain kicks off. Wait. So, I make one HTTP request for this stylesheet, and then it makes more HTTP requests for those woff2 files it's linking up. Screw the middle man here, why not just copy those @font-face blocks right out of here and use them. You can! But! The issue is that Google does fancy Google things here and the contents of that original styles...