Tag Archives: css

Jekyll For WordPress Developers

Jekyll is gaining popularity as a lightweight alternative to WordPress. It often gets pigeonholed as a tool developers use to build their personal blog. That’s just the tip of the iceberg — it’s capable of so much more!

Jekyll For WordPress Developers

In this article, we’ll take on the role of a web developer building a website for a fictional law firm. WordPress is an obvious choice for a website like this, but is it the only tool we should consider? Let’s look at a completely different way of building a website, using Jekyll.

The post Jekyll For WordPress Developers appeared first on Smashing Magazine.

Visit link:  

Jekyll For WordPress Developers

It’s Time To Start Using CSS Custom Properties

Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors is that they enable you to use variables. This helps you to avoid copying and pasting code, and it simplifies development and refactoring.

It's Time To Start Using CSS Custom Properties

We use preprocessors to store colors, font preferences, layout details — mostly everything we use in CSS. But preprocessor variables have some limitations.

The post It’s Time To Start Using CSS Custom Properties appeared first on Smashing Magazine.

This article is from:

It’s Time To Start Using CSS Custom Properties

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride

What a busy week! To stay on top of things, let’s review what happened in the web development world the last few days — from browser vendors pushing new updates and building new JavaScript guidelines and security standards to why we as web professionals need to review our professional pride. How can we properly revoke certificates in browsers, for example? And how can we build accessibility into a style guide? Let’s take a look.

Web Development Reading List 176

Safari 10.1 was announced a while ago already, and this week it finally came to Macs and iOS devices around the world. The new Safari version ships CSS Grid Layouts, fetch(), IndexedDB2.0, Custom Elements, Form Validation, Media Capture, and much more.

The post Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride appeared first on Smashing Magazine.

Original link:  

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride

How to Setup Google AMP Webpages with Google Analytics Tracking

Google Amp and Analytics

If you have been following Google’s changes recently, you may have noticed that they became obsessed with mobile web. And there are a couple of strong reasons to support that. According to Search Engine Land, Google has officially confirmed that mobile search surpassed desktop back in 2015. Moreover, in October 2016, Google announced mobile-first indexing which focuses on prioritizing the mobile version of a website’s content over the desktop version when assigning search rankings. This obsession led to the introduction of Accelerated Mobile Pages (also known as AMP) which are primarily designed to provide the mobile user with an immersive,…

The post How to Setup Google AMP Webpages with Google Analytics Tracking appeared first on The Daily Egg.

View original – 

How to Setup Google AMP Webpages with Google Analytics Tracking

An Introduction To Building And Sending HTML Email For Web Developers

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

An Introduction To Building And Sending HTML Email For Web Developers

Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email.

The post An Introduction To Building And Sending HTML Email For Web Developers appeared first on Smashing Magazine.

Excerpt from – 

An Introduction To Building And Sending HTML Email For Web Developers

GPU Animation: Doing It Right

Most people now know that modern web browsers use the GPU to render parts of web pages, especially ones with animation. For example, a CSS animation using the transform property looks much smoother than one using the left and top properties. But if you ask, “How do I get smooth animation from the GPU?” in most cases, you’ll hear something like, “Use transform: translateZ(0) or will-change: transform.”

gpu-animation-done-right

These properties have become something like how we used zoom: 1 for Internet Explorer 6 (if you catch my drift) in terms of preparing animation for the GPU — or compositing, as browser vendors like to call it. But sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artifacts or even crashes the browser. Why does this happen? How do we fix it? Let’s try to understand.

The post GPU Animation: Doing It Right appeared first on Smashing Magazine.

Follow this link:  

GPU Animation: Doing It Right

Web Development Reading List #160: Real Stories About HTTP/2, Cascading Style Sheets, And Code Of Shame

We have great new technology available to enhance our websites. But while theoretical articles explain well what the technologies do, we often struggle to find real use cases or details on how things worked out in actual projects.

Web Development Reading List #160

This week I stumbled across a couple of great posts that share exactly these precious real-life insights: stories about HTTP/2 implementation, experiences from using the Cascade of CSS in large-scale projects, and insights into employing Service Worker and BackgroundSync to build solid forms.

The post Web Development Reading List #160: Real Stories About HTTP/2, Cascading Style Sheets, And Code Of Shame appeared first on Smashing Magazine.

Original post:

Web Development Reading List #160: Real Stories About HTTP/2, Cascading Style Sheets, And Code Of Shame

Web Development Reading List #154: Yarn, Deep-Fried Data, And A Guide To Stateful Components

With new frameworks and libraries emerging, the tools we have at hand are constantly changing. But it’s not only our toolkit but also the way we write code that constantly evolves — new CSS conventions are developed all the time and the best practices to write JavaScript change at least every year.

A cat in a rocket — the mascot of Yarn

But then again, we have to remind ourselves that we shouldn’t immediately jump to a new tool just because it’s available, to not rewrite the whole code of a project just because conventions have changed. No project will stop working because you’re using OOCSS instead of ITCSS or Backbone.js instead of React.js. If the project is an ongoing process and will be developed and maintained for another few years, you should evaluate to change tools from time to time, of course. But take your time. Better evaluate first, then reconsider, before you immediately jump on a train from which you don’t know where it’s heading.

The post Web Development Reading List #154: Yarn, Deep-Fried Data, And A Guide To Stateful Components appeared first on Smashing Magazine.

Visit site:  

Web Development Reading List #154: Yarn, Deep-Fried Data, And A Guide To Stateful Components

Web Development Reading List #153: Slow JavaScript, A Universal Typeface, And Healthy Work Environments

While I was away on vacation, the web development community stayed consistent, and since I’ve been back, the same well-known, long-running discussions about JavaScript, frameworks, and progressive enhancement are full on again.

Noto font

But on the other hand, we also see great new solutions for CSS, simple but efficient JavaScript libraries, and brave people sharing their personal stories from which we all can learn a lot.

The post Web Development Reading List #153: Slow JavaScript, A Universal Typeface, And Healthy Work Environments appeared first on Smashing Magazine.

Source:  

Web Development Reading List #153: Slow JavaScript, A Universal Typeface, And Healthy Work Environments

Building Social: A Case Study On Progressive Enhancement

We talk a lot about progressive enhancement and how it improves backwards compatibility. But how straightforward is it to apply progressive enhancement concepts to a real-life project? When designing a rich interactive experience, it can be difficult to determine what can be implemented purely using HTML and CSS and what absolutely requires JavaScript.

Building Social: A Case Study On Progressive Enhancement

Through this case study on redesigning the Building Social website, we’ll share some simple yet often overlooked front-end techniques that defer the use of JavaScript as much as possible, while providing some neat JavaScript enhancements, too.

The post Building Social: A Case Study On Progressive Enhancement appeared first on Smashing Magazine.

Visit source:  

Building Social: A Case Study On Progressive Enhancement