Post pobrano z: Remote controled videogame / Daddy (pas) cool!
 |
 |
| THE ORIGINAL? Schneider Electric TV Commercial – 2014 “It’s never been easier to remote control your home” Source : Coloribus Agency : Being Paris (France) |
LESS ORIGINAL Bouygues FlexHome TV Commercial – 2018 “Whether at home or away, I can drive my home with one finger. Source : YouTube Agency : Gyro Paris (France) |
Post pobrano z: Superhero of plagiarism / Transfusion d’idée pub?
 |
 |
| THE ORIGINAL? Hellenic Association of blood donors – 2013 “You can be someone’s superhero” Source : Coloribus Agency : JWT Athens (Greece) |
LESS ORIGINAL Blood donation appeal – 2018 “we can all become a superhero” Source : Montélimar City Website Agency : Ville de Montélimar (France) |
Post pobrano z: 4 Ways to Improve Quality Assurance
A lot of people tend to think of quality assurance and quality control to be the same but they are not. They may be used interchangeably but there’s a vast difference between the two.
Quality assurance is more inclined towards looking at how processes are performed and products standards are met, while quality control is about inspecting how the process is going through. For a business to run smoothly, both factors need to be paid attention to.
Fooling around by Jippen Jooste
Quality assurance is necessary to ensure that products and services are made and delivered at their best. It helps in keeping existing customers loyal for a long time. Moreover, it helps improve workflow, eliminate mistakes, and more importantly, ensure that only quality products reach the market. This is very important because a business can take a serious hit if it produces poor quality products as such a move can affect its brand and cause it to fail.
Quality assurance is often done with software to figure out weaknesses in the quality of products. These weaknesses are then eliminated by adapting the preventive measures.
In short, quality assurance is the tool used to assure that the quality of products is highly maintained. Businesses need to do this to be able to stay ahead of the pack.
Moreover, they also need to Protect Your Data, continue to come up with newer and better products at affordable rates to ensure that they grow. Now without much ado, let’s have a look at four ways to improve quality assurance:
It’s not smart to let teams work on their own without any monitoring. There’s a window for error and people working in the quality assurance departments need to understand that. Regular performance checks on employees and products being manufactured should be conducted. It helps to figure out errors and mistakes if there are any.
Early performance inspections will help give you enough time to correct errors and mistakes before the final stage of manufacturing is completed. Waiting for the last moment will cost more money, more time and will even result in a waste of resources and efforts.
The best way to improve quality assurance is to take customer complaints seriously. No business can shine and thrive if they keep on disappointing customers with the products they sell or the services they offer. The trick lies in conducting customer surveys and learning about the areas where you can improve. For example, most customers these days want to know how businesses protect data and apps. This is important with data breaches becoming a common occurrence.
If your customers appear to be concerned about this factor, you can educate them about how you ensure the safety of their data to satisfy them. Customer feedback can be taken in a variety of ways such as online surveys, walk-in forms etc.
Many businesses wait until all requirements are met to finally conduct a QA test to ensure everything is right. However, it is recommended to begin taking tests right from the initial stages so that problems can be found and corrected in the beginning.
The best part of conducting tests, in the beginning, is that it will reduce cost on a huge scale because you won’t be dealing with large-scale problems at the end.
Crunching by William Iven
There are many ways to improve quality assurance and automating processes where applicable is one of them. This is done by using a quality management software that monitors all processes.
There are many benefits of doing so. It does not only help you save time and money, it also improves customer loyalty as the use of such tools improve overall quality. QA can differ for different businesses but the end-goal remains the same.
Featured image by Jefferson Santos
Post pobrano z: Why it is Fundamental for Businesses to be Creative with Apps in 2018
The business landscape is a rapidly changing one, a fact that rings especially true when it comes to the manner in which people communicate and expect to be able to access the offerings of big companies.
In the past, companies in sectors like retail, gambling, and even travel, had to adapt to ensure their customers were able to make use of visually appealing websites that were also easy to navigate and frustration-free from start to finish. The aim was to ensure that customers felt they were getting a great customer experience online, in precisely the same manner as they would expect solid customer service in physical stores. Nowadays though, especially in the EU following the introduction of GDPR (which has impacted upon apps as well as websites), it is proving difficult to retain loyal customers through a website presence alone.
Circles Photo by Ashley Kirk
Indeed, with sites as huge as MSN having failed in the past before seismic events like GDPR to keep up with the times, we could start to see a similar experience in the near future if businesses fail to realize the importance of having a creative and engaging app, something that has the potential to keep customers loyal to a brand.
The buzz surrounding apps is perhaps not quite as noisy as it was at the height of their publicity back in 2016, especially as growth in using them has slowed slightly, but there is no denying the fact that they are still a vital element for many businesses. There may well be millions (perhaps even tens of millions) of apps that are redundant, but companies that push creativity as part of their app design process are keeping apps at the forefront of their marketing efforts.
This importance is particularly telling in crowded marketplaces like the iGaming world, where having the right app can be the difference between success and failure. In such crowded marketplaces, brands that fail to have an engaging app that allows players to game on the go and take advantage of timely offers can prove to be make or break. For companies like Lottoland, who spend time and money on making apps and websites that are geo-location specific, having this extra outlet that can allow consumers to stay up to date with their winnings wherever they are in the world without being near a computer means that they can attract loyal customers who end up wanting to stay with them for longer.
The iGaming world may be an example of an industry where apps can prove the difference between success and failure, but it isn’t the only one. In fact, a recent list of the top ten apps used includes none from the world of gaming; not even Pokemon Go or Candy Crush get a look in. What this shows is that the big tech players like Facebook, Snapchat, and even Google are all aware that the way people browse and use the internet has changed, meaning that a more personalized approach through an app is going to be a more positive experience for a consumer than a blanket approach on a mobile site.
Photo by Christian Wiediger
With this in mind, companies looking to get the fundamentals right in 2018 should make sure that they don’t just have an app created as a gesture, but one that really makes their customers want to download and use it every day.
Featured image by Rami Al-zayat
Post pobrano z: 18 Astonishing Examples of Accounting Print Design
Print marketing material can set the tone for your business. For accounting, you want to make sure you give off a professional vibe, but still stand out from the competition. This is the case from business cards to envelopes and everything in between-and managing all of that can be difficult.
Just because you’re an accountant doesn’t mean your design needs to be full of numbers and math symbols. Playing with various colors and imprint methods can do the trick. Still, need more help? Check out these 18 awesome examples to get you started on your design.
Post pobrano z: Is Interactive Email the Future of Inboxes?
The interaction between your brand and its customer is the lifeblood of any business. Without setting up proper channels to bridge the gap between you and your audience, you may as well kiss your business goodbye.
Keeping an open line of communication is vital to the success of your online business. This reason is precisely why email marketing is one of the best channels for this purpose. Not only can you build better relationships with your current subscribers but you can also convert them into loyal customers!
However, you need to keep up with the different email marketing trends so you can make the most out of your strategy. One of the more recent and interesting trends in this discipline is interactive email. It doubles down on the concept of what makes email great, thus helping you increase your engagement levels and conversion rate!
In this post, learn the value that interactive email brings to your business and concrete examples of interactive email at work to help you come up with ideas of your own for your business.
Email marketing is a very dynamic practice. With lots of innovation going around in this space, you need to be sharp, vigilant, and on your toes should you want to make the most out of your email campaigns.
The fact of the matter is that what works now in email marketing may not be as effective sooner than you think. Every company and brand is observing the latest practices on how to get more subscribers and increase their CTRs from their campaigns.
Therefore, the latest tactics and technology lose their novelty faster than you’d think because people are quick to adapt to them. If you’re not susceptible to change, then you might as well count yourself out from the game – email will always evolve to provide people with better ways to interact with your content.
Speaking of interaction, interactive email is somewhat of a game-changer in the strictest sense. This type of email has been around for years but not a lot of brands have implemented it as extensively. If there’s an innovation in email marketing that you need to capitalize on, then it’s got to be interactive email.
If you’re not familiar with interactive email, then think of the usual emails that you receive from brands. There are good reasons why you subscribe and remain subscribed to their email lists such as persuasive copy, clear message, and others. However, wouldn’t it be nice if the email looks just as great as its content?
There’s nothing wrong with how brands design their emails, but there’s only so much you can do with it. What if there’s an image carousel or animated images like a GIF in the email? With a host of other potential elements you can add, you can create more
compelling emails that you can test and benchmark to help you engage and interact with your subscribers even more!
With interactive email, you don’t have to imagine. You can design your emails like you would a website. You can add menu hamburger menus, videos, and even payment gateways in your emails. And those are just some of the possible elements you can add!
Instead of telling you how to use interactive email for your business, it’s better to just show you! Below are examples of how companies used interactive email to great effect:
Email marketing is always on the cusp of the future and interactive email is proof of that claim. With the technological advancements from companies like Campaign Monitor, the ability to create engaging and interactive messages is now upon us. There’s no need to send static, text-based email message now that you have a more compelling way to display your content to people via email.
It’s up to you to adapt with the times and include interactive emails in your strategy before it’s too late. Hopefully, the tips and examples above should have convinced you to take this route now.
Post pobrano z: 12 UX Design Tips For Your Website
Imagine you get a piece of white paper on one hand and on the other you get all the rainbow colors in a pallet. Now you can start playing… This is how I feel when I am designing a website from scratch, when I can play with layouts and colors in the website builder to create my website masterpiece.
But, at the same time, I remind myself that the creative part of the process needs to include my customers. The way it should be done is by thinking about their experiences in the buying process of a product or service, or just when reading my blog.
In this blog post, I will help you understand what matters the most in UX (User Experience). And at the end, the answer to all the following questions will be yes!
Let’s start:
How to keep improving?
Conclusion
When you start by thinking about your main objective for the website, you are on the right path. Then, it’s just a matter of putting your customers in the center of everything and build the website around them. In the end, they are the ones giving you the money, visibility or whatever you are getting from your website/business.
The key to succeeding is in considering all the key aspects. Think about your logo, general appearance and try to maintain your fonts consistent with your color schemes. Step by step you can build and represent your brand identity. With the attention to use blank spaces wisely, and providing a solid navigation bar and contact channel, it will be easy to excel in user experience.
Now that you master the magic of user experience, it’s time to create a website!
Post pobrano z: 9 Top Invoicing and Time Management Apps You Need
Physicists can’t explain what time is. No one else can either. All we know is that there are situations in which we can’t get enough of it. When it isn’t used wisely, bad things can happen.
Still, we can take time, make time, pass the time, and track time; and whatever time may be made of, it can be used wisely.
We can schedule our time using a calendar app, and track it using a time-tracking app. There are numerous invoicing apps, expense tracking apps and project management apps. There are also other tools that make it easier for us to use time wisely.
The invoicing/time tracking app market can be bewildering. There are so many choices, that it can be difficult and time-consuming to find the best of the best. The good news is, we’ve done that for you with the following selections.
FreshBooks is an accounting app that is so simple to use that it’s commonly referred to as ridiculously easy. There’s virtually no learning curve to FreshBooks, so creating and sending your first invoice only takes a few seconds. Tracking time, managing expenses, adding clients and viewing financial reports are just as easy. FreshBooks allows you to make the best use of your business hours, so you can grow your business instead of just taking care of time-consuming tasks.
FreshBooks is the perfect solution for service-based businesses, but users range from freelancers to start-ups to small enterprises. The reason behind such broad use is the breadth of useful features that make users so much more productive.
You can use the proposal feature to create a project outline, scope, and timeline in an estimate/proposal format that can then be sent directly to a client.
Expense tracking is one of the most popular features in Freshbooks. You can literally take photos of receipts with your phone and add them directly to clients and invoices within the Freshbooks mobile app. Then, once you’re ready, you can create and send invoices bearing your logo and brand colors. And since FreshBooks takes care of your time-tracking needs, you can easily illustrate what you did and when you did it, right on the invoice.
Try FreshBooks free for 30 days.
Jibble.io is a cloud-based, team time and attendance tracking app featuring a basic plan that is free for an unlimited number of users. The free plan offers up to 2 months of access to timesheets stored in the cloud, unlimited access to its many features, priority support, and unlimited usage of its activity tracking and collaboration powerups.
With Jibble, it’s always a simple task to drill down to see what activities have been worked on. Time sheets can then be generated, exported, and downloaded in spreadsheet formats to support accounting activities. Jibble also enables team leaders to generate personal timesheets for staff member use and input.
The statistics and alert feature calculates average daily and weekly hours worked by teams and by team members, including clock in and out times for the latter. Alerts are issued when anomalies are detected in the recorded stats.
The thinking behind Invoice Plane was to create a self-hosting billing cycle management app that targeted the self-employed workforce, small to mid-size businesses, and freelancers. The result was a reliable, easy to use invoicing and client management system that to date can claim more than 100,000 downloads in more than 190 countries.
Invoice Plane is an open source software tool, and it’s free. This app enables you to manage quotes, invoices, payments, and client relationships. It can be customized to fit your billing process needs and workflow, and it provides access to PayPal, Stripe, Bitcoin, and 22 other payment gateways.
Although you can download Invoice Plane today for free, the authors suggest you view their demo first. You can then try it out on your server or use one of the hosting solutions that are offered.
TimeCamp tracks both task time and attendance. It is free to use for busy freelancers, and you can access TimeCamp with a browser extension or on any device by using a mobile app.
TimeCamp integrates with Slack, Evernote, Trello, Basecamp and more. It will keep your billing cycle up to date, create invoices, and integrates seamlessly with multiple project management software systems.
AND CO is a simple-to-use app featuring a beautiful UI that was designed with studios and freelancers in mind. ADD CO is completely free. No trial is necessary, and you can keep your credit card in your purse or wallet.
AND CO is accessible on the web, Android, and iOS. You can run your entire business with this invoicing, payments, time tracking, expense tracking, and project management app. It’s used by more than 100,000 businesses around the globe.
Scoro provides a comprehensive solution to your business management needs. Track your business’s or team’s performance in real time on Scoro’s modern, attractive dashboard.
You can use this app to track both actual and billable hours, transfer hours to an invoice, keep up to date with everyone’s schedule on the shared team calendar, and get a one-page overview of any project on demand. You can also track time spent on meetings, planning sessions, etc.
Minterapp is a time tracking tool for small business and startups. It monitors how much time a user spends on a task and converts that tracked time into an invoice with a single click. Invoices can be customized to fit a user’s brand, and a client can return payment via Stripe or PayPal.
Minterapp maintains a record of all invoices, whether they are still in draft, are pending, or have been paid.
This small business invoicing, billing, and reporting app seamlessly integrates with over a dozen payment gateways. As such, a Hiveage user can serve a worldwide clientele. Hiveage also assists in preparing detailed quotations for clients and manages recurring payments and subscriptions.
Different levels of staff access can be granted, and Hiveage can also be used to effectively manage multiple teams, projects, or businesses from a single login.
Invoice Ninja is a suite of apps freelancers can use for their project estimating, quoting, and invoicing activities. The suite also contains time tracking web and desk apps, Kanban boards, and a proposal template and proposal creation tool. Clients will benefit from having access to over 40 payment gateways.
This Invoice Ninja suite of apps is completely free.
Conclusion
Having reviewed this list of time tracking and invoicing apps, you’ve found one or two that can serve you well. Each of these can enable you to use your valuable time to the best advantage.
You will save time as well. The minutes you save every day from time tracking results are valuable. They can add up to many days saved during a year.
Any of these apps is a good investment, and the ROI on several will be immediate.
Post pobrano z: Combining the Powers of SEM and BIO for Improving CSS
CSS is easy, some might argue, but that „easiness” can cause messy code. This is especially true through power of preprocessors like Sass or Less where, if you aren’t careful, your CSS can become harder to deal with instead of easier. Sass? Harder? This Gist shows a great example of Sass nesting hell.
If your Sass code looks like that, you can definitely improve your code with SEM & BIO, a CSS technique I’ll introduce you to now!
In this article, I am going to use the code example below to explain how SEM and BIO works and how they can help enhance your CSS strategy.
See the Pen by thebabydino (@thebabydino) on CodePen.
Generally, SEM is concerned with high level CSS philosophy whereas BIO is an actual technique to help you write better CSS to achieve SEM. The main purpose of both SEM and BIO is to better handle the CSS specificity which is one of the most important concepts you should understand for CSS.
First of all, let’s talk about SEM.
SEM stands for:
Trying to achieve those three factors can definitely improve your CSS code and it helps you build your components much more solid.
Let’s talk more about each factor in detail.
A scalable (or reusable) component means that the same looking components should be used wherever you want without making any coding changes.
From the CodePen example above, the „Search” button in the header looks exactly same as the ‘Link’ button in the sidebar. When we compare the HTML markup,
<button> element<a role="button" ...> element…and even if the markup is different, the styles are identical by using the same classes: .c-btn and .c-btn--yellow.
The button styles are scalable and it allows you to add the same looking components anywhere you want as it won’t be polluted by its parents or siblings. This can save you from the big headache of not knowing why totally unrelated components are broken even if the changes are made on a different component from a totally different place.
An extensible component can easily provide additional features/functionalities without breaking itself or having to be written from scratch.
Let’s look at the CodePen example again.
See the Pen by iamryanyu (@iamryanyu) on CodePen.
The button in the header and in the main section look quite similar besides the 3D effect. In this case, instead of creating two different sets of buttons having totally different code bases, we could extend the plain button style by just adding the 3D effect to it.
It goes the same with the button in the footer. Even though the button has a different color and size, we could easily extend it by adding or removing new or different features.
Probably one of the biggest challenges for most front-enders is to understand CSS written by other people, or our past selves. We sometimes spend more time trying to understand the existing code than adding awesomely-written new code.
The issue usually comes from:
With SEM and BIO, we can definitely improve the code and save others (including ourselves!) from messy, unmaintainable code.
There are many great techniques out there to improve the way we write CSS, and from my experience, I found the following three techniques that make up the BIO acronym work very well together
A lot of developers/engineers already know those famous techniques but I would like to go through each of them and talk about the way I use those techniques.
BEM is very popular methodology and it has been helping us significantly improve the way we think about CSS and Sass/Less.
BEM stands for:
As the bad example above shows, we tend to overuse the power of Sass/Less and falling into nesting-hell. But with BEM, we start to have a very low CSS specificity by maintaining the styles in one (or two) levels of nesting.
If you’ve experienced any battles fighting higher CSS specificity, you will know how painful it is to come out a winner.
Going back to our example, the HTML markup looks like this:
<div class="o-grid">
<div class="o-grid__item o-grid__header">
...
</div>
<div class="o-grid__item o-grid__main">
...
</div>
<div class="o-grid__item o-grid__sidebar">
...
</div>
<div class="o-grid__item o-grid__footer">
...
</div>
</div>The example consists of:
.o-grid.o-grid__item, .o-grid__header, .o-grid__main, .o-grid__sidebar, .o-grid__footerBecause BEM provides a naming convention that stresses unique classes, we don’t have to go into deep nesting like:
.o-grid {
.o-grid__item {
...
}
}Instead, we can define the styles it with fewer levels:
.o-grid__item {
...
}This is the biggest merit of BEM; lowering the CSS specificity which improves the whole CSS coding efficiency and experience.
One issue I still see occasionally even with BEM is poor naming. If you don’t pay enough attention, you can wind up with a really long class nam like:
/* Yikes! */
.o-grid__item-search-button-text-svg-icon {
...
}When you create a class name, go with the core concept of BEM: your component is a block and all elements inside are individually attached to the block.
From our example again, I named .o-grid__form instead of .o-grid__item-form because the form itself is a separate component and doesn’t have to be tied with and be a child of o-grid__item.
Also, to more efficiently control styles, I have added another class name o-grid__header along with o-grid__item to extend the styles. Moreover, the button contains BEM-styled classes with the approach of OOCSS, which we’ll touch on next.
As we have already discussed, there are many great CSS methodologies and strategies helping us improve the way we write CSS. However, I see a lot of folks forcing themselves to decide on one methodology to use out of the bunch.
From my experience, combining methodologies can actually enhance their benefits by combining the best of multiple worlds. For example, I personally have found that BEM and OOCSS work very well together.
OOCSS stands for Object Oriented CSS and you can think of it working like Lego blocks:
OOCSS creates each individual part separately and then constructs them together in order to build components.
From our example, I have created buttons using the OOCSS naming convention:
.c-btn.c-btn--yellow.c-btn--blue.c-btn--3d.c-btn--largeTo render the yellow search button in our example header, we combine these classes:
.c-btn.c-btn--yellowIf we want to have the 3D button in the main section, we add in the 3D class, .c-btn--3d and call it a day.
And for the blue button in the footer, we can switch the yellow modifier to blue along with the large modifier. As you can see, the button is not depending on the header block giving us greater flexibility with how we use and repurpose components. And, by doing so, we can construct the buttons without impacting any other components or patterns while gaining the benefit of easily extending new presentational feature, like alternative colors and shapes.
Here example of a button collection created using OOCSS to create the variations:
See the Pen Modern Button Collection by Ryan Yu (@iamryanyu) on CodePen.
On top of BEM and OOCSS, with the help of ITCSS, we can further improve our CSS strategy. Let’s look at that method next.
ITCSS stands for Inverted Triangle CSS and it helps organize CSS by applying a structure that determines how specific to get with a specific component. Lubos Kmetko has written an excellent overview of ITCSS that is worth reading.
You can see how I have put ITCSS to use by splitting styles up by grouped levels of specificity in this Gist.
Based on that example, you can see how I named components by adding a namespace to the class. So, for example, a the „button” component is prefixed with a „c” (.c-button) to indicate the component status and prevent it from being mistaken for another item. By doing so, everyone working on the project knows the function of that specific class and how changing its properties might affect other areas.
Here’s a visual that illustrates all the ITCSS levels:
Let’s go through each section.
Settings are generally a collection of variables that do not generate CSS, but are applied to classes. Some examples include:
Tools also will not produce any CSS yet and are typically preprocessor functions that help write or extend properties on classes:
Vendors are third-party styles that are being used on a project. Think of things like reset.css, normalize.css, or even Foundation and Bootstrap.
The reason these styles are higher up in the structure is so we can override them if needed. As you may recall, if the same class is called twice, the cascade will render the properties of the second instance, assuming the properties are exactly the same:
.btn--large {
padding: 3em;
}
/* This one wins out */
.btn--large {
padding: 5em;
}Just for the side note, in Sass, you can use ~ to point to the node_modules folder so you are able to import style assets from the source rather than having to move it into your own directories.
@import '~modern-normalize/modern-normalize';Objects (namespace: o-) are used for design patterns, such as layouts, where items are being arranged rather than decorated. Object classes are used across all pages, so if you make any changes to the object classes, you should be very careful because any changes are going to affect each and every page throughout the website.
The most common object classes I use are:
.o-page: the most outer container which usually contains max-width: 100vw and overflow: hidden..o-main: the outer container for the main area..o-container: the outer container for components and it usually provides a fixed width..o-content: in case if any extra configuration is needed for the actual content area..o-grid: if a grid layout with different number of columns are required.Do you use any other object classes? If so, please share with me. 😃
Elements (namespace: e-) are the HTML native elements which we would not style based on the class names. For example, we should provide default styles to <a> element rather than .link class.
// Do this for the default link style
a {
text-decoration: none;
&:hover {
background-color: blue;
color: white;
}
}
// Don’t provide the default link style to a class
.link {
text-decoration: none;
&:hover {
background-color: blue;
color: white;
}
}It is because, especially in a CMS like WordPress, you wouldn’t want to add a class every single time you want to use a link in content. Hence, we provide a default style to the <a> element so without any class, the link will still have good-looking styles.
A component (namespace: c-) is a small feature that makes up a part of the website. Think buttons, accordions, sliders, modal dialogs, etc. Each component is fully functional by itself and does not rely on any other components. This fact should be considered when you name the component.
For example, the button in the main section from the example above shouldn’t be called .c-main-button because main scopes it inside the main section and limits the use of it in other places, like a sidebar. Something like .c-btn is much nicer because the button is no longer tied to any other specific sections of the page.
If you need any extra features, you can always extend properties with a BEM modifier (combining powers!) or use Scope, which is coming up in a bit.
A lot of developers/engineers use the terms component and pattern synonymously and that’s totally fine if you are more comfortable with that. It is just my preference to separate those two terms.
For a general rule of thumb, I think of a pattern (namespace: p-) as a combination of components but in a way that is not scaleable.
For example, I would consider the accordion as a component. It is scaleable and reusable on its own, meaning that it can be used in other parts of the website without making any changes even if the accordion would contain other components such as buttons.
On the other hand, the header, for example, would be a pattern because it is not scaleable (the header cannot be used in the content or sidebar area) and also contains other components such as buttons, accordions, menus, logos, search form etc.
Be warned; I only use the scope if it’s absolutely necessary. The purpose of the scope (namespace: s-) is to give us the highest specificity so we can overwrite any styles for a specific purpose.
Remember, If you find yourself using the scope class many times, you might be writing styles that are too specific and you should consider refactor your CSS structure.
Here is a simple example of the use of the scope class, .s-home.
.c-accordion {
.s-home & {
// Changing the background color specically on the homepage
background-color: tomato;
}
}As a side note, the above example could actually be refactored by providing a modifier to the accordion (e.g., .c-accordion--bg-tomato) instead of using the scope class. That would be a much more extensible way of writing and make the component more modular.
Sometimes you may want to make changes only for a certain style in a specific place. In that case, utility (namespace: u-) classes can help us update it without changing the whole CSS structure.
For example, the font-size of the accordion heading is set to 32px.
.c-accordion__heading {
font-size: rem(32);
}But if the font size is only different in the news section of your site and does not change anywhere else, then you might want to apply the utility class instead of setting higher specificity with the parent class or scope class.
<button aria-expanded="false" class="c-accordion__heading u-font-size--24" aria-controls="sect1" id="accordion1id" type="button">...</button>.u-font-size--24 {
font-size: rem(24) !important;
}Please note that we all know !important is BAD but I added !important to the value. It is because when we use the utility class, we are absolutely sure we want the specific style to be updated as we want. Also the utility class should overwrite any other styles, so having the !important actually works well here for the utility classes. That said, the utility classes should only play a role as a helper. It should never be used for structuring your CSS.
Like scope classes, if you are using too many utility classes, you should check with designer if the design can be more consistent across the site.
On top of the namespaces we discussed above, there are two more I often use:
is-: this indicates the state of the block or element. Most commonly used class is .is-active, like the active link in navigation.js-: this indicates that the specific element is bound to JavaScript events. For example, js-menu-click indicates that the element is bound to the click event.Finally making rules with .stylelint and .eslint can significantly improve the code quality.
In the frontend workflow, I don’t make it as a recommendation; I make it mandatory so that failing of the rules won’t get approved.
In this way, we can ensure that the coding quality stays at its best and provide better code to other developers, including your future self.
In this section, I’d like to discuss how we could use SEM and BIO. I have made a simple, practical example to get us started:
See the Pen by iamryanyu (@iamryanyu) on CodePen.
The main practice with the example is to build an accordion that can be used as:
What we’re achieving is a component that is:
To achieve SEM, BIO has been used including:
.c-accordion as a block and its children as elements, also used modifiers, e.g., .c-accordion--light and .c-accordion--darkclass="c-accordion__trigger p-sidebar-menu__button" which the pattern (p-) overwrites the component (c-) with no issues.class="c-accordion c-accordion--dark c-accordion--single" which creates a dark theme with opening a single panel only each time.I have used this approach for almost all of my projects including universities, government departments, commercial retailers, and many other websites. In each case, I have successfully delivered all of the projects to the clients (almost no issues during the client approval stage and delivered on time); this approach has worked for me very well so far and I think it could for you as well.
That being said, technologies always change (especially on the front end) and I am more than happy to hear and discuss any of your ideas/approaches/strategies that worked for you. Let me know in the comments!
The post Combining the Powers of SEM and BIO for Improving CSS appeared first on CSS-Tricks.
Post pobrano z: HSL() / HSLa() is great for programmatic color control
If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We’ve talked about it before but we can break it down a little more and do some interesting things with it.
You can hand-manipulate any of those four values and have a decent sense of what is going to happen. Change the hue to take a trip around the color wheel. Change the saturation to get deeper or more muted colors. Change the lightness to essentially mix in black or white.
You might have some mental chops with rgb(), knowing that rgb(255, 0, 0) is clearly red or rgb(0, 0, 0) is black, but manipulating those to get to a light purple or starting with a forest green and getting a little lighter isn’t exactly mental math. You might even be the clever sort who can identify color by Hex codes. Ask David DeSandro at a party sometime. Still, nothing nearly as intuitive as HSL.
Those of you on the cutting edge might recall the working draft of Color Level 4 with the color() function and more intuitive sub-functions. Or, you might get hot and heavy with Sass color functions or your own home brew thing. More power to ya!
See the Pen Sass Color Functions by Chris Coyier (@chriscoyier) on CodePen.
I really like HSL when playing with color in JavaScript. For example, say you want to generate some different red tones. You could randomize the H, S, and L tightly around some values:
See the Pen Random Reds by Chris Coyier (@chriscoyier) on CodePen.
Not long ago, I basically did the same thing but rotated the hue to animate this stargate:
See the Pen Sparklegate by Chris Coyier (@chriscoyier) on CodePen.
If you’re messing with color in JavaScript and want randomization to result in pleasing colors, give PleaseJS a spin.
Need a quick color picker? I put this one together ages ago and I quickly ported it over to CodePen:
See the Pen HSL Explorer by Chris Coyier (@chriscoyier) on CodePen.
There is also the HSL Color Picker and Mothereffering HSL if you want options.
See the Pen HSL by Graham Pyne (@gpyne) on CodePen.
Wanna learn more about color on the web in general? Don’t miss Sarah Drasner’s A Nerd’s Guide to Color on the Web. Lots of great goodies in there to up your understanding of working with color.
See the Pen HSL by Dan Wilson (@danwilson) on CodePen.
The post HSL() / HSLa() is great for programmatic color control appeared first on CSS-Tricks.