DEV Community: Arbaoui Mehdi

Front-end HTML/CSS Coding Challenges Tool

Arbaoui Mehdi — Tue, 26 Sep 2023 12:59:45 +0000

As a Frontend Engineer, I often navigated the complexities of HTML and CSS alongside my partner, a Backend Developer. We frequently discussed the common challenges many face in mastering these languages, noting a significant gap between theoretical knowledge and practical experience in writing effective and accessible code for real-world interfaces.

This led to the birth of divize.io, a concept born from our brainstorming. Unlike typical tutorials or guides, the platform we made is envisioned as a practical, interactive space for individuals to enhance their HTML and CSS skills by working on real-world user interfaces. During its development, we emphasized a structured learning path, ensuring users build interfaces from scratch while adhering to industry best practices. This approach guarantees a solid foundation and a profound understanding of HTML and CSS, moving beyond the theoretical learning offered elsewhere.

Now, let's delve into the main features of the tool:

Features

1 - Inspect and Highlight
2 - Timed Challenges
3 - Reset a Challenge
4 - Copy-Paste Prohibited
5 - Responsive Controls
6 - UI analyzer
7 - MDN Reference
8 - UI Matchup
9 - Emmet Support
10 - Advanced Mode
11 - Accessibility Steps

# 1 Inspect and Highlight

The UI Inspector is a convenient feature that allows users to interactively examine and dissect elements within a user interface preview by clicking on the dedicated button in the top bar. Easily toggled on and off, it provides valuable insights into the UI's structure and can be disabled for seamless text selection without any disruptions.

Inspect elements from the UI Preview

To enable the UI inspector, toggle the inspector button on the top bar. This feature allows you to inspect elements using your mouse directly from the user interface preview. It offers a clear understanding of how the UI is decomposed. If you prefer to disable the UI inspector, simply click the button again. This can be useful if you want to select text from the UI without interference from the inspector.

Inspect User Interface Elements from the UI itself

Inspect from the Tree Viewer

The tree viewer displays all elements of a user interface according to their parent, child, and sibling structure. By hovering over each element in the tree viewer, the corresponding element in the UI preview will be highlighted. This feature helps you visualize the UI's structure, enabling you to make informed decisions about semantic elements.

Inspect User Interface Elements from the Tree

# 2 Timed Challenges

The Deadline-Driven Scoring System is an engaging feature that fosters a sense of urgency and encourages efficient learning. By setting time-sensitive goals, it motivates you to tackle challenges more effectively, ultimately boosting your HTML and CSS skills in the process.

Goal time and how it affects the score

The new deadline feature provides a dynamic scoring system for each challenge:

Finish within the goal time: Earn your challenge score plus a bonus.
Finish after the goal time: Earn your challenge score, without the bonus.
Finish after the deadline: Earn less than the challenge score, without the bonus.
Don't finish the challenge: Receive no score.

Modal of the Finished Challenge in Time

This scoring system adds a competitive element to your learning experience, motivating you to improve your HTML and CSS skills under time constraints. As a result, you'll develop the ability to work efficiently under pressure, ultimately leading to an increase in your ranking on the leaderboard.

Challengers Leaderboard

# 3 Reset a Challenge

The Reset Feature enables you to restart challenges at any point, providing an opportunity to practice and refine your HTML and CSS skills more effectively. This versatile function caters to those who want to hone their abilities by attempting challenges multiple times or aiming for better scores.

How the Challenge Reset Feature Works

The reset feature can be used at any phase of a challenge:

During the HTML phase, if you haven't finished it yet.
After completing the HTML phase and moving to the CSS phase, if you haven't finished it yet.
After finishing both HTML and CSS phases, effectively completing the challenge.

To reset a challenge, simply click the reset button in the left sidebar. This will reset your progress, the deadline countdown, and your score, allowing you to start from the beginning with a clean slate.

Reset an HTML/CSS Challenge

Additionally, if you try to switch from Assisted Mode to Advanced Mode, you'll be prompted to reset the challenge.

Reasons to Reset a Challenge

Resetting a challenge can be beneficial for various reasons:

Practice a challenge multiple times to enhance your learning experience.
Aim for a better score by completing the challenge within the deadline.
Strive for a higher score by finishing the challenge in Advanced Mode.

# 4 Copy-Paste Prohibited

Divize Editor Copy-Paste Prohibited

The Editor's Copy-Paste Prevention Feature is designed to promote a hands-on learning experience by discouraging the act of copying and pasting code. This feature detects such actions, issues a warning, and necessitates a challenge reset to proceed, ultimately fostering better code-writing habits and a deeper understanding of HTML and CSS concepts.

How the Anti-Copy-Paste Feature Works

When using the Divize Editor, copying and pasting external code into it is not allowed. If a student attempts to do so, they'll receive a warning indicating that they have cheated, and they'll be required to reset the challenge. Failing to reset the challenge will result in a cheated label being assigned to it.

Cheating on a Challenge Public Profile Label

# 5 Responsive Controls

This feature enables you to adapt your user interfaces to various device sizes, such as mobile or tablet, in both portrait and landscape orientations. You can also adjust the resolution manually to test your CSS breakpoints.

How Responsive Controls Work

Using the responsive controls is simple and efficient:

Click the mobile or tablet button in the top bar to adapt the UI to the respective resolution in portrait orientation.
Click the mobile or tablet button again to switch the orientation to landscape.
Click the arrows button in the top bar to fit the UI to your browser's size.
Click the pencil button to reveal a dropdown where you can set your preferred width manually.
To adjust the width manually, drag the element on the right side of the UI, and it will adapt to the position where you stop dragging.

Adjust the Width of a Responsive Challenge

# 6 UI Analyzer

The Semantics Analyzer and CSS Properties Analyzer features provide guidance on appropriate semantic tags and CSS properties for UI elements, helping users expand their HTML/CSS knowledge and develop better user interfaces.

Enhancing Your Learning Experience with the UIs Code Analyzer Features

The Semantics Analyzer and CSS Properties Analyzer features offer several benefits for an effective learning experience:

Understand the correct semantic tags to use for specific UI elements, such as breadcrumbs using <nav>, <ol>, <li> and <a>.
Access a comprehensive list of HTML tags and their references for easy reference.
Receive a summary of the HTML tags and CSS properties required to complete a challenge successfully.
Discover new HTML tags and CSS property implementations to expand your HTML/CSS knowledge.

How to Use the Semantics and CSS Properties Analyzer Features

After choosing a challenge, you'll find a button with the corresponding language logo near the editor. In the HTML phase, click on the HTML logo button next to the instructions to display a list of tags for the challenge. Select the semantically correct tags for each element, and click on individual tags to view a brief definition and a reference link for further information.

User Interface Challenge HTML Tags

During the CSS phase, click on the CSS logo button to see a list of the required CSS properties to complete the challenge. Each property is clickable, displaying its definition and a link to its reference and implementation details.

User Interface Challenge CSS Properties

# 7 MDN Reference

The UI Analysis feature goal is to enhance learning by displaying a list of HTML tags and CSS properties for each challenge. Integrated with the MDN reference, it offers direct access to implementation details, facilitating a better understanding and application of HTML and CSS. Furthermore, the Divize MDN Guide pages serve as a centralized resource, allowing you to conveniently search and find references to HTML tags and CSS properties all in one location.

How to Use the UI Analysis Feature

Locate the HTML logo or CSS logo button next to the instructions tab.
Click on the button to reveal a list of HTML tags or CSS properties.
Choose the HTML tag or CSS property you're interested in, which will open a short description containing a reference link.

HTML MDN Reference

Click on the reference link to visit its reference page with detailed implementation information from MDN.

CSS MDN Reference

# 8 UI Matchup

The UI Comparison Feature allows you to visually compare your progress with the provided preview while tackling User Interface challenges, ensuring your work aligns with the intended design. This helpful addition assists you in achieving accurate and effective results.

How the UI Comparison Feature Works

The UI comparison feature is enabled by default and can be controlled using a toggle on the topbar. Here's how to use it:

Start a new UI Challenge.
Ensure the UI comparison feature is enabled by checking the toggle on the topbar.
To compare your work with the preview, simply drag the "mirror" slider from left to right. This will reveal the preview of the intended design.
Drag the slider from right to left to view your work and assess your progress.
If you prefer to disable the UI comparison feature, simply toggle it off from the topbar.

Compare the HTML/CSS Challenge Preview with the Student Result

# 9 Code Editor Emmet Support

The Emmet integration is a powerful feature that allows you to create HTML and CSS code more efficiently using short expressions. This enhancement promotes a DRY (Don't Repeat Yourself) approach and reduces repetition, resulting in an improved user experience.

How Does Emmet Work in the Divize Editor?

Emmet is a powerful and widely-used toolkit that allows developers to generate and manipulate HTML code with a variety of expressions. These expressions can be used to perform a range of operations on HTML code, including creating new elements, nesting them within other elements, adding attributes to elements, and more:

{} adding text
[] adding attribute
> child element
^ up one element
* multiplication
$ automatic numbering
+ sibling
() grouping
. add class
# add ID

With these expressions, you can quickly generate HTML structures and improve your workflow while progressing through challenges.

A Simple Example of Using Emmet in our Editor

Consider this Emmet code, which generates a basic HTML structure with a main section, a header, a section for the main content, and a footer with a span tag.

main.container>h1{Header}+section>p{Main}+footer>span

The generated HTML code will look like this:

<main class="container">
  <h1>Header</h1>
  <section>
    <p>Main</p>
    <footer>
      <span></span>
    </footer>
  </section>
</main>

With Emmet integrated into Divize Editor, you can significantly speed up your coding process while reducing repetition.

# 10 Advanced Mode Challenges

The Advanced Mode feature offers an increased challenge for learners seeking to enhance their skills. Unlike Assisted Mode, where CSS properties are provided to be filled in, Advanced Mode requires users to independently interpret CSS instructions and write both the corresponding properties and values, promoting a deeper understanding and mastery.

Key Elements of the Advanced Mode

No phasing: Both HTML and CSS editors are available simultaneously, and you'll have access to instructions for both.

Advanced Editor Mode Elements

Higher score potential: Finishing a challenge in time in Advanced Mode will result in a higher score compared to completing it in Assisted Mode.

How to Use Advanced Mode

To switch to Advanced Mode, click on the Advanced Mode tab in the top bar. You will be prompted to reset the challenge because switching modes requires a fresh start. The countdown will restart, and any previously calculated scores for the challenge will be reset.

Enable Divize Advanced Editor Mode

# 11 Accessibility Steps

In our commitment to promoting writing more accessible HTML structures, we've introduced a feature that includes a comprehensive list of accessibility best practices. This guide aids in crafting an accessibility-friendly HTML structure, ensuring that websites and web applications are usable by everyone, including individuals with disabilities.

Accessibility HTML Tests

Conclusion

In conclusion, Divize.io is a practical tool for enhancing HTML and CSS skills, offering interactive challenges and real-world scenarios. It provides a straightforward approach to learning, with a focus on understanding and applying coding skills effectively.

Ready for the first challenge? Let's center a <div>

Video Explainer

A Tool for Learning to Classify CSS Selectors and Combinators

Arbaoui Mehdi — Sun, 06 Aug 2023 09:41:57 +0000

If you find yourself constantly struggling to categorize the numerous types of CSS selectors and combinators. I've often found myself forgetting the different classifications, which led me to create selectors.info - a tool designed to systematically organize and visualize CSS selectors and combinators by their respective types. This tool serves not only as a practical reference but also as a learning guide.

Write, Parse, and Classify

Write your list of selectors and combinators, and the tool will parse and categorize them, as an example on how the HTML below will be classified accordingly:

.navigation > li:last-child a

Will be categorised like:

Selectors
- Class: .navigation
- Type: li and a
- Pseudo-Class: :last-child
Combinators
- Child: >
- Descendant: space

Easy Navigation

Once your CSS selectors are parsed and divided into categories and subcategories (e.g., Selectors as a Category and Pseudo-Class as a SubCategory), you can easily highlight each type within the code by clicking on a Subcategory.

Concise Descriptions for Every Classification

For each selector or combinator type, it provides a brief yet informative summary, offering an insightful glimpse into its implementation.

Tool Features

Classify Selectors and Combinators: Organize and visualize their types.
Understand Selector Types: Includes Type Selectors, Classes, IDs, Attributes, Pseudo Classes, and Pseudo Elements.
Explore Attribute Types: Clear definitions for specific matchers like Prefix Matcher ^=, Suffix $=, etc.
Combinators Type Insight: Breakdown of combinators types like Descendant, Child, Next Sibling.
Interactive Editor: Immediate classification by Selectors, Combinators, and Attributes Types, with highlighting.

Conclusion

selectors.info is a practical tool that visually categorizes selectors and combinators. It is designed to assist anyone looking to understand and organize CSS selectors and combinators better

A tool to Make CSS Box Shadows Effortlessly

Arbaoui Mehdi — Wed, 28 Jun 2023 17:29:00 +0000

We've made boxshadows.xyz aimed at easing the process of creating and managing the box-shadow property in CSS. It's designed to facilitate the creation of intricate shadow effects and accelerate design workflows with real-time previews, catering to both beginners and experienced developers alike.

The tool provides comprehensive control over various parameters of the box-shadow including the ability to add multiple shadows, control shadow types, adjust offsets, set blur and spread, and choose shadow colors.

Key Features of Our box-shadow Tool

Add Multiple Box Shadows

To start with, our tool is capable of handling multiple box shadows. This is particularly handy when you want to create a more elaborate and layered shadow effect. You can easily add as many shadows as you want and create a multi-dimensional visual appeal.

Remove or Hide a Selected Shadow

The tool also offers flexibility in removing or hiding a shadow that you've previously added. This can be useful in experimenting with different shadow effects, or when you want to compare the look and feel of your design with and without a specific shadow.

Toggle the Type of Box Shadow

Whether you want to create an inset or outset box shadow, our tool gives you full control over this aspect. Just a simple toggle switch can change the type of shadow, allowing you to instantly visualize the effect on your design.

Independent x and y Offset Control

The x-offset and y-offset of the shadow can be controlled separately via an input text control. Alternatively, you can use a 2D-Slider to simultaneously update both offsets. This allows for a greater degree of precision and customization of your shadow effects.

Control Blur and Spread

The blur and spread of the shadow can be manually set from an input text or adjusted using a range slider for easier control. This feature allows you to precisely define how far and how fuzzy the shadow extends from the box.

Shadow Color

Our tool includes a color picker to set the box shadow color. This enables you to match the shadow color with your overall design theme or to create contrasting effects for more visual interest.

Control Over the Preview Canvas

Beyond just the box-shadow, the tool provides comprehensive control over the canvas of the preview as well. You can easily customize the border-radius, width, height, border-color, and background-color of the element that holds the shadows. You can also change the background-color of the canvas wrapping the element.

Real-Time Update of Preview, Code, and Description

Every modification you make using the controls is immediately reflected in the preview, the code, and the description. This real-time update feature helps you see the impact of your changes instantly, making it easier and faster to achieve your desired effect.

The description is the block that includes all the added shadows definition, which describes what happens for each shadow type, offsets, blur, spread, and color separately.

Conclusion

This comprehensive tool provides full control of the CSS box-shadow property, making it a must-have for web designers and developers.

Its intuitive interface, robust feature set, and real-time update capabilities make it incredibly efficient and enjoyable to work with. Whether you're working on a complex UIs or just learning CSS, this tool is certain to make your design process much smoother. Give it a try today and experience the difference it makes in your web design workflow!

We build a tool that identifies colors from a website URL and generate a CSS/Sass code palette

Arbaoui Mehdi — Sun, 09 Jan 2022 20:44:08 +0000

As a Frontend Developer, I always asked how can I get a code color palette of a website without reaching into the dev tools, so I tried multiple browsers extensions, but the result wasn't right. We decided my work partner and me to build that tool. So we spent 14 days from prototyping into making https://alwane.io.

alwane.io is a web-based tool giving you the ability to extract colors from a website URL or an existing CSS code, regroup/order colors, then generate a palette including a CSS/Sass file. A simple and handy tool to build your next project's colors, get inspiration, and examine your website's color palette.

Tool Description

It's a simple web application to help you generate palettes for your projects. It uses a color sorting algorithm to gather colors from a website's CSS or any other existing CSS code and regroup them into color classes.

You can then order these colors, generate a CSS or SASS code, and start using it in your project. The tool also offers some other useful features:

Colors can be extracted from an existing CSS code (the one used by the website) or from any other CSS code.
Colors can be sorted and regrouped from a list of Hexadecimal codes.
Colors can be saved in sets: you can therefore create multiple lists of colors so that you can easily manage them.
This is incredibly convenient when each set contains colors from a different website or project, and you want to keep track of everything separately.
You have complete control of the pallet, where you can remove one color or a group of colors.

And for how we tackle color sorting

We first extract the code by analyzing the code and pulling hexadecimal/rgb/rgba codes; as a starting point, the difference between each color is calculated using the Delta E CIE 2000 algorithm to match the colors list as closely as possible.

We used Delta E as a formula that defines color difference which measures the distance between two colors in terms of their coordinates in a perceptual color space such as CIELAB or CIELUV; we used it to quantify how different two colors are. It's defined as:

∆E = (ΔL / Δa)² + (ΔC / Δb)²

Where:

ΔL = Δa = Δc = the change in lightness, from one sample to the next, throughout the entire color gamut.

I hope you like the tool. I’d be happy to answer any questions, and I welcome your feedbacks.

Can you define what you do as a full-stack developer?

Arbaoui Mehdi — Sun, 26 Sep 2021 10:44:47 +0000

To begin, "full-stack" developers often find it difficult to explain what they do, "I WAS THERE!".

A Multitasker person

The Full Stack developer's duties will involve creating the app's user interface, writing code, managing databases, and testing the application thoroughly; doing all of that with some accuracy, which it's NOT TRUE/UNREALISTIC.

While it's correct that devs with a comprehensive set of skills are in demand, the term "full-stack developer" is often abused; in today's workplace, being a full-stack developer indicates various forms to different people.

How Companies perceives the job

Some people see the job title carrying someone who can code anything, regardless of context or language. Others adopt "full-stack," introducing developers who have little experience in various things. In the most basic sense, the job title is employed to simply means "a combination of skill sets used broadly without a narrowed thinking."

In today's workplace, there is a strong trend towards hiring developers with a broad set of skills; this indicates that employers are looking for "full-stack" developers who know a little of everything and are ready to accommodate any type of environment quickly.

On the other side, many companies prefer to hire developers with solid/compact experience in several programming languages.

The Summary

So, the question is, it's Good or Bad to become a Full Stack Developer?

🟨 Good for companies to launch/test/iterate fast and to spend less money.

🟨 Good for candidates to adopt it to experiment, find where their skills fit, and then stick to a narrowed skill-set and scale.

🟥 Bad for Products Quality considering the broad skill-set of the developer.

🟥 Bad for developers in the long run because serious companies tend to hire narrow-skilled people rather than broad-skilled ones.

My Perspective

You can choose at a certain point to become a Full Stack Developer, to experiment with your skills/wants/talent, then switch rapidly after finding where your skills/personality fit more and stick to it in the long run.

A Fact

🟩 Excellent people in a particular skill perform better and make Excellent products.

How I'm forcing myself to write CSS following certain rules

Arbaoui Mehdi — Wed, 21 Apr 2021 09:42:17 +0000

Forcing yourself to write a CSS code that follows a guideline can help the person ensue a list of good practices to write a CSS code reflecting a definite logic. Plus, it can adapt the whole team to a coding guideline to avoid incoherence across the entire code base.

I wrote the .stylelintrc list of practices to adapt to how I embrace the CSS language; moreover, it can be tweakable depending on the context, and this is a summary of what can be done following these rules.

Check the Coding Guidelines that cover a thorough description of all the .stylelintrc rules

Sass Codings Rules Summary

Don't use IDs for styling.
Don't Reference or style descendent elements in your class selectors
Remove all trailing white space for your files
Don't mix spaces with tabs for indentation
Separate your code into a logical section using standard comment blocks.
Leave one clear line under your section comments.
CSS rules should be comma-separated but live on new lines
Include a single space before the opening brace of a rule-set
Include a single space after the colon of a declaration.
Include a semi-colon at the end of every declaration in a declaration block
Include a space after each comma in comma-separated property or function values.
CSS Blocks should be separated by a single clear line
Always use double quotes, quote attribute values in selectors
Use lower-case and shorthand hex values
Where allowed, avoid specifying units of zero values
Disallow redundant values in shorthand properties.
Never use !important
Set properties explicitly
Enforces sass variables in any CSS property using hex colors, except for the currentColor and inherit values.
Sorts related property declarations by grouping together following the order (Sass Inheritance, Positioning, Box Model, Typography, Visual, Animation, Misc)
Declare pseudo-classes with a single colon
Declare pseudo-elements with a double colon
Use rem units as primary unit type, This includes:
Positioning: top, right, bottom, left
Dimensions: width, height, margin, padding
Font Size --> Use px units as a primary unit type for the following properties
Border widths: border: 1px solid #bada55;
Line-height should be kept unitless. If you find you are using a line-height with a set unit type, try to think of alternative ways to achieve the same outcome. If it's a unique case that requires a specific px or rem unit, outline the reasoning with comments so that others are aware of its purpose.
Avoid all use of magic numbers. Rethink the problem (margin-top: 37px)
Aim for maximum depth of just 1 nested rule
Components Syntax should follow <componentName>[--modifierName|-descendantName]
.componentName must be written in camel case.
.componentName class names as short as possible but as long as necessary.
--modifierName must be written in camel case
--modifierName must be separated from the component name by two hyphens
descendantName must be written in camel case
Use componentName.is-stateOfComponent for state-based modifications of components
is-stateOfComponent must be camel case
is-stateOfComponent should be used as an adjoining class
Variables should be name such [<componentName>[--modifierName][-descendantName]-]<propertyName>-<variableName>[--<modifierName>]

Coding Guidelines

General Principles

✅ Use Classes in SCSS for styling elements.

Stylelint Rule

"selector-max-id": 0

Example

.component {
  ...
}

❌ Don't use IDs for styling.

#component {
  ...
}

✅ Style the base elements (such as typography elements)

h1 {
  ...
}

❌ Reference or style descendent elements in your class selectors

.component h1 {
  ...
}

Performance

Overly specific selectors can cause performance issues, it requires a lot of DOM walking and for large documents can cause a significant increase in the layout time.

❌ Don't

ul.user-list li span a:hover {
  ...
}

✅ Do

.user-list-link:hover {
  ...
}

Formating & Indentation

Remove all trailing white space for your files

"no-eol-whitespace": true

Don't mix spaces with tabs for indentation

"indentation": 2

Commenting

Separate your code into a logical section using standard comment blocks.
Leave one clear line under your section comments.

✅ Do

// =============================================================================
// FILE TITLE / SECTION TITLE
// =============================================================================


// Comment Block / Sub-section
// -----------------------------------------------------------------------------
//
// Purpose: This will describe when this component should be used. This comment
// block is 80 chars long
//
// 1. Mark lines of code with numbers which are explained here.
// This keeps your code clean, while also allowing detailed comments.
//
// -----------------------------------------------------------------------------

.component {
    ... // 1
}

Spacing

CSS rules should be comma-separated but live on new lines

"selector-list-comma-newline-after": "always"

Include a single space before the opening brace of a rule-set

"block-closing-brace-space-before": "always"

Include a single space after the colon of a declaration.
include a semi-colon at the end of every declaration in a declaration block
include a space after each comma in comma-separated property or function values.
CSS Blocks should be separated by a single clear line

Quotes

✅ Always use double quotes, quote attribute values in selectors

input[type="checkbox"] {
  background-image: url("/img/you.jpg");
  font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;
}

❌ Don't

input[type="checkbox"] {
  background-image: url(/img/you.jpg);
  font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;
}

When Declaring Values

Use lower-case and shorthand hex values
use unit-less line-height values
Where allowed, avoid specifying units of zero values
Never use !important
Set properties explicitly
- background-color: #333 over background: #333
- margin-top: 10px over margin: 10px 0 0

✅ Do

.component {
  background-color: #ccc;
  color: #aaa;
  left: 0;
  line-height: 1.25;
  min-height: 400px;
  padding: 0 20px;
  top: 0;
}

❌ Don't

.component {
  background: #ccc;
  color: #aaaaaa;
  left: 0px;
  line-height: 24px;
  height: 400px !important; //jerk #yolo FUUUUUU
  padding: 0px 20px 0px 20px;
  top: 0px;
}

Declaration order

The goal is to understand the essence of the styles by reading few declarations. Most of the time, the essence is how the element is laid out and its size is determined. A proper ordering of rules allows to scan the declaration block for properties quickly, and this is the order that should be followed:

.declarationOrder {
  /* Declarations */
  $varName: #ccc;

  /* Sass Inheritance */
  @extend %a-placeholder;
  @include silly-links;

  // Content
  content: "";

  // Positioning
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;

  // Box Model
  display: block;
  float: right;
  width: 100rem;
  height: 100rem;
  padding: 10rem;
  margin: 10rem;

  // Typography
  color: $varName;
  font: normal 1rem "Helvetica", sans-serif;
  line-height: 1.3;
  text-align: center;

  // Visual
  background-color: $varName;
  border-radius: 4px;
  opacity: 1;

  // Animation
  transition: all 1s;

  // Misc
  user-select: none;
}

✅ Do

.component {
  // Sass Inheritance
  @extend %a-placeholder;
  @include silly-links;

  // Position and Layout
  top: 0;
  left: 0;

  // Box Model
  width: 150px;
  min-height: 400px;
  padding: 0 20px;

  // Typography
  line-height: 1.25;
  color: #aaa;
}

❌ Don't

.component {
  top: 0;
  padding: 0 20px;
  @include silly-links;
  left: 0;
  @extend %a-placeholder;
  min-height: 400px;
  line-height: 1.25;
  width: 150px;
  color: #aaa;
}

Pseudo Elements and Classes

Pseudo Elements and classes are very different things, as is the syntax used to declare them:

✅ Declare pseudo classes with a single colon

.component:focus {
    ...
}

.component:hover {
    ...
}

✅ Declare pseudo elements with a double colon

.component::before {
    ...
}

.component::after {
    ...
}

❌ Don't

.component:after {
    ...
}

Units

✅ Do

Use rem units as primary unit type, This includes:
- Positioning: top, right, bottom, left
- Dimensions: width, height, margin, padding
- Font Size
Use px units as a primary unit type for the following properties
- Border widths: border: 1px solid #bada55;
Line-height should be kept unit-less. If you find you are using a line height with a set unit type, try to think of alternative ways to achieve the same outcome. If it's a unique case that requires a specific px or rem unit, outline the reasoning with comments so that others are aware of its purpose.

❌ Don't

Avoid all use of magic numbers. Rethink the problem (margin-top: 37px)

Nesting

Nesting is handy, sometimes, but will conflict with our Specificity and Performance guidelines.

As we follow conventions and thoughts from widely accepted methodologies such as BEM, the use of the suffix can help immensely though.

Just because you can, doesn't mean you should.
Watch your output, be mindful of Specificity and Performance described in this document.

✅ Aim for maximum depth of just 1 nested rule

.panel-body {
  position: relative;
}

.panel-sideBar {
  z-index: 10;
}

.panel-sideBar-item {
  cursor: pointer;
}

.panel-sideBar-item-label {
  color: #aeaeae;

  &.has-smallFont {
    font-size: 1rem;
  }
}

At its worst, this produces:

.panel-sideBar-item-label.has-smallFont {
  font-size: 1rem;
}

❌ Don't

.bc-tab-panel {
  .panel-body {
    position: relative;

    .panel-side-bar {
      z-index: 10;

      .panel-side-item {
        cursor: pointer;

        .panel-side-item-label {
          color: #aeaeae;

          &.small-font {
            font-size: 1rem;
          }
        }
      }
    }
  }
}

At its worst, this produces:

.bc-tab-panel
  .panel-body
  .panel-side-bar
  .panel-side-item
  .panel-side-item-label.small-font {
  font-size: 13px;
}

@extends or @include

Excessive use of @include can cause unnecessary bloat to your stylesheet, but gzip should help with that
Excessive use of @extend can create a large selector block (not helpful in web inspector) and hoisting of your selector can cause override and inheritance issues.

✅ We advise to @include over @extend generally but use common sense. In situations where it's better to @extend it's safer to do so on a placeholder selector

✅ Make use of placeholder selectors to separate repeated local styles

%placeholderSelector {
  background-color: #eee;
}

.component1 {
  @extend %placeholderSelector;
  color: red;
}

.component2 {
  @extend %placeholderSelector;
  color: blue;
}

Components

Syntax: <componentName>[--modifierName|-descendantName]

This component syntax is mainly taken from Suit CSS with minor modifications.

Component Driven development offers several benefits when reading and writing HTML and CSS:

It helps to distinguish between the classes for the root of the component, descendant elements, and modifications.
It keeps the specificity of selectors low.
It helps to decouple presentation semantics from document semantics.

You can think of components as custom elements that enclose specific semantics, styling, and behavior.

❌ Do not choose a class name base on its visual presentation or its content

✅ The Primary achitectural division is between components and utilities:

componentName (eg. .dropdown or .buttonGroup)
componentName--modifierName (eg. .dropdwon--dropUp or .button--primary)
componentName-descendantName (eg. .dropdown-item)
componentName.is-stateOfComponent (eg. dropdown.is-active)
u-utilityName (eg. u-textTruncate)

ComponentName

The component's name must be written in the camel case. Use class names as short as possible but as long as necessary.

Example .nav not .navigation
Example .button not .btn

.myComponent {
  /*...*/
}

<article class="myComponent">...</article>

componentName--modifierName

A component modifier is a class that modifies the presentation of the base component in some form. Modifier names must be written in camel case and be separated from the component name by two hyphens. The class should be included in the HTML in addition to the base component class.

.button {
  ...
}

.button--primary {
  ...
}

<button class="button button--primary">...</button>

componentName-descendantName

A component descendant is a class this is attached to a descendant node of a component. It's responsible for applying presentation directly to the descendant on behalf of a particular component. Descendant names must be written in the camel case.

<article class="tweet">
  <header class="tweet-header">
    <img class="tweet-avatar" src="{$src}" alt="{$alt}" />
    ...
  </header>

  <div class="tweet-body">...</div>
</article>

You might notice that tweet-avatar, despite being a descendant of tweet-header does not have the class of tweet-header-avatar. WHY? because it doesn't necessarily have to live there. It could be adjacent to tweet-header and function the same way. Therefore, you should only prepend a descendant with its parent if must live there. Strive to keep class names as short as possible, but as long as necessary.

When building a component, you'll often run into the situation where you have a list, group or simply require a container for some descendants. In this case, it's much better to follow a pattern of pluralizing the container and having each descendant be singular. This keeps the relationship clear between descendant levels.

✅ Do

<nav class="pagination">
  <ul class="pagination-list">
    <li class="pagination-listItem">...</li>
  </ul>
</nav>

<ul class="breadcrumbs">
  <li class="breadcrumb">
    <a class="breadcrumb-label" href="#"></a>
  </li>
</ul>

❌ Avoid verbose descendant names

<nav class="pagination">
  <ul class="pagination-pages">
    <li class="pagination-pages-page">...</li>
  </ul>
</nav>

<ul class="breadcrumbs">
  <li class="breadcrumbs-breadcrumb">
    <a class="breadcrumbs-breadcrumb-label" href="#"></a>
  </li>
</ul>

componentName.is-stateOfComponent

Use is-stateName for state-based modifications of components. The state name must be Camel case. Never style these classes directly; they should always be used as an adjoining class.

JS or any backend language can add/remove these classes. This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).

<article class="tweet is-expanded">...</article>

.tweet {
    ...
}

.tweet.is-expanded {
    ...
}

Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element; multiple utilities can be used together, and utilities can be used alongside component classes.

Utility classes should be used sparingly, lean towards component level styling to make for as reusable HTML patterns as possible.

u-utilityName

Syntax: u-<utilityName>
Utilities must use a camel case name, prefixed with a u namespace.

Variables and Mixins

Variables and Mixins should follow similar naming conventions.

Variables

Syntax: [<componentName>[--modifierName][-descendantName]-]<propertyName>-<variableName>[--<modifierName>]

Variables should be named as such, things that can change over time.

Variables should also follow our component naming convention to show context and be in camelCase. If the variable is a global, generic variable, the property name should be prefixed first, followed by the variant and or modifier name for a clearer understanding of use.

✅ Abstract your variable names

$color-brandPrimary: #aaa;
$fontSize: 1rem;
$fontSize--large: 2rem;
$lineHeight-small: 1.2;

❌ Name your variables after the color value

$zirotoheroBlue: #00abc9;
$color-blue: #00ffee;
$color-lightBlue: #eeff00;

Component / Micro App level variables

Micro apps must base their local variables on the global variables primarily. You may add your own specific variables as required if no global variable is available.

For portability, your component should declare its own set of variables inside its own settings partial, inside the settings folder.

If your variable is scoped to your component, it should be namespaced as such following component naming conventions.

✅ Do

$componentName-fontSize:                                fontSize("small");
$componentName-decendantName-backgroundColor:           #ccc;
$componentName-decendantName-marginBottom:              fontSize("large");
$componentName-decendantName--active-backgroundColor:   #000;

.componentName {
    font-size: $componentName-fontSize;
}

.componentName-decendantName {
    background-color: $componentName-decendantName-backgroundColor;
    margin-bottom: $componentName-decendantName-marginBottom;
}

.componentName-decendantName--active {
    background-color: $componentName-decendantName--active-backgroundColor;
}

Maps

Variable maps with a simple getter mixin, can help simplify your variable names when calling them, and help better group variables together using their relationship.

✅ Do

// Setting variables and mixin
// -----------------------------------------------------------------------------

$colors: (
    primary: (
        base: #00abc9,
        light: #daf1f6,
        dark: #12799a
    ),
    secondary: (
        base: #424d55,
        light: #ccc,
        lightest: #efefef,
        dark: #404247
    ),
    success: (
        base: #bbd33e,
        light: #eaf0c6
    )
);

@function color($color, $tone: "base") {
    @return map-get(map-get($colors, $color), $tone);
}

// Usage
// -----------------------------------------------------------------------------

body {
    color: color("secondary");
}

h1,
h2,
h3 {
    color: color("secondary", "dark");
}

.alert {
    background-color: color("primary", "light");
}

.alert-close {
    color: color("primary");
}

.alert--success {
    background-color: color("success", "light");

    > .alert-close {
        color: color("success");
    }
}

Every variable used in the core architecture must be based on the global
variables.

Colors

Use the globally available colors.
A component shouldn't really have a need for a new color.
This creates consistency and sanity.

Avoid using the darken(color, %) and lighten(color, %) mixins for similar reasons.

Use the color maps available to you:

.component {
    background-color: color("brand", "primary");
}

z-index scale

Use the z-index scale under global settings.

zIndex("lowest") or zIndex("high") for example.

Font Weight

Never declare a new font-weight,
only use the available font settings. e.g.

fontWeight("light");
fontWeight("semibold");

Line Height

We provide a line-height scale. This should be used for blocks of text. e.g.

lineHeight("smallest");
lineHeight("large");

Alternatively, when using line height to vertically center a single line of text, be sure to set the line height to the height of the container - 1.

.button {
  height: remCalc(50px);
  line-height: remCalc(49px);
}

Animations

Animation delays, durations, and easing should be taken from the global framework

Mixins

Mixins follow regular camel case naming conventions and do not require namespacing. If you are creating a mixin for a utility, it will need to match the utility name (including u namespacing).

@mixin buttonVariant;
@mixin u-textTruncate;

Using Comments in Sass

Arbaoui Mehdi — Mon, 07 Oct 2019 19:17:35 +0000

Video

Source Code used in the video

https://github.com/freemh/dont-repeat-your-css/tree/master/1-sass-fundamentals/4-comments

Lesson Script

Introduction

If we take a look at this code right here, we see that it’s telling nothing, we know from the result on the browser that this is the alert and buttons styles, but we’re not obligated reading the code to deduce where it’s used.

Maybe the code sound familiar to you, because you’re the one who writes it, but once you’re away from it for a longer period, you’ll forget what this code is doing exactly, and imagine the hustle of having plenty of these stylesheets with no comments.

Same goes here if you’re in a team, and everyone has to know what this part of the code is doing, or what this stylesheet is about. And to assure transparency for both ourselves and other developers we’ve to use Comments, that will assist in generating a well-formatted CSS and makes stylesheets easy to navigate through.

Alright, How to add comments using Sass?

Sass has two types of comment, multi-line comments, and Single-line comments.

Multiline Comments

Let’s start with the multi-line comments, each part of this code is for a specific use case. We use these symbols /* to start a multiline-comment, and the comment will end after closing the */ symbols, now we can write our comment in multiple lines, this code here is used as a reset style, so we’ll define Reset.


/* Reset */

If we want to use this comment as a multiline-comment.

/*

Reset

*/

And if we take look at the generated CSS, we’ll see that the comment is generated with multiple lines, personally, I prefer using asterisks to give a better look at the comment.

/*
*
* Buttons
*
*/

Single-line Comments

We've also single-line comment, and to create a single-line comment we use double slashes // at the beginning of the comment, as an example at this location of the code border-radius, we want to tell ourselves and for anyone who open this file in the future don't use percentage.

.item {
  border-radius: 5px; // don't use percentage
}

These single-line comments will not be presented in the compiled CSS like the multiline-comments, and they span on one line, not multiple lines.

But you should know, that this generated CSS here is not minified or compressed, because we're not telling the Sass preprocessor to do so by using this command.

sass main.scss:main.css --watch

Keep Comments in Generated CSS files

What if we want to use this file in production, which means that we’ve to minify the “main.css” to decrease the file size for better performance.

So, in this case, we will use the option --style compressed from the Sass CLI, to compress the generated CSS.

sass main.scss:main.css --watch --style compressed

And if we hit save again from the Sass file, we'll see that the code is compressed, now all the comments don't exist neither Multi-Line or Single-Line comments, Single-Line comments in both cases are not generated on the CSS file, because they are specific to Sass, but, what if we want to have some multi-lines comments appears and not be removed, like this one, that includes the Author of the code, and the Email.

/*
*
* Author: Arbaoui Mehdi
* Email: arbaoui.mehdi@gmail.com
*
*/

When we hit save again, this comment doesn’t appear in the CSS file, however, we can force Sass to keep multiline comments in the final output by using this ! exclamation mark.

/*!
*
* Author: Arbaoui Mehdi
* Email: arbaoui.mehdi@gmail.com
*
*/

Interpolation in Multiline Comments

From the Sass file, we can even use interpolation within multiline-comments, which means that we can insert variable values inside a multiline-comment, let's create a new variable author-name that holds a string my name Arbaoui Mehdi as an example.

$author-name: "Arbaoui Mehdi";

To get to the value of the variable $author-name within this comment, we will replace this value Arbaoui Mehdi from the comment with the variable, to do so we use this syntax #{}, then inside of the curly braces we put the variable name $author-name.

/*!
*
* Author: #{$author-name}
* Email: arbaoui.mehdi@gmail.com
*
*/

Wants More

To access the full course on How to Stop repeating your CSS by following the Sass DRY principle:

https://www.udemy.com/course/learn-sass-and-dont-repeat-your-css/

Using CSS Custom properties (variables)

Arbaoui Mehdi — Fri, 04 Oct 2019 08:28:20 +0000

Video Lesson:

Code Used in this lesson:

https://github.com/freemh/dont-repeat-your-css/tree/master/1-sass-fundamentals/3-css-variables

Introduction

Variables are used to store some specific values, and we can use them whenever you need them, CSS language has already the capability to use variables without the need of a preprocessor like Sass, and these CSS variables or they call them Custom Properties they have some features that Sass Variables doesn’t have, like access to the DOM, because they are considered a part of the DOM, we can even control them using JavaScript. Controlling CSS variables using javascript is not our subject today, we’ll use them from a simple main.css file.

How to create a CSS Variable?

To create a CSS variable is very simple, but first, we need to understand that we’ve two places where we store our variables, the first one is considered as global, and if we create a variable in the global scope or closure it will be accessible within the whole page.

Let’s create a variable danger-700 that will be accessible within the global scope by using the :root pseudo-class, then to create a variable we use these two dashes and the name of the variable --danger-700 in this case, then we set a value to it normally, like setting a value to a property, we go for a hex color #721c24, which it’s already here.

:root {
 --danger-700: #721c24;
}

This 700 here on the variable name means nothing, it’s just a convention that defines that this shade of the color is the darkest one.

Let’s replace this color #721c24 from this style sheet with the variable --danger-700, we’ve one here at .alert-danger, and to set the variable --danger-700 to the color property we need to use this function var(), then inside of the function we add the variable --danger-700, this is the only way on how to set a variable to a property within CSS.

.alert-danger {
 color: var(--danger-700);
}

Same goes for the .btn-danger selector

.btn-danger {
 background: var(--danger-700);
}

and the :hover pseudo-class of the .btn-danger, we replace this value #721c24 by var(--danger-700), COOL.

.btn-danger:hover {
 border: 1px solid #f5c6cb;
 background-color: #f8d7da;
 color: var(--danger-700);
}

We can do the same thing, for the other colors “#f5c6cb“#f8d7da, we create two other variables “danger-200and “danger-100.

 --danger-200: #f5c6cb;
 --danger-100: #f8d7da;

And we find these values, and replace them within the file, for both .alert-danger selectors

.alert-danger {
 border: 1px solid var(--danger-200);
 background-color: var(--danger-100);
}

And the .btn-danger:hover pseudo-class.

.btn-danger {
 background: var(--danger-700);
}
.btn-danger:hover {
 border: 1px solid var(--danger-200);
 background-color: var(--danger-100);
}

To understand what this :root it is exactly, so here on the index.html page we have nested tags, and the parent of all of them is the ‘’ tag, and this is what :root is about, when we create a variable within the :root, any nested element will be able to use this variable, it’ll be considered global.

Now if we’re in the opposite, and we want to create a variable that will be only accessible within a specific block or scope, Okay, we’ll go for this alert element, the goal is to create a variable that can be used only within this closure, not anywhere else.
To achieve that, we’ve to create the variable within the parent which it’s alert.
Okay, let’s move to our main.css file, and from .alert we’ll create a new variable --alert-link and we’ll get its value from the .alert-danger .alert-link.

.alert {
 --alert-link: #c73c49;
}

Then, we’ll replace the color value from .alert-danger .alert-link selector, with the variable --alert-link

.alert-danger .alert-link {
 color: var(--alert-link);
}

Now, if we copy this variable here var(--alert-link);, and we try to use it from the color property of the .btn selector.

.btn {
 color: var(--alert-link);
}

It’ll not work, why because the variable --alert-link can only be used within its scope, not anywhere else.
Let’s return the button color initial value.

.btn {
 color: #fff;
}

If we want to use the variable --alert-link within the .btn selector, we’ve two choices, whether create it on the :root which will be global or create another variable --alert-link within the .btn selector.

CSS Variables or Sass Variables

I’m sure that you’re asking yourself, so which one to use, the Sass variables, or CSS variables, the answer is depending on the use case, because CSS variables are not 100% supported by all the browsers, and a simple https://caniuse.com/css-variables will show some red colors, which means that it’s not fully supported, so you’ve to know them both, and the project of one of your client will have more power in this situation on which environment he or she wants the website to be used.

But stick to the Sass variables as the first choice, and if cross browsers validation it’s not something you’ve to deal with, in this case, you can use CSS variables.

Take a screenshot of VSCode using Polacode Extension

Arbaoui Mehdi — Thu, 03 Oct 2019 22:39:55 +0000

Sometimes I add some tweets that should include code, so we don't have the option to embed code on twitter, so for that, the only solution is to add an image, in this post I'll show you how to create a screenshot of your code from Visual Studio Code by using this extension Polacode

First, you've to install the extension, click on the Extensions icon on the left sidebar of your editor to open the extensions Market place, then type Polacode you'll find multiple ones, choose the one that has more downloads.

Then we've to show the command palette by using the shortcut Cmd+Shift+P for Mac users, or Ctrl+P for Windows users, then type > Polacode

Open any file including code, in my case, I'm using a JavaScript as an example, select the code and it will be shown in the right of the editor.

I save the file code.png on the Desktop folder, so open the file to see the result.

Old School Loops in JavaScript - for loop and forEach

Arbaoui Mehdi — Wed, 02 Oct 2019 11:03:18 +0000

In general, if we've got a list of elements, and we want to get each element from this list, or in other words if we want to iterate over the elements of an array we use the old-style for loop.

for Loop

As an example, we've got here an array numbers that contain a list of numbers.



const numbers = [45, 78, 95, 36, 47];

To get each number from this array by using the for loop, first we've initialize the counter to 0, the condition to be evaluated before each iteration, and the expression to be evaluated after each iteration, in this case incrementing the counter by one, and as long as the condition is true



for (let i = 0; i < numbers.length; i += 1) {
 console.log(numbers[i]);
}

The result of console.log shows an element from the list numbers at a specific index using the counter.

forEach

Now, and for the same example, we can use the JavaScript ES5 forEach loop, which executes a function on each element in the array.



numbers.forEach(number => {
 console.log(number);
});

Just to notice that the forEach is used only for arrays, maps, and sets, the syntax of the forEach is shorter than the for loop, however, there are some flaws of using it.

The first problem is there is no way to break or stop a current loop, this current presentation is not correct.



numbers.forEach(number => {
 if (number == 45) {
   console.log("terminate the current loop");
   break;
 }
 console.log(number);
});

The second problem is: you can't use the return statement from an enclosing function within the loop, and this is an example where the loop should stop and return false if the condition is true, but instead it'll show the result of the console.log(number).



numbers.forEach(number => {
 if (number == 45) {
   console.log("terminate the current loop");
   return false;
 }
 console.log(number);
});

What does CSS property auto do in margin and how it calculate free space

Arbaoui Mehdi — Sun, 29 Sep 2019 15:41:51 +0000

This what we’ll learn in this short video tutorial:

How the CSS Property margin manage the free space for positioning an element
How margin can be used to center an element
The difference between using a fixed value for the margin property versus auto

Edit Your Website Live In Google Chrome by using document.designMode

Arbaoui Mehdi — Sat, 28 Sep 2019 21:26:35 +0000

I was on my twitter, reading stuff, then suddenly I see a tweet which shows a cool feature that I never thought exist, this feature is document.designMode which allows you editing the entire document directly, this property is set by default to off, let's change it to on and see the MAGIC HAPPENS.

document.designMode="on"

Credit:

// Detect dark theme var iframe = document.getElementById('tweet-1177559150563344384-172'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1177559150563344384&theme=dark" }