Let's just say I have a React app. And let's just imagine for a second that all I want to do is make a page scroll & filter something on a page. Should be easy right?

A bit more context.

Suppose what I have is a page of multiple 'Cards'. Now, each card is a completely isolated component. By 'isolated' here we mean it is fully independent. So it loads on its own, has some unique API in it that it uses to retrieve data with say axios. Let's even say we get some nice skeleton on loading.

Point being, those 'cards' are completely decoupled from the main page and work on its own that encourages reusability and make our life easier in the future (and well, something that is motivated by React itself).

Now, what we want to achieve is click on a button in top right card and scroll to the bottom card as well as filter it somehow. For example, you might have several tabs in the bottom component and what you want is to do 2 main simple things:

1. Scroll to this guy
2. Filter it to the 2nd tab

Sounds so simple that you might be wondering "Whats it all about??".

Well, let's just think how this practically can be done in general?

• Take myCoolCard.jsx and handle onClick event that would send a callback to index.jsx. And then in index.jsx we grab scrollAndFilter.jsx with createRef() (learn more) scroll to it with something like window.scrollTo(0, this.myRef.current.offsetTop) as well as pass a new prop to it e.g. Tab='2'.

Do we like it? Well, it would do the job. But sending data from a child (myCoolCard.jsx) to a parent (index.jsx) via callbacks is something that soon enough will end up in a massive unreadable codebase + it gets really dependant on the parent. What if you want to reuse myCoolCard.jsx in a similar way somewhere else in the app. You will have to completely repeat you logic (like we never heard of DRY).

• Another way is to throw in Redux and instead of a callback save data onClick (Tab='2') in the store. And then get all components including parent accessing it and adjusting logic based on this (e.g. listening to it and filtering/scrolling accordingly). But personally, it is quite debatable whether this kind of data should be ever saved in Redux store. Its just too.. well, exclusive. Still thats better than callbacks.

Let me just cut it short as it already sounds like we are overkilling something here.

We could update the url and get scrollAndFilter.jsx listen to it to scroll & filter itself.
Oh wait, there it is, doesn't React Router solves it already?

Should do, so we could just use something like <Link to="index#about">Home</Link>
and just scroll to the hash (#about or in our case scrollAndFilter) - awesome! 🔥

..Would be if it worked 🤷‍♂️. You see, there is an issue with React-router that wouldn't let you do it, so you will have to install separate package which is based on custom <Link> component (meh 😄), which could be a solution, but we have bundlephobia and don't want to add extra stuff that we don't really need. Otherwise, we would use react-scroll-to in the first place.

And then we scratch head, break things and come up with a weird solution that works perfectly for our case. We don't install any extra stuff and just do it with react-router (that is something everyone use in React anyway right 😅?)

What we do is we pass state with <Link component> and set up a hash with it. The only difference the hash for us is just to make things more consistent, we don't use it for scrolling.

So,

somewhere in myCoolCard.jsx

<Link to={{ hash: 'filter', state: { tab: ' 2' } }}>click here</Link>

this would do 2 things: pass tab: ' 2' to this.props.location.state and append url with #filter

somewhere in scrollAndFilter.jsx

componentWillReceiveProps(nextProps) {
    if (nextProps.location.state && this.state.tab !== nextProps.location.state.tab) {
      if (nextProps.location.hash === '#filter') {
        this.setState({ tab: nextProps.location.state.tab.trim() });
        this.filterCardRef.current && this.filterCardRef.current.scrollIntoView({ behavior: 'smooth' });
        this.props.history.push({ hash: '' });
      }
    }
  }

Wait wait, I know. Let me explain.

What happens is we actually completely ignoring the parent. We don't even touch index.jsx here. Everything happens in the other 2 cards. First we just send state and hash from <Link> and then we listen in the other component for anything new to come in, we exclude it to only stuff that has tab and hash so anything else wouldn't trigger scrolling.

We also trim the incoming tab state so that we can scroll back click again and get automatically scrolled again (even though its already filtered to tab '2'). And also we clear hash so it works in the future link clicks without any bugs.

.scrollIntoView({ behavior: 'smooth' }) is something you attach to your ref so that it can be scrolled to easily and smoothly.

And that's actually it.

The same logic can be applied to any other cards completely isolated from the parent. In fact, you can take those 2 cards throw them into a different page and that would still work.

If anything is unclear join https://t.me/s/thefrontend

Not that it is gonna make things clearer, but hey - why not? 😂

Let's get right to the point: how often you think "ah, paying 15$ for udemy or coursera course is not worth it"?

Of course, because you can find everything for free, right?

Take a step back and consider something known as perceived value of digital/physical goods. The reason physical books for example are still alive is because people treat them as an extension of themselves, whereas online course in Java can be treated as something less important and valuable.

The reality, however, is that you should count the value it brings and the time you spent enjoying the purchase. The average lunch in London can be approx. 8$ (coffee, sandwich and a cookie), you enjoy it for abstractly 40 min and then leave the cafe (money spent, value received).

Time in this instance (as well as in our whole life) is the only limited resource we should really care about. Time is strongly linked to happiness as with this finite resource you can choose whether to spend time with the important ones, make money, read a book, watch a film, do laundry etc. It is the one and only thing we have in our lives and if we value it properly, it can make us better and happier as a result.

Now back to online courses.

While I was learning coding, I have gone through tons of material online, normally thinking that I can always find a free alternative and make the most out of it. However there is a trick that I didn't know about at that time.

The free stuff is free, just because there is a better paid version

(read it one more time)

Most of the free programming courses that I found useful linked me to a more detailed paid ones and while it was fine to grasp the basics, when I wanted more - it always required me to pay. It is understandable though, a professional developer invest their time and effort, share tips and their experience and does expect to get a penny back. And we all want to learn from the best, right?

This is just how it works.

Google Taylor's motivation theory - he proved that the main incentive for people is actually money (and not perks, benefits, recognition - although that also counts).

Which is why it is not unfair, ugly or bad when someone wants to get paid for what they do, it is unfortunately how our world works🤷🏻‍♂️

With online courses it is also the fact that the guys combine and filter all the informational rubbish that wouldn't get you anywhere, add their own unique experience on top - and there we have a perfect recipe for good course. The logic is dead simple - you can spend 10 hours filtering, testing and finding the good content yourself or pay for a highly ranked course online and get it all right away. As a result, 10 hours saved, which you can actually use to make something with the new skills you learnt and make money (often more than you spent on the course).

☝🏻Finally, my personal statistics show that I am more likely to finish the course that I paid for than the one I got for free. We tend to value money that we spend and want to get the most out of it.

So what are you waiting for? Stop complaining about unfair, money-focused world, go get yourself a course for a few bucks in Neural Networks, AI, Blockchain, Mobile development and learn something that can actually make you rich and let you enjoy your time more efficiently 👊🏻. Good luck!

Agree? Join @thefrontend

(might even get a few dev courses for free, who knows 😀)

Since many of you wanted to know more about the specifics on PWA and INSTANT APPS, here is a quick review on the two, we will look at the 3 basic componential parts.

• Speed
• Build complexity
• Branding

But first it makes sense to do a bit of googling and wikipedying.

First PWA, what is it and why does everyone talks about it?

Google as usual is the one standing behind popularising this concept. While you will see a lot of bold words like: fast, reliable, engaging. Esseintially it is a web app built with typical tools like HTML, CSS, JS and that has a nice caveat around it that can utilise something like service workers that stay in between your web app and the server. This allows PWA to have something that normal web sites won't provide - ability to work offline.

You can easily try telegram, instagram, facebook as web apps and pin them to your mobile home page. So in short, it will provide you the typical app's functionality and will work fine.

Don't confuse it with responsiveness though. While it does inteconnect, your Bootstrapped web site will not be considered as PWA just because it adapts to your user's screen. It will simply be a responsive site.

There is only 1 problem with this: since it is not an app, it is hard to get to phone's functionality like Bluetooth, Flashlight etc.

Then what the hell is Android Instant Apps (AIA) and why not use normal apps?

The AIA is in short is a real app the has access to all your phone functionalities. At some point Google realised that people are sick from dowloading stuff from App Stores and thought on how to make it usable without downloading software to your phone. The picture above nicely represent the concept and main difference from the typical apps you see. It is frankly just a lighter version of an app.

If you have a news app, you can create a lighter component of the app and Google will catch it automatically, show it in the search, but instead of linking it to the Google Play, it will load a lighter component directly in the browser and you can use the app.

Now the fun part.

Speed

Let's try to find a random AIA and PWA to compare. For the last there is a nice website that has a list of PWAs - https://pwa.rocks. And for the AIA - anything that Google retrieves can work.

PWA Financial Times.

It will open in a perfectly responsive form, suggesting to add this web app to the home page (nice addition as you can later launch it from home). Loads pretty fast, the drawbacks are the search bar (which does dissapear if you launch from home screen) and the fact that it is not an app - you can feel that your experince is not as smooth as the typical app will provide.

However it does the job, loads very quickly and some other examples (e.g. telegram) can work offline - will take your message and send it as soon as there is an internet connection, which is similar to the app.

Taking meduza.io news website as an alternative.

It actually does offer both PWA and AIA. When checking it out we can see that the main page loads without significant differences for both. However if you open meduza.io for the first time - you will notice that the AIA starts downloading something (which looses in the speed battle) - that is that ligher app's component that can be used in the browser.

The good part is that in the further launches it will be instant and will outperform PWA.

Meduza AIA:

The AIA will even create an 'instant app' that you can launch in the future right away:

But news web sites are something simple to compare - let's dive deeper.

Take a financial manager tracker or a messenger as an example. The PWA will launch fine, will work offline, can be added to the home screen BUT you will definetly say that it is not an app. The speed, animations will be like what you see in the web.

The messenger's AIA will be different. But the question is - does it actually exist? Which part of the messenger can be considered light? Shall we remove ability to record audio or send stickers? That is the main AIA's problem - it is unlikely to even challenge this problem and only cope with news apps, info apps, online shops where PWA can do it all (unless you need to access a flashlight in your app).

Build Complexity

This one is tricky. On one hand, to build a proper PWA you will have to first make a responsive web site, differentiate between all devices (tablets, phones), allign your components so that it can be seen nicely on all devices. Add to those the fact that you have to add service workers (and learn how to use them) - and building PWA doesn't look like a 3 min deal anymore.

AIA subjectively is easier. You are building an app anyway and just by specifying in the app which component to load (e.g. only news retrieval) - you can hit two birds with one stone. But you also should remember that AIA is not as popular and iOS users won't be able to use it yet.

So while AIA does offer a nice, more native experience, you can simply loose iPhone users because of this and well people also won't use your instant app on PCs for obvious reasons.

Branding

It became too popular to shout out that we are PWA, we are modern, smart and reliable. Or also - we are AIA, which most people will think you are speaking Chinese.

The reality though, is that if you are building PWA - you can be considered trendy, a huge proportion of users can start using your service without downloading uneccessary stuff.

Check mitty as an example, it is an iOS app built in Swift, but that has a selection of PWA apps like uber, skyscanner, airbnb etc - so instead of downloading all of them you can download 1 app and have access to the rest. One could argue however, that you can also just pin uber, telegram, facebook, airbnb to your home screen and then there is no need to download apps at all.

On a personal note, I have a belief that both conepts are here to stay - and those who master both PWA and AIA will rule the world. Development of full native apps will be displaced by PWA, and AIA's responsive sites and web services like online shops will be able to compete with PWA by providing a light component of the app.

Finally, if you read it all the way till here, take a minute and think about this:

Why is it mainly Google that tries to push the industry to the new standards? Why does Apple stay aside and doesn't invest into industry's evolution? What would happen with its App Store revenue if suddenly everyone moves to PWA?

Liked the article, disagree or want to discuss?

Join @thefrontend in telegram

If you write a lot of CSS, preprocessor like SASS can significantly ease the amount of your work and your stress levels. Things like Sass, Less, Stylus or PostCSS make your CSS files more readable and improve maintainability. Thanks to variables and functions the code will become cleaner, better structured and as a result help developers to work faster and make less errors.

Start

The browser on its own doesn't understand Sass files, so it needs to compile them in the normal plain old CSS. Hence, we'll need something to convert .scss files to .css. And there are several options here:

• The easiest way - is a browser converter for compilation Sass on the spot — SassMeister.
• Usage of apps: there are both paid and free ones available. Read more here.
• If you a command line - lover, you can install Sass on your machine and compile it manually.

If you choose the command line at then end - you can install Sass in its original wrapper, developed on Ruby or you can try Node.js port.

You can compile .scss file using the command line like this:

node-sass input.scss output.css

Also, it is now a good time to mention that Sass offers 2 different types of syntax: Sass and SCSS. Both do the same thing, but developed differently. SCSS is a bit newer and normally considered to be a better option, so we will be using that. If you want to read about the differences on the two - have a read here.

Variables

Variables work in exactly the same way you saw in every other programming language. When declaring, we store a specific value in it, which we usually see in CSS like color, font or any other property like box-shadow.

Below are the examples of such variables in SCSS and CSS.

After compilation, the above will look like this in CSS:

The idea is that it can simplify the process of repetitive usage of variables and also we can quickly change the value of a specific variable where we declare it instead of surfing through your code.

Mixin

Mixin can also be used as a class-constructor in the programming language: you use several properties from the CSS creating a separate object, which later can be used wherever you want assigning different values to its properties.

Have a look at the example below:

Thats what we will see in CSS:

One more way to simplify you work with mixin is to use it with prefixes for browser adaption.

CSS:

Extend

Next nuance that we will look at is @extend. It allows us to inherit CSS properties to one selector from the other one. The principle is somewhat similar to Mixin, but Extend is mostly used to create logical connection between the page elements.

E.g. Extend is used when we need 2 similar elements that has slight differences. For example, let's take 2 buttons: Confirm and Cancel.

CSS:

If you have a look at the CSS code, you will see that Sass combines selectors instead of repeating the same ones several times in the code.

Nested constructions

As you would know, in HTML the developer write code following the 'nesting' principle. In other words, blocks of code are located in other blocks. CSS on the other hand normally looks chaotic in this sense. If that is a problem for you Sass can help you to organise and structure it.

An example of code in SCSS:

And the same in CSS:

Operations

You can do different mathematical operations right inside the code, which massively improve the workflow.

CSS:

Although right now you can do the same thing in CSS by using calc(), the Sass alternative method is faster to write and has mod (%) operation and also can be used in a wider spectre of types.

Functions

Sass provide a huge list of functions. For example, functions for operations on lines, colours or different mathematical operations like random() or round().

To make it a bit more visual let's have a function darken ($color, $amount), which (as you probably guessed) will darken or attach hover effect.

SCSS code:

CSS:

In addition to a huge list of functions, you can also declare your own.

Some parts of the above will eventually get to the normal CSS, but till then preprocessors are a great way to make your life easier and Sass here is a very decent choice.

*Translated from WebDev.

*Join @thefrontend channel for more🔥.

(the fastest and easiest way is to use their official 'out of the box' solution)

https://github.com/facebookincubator/create-react-app#create-react-app-

☝🏻Thinking in React

(it is pretty specific on how React view development with breakdown into different components. The link also has official facebook tutorial on the right)

https://reactjs.org/docs/thinking-in-react.html

☝🏻Best way to structure your React dev is to split everything in Components/Containers view

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

React Bootstrap 

(React's bootstrap can slightly vary from a normal one, just to make our development a bit more.. like React style)

https://react-bootstrap.github.io/components.html#page-layout

Refresh your JS knowledge

https://learnxinyminutes.com/docs/javascript/

☝🏻Firecasts

(the best quick videos I have seen on how firebase work with React. They have a series of videos there on Firebase+React)

To add on the above, this guy explain really well the authentication in React

https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/

More?

a few practical examples in React

https://tutorialzine.com/2014/07/5-practical-examples-for-learning-facebooks-react-framework

A lot of quality content on React with examples

https://reactfaq.site/

What the hell are callbacks, why do I need to promise anything, what's all the fuss about async/await stuff?

If you have ever asked those questions yourself. Here is a quick recipe how to not get confused.

First, let's cook some Carbonara🔥.

To do this, we basically need few things (the example is simplified)

🔸 Cook pasta

🔸 Cook bacon

🔸 Mix the two

🔸 Throw a bit of cheese in

Now that the functions are done, let's call them.

Couldn't be easier, right? What we end up to see in the console is a nice list of our actions.

Ready to get your lunch? Not so fast. To the left from the log you can see the time at which the function was fired. Looks like we outperformed Michelin star chefs and got pasta and bacon ready in just a few milliseconds.

Doesn't look too realistic..

Let's bring us back to reality and simulate at least a tiny lag in the first 2 functions. Don't worry too much about the setTimeout function for now, what it does is simply waits for a bit and then logs the stuff we want.

Shouldn't make it catastrophic, let's see how the console looks right now.

Shit. Something clearly got out of control. One cannot add bacon to pasta, put cheese on top before those 2 are not ready.

This is what real life looks like though. And the problem we experienced here has something to do with the fact that all functions were fired simultaneously. In other words, JS didn't care whether we finished cooking pasta, it went on launching other functions in the meantime.

Since the example was simplified, you can only imagine what kind of damage to your app would this bring in the real world.

Callbacks

One way to deal with that is to use something known as callbacks. Regardless your favourite computer language, this will refer to a "call after" function, or in other words, anything executable that can be passed as an argument in your code.

Sounds, realistic. Let's give it a shot. To show how the callbacks work, the most simplified example will look like below:

Also we are creating another function to notify us when the cooking has been finished.

Then calling all function and the first 2 with callbacks.

Looks like it worked. But bear in mind that the purpose here is to just show you the concept of callbacks. And you can guess that the more functions you have the more complicated it will get. Eventually with this technique, you might end up having loads of functions calling each other here and there. This has a huge potential to make your code massive and unreadable.

That's where the promises come in.

Promises

To put it simply, promises help us to wrap our functions and wait till something returns before moving on to the next function.

In our case, we would like to cook the pasta first, then do the bacon and then all the mixing/finishing stuff.

This is how the implementation can look like. We creating a promise, which will simply return the check emoji on success (on so-called 'resolve') and this will happen after a short time lag.

We then take this result and push it to our prepare() function. The prepare function has also been slightly modified and now also returns the dish after writing it to the console. This should then push it to the next prepare() and so on.

Looks good, we are now waiting for pasta to be prepared, then do the bacon when the pasta is ready, then the rest. This called chaining as we chain through all the .then.

The above helps us to ensure we wait till the promise is resolved and then start cooking pasta. One example of how functions can be fired asynchronously.

In the real world, you normally return something from the function then send it to the next function to use. For example, you could fetch some data from an API, parse it and then send to the next function (which would fail to properly run without getting something from the API first).

The above example again, was simplified to familiarise you with the concept, in real life you will also specify what happens if the promise was rejected and catch errors in each .then

While this is still a better, cleaner solution than callbacks - it can also get pretty messy.

Sync/Await

Another way, which is still fairly new and was introduced with ES8 is sync and await. And the main goal is.. well make your code cleaner and smaller again.

The idea here is extremely simple. We have to create a new async function, which is a fancy way of making the functions inside work asynchronously and specify whatever part of it needs to calm down and wait for a bit. This can nicely work with promises, but you can also just wait till the function returns you something.

So for now let's actually drop in a delay for each of the actions to simulate real case. For this we can create a simple function:

Similar to the Promise example, we are creating a delay and on success it should pass the element further in the chain. Also, as it would happen in normal world, we substituted all our console.log() with return , so that now all functions should return something.

Finally, instead of calling all functions one by one, we are going to create a separate function for this and call it later. And all you have to remember is this 2 things:

🔸 You need to use the word async next to the function - this will allow usage of await and will make your code to work asynchronously

🔸 You will have to specify await where something needs to wait till it gets the something back

And please - Do not try to use awaits without specifying async first and do not attempt to await for something in the top level - this wouldn't work. The 2 aforementioned points are must-have.

By looking at the code above, we should expect to see the following process:

'start cooking' will be printed in console → then the variable will wait for 1250ms simulating the time delay for the specified functions. After each function we are also printing out whatever it got after waiting.

Remember, we are now returning things, not printing them in the console. So our combine variable for example will have to use dish and dish2 to mix them and won't be able to do it until both are done.

Finally, we are also adding a nice checkbox ✅ after the element showing us that it has been retrieved from the waitTillFinish() function.

Here, let's have a look what we got.

As you can see now we doing it all with approx. a 1 second delay (still to quick, but good for demonstration). For combination we obviously getting 2 checks meaning pasta and bacon are ready and then the mixing is also done.

You can try it yourself in the Chrome Dev tools, some things will differ, like you won't have to use .this word and probably will need to specify function Name when creating one.

Now that is done go make yourself some Carbonara and make sure you don't add cheese until pasta and bacon are done (wouldn't be good).

Join our telegram @thefrontend

Don't reinvent the wheel, have a look and maybe on of the projects can fit in nicely into your development.

Animation about designers

Tech: CSS

Author: @miocene

View code

A horse in motion

Tech: CSS + Variative font

Author: @lorp

View code

Hanoi Tower (try to solve)

Goal - move all discs from the left tower to the right one.

Tech: CSS

Author: @finnhvman

View code

Choose any time of the day

Tech: CSS, SVG, JS

Author: @olivaele

View code

SVG switcher between tabs

Tech: CSS, SVG, JS

Author: @ainalem

View code

Stretch scroll effect

Tech: CSS, JS

Author: @nathantaylor

View code

Interactive SVG mask

Tech: SVG mask, JS

Author: @PointC

View code

Day and Night

Tech: CSS-variables, JS

Author: @CameronFitzwilliam

View code

Hope you liked it.

🔥Join our telegram @thefrontend

*Translated from css-live

Below is a list of CSS interview questions that you are very likely to face when applying for a front end position.

🤨Q. What are the three main ways to add CSS to a webpage? Describe the advantages and disadvantages of each method.

🤓A. There are three ways to apply CSS to a webpage—inline, embedded, and as an external style sheet. The three approaches along with their pros and cons are described below.

• Inline CSS can be written directly into the HTML elements as a style attribute. The primary advantage of inline CSS is the ability to override other style specifications in the single instance of an HTML element that it is applied to. However, this is only feasible if there are a small number of style definitions. It is generally better to use embedded or external style sheets for more complex styles.
• External style sheets allow the developer to separate style from content, and control multiple HTML documents from a single separate file, making it easy to style the entirety of a site with a single document. It enables complex styling through classes, selectors, and other grouping methods. The disadvantage of an external CSS file is that it must be downloaded first for the HTML file to be properly rendered.
• Embedded CSS can be written within the <style> tags inside the <head> section of an HTML document. It shares many of the same advantages as the External Style Sheet, with access to classes, selectors, and more complex styling. Embedded CSS has the added advantage of loading with the HTML document—no extra download required. However, that also means that any external HTML documents will not inherit the styling of CSS written within these tags.

🤨Q. What are CSS media queries and what are they used for?

🤓A. CSS media queries are the filters that make responsive web design (RWD) possible. With the introduction of laptops, tablets, and smartphones with screens of varying sizes and aspect ratios, RWD is crucial for modern day app development. CSS media queries adjust content style based on device characteristics like width, height, orientation, resolution, and display type. When used properly, the end result is a website or app capable of providing a sleek UI/UX across multiple devices.

🤨Q. What is a CSS preprocessor? Would you recommend using one for this project?

🤓A. A preprocessor is an abstraction layer built on top of CSS. Preprocessors extend the functionality of CSS by offering powerful features like variables, inheritable “classes” called extends, and “function-like” mixins. Sass, LESS, and Stylus are some of the more well-known preprocessors—try asking the developer which one they prefer more. Selecting a preprocessor really boils down to preference, and it can be revealing to see how a particular developer might decide to use one over the other for your project.

🤨Q. List the basic layout components of the CSS box model with a brief description for each

🤓A. In many ways, front-end web design is all about managing rectangles, and the CSS box model provides a layout paradigm for HTML elements that you can use to structure a webpage. The basic components are described below.

• border: The border surrounding the padding.
• content: Any text or images within the box.
• margin: The transparent area surrounding borders.
• padding: The transparent area surrounding content.

🤨Q. How would you implement the basic layout components of the box model in CSS? Give an example.

🤓A. Each element of the box model—border, content, margin, and padding—can be specified independently for each side of the element by listing dimensions in the following order: top, bottom, right, and left. Alternatively, multiple sides can be specified as a group by listing fewer parameters. An example has been provided below.

margin: 50px 100px 100px 50px;
/* Sets the top, right, bottom and left margins */

margin: 25px;
/* Sets the margin on all sides */

padding: 50px 100px;
/* Sets the top/bottom margin as a group and the right/left margin as a group */

🤨Q. Give an example of how you would use counter-increment and counter-reset in CSS to create automatic numbering within a webpage.

🤓A. The counter-reset and counter-increment properties allow a developer to automatically number CSS elements like an ordered list (<ol>). The counter-reset property resets a CSS counter to a given value. The counter-increment property then increases one or more counter values. Automatic numbering within a webpage is often useful, much like the section headers within this article. An example of how to use counters in CSS is displayed below.

body {
    counter-reset: foo;
}

h1 {
    counter-reset: bar;
}

h1:before {
    counter-increment: foo;
    content: "Section " counter(foo) ". ";
}

h2:before {
    counter-increment: bar;
    content: counter(foo) "." counter(bar) " "; 
}

🤨Q. Describe the following common CSS units of length: cm, em, in, mm, pc, pt, and px.

🤓A. There are many ways to express units of length within CSS, but these are just some of the more common ones.

• cm: centimeters
• em: a relative unit of measurement based on the size of a font
• in: inches
• mm: millimeters
• pc: pica, a unit of length equivalent to 12 points, or 1/6 of an inch
• pt: 1/72 of an inch
• px: a device-specific relative measurement equivalent to a certain number of pixels on a display

🤨Q.What are CSS vendor prefixes? Can you name some of the more common ones that you’re familiar with?

🤓A. Depending on your project, you might be looking for a CSS developer who can take advantage of experimental non-standard features that are only available on certain platforms. Vendor prefixes are extensions to CSS standards that can be added to these features to prevent incompatibilities from arising when the standard is extended. CSS vendor prefixes for some common platforms are listed below.

• -webkit-: Android, Chrome, iOS, and Safari
• -moz-: Mozilla Firefox
• -ms-: Internet Explorer
• -o-: Opera

🤨Q. How do you define a pseudo class in CSS? What are they used for?

🤓A. You can define a pseudo class by listing the selector followed by a colon and finally the pseudo class element. Pseudo classes can be used to give elements special states—the most common example being a:hover, which is used to change the color of a link when a mouse hovers over it. Other uses include using distinct styling for visited and unvisited links and styling an element differently when focused.

🤨Q. How would you select all the PDF links in the code block below with a single line of code?

<body>

<p><a href="default.asp" target="_blank">This is a link</a></p>
<p><a href="mydocument.pdf" target="_blank">This is a PDF</a></p>
<p><a href="default.asp" target="_blank">This is a link</a></p>
<p><a href="mydocument.pdf" target="_blank">This is a PDF</a></p>

</body>

🤓A big part of CSS is selecting and stylizing particular elements on a page. This question tests a developer’s knowledge of attribute selectors. All the elements of interest on the page happen to be links, but not all links are linking to PDFs. In CSS you can target the ending of the PDF link “.pdf” to quickly select all the PDF files by using the [attribute$=”value”] selector, which selects elements whose value ends with a specified value. In this case, we can use a[href$=“.pdf”] to select all PDF links.