DEV Community: Ananya Neogi

Setting career goals

Ananya Neogi — Tue, 05 Jan 2021 17:09:09 +0000

When I ask people about their career goals, I mostly get answers like “I just go with the flow”. While this might work fine for some people but it generally doesn’t bode well in the long run. If you talk to successful people, you would quickly realize that most of them had been intentional with all their career-oriented decisions and those deliberate decisions have led to the place they are now.

Intentionally crafting your career is essential. It is, however, easier said than done as we have myriad of options to choose from at our disposal. Also, it doesn’t help that we have so many distractions especially when every other day people are creating hype around some new technology or some new trend on Twitter. So that makes it more important to be intentional about the things we want to do in our career and not let ourselves fall into the trap of trends. Though I agree, sometimes, it pays off to jump on that hype train but make sure you are doing it for the right reasons and that you have done your research.

An aside thought: I like to think of my career goals as an engineering problem for which I would carefully craft a solution that would help me achieve a particular outcome, similar to how I would do if it were an actual engineering problem. It might seem like an oversimplification because life doesn’t work that way, and there will be unknown bumps on the road, and we might even change course in the middle. But at its core, I think this analogy holds well. Thinking about my career goals in this sense allows me to be more analytical about my decisions!

Coming back to the topic of setting intentional career goals – I have some questions you can ask yourself which will guide you to be intentional when setting your career goals for this year and beyond.

1. Do my values and work align with each other?

Not a lot of people think about their values. But investing time and effort to think about what values matter the most to you and then aligning your career decisions to that will ensure you are on your best path forward. It will also ensure that the work you’re doing will truly make you feel fulfilled at the end of the day.

2. How do you want to spend most of your workdays?

I think this is the most important thing to consider because each day’s work will eventually make up your whole career. Intentionally selecting the kind of work to focus on each day means you are ultimately creating an intentional career path for yourself.

3. A few years from now, how would you like to be introduced to someone else?

Would you like to be called an author of a book or a paper? Maybe the creator of x? The first person to live on Mars? I’m joking about the last one, but the point is this can be a fun exercise and will help you dig deep into your dreams and aspirations.

Now every time you have to make a career decision, you will have your answers as guiding principles. It is worth mentioning that the answers to these questions might change in a few years, but that’s OK because our goals can evolve as we evolve in our lives. Being true to yourself and what you want – however clichéd that might sound – will serve you well in the long run. Remember, we’re here for the marathon, not a sprint.

How to be a good mentee

Ananya Neogi — Mon, 17 Aug 2020 01:53:25 +0000

I've found a lot of resources on being a good mentor but haven't found many on how to be a good mentee. Mentorship is a two-way street so its important for the mentee to give their 100% as its important for the mentor.

Here's some advice, based on personal experience, on how to be a good mentee to get the most out of mentorship sessions.

Take charge

As a mentee, it is up to you to set the tone and expectations of your mentorship sessions. As an aside, I think it's important to mention here that a good mentor will let you take charge of your mentorship sessions! Be clear about your goals and expectations. Make sure to communicate what type of learning works best for you, for example, are you more comfortable with hands-on pair programming style sessions or you’re more comfortable with doing technical discussions together but then working on the problem later on your own. Whatever the method may be, the goal is to create the best learning environment for yourself.

Come prepared

During the mentorship session if you don’t have any predetermined tasks to work on then you can come prepared with some questions to ask your mentor or any topic to have a healthy discussion on. As a mentee, it’s up to you to absorb as much knowledge from your mentor.

It is ok to sound stupid

Let go of your ego. Don’t be afraid to be the less smart person in the room. If you don’t understand a concept or even a word, ask for an explanation.

Ask good questions

No question is a bad question so you should never be afraid to ask them. But I believe that an answer is as good as the question being asked, so be specific in your questions.
For example, asking how does useCallback hook work is an ok question but you can easily get a general answer if you read the react docs but instead, if you be specific and ask - "I know why we generally use useCallback but in what scenarios will an useCallback hook be most effective? Are there cases when you should avoid using it?"

By asking specific questions you will get specific effective answers.

Keep the momentum going

Do the work. There is no shortcut for this. If you are involved in a mentorship program/arrangement you have to take time out of your day to do the work.

Do a weekly check-in with your mentor. Even if it’s not a full one-on-one mentorship session each week, at least keep your mentor up to date with your progress (positive or negative).
A mentee has the power to keep a forward momentum of the mentorship.

Ask for feedback

Feedback is the most crucial part of the whole process. Ask for it. Ask for it often. And once you get some, act upon it. Ask clarifying questions if you don’t fully understand what the feedback is supposed to mean. Make sure to iron out exactly what action you need to take to improve upon based on the feedback. Remember that feedback without action is simply information.

If the feedback made you feel uncomfortable, make sure to communicate that clearly with your mentor. Feedback is supposed to build you up, not tear you down.

On closing notes, mentorship is a really great way to level up and learn from other's experiences. You can have a mentor in any way or capacity. It can be a formal time-boxed arrangement or it can be an informal arrangement with someone you respect or it can even be a life-long thing, whatever that may be make sure you respect yours and your mentors time. Do the work and absorb as much knowledge as you can!

2019 Year In Review

Ananya Neogi — Thu, 02 Jan 2020 06:45:47 +0000

2019 was the best year of my professional life thus far and I'm so grateful for that. There were so many pinch-myself moments and I'm still in awe of how so many things turned out to be.

Two of my biggest achievements this year were tackling imposter syndrome and overcoming my anxiety about being in public spaces.
I put in a lot of effort and learned a lot in my field which helped me overcome some serious case of imposter syndrome! I know it is something that never fully goes away, that it comes and goes but I did tackle that well this year 💪

One of the goals I set for 2019 was to be active in the developer community and I'm so happy I did it as much as I could. In the past, I was never able to go to meetups/events due to my anxiety and I always used to turn down such opportunities but this year I went head first and attended as many meetups/events/conferences as I could. And let me tell you that was the best decision ever!

Writing

The biggest thing that influenced my year was me writing on dev.to. It opened up many opportunities for me and I came across so many amazing people because of it. My posts on dev has more than 300k views! What! 🤯
It makes my day whenever I read a comment or an email or a twitter DM saying they're thankful they learned something from my blog.

I'm so grateful for this community 💜. Kudos to the entire DEV team for building such an amazing platform!

I also received my first paid writing gig this year! I never imagined when I started writing at the start of this year that this could even happen.

To be honest I didn't write as many posts as I would have liked to but I will continue to write as much as I can going forward.

Career

This year was full of learning. I deep-dived into JavaScript, learned a lot about Accessibility, really understood how React works and polished my skills in CSS. I worked on some small projects purely for learning purposes (check out github).
I did start work on one or two side projects but did not finish any of it, will continue to work on those in 2020. Or maybe I'll start a few new ones, I'm not sure 😅

I also finished Hacktoberfest! Looking forward to contribute more towards OSS.

I spoke at my first ever major conference at ReactIndia. It was an amazing experience and I feel so honoured that I got to share the stage with such amazing people of the tech community.

Life

I don't really write about my personal life but here's a brief overview in the grand scheme of things -

I started bullet journaling this year and it has been a game-changer for me. I will continue this in the future.
Travelled solo halfway across the world!
Travelled to a few more places with friends, the best one was the trip to McLeod Ganj. Have you been there? You should.
Made some good new friends.
Did rock climbing, rappelling and zip-lining for the first time.
Did not read as many books as I wanted to.
Started to re-learn French.

Onwards 2020

I'll be moving to a new place (details to be disclosed soon 😊) This will be a big change and will shake things up a lot so I've not set any goals that are set in stone. I've left room for a lot of experimentation and I'll adapt as things happen.

But I do have goals that I wish to see through-

I want to continue writing about all the things I'm learning
I want to speak at more events and the focus will be on small local events
I want to read at least 14 books

Happy new year folks! 🎉 Looking forward to 2020!
Share your year in review and 2020 goals with me @_ananyaneogi.

I also want to mention that success doesn't always mean visible success! It's ok if you didn't tick off your 2019 goals checklist or you don't have a long list of "achievements" for the year. Sometimes life gets in the way and things happen so be kind to yourself. 💜 Tangible achievements are not always the true measure of success! Celebrate your wins no matter how small because small wins accumulate and become big one day. Get ready to take on life in the new year even stronger 💪

Demystifying Modern Frontend Jargon

Ananya Neogi — Thu, 10 Oct 2019 18:13:52 +0000

The world of frontend programming is full of confusing jargons and we see a lot these terms getting thrown around. This is my small attempt to break down some of these terms or concepts into simpler terms with very limited to no code examples.

1. Pure function

A function is called pure when its return value is determined only by its own arguments. When given the same argument, the result will always be the same.

function twice(num) {
  return num * 2;
}

If we pass 4 to this function, it will always return 8.

Key points:

Pure functions provide referential transparency. This means that when a pure function is invoked it can be replaced by its own result. We can replace twice(4) by 8 without affecting our outcome.
Pure functions cannot reference variables from their outer scope. If any function is doing so then its not a pure function.

// NOT a pure function

let num = 8; // can be mutated from anywhere else

function impureTwice() {
  return num * 2;
}

Pure functions cannot call impure functions.
Pure functions do not produce side effects (see below).

2. Impure function

An impure function mutates state outside its scope. Any function that has side effects is impure.

let count = 0; // can be mutated from anywhere else
function increment() {
  return ++count;
}

// alerts and dialogs also cause side effect
function showAlert() {
  alert('oh hey! this is a side effect!');
}

// Beware! might seem like a pure function, but its not
function getRandomRange(min, max) {
  return Math.random() * (max - min) + min;
}

3. Side effect

An operation, function or expression is said to have a side effect if it modifies some state variable value outside its local environment.

When a function or expression modifies state outside its own context, the result is a side effect. For example, manipulating the DOM, making an API call, modifying database, creating alerts and dialogs, etc.

4. Stateful vs Stateless

Stateful programs or components store data in memory about the current state. They can modify the state and access its history as well.

Stateless programs or components depend only on their arguments and do not access or even need knowledge about anything outside their scope. They do not reference any information from earlier in their execution. Pure functions are stateless. Its the statelessness that enables referential transparency in pure functions.

5. Imperative vs Declarative Paradigms

JavaScript can support both programming paradigms.
Imperative code gives instructions informing the computer how to achieve a desired result, such as for loop.
Declarative code tells the computer what you want to achieve rather than how, and the computer takes care of how to achieve the end result, such as Array.map.

6. Reactive Programming & Observables

Reactive programming is the idea that you can create entire program just by defining the different streams and the operations that are performed on those streams.
Streams are nothing but sequence of values over time.

Here's an analogy: Think about reactive programming as plumbing. We decide which pipes we need in our application, we decide how those pipes are connected together and then we turn on the water and sit back.

Observables are a blueprint for how we want to create streams, subscribe to them, react to new emitted values, and combine streams together to build new ones. JavaScript observables are an implementation of the observer pattern.

There are two types of observables -

Cold observables: They begin pushing only when we subscribe to it. If we subscribe again, it will start over.
Hot observables: They will always push even if we're not specifically reacting to them with a subscription.

RxMarbles is a great resource to visualize all how the operations happen.

7. Tree shaking

Tree shaking is a term used in reference to JavaScript module bundling. It refers to the static analysis of all imported code and exclusion of anything that isn't used.
The concept behind tree shaking is live code inclusion. This means that we include the parts that are needed to begin with, as opposed to removing the parts that are not needed at the later stage.

8. Compilation: JIT vs AOT

Just-In-time (JIT) compilation is the process of translating code written in a programming language to machine code at runtime (during a program or application's execution). At runtime, certain dynamic information is available, such as type identification. A JIT compiler monitors to detect functions or loops of code that are run multiple times. These pieces of code are then compiled. If they're quite commonly executed, JIT will optimize them and also store the optimized, compiled code for execution. Browsers use JIT compilation to run JavaScript.

Ahead-Of-Time (AOT) compilation is the process of translating code written in a programming language to machine code before execution (as opposed to at runtime). Doing so reduces runtime overhead and compiles all files together rather than separately.

Some benefits of AOT:

Better security because evaluation is already done.
Templates and styles are inlined with JS so fewer asynchronous calls.
Small download size, because the compiler need not to be download as the app is precompiled.
AOT also enables tree shaking.

9. Reducer

If you've used Redux or functional programming, chances are you might already know this very well. But if we put aside that, what does a reducer mean itself? In simple terms, a reducer provides instructions for combining things.
Typically a reducer function takes an accumulator, which is the on-going result of our combinations as we move along and the list of things that we wish to combine.
Here's a (not very practical 😂) example of making cookie-

reduce(mix, ["flour", "butter", "sugar", "eggs"]) // result ➡️ ["cookie dough"]

We combined our list of ingredients to our desired result! 🍪
Here, mix is our accumulator containing the on-going result of our combination so far. So, if we add something else to our list of ingredients our accumulator will change.

reduce(mix, ["flour", "butter", "sugar", "eggs", "chocolate chip"]) // result ➡️ ["chocolate chip cookie dough"]
reduce(mix, ["flour", "butter", "sugar", "eggs", "blueberry"]) // result ➡️ ["blueberry cookie dough"]

As we can see, we have reduced our ingredients into a fully formed cookie dough!

10. Thunk

In computer programming, a thunk is just another word for a function. But this is a special name for a function that’s returned by another function and it takes no arguments.
Thunks are used to delay or defer a computation until its result is needed, or to insert operations at the beginning or end of the other computations. Then when that thunk is invoked, it performs a potentially expensive computation and/or causes some side effect to occur.

For example -
Suppose you wish to do some mathematical operations on numbers. Now, creating a thunk would mean not to do the computations directly, but instead create a function with no arguments that will calculate it when the actual value is needed.


function add(x, y) {
    // this is a thunk because it defers work for later
    return function() { // it can be named, or anonymous
        return x + y; 
    };
}

const thunk = add(1,2); // we can store the returned function to a variable
// OR use it directly like ➡️ add(1,2)()

// we can pass the thunk to different places
checkIfEven(thunk);

// we can use it in other calculations
const twice = thunk() * 2;

Here, thunk() will return 3 wherever used unless we change its value by calling add again with different arguments.

This was just my naive approach to explain things but if you have a better explanation for any of these, please comment below, I would love to know 🙂
Also, If you know of any such frontend related jargons let me know, I might do a part 2!

HTML can do that?

Ananya Neogi — Tue, 25 Jun 2019 21:38:30 +0000

After witnessing some awesome things CSS can do, it's time for HTML to come in the same spotlight!

It's amazing that you can do so much with just HTML.

1. Dropdown with searchable text

2. Dialog box

3. Measuring progress

Styling this is not an easy task, I agree! But there's always some workaround and it's nicely explained here - How to style progress element

4. Expand/collapse details

5. Show correct mobile keypad based on input type

6. Add a simple colour picker

7. Highlight text

8. Create a direct phone number link

Similar to email link with mailto we can also create a direct phone number link.

<a href="tel:+917272727272">+91-7272727272</a>

9. Show deletion and insertion of text

10. Edit page contents

Wish to make your own browser editor? You can do that too - How to make browser editor with html.

Note: Not all browsers have implemented these elements and attributes. But we can still use these today with progressive enhancements! 🙂

HTML is the foundation of any webpage, it's only wise to pay real good attention to it. Semantic markup not only helps in SEO but also helps in accessibility.

If you've come across any such cool thing HTML is capable of, please mention below 😀

In other news, I made a silly project : https://hp-ipsum.netlify.com

Follow me on twitter @_ananyaneogi to get more tidbits 😊

What are your favourite non-tech related podcasts?

Ananya Neogi — Sat, 15 Jun 2019 12:43:45 +0000

Tell me your favourite non-tech related podcasts.
I'll start with mine -

Radiolab This is my most favourite one!
99% Invisible
Invisibilia
Hidden Brain
Science Vs.

All though I listen to many more sporadically, but these are the ones I try to keep up with.

Subgrids are here! (Almost)

Ananya Neogi — Mon, 10 Jun 2019 20:43:30 +0000

Support for subgrid (part of CSS Grid Level 2 specification) has landed on Firefox Nightly! Even though this is not yet getting shipped in any browser, but we can test it in the Nightly version. After trying it out for couple of hours I'm really excited to think about all the possibilities in layouts this will bring, once this gets shipped widely.

To start experimenting with it you’ll need to enable the feature first on Nightly-

Go to about:config in the browser
Search for subgrid
Toggle layout.css.grid-template-subgrid-value.enabled and set subgrid to true.

What are subgrids ?

A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align.

This might sound a little confusing. Let us walk through an example.
Here we have a grid-wrapper inside which we have 3 direct child elements elem1, elem2,elem3.

<div class="grid-wrapper">
  <div class="elem elem1">Element 1</div>
  <div class="elem elem2">Element 2</div>
  <div class="elem elem3">
    <h2>Element 4</h2>
    <p>Element 4 paragraph 1</p>
    <p>Element 4 paragraph 2</p>
  </div>
</div>

Now we position these on grid.

.grid-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 4fr;
  gap: 30px;
}

.elem1 {
  grid-column: 1;
  grid-row: 1;
}

.elem2 {
  grid-column: 2 / 4;
  grid-row: 1;
}

.elem3 {
  grid-column: 1 / -1;
  grid-row: 2;
}

We notice that all the immediate children of grid-wrapper are nicely placed on the grid, but not the inner children of .elem3.
What if now we want the p elements to follow the same tracking size as it's parent as well because we don't want to explicitly position them. This is where subgrid comes in.

Replace the exsiting .elem3 with the following and see it in action.

.elem3 {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
}

In short, subgrid is a new value for the grid-template-columns and grid-template-rows properties. This instructs the grid-template-columns/ grid-template-rowsproperty to use the tracks defined on the parent as the track sizing and number used by the inner grid without explicitly stating.

This is just a basic example. We can create complex and interesting layouts very easily with the combination of grid and subgrid.

References

W3C Spec
MDN docs
Excellent talk by Rachel Andrew at CSSconf EU 2019: Hello Subgrid!

Are you a conference speaker? Share your experience!

Ananya Neogi — Mon, 27 May 2019 17:48:23 +0000

If you're a conference speaker, share your experience so far!
Some insights on the following would be great for people who wish to start speaking at conferences -

How did you get started?
Tips for writing CFPs?
Things to keep in mind while preparing for the talk?
Share any links to resources that you've come across or you have written yourself on the topic of public speaking.

CSS can do that?

Ananya Neogi — Fri, 17 May 2019 21:42:09 +0000

A list of amazing things that CSS can do!

EDIT: Some of these properties won't work in some browsers because of support. We can check for browser support using @supports and add fallback styles accordingly. Please use Chrome to view the examples 🙂

1. `box-decoration-break`

This CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

2. `attr()`

We can retrieve values of the selected element in CSS by using attr(). This method could be really helpful with accessibility purposes.

3. `backface-visibility`

This CSS property sets whether the back face of an element is visible when turned towards the user. Thinking of a card flip UI?

4. `conic-gradient`

Gradients are a wonderful thing. You might've used to style backgrounds with linear gradients but do you know we can use pure css to create pie charts with the help of conic-gradient!

To better understand how conic-gradients, reference the MDN docs on it

5. `filter`

Who needs photoshop filter effects when you have CSS filters. 🙃
Filter functions applies graphical changes to the appearance of an input image. The effects we can achieve are as follows - blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.

drop-shadow filter is pretty amazing. It lets you apply drop shadow to the input image.

6. `mix-blend-mode`

This CSS property sets how an element's content should blend with the content of the element's background or its parent.

Amazing things can be achieved by mixing blend modes and filters with images and text. Learn more on MDN Docs.

7. `first-letter`

One of my favourite things in books and magazines are the beautiful drop-caps. We can create drop with first-letter pseudo-element.

8. `shape-outside`

This CSS property provides a way to customise wrapping adjacent inline content around complex objects rather than simple rectangular boxes.

Open the example in a different tab and try changing the width of the window and notice how the text wraps around the image.

9. `writing-mode`

This CSS property sets whether the lines of text are laid out horizontally or vertically. We can have these values-

horizontal-tb - Content flows horizontally from left to right, vertically from top to bottom.
vertical-lr - Content flows horizontally from left to right, vertically from top to bottom.
vertical-rl - Content flows horizontally from right to left, vertically from top to bottom.

Checkout this this example to see it in action.

10. Adding gradient to text

This is achieved with the combination of -webkit-background-clip: text and -webkit-text-fill-color: transparent CSS properties.

11. Smooth scroll snap

scroll-snap-type CSS property sets how snap points are applied on the scroll container.

This example shows vertical(y) scroll with value mandatory. MDN docs does a great job on explaining how to use other values such as proximity and horizontal scroll(x).

These are just a few great things CSS can do. Possibilities are endless! 🥳

Create A Dark/Light Mode Switch with CSS Variables

Ananya Neogi — Wed, 10 Apr 2019 20:27:44 +0000

Giving your users a way to customise the interface to their preference is a huge win for user experience. Here we are going to provide the user with a simple switch to toggle between dark mode and light mode and we will also try to remember their preference for future visits.

Let's begin!

If you don't have a website of your own to which you wish to add this functionality, use this demo website to follow along.

Adding the CSS

We will be adding CSS custom properties also known as CSS variables, which we can reference and modify throughout the document. If you wish to read more about custom properties you can read on MDN.
Here's the tldr; version -

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);)

First, we'll add our light or default mode css variables to the :root pseudo class. It matches with the root element in your document tree, generally the <html> tag. We will use :root because we want to avail the variables globally.



:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}

Second, we'll add our dark mode css variables.



[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

What is [data-theme="dark"]? This means we are referencing a data attribute called data-theme with a value "dark". We will find the use of it in a while.

Then, we can reference these variables in our stylesheets like so-



body {
    background-color: var(--bg-color);
    color: var(--font-color);

    /*other styles*/
    .....
}

h1 {
    color: var(--secondary-color);

    /*other styles*/
    .....
}

a {
    color: var(--primary-color);

    /*other styles*/
    .....
}

Adding the HTML "toggle switch markup"

This is essentially just a checkbox, however we will add some additional markup to style like a toggle switch. I referenced the styles from this codepen.



<div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
  </label>
  <em>Enable Dark Mode!</em>
</div>



/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
  display: flex;
  align-items: center;

  em {
    margin-left: 10px;
    font-size: 1rem;
  }
}
.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #66bb6a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Adding the JavaScript

The final part is to add the bit of JavaScript to tie it all together.
We have 3 tasks in hand-

Add event handlers to handle accordingly the check/uncheck event of toggle-switch
Store the user preference for future visits
Check for saved user preference, if any, on load of the website

Adding the event handlers




const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

Remember, the data-theme attribute we referenced in CSS above, this is where it's getting added to our root element.

Store the user preference for future visits

We will use browser's localStorage to store the user preference.
Let's modify our switchTheme function -



function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark'); //add this
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light'); //add this
    }    
}

Check for saved user preference, if any, on load of the website

We will check if the theme preference is saved, if yes then we will, accordingly-
- set our data-theme attribute
- check/uncheck our toggle-switch checkbox




const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

That's it! Check out the full demo below.

I recently added this to my website, so check that out as well, maybe!

Pro-Tip: How to decide on the color scheme?
My suggestion is to stay in the same spectrum of your primary or brand color and generate a palette out of it. Use the darkest shade from the palette as the background color and the lighter shades as font colors when in dark mode. I used this color shades generator for generating my color palette.

Even if you don't end up using the exact colors generated, it is still a good place to start. Even I ended up fine tuning the colors I ultimately used.

Resources

Learn CSS Variables in 5 minutes

Nevertheless, Ananya Coded

Ananya Neogi — Tue, 05 Mar 2019 19:19:07 +0000

Let's take a trip down the road, back in the early '00s when I was just a school girl. My parents really invested in my education, sent me to a top school in my city, gave me all the privileges of a good education. Not coming from a wealthy family, this meant a lot. This meant that my parents sacrificed a LOT for this privilege of education. Things were different for girls back then in India. People from society, even some relatives advised and taunted my parents that they were wasting so much money educating a girl, because according to them, girls were just meant to be married off when they come of age and should only be limited to household work and were not meant for getting a higher education. I remember I was in tears when I overheard this conversation!
But, my parents did not budge, they never discriminated solely because I was a girl, they kept educating me from a good school to a good university, even though they had to sacrifice so much during this whole journey. I am so so grateful to have such wonderful and amazing parents. ❤️

So, why #shecoded you ask?

She coded for her parents, to honour all the sacrifices her parents made for her. She coded for a dream that ignited her heart as a kid. She coded to prove all those people wrong who doubted her. She coded to give her parents all the luxuries that they once sacrificed for her sake. She coded to make her parents proud who bought her, her first computer even though they couldn't afford it. Most importantly, she coded for that little girl, who cried thinking it was a curse to be born a girl. She coded to prove to her that she was and will always be enough to do anything she sets her heart to do!

I hope to see my community...

It breaks my heart that things still might be the same for many girls and they might not have had the same privileges that I got. Many women don't even consider a career in tech because somewhere while growing up someone said to them that they are not enough! I hope to see my community fight for women in tech. I hope to see my tech community be more accepting, kind and respectful. I hope to see my tech community take actions against people who are disrespectful and hostile against fellow humans.

Advice for #womenintech

It can be very difficult at times, it might even seem hopeless but don't give up! We need you in this field. We need you to continue fighting for equal rights for our younger generations of women to come. You are not alone in this fight! Keep learning and growing. 🤗

Last but not least I want to give a shoutout to some of my favourite women/people in tech, who have unknowingly helped me throughout and continue to inspire me everyday. @aprilwensel @sarah_edo @SaraSoueidan @NikkitaFTW @jensimmons @Una @LeaVerou @jina @manjula_dube @kvlly @venikunche @vaidehijoshi @AnjanaVakil @MinaMarkham @b0rk @rachelandrew @ladyleet ...The list is endless to be honest.

Useful CSS Media Query Features

Ananya Neogi — Tue, 12 Feb 2019 20:15:38 +0000

A typical media query consists of a media type (screen, print, speech, etc) and one or more expressions, involving media features, which resolve to either true or false.
The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. The corresponding styles are applied, when the media query result is true.

Note: If no media type is specified the default is all type, i.e the corresponding styles will be applicable for all devices.

Media features

Media features describe specific characteristics of the user agent and the device the document is being displayed on. These are optional.

Here are a few useful media features that I've come across-

1. Aspect Ratio

Aspect ratio is the width to height ratio of the viewport.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
 ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

Here's a practical example using aspect ratio -

img {
    display: block;
    margin: auto;
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio: 16/9) {
    img {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}

Check out the working demo. Increase/decrease the height of the window to see it in effect.

2. Orientation

There are two orientation values-

portrait: The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.
landscape: The viewport is in a landscape orientation, i.e., the width is greater than the height.


@media (orientation: landscape) {
    /* landscape styles */
}

@media (orientation: portrait) {
    /* portrait styles */
}

This media feature helps in responsive design. We can use it with other media features such as width and height.

@media screen and (min-height: 640px) and (orientation: portrait) { 
    ...
}

3. `display-mode`

The display-mode is used to test the display mode of an application. There are 4 types according to the spec. It is a part of Web App Manifest specification.
The feature query will apply irrespective of whether a web app manifest is present or not.

Check out this article for a practical usage of this- Making Fullscreen Experiences

4. `hover`, `any-hover` and `any-pointer`

hover: The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.

I've found it useful to use this feature to avoid cases in which touch devices emulate hover states on long tap of hoverable elements.

@media (hover: hover) {
  a:hover {
    background: blue;
  }
}

any-hover: This checks whether any available input can hover over elements.

any-pointer: This checks whether the user has any pointing device (mouse, stylus), if so then how accurate it is.
Accuracy is measured with - fine, coarse, none

A really great article on this topic -
Touch Devices Should Not Be Judged By Their Size

5. Width and Height

These two are very commonly used media features and are an essential part of responsive web.

/* Exact width */
@media (width: 360px) {
  body {
    ...
  }
}

/* Maximum width */
@media (max-width: 768px) { 
  body {
   ...
}

/* Minimum width */
@media (min-width: 992px) { 
  body {
    ...
  }
}

/* Exact height */
@media (height: 360px) {
  body {
    ...
  }
}

/* Minimum height */
@media (min-height: 640px) {
  body {
    ...
  }
}

/* Maximum height */
@media (max-height: 768px) {
  body {
    ...
  }
}

/* All the values can also be in rem, em, vw, vh */

6. `prefers-color-scheme`

This has been introduced in media queries level 5. It will be useful when it is fully implemented!
This is used to detect if the user has requested their system to use a light or dark color theme. Previously I wrote about enabling dark mode on websites using surrounding light, this can be an add on to that if the ambient light API is not available.

Check out other features introduced in media queries level 5.

Edit: As pointed out here, according to caniuse, it is available in the technology preview version of safari.

These are few of the useful media features that I've found. There are others as well such as resolution, update, etc. Full list can be found on MDN.

If you've come across any other lesser known media features and it's use cases, let me know!