2799 stories
·
1 follower

The CSS-in-React Landscape

1 Comment

(This is a sponsored post.)

I only half-jokingly refer to the CSS-in-JS world as CSS-in-React. Many of the libraries listed below theoretically work in non-React situations — they generally call that “framework-agnostic”) — but I’d guess the vast majority of their usage is on React projects. That’s because React, despite being a UI-focused library, has no particular blessed styling solution. Vue has style tags built right into Single File Components. Same with Svelte. Angular also has a built-in component-scoped styles solution. With React, it’s bring-your-own.

Perhaps not venturing too far out of their core strengths is a strength of React. I dunno. But you do have to make a choice on how to style things on your React projects. For example, you can simply write (and there is literally no problem with this), regular ol’ flat-file vanilla CSS to style your React projects. I’d recommend that over using inline style={{ }} on everything any day. But truth be told, there are some pretty nice advantages to choosing a library to help with styles. Things like:

  • Co-locating styles and components
  • Scoping styles to components
  • Using props in styling variations
  • Using JavaScript abilities within CSS syntax
  • Theming

Each library has its own set of fancy things that might be variations on the above, or might be totally unique to that library.

It’s also notable that by using a library where you author styles in your JavaScript, it’s not a 100% guarantee that you have to ship your styles in JavaScript. The libraries that use the term “zero runtime” are typically referring to the idea that the styles are compiled to CSS during a build process, so you use that CSS like any other, which is likely better for performance.

This research is brought to you by support from Frontend Masters, CSS-Tricks’ official learning partner.

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, including a Front-End Developer Learning Roadmap that can help you on your journey, which includes a section on CSS in JavaScript.

A couple of caveats before we go through the list:

  • I’m not deeply experienced in every single one of these libraries. I’ve used several of them on real projects, most heavily CSS Modules. I can’t quite speak to the nuances of each. The demos below are basic demonstrations of basic styntax.
  • If I get any facts wrong or you want to add more detail, hit me in the comments or via our contact form and I’ll improve things.
  • The point of this, partially, is to have a working code example of each for easy reference.

styled-components

  • Super popular — probably the most-used option.
  • Popularized the possibilities of dynamic styling and the magic of using props for variations.
  • Template literal syntax feels comfortably CSS-like. It seems like it really encourages using it that way, but it is possible (docs) to use Object syntax.
  • Supports SSR, but it’s not the same as “zero runtime” libraries (which means “compiles to static CSS.” It still ships a JavaScript runtime for any dynamic styles.

CSS Modules

  • Very simple. All it does is scope styles and encourage co-location of styles and components.
  • It’s fancy feature is composition, which is basically mixins based on existing classes.
  • Not a runtime thing at all — it requires a build process. But it still works with HMR and such. You can ship it with styles in JavaScript, or extract them into static CSS files. It does nothing dynamic, so it’s extremely “zero runtime” if you extract the CSS.
  • Can be combined with Sass.
  • Built into Next.js

Emotion

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

  • It doesn’t seem terribly different than styled-components, TBQH, but this podcast gets into some of the performance differences.
  • Supports SSR, but is not zero-runtime.
  • Glamorous is totally deprecated (and I suppose Glam and Glamor as well?) in favor of Emotion, so that’s something.

Stitches

  • The Variants API is very useful and well done.
  • The TypeScript editor experience¹.
  • Supports theming and encourages using a design token approach.
  • Utilities allow you to build your own custom shorthands for styling.
  • Supports SSR — and it’s closer to zero-runtime, though not entirely. Also doesn’t seem to actually generate CSS files, rather it has a function that spits out CSS so you can use SSR via a <style> tag (which I can’t imagine is ideal for caching).
  • Here’s a Twitter thread with an honest review. Also see all the reactions to this.

vanilla-extract

  • I’d say vanilla-extract supports SSR but it’s more than that because that’s the only way it is used, unless you opt into specific “runtime” features, like dynamic theming. That’s the meaning of “zero runtime”: it only compiles to static CSS files.
  • The TypeScript editor experience¹. (Also see our recent article.)
  • Variants API, including a Recipes API that is like like the Stiches framework above.
  • Supports a theme and utility-class-like approach via Sprinkles
  • I was gonna put Aphrodite on this list, but the creators of it are moving to vanilla-extract, so it probably isn’t a great choice these days, even though it seems to do pretty much all the same stuff as these other libraries.

JSS

  • Has a React-specific integration
  • Has an extend syntax
  • Plugin architecture

Linaria

  • The OG of “Zero Runtime” CSS-in-JS libraries.
  • Compiles to actual CSS files, but still has a runtime if you do dynamic things (at least I think so).
  • Feels similar to styled-components API-wise.
  • Supports Critical CSS.

Styled JSX

  • Babel plugin, so definitely a build-process thing.
  • Using a <style jsx> tag right in the component at the level of nesting you want to scope to is a clever API.
  • Lack of nesting isn’t great — you have to repeat the selector name a lot.

Goober

  • Goober is notable because it has an awesome name and is a mere 1.25KB, which is like an order of magnitude smaller than anything else.
  • Pretty much the same feature set of styled-components and Emotion.

Interesting resources:

  • Shopify’s research on which library they wanted to switch to.
  • Facebook has something cooking (conference video), but hasn’t open-sourced anything. It’s apparently called “StyleX” — and there is already a library called “Style9” that attempts to match the features, including near-zero runtime, atomic CSS output, and the TypeScript experience.
  • If you’re into authoring in the atomic style, a lot of people think that using Tailwind (probably with just-in-time mode) is the way to go.
  • Probably a more React-y version of Tailwind is Styled System, which provides styles as a bunch of preconfigured props.
  • Twin is along the lines of authoring with atomic styles in a React-y way.
  • I could not get Compiled to work for me. I’m sure it was just me, but I gave up. It looks exactly like the styled-components API to me, except the output is atomic CSS classes, which does seem kinda cool.
  • The site CSS in JS Playground shows a bunch of examples, including a few libraries not mentioned here, like Fela, Radium, and more. My god, are there a lot of these things.
  1. By “the TypeScript editor experience,” I mean the library is written in TypeScript to take advantage of one of TypeScript’s best features: help autocompleting code in code editors. For example, if you’re using VS Code as your code editor, and you write a set of “color” variants, then type <Button color=" in your JSX file, you should get a list of your own compatible variants in the contextual VS Code autocomplete menu to choose from.


The post The CSS-in-React Landscape appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the whole story
emrox
2 days ago
reply
nice overview
Hamburg, Germany
Share this story
Delete

Natively Format JavaScript Dates and Times

1 Share

Elijah Manor digs into Date’s toLocaleDateString() and toLocaleTimeString() methods to format Dates and Times in JavaScript, with respect to a passed locale.

Comes with some code, and a short video.

Natively Format JavaScript Dates and Times →

Read the whole story
emrox
2 days ago
reply
Hamburg, Germany
Share this story
Delete

Some Typography Links VIII

1 Share


The post Some Typography Links VIII appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the whole story
emrox
3 days ago
reply
Hamburg, Germany
Share this story
Delete

Predictions for the Future of Music

1 Share

Let me peer into my crystal ball, and predict the next decade in music. I’m brave (or foolhardy) enough to tell you what I see—but you may want to sit down first. If you earn your living from music, some of these changes might come as a shock.

But don’t blame me, I’m merely the messenger. It’s the bloody crystal ball that’s cranky.

  • Record labels will gradually lose both the ability and desire to develop new artists—there simply won’t be enough profit in young talent to justify the large required investments. But the labels won’t disappear. Instead they will focus increasingly on their old catalog and archival materials.

  • More new artists will get their big break from web platforms (TikTok, YouTube, Peloton, Bandcamp, etc.) than from record labels. That said, even these platforms are less-than-ideal ways to introduce new artists to curious listeners. So I wouldn’t be a surprised if a whole new platform emerges during the next decade—an interface that makes it fun and exciting for music fans to hear new music. The online process should be almost as enjoyable as going out to clubs, but currently it’s not even close. Strange to say, video games like Fortnite might end up doing a better job of this than music platforms.

  • A peculiar phenomenon will emerge—listeners will have favorite new songs, but not know (or care) about the name of the artist. “You’ve gotta hear this great song on my workout playlist. . . .” In an odd way, our song discovery process will return to the medieval model (circa 1000 AD), when compositions could achieve enormous popularity even as the people who created this music remained largely anonymous.

  • Musician incomes will continue to shrink, but some young musicians will still earn large sums of money—however, their big paydays will come more from branding, licensing, and ancillary deals than recordings. Side deals will increasingly be seen as more desirable than record contracts. In other words, you become a musician in order to make money as an influencer. (That’s a term I abhor, but, let me repeat: I’m just the messenger—it’s my crystal ball that’s shallow and narrow-minded.)

  • Dead musicians will start showing up everywhere—via holograms, biopics, deepfake vocals, and other technology-driven interfaces. These resurrected performers will capture an increasing share of industry revenues, and put a squeeze on living artists. (This will eventually happen with dead movie stars and other celebrities too, but deceased musicians will lead this trend because it’s simpler and cheaper to fake an audio than, for example, a commercial film.)

  • Dead musicians will start by giving tours in concert halls, but as the cost of the technology goes down, they will begin performing everywhere. Holograms of Elvis may make their debut at a pricey Las Vegas casino, but will soon show up at your neighborhood bar. James Brown will sing at the Apollo once more, but eventually take wedding reception and bar mitzvah gigs.

  • Exciting new music trends will continue to emerge, but increasingly they will arrive from outside the major Anglo-American urban centers that previously determined what songs people heard. We have already seen the first signs of this with the global spread of K-Pop and the vitality of the Eurovision competition, but these are merely a start in the power shift away from Los Angeles, New York, and London. So get ready for A-Pop from Africa, I-Pop from India or Indonesia, and a whole host of competing sounds and styles from Latin America, China, Eastern Europe, etc. (And, finally, I can commend my crystal ball for showing some taste and open-mindedness—this promises to be a positive trend, expanding the creative scope of our musical lives.)

  • Meanwhile in the United States and the rest of the English-speaking world, the biggest deals in music will be acquisitions of old songs, especially publishing rights. The legacy cash flows enjoyed by publishers will make this the last safe haven in the music business.

  • The “official industry figures” will show that the music business is growing, but these numbers will be highly misleading. A huge portion of “music profits” will actually go to tech companies (Apple, Google, etc.), who have no interest in reinvesting this cash into the music ecosystem. For example, Spotify will take the cash flow generated by music and use it to acquire rights to podcasts, etc.—and, in general, the music culture will be starved of funds because it now must pay the bills for other businesses. (The crystal ball tells me that Spotify’s biggest dream is getting into video and competing with Netflix and YouTube, using songs to pay the costs of achieving this—but that can’t be true, can it? They would have to burn through billions of dollars to play in those big leagues, and there’s not enough cash left in music to cover those expenses. Only ego, not logic, would push them in that direction, no?) In any event, the same numbers that will be publicized as signs of the music industry’s health will actually indicate the growing scope of the cash and talent drains on the creative/artistic side of the business.

  • All the innovations in music tech will come from outside of the legacy music industry. So major decisions about distribution, publicity, curation, presentation, etc. will be determined by Silicon Valley and its offshoots. These huge global corporations—literally the largest businesses in the history of the world—are unlikely to be motivated by artistic or philanthropic aspirations in their initiatives. However, they could have a major positive impact on the culture if they wanted to, given the enormous resources at their disposal. Hence the musical tastes of the CEOs of Apple, Google, etc. may end up having a surprisingly large impact on how things play out.

  • Record labels will increasingly pursue a bare-bones, low investment approach. A few execs will be able to maintain lavish lifestyles even in a declining industry, but there won’t be much cash for those at lower levels in the organization. Most people working in the music business will be poorly paid, with few opportunities for advancement. New openings at the top will typically go to family members and close friends of the old school bosses—making nepotism the one record business tradition that will survive no matter what.

  • But the greatest dream of the music execs will be. . . to get out the music business. They will try to sell NFTs or promote audiobooks or finance biopics or sell music-themed apparel or open music-themed casinos, etc., etc.. And who can blame them? After collapsing the economics of the record business, they clearly need a new field to destroy.

  • Ouch! That was painful. I want to smash this crystal ball, and buy a new one. Or maybe I need to consult my horoscope instead, or study the entrails of birds. There has to be a better way of predicting the future. Because, even though we all like to be right, this is one case where I’d much prefer to be wrong.

    Read the whole story
    emrox
    3 days ago
    reply
    Hamburg, Germany
    Share this story
    Delete

    Stop Calling Everything AI, Machine-Learning Pioneer Says

    1 Share

    THE INSTITUTE Artificial-intelligence systems are nowhere near advanced enough to replace humans in many tasks involving reasoning, real-world knowledge, and social interaction. They are showing human-level competence in low-level pattern recognition skills, but at the cognitive level they are merely imitating human intelligence, not engaging deeply and creatively, says Michael I. Jordan, a leading researcher in AI and machine learning. Jordan is a professor in the department of electrical engineering and computer science, and the department of statistics, at the University of California, Berkeley.

    He notes that the imitation of human thinking is not the sole goal of machine learning—the engineering field that underlies recent progress in AI—or even the best goal. Instead, machine learning can serve to augment human intelligence, via painstaking analysis of large data sets in much the way that a search engine augments human knowledge by organizing the Web. Machine learning also can provide new services to humans in domains such as health care, commerce, and transportation, by bringing together information found in multiple data sets, finding patterns, and proposing new courses of action.

    “People are getting confused about the meaning of AI in discussions of technology trends—that there is some kind of intelligent thought in computers that is responsible for the progress and which is competing with humans," he says. “We don't have that, but people are talking as if we do."

    Jordan should know the difference, after all. The IEEE Fellow is one of the world's leading authorities on machine learning. In 2016 he was ranked as the most influential computer scientist by a program that analyzed research publications, Science reported. Jordan helped transform unsupervised machine learning, which can find structure in data without preexisting labels, from a collection of unrelated algorithms to an intellectually coherent field, the Engineering and Technology History Wiki explains. Unsupervised learning plays an important role in scientific applications where there is an absence of established theory that can provide labeled training data.

    Jordan's contributions have earned him many awards including this year's Ulf Grenander Prize in Stochastic Theory and Modeling from the American Mathematical Society. Last year he received the IEEE John von Neumann Medal for his contributions to machine learning and data science.

    In recent years, he has been on a mission to help scientists, engineers, and others understand the full scope of machine learning. He says he believes that developments in machine learning reflect the emergence of a new field of engineering. He draws parallels to the emergence of chemical engineering in the early 1900s from foundations in chemistry and fluid mechanics, noting that machine learning builds on decades of progress in computer science, statistics, and control theory. Moreover, he says, it is the first engineering field that is humancentric, focused on the interface between people and technology.

    “While the science-fiction discussions about AI and super intelligence are fun, they are a distraction," he says. “There's not been enough focus on the real problem, which is building planetary-scale machine learning–based systems that actually work, deliver value to humans, and do not amplify inequities."

    JOINING A MOVEMENT

    As a child of the '60s, Jordan has been interested in philosophical and cultural perspectives on how the mind works. He was inspired to study psychology and statistics after reading British logician Bertrand Russell's autobiography. Russell explored thought as a logical mathematical process.

    “Thinking about thought as a logical process and realizing that computers had arisen from software and hardware implementations of logic, I saw a parallel to the mind and the brain," Jordan says. “It felt like philosophy could transition from vague discussions about the mind and brain to something more concrete, algorithmic, and logical. That attracted me."

    Jordan studied psychology at Louisiana State University, in Baton Rouge, where he earned a bachelor's degree in 1978 in the subject. He earned a master's degree in mathematics in 1980 from Arizona State University, in Tempe, and in 1985 a doctorate in cognitive science from the University of California, San Diego.

    When he entered college, the field of machine learning didn't exist. It had just begun to emerge when he graduated.

    “While I was intrigued by machine learning," he says, “I already felt at the time that the deeper principles needed to understand learning were to be found in statistics, information theory, and control theory, so I didn't label myself as a machine-learning researcher. But I ended up embracing machine learning because there were interesting people in it, and creative work was being done."

    In 2003 he and his students developed latent Dirichlet allocation, a probabilistic framework for learning about the topical structure of documents and other data collections in an unsupervised manner, according to the Wiki. The technique lets the computer, not the user, discover patterns and information on its own from documents. The framework is one of the most popular topic modeling methods used to discover hidden themes and classify documents into categories.

    Jordan's current projects incorporate ideas from economics in his earlier blending of computer science and statistics. He argues that the goal of learning systems is to make decisions, or to support human decision-making, and decision-makers rarely operate in isolation. They interact with other decision-makers, each of whom might have different needs and values, and the overall interaction needs to be informed by economic principles. Jordan is developing “a research agenda in which agents learn about their preferences from real-world experimentation, where they blend exploration and exploitation as they collect data to learn from, and where market mechanisms can structure the learning process—providing incentives for learners to gather certain kinds of data and make certain kinds of coordinated decisions. The beneficiary of such research will be real-world systems that bring producers and consumers together in learning-based markets that are attentive to social welfare."

    CLARIFYING AI

    In 2019 Jordan wrote “Artificial Intelligence—The Revolution Hasn't Happened Yet," published in the Harvard Data Science Review. He explains in the article that the term AI is misunderstood not only by the public but also by technologists. Back in the 1950s, when the term was coined, he writes, people aspired to build computing machines that possessed human-level intelligence. That aspiration still exists, he says, but what has happened in the intervening decades is something different. Computers have not become intelligent per se, but they have provided capabilities that augment human intelligence, he writes. Moreover, they have excelled at low-level pattern-recognition capabilities that could be performed in principle by humans but at great cost. Machine learning–based systems are able to detect fraud in financial transactions at massive scale, for example, thereby catalyzing electronic commerce. They are essential in the modeling and control of supply chains in manufacturing and health care. They also help insurance agents, doctors, educators, and filmmakers.

    Despite such developments being referred to as “AI technology," he writes, the underlying systems do not involve high-level reasoning or thought. The systems do not form the kinds of semantic representations and inferences that humans are capable of. They do not formulate and pursue long-term goals.

    “For the foreseeable future, computers will not be able to match humans in their ability to reason abstractly about real-world situations," he writes. “We will need well-thought-out interactions of humans and computers to solve our most pressing problems. We need to understand that the intelligent behavior of large-scale systems arises as much from the interactions among agents as from the intelligence of individual agents."

    Moreover, he emphasizes, human happiness should not be an afterthought when developing technology. “We have a real opportunity to conceive of something historically new: a humancentric engineering discipline," he writes.

    Jordan's perspective includes a revitalized discussion of engineering's role in public policy and academic research. He points out that when people talk about social science, it sounds appealing, but the term social engineering sounds unappealing. The same holds true for genome science versus genome engineering.

    “I think that we've allowed the term engineering to become diminished in the intellectual sphere," he says. The term science is used instead of engineering when people wish to refer to visionary research. Phrases such as just engineering don't help.

    “I think that it's important to recall that for all of the wonderful things science has done for the human species, it really is engineering—civil, electrical, chemical, and other engineering fields—that has most directly and profoundly increased human happiness."

    BUILDING A COMMUNITY

    Jordan says he values IEEE particularly for its investment in building mechanisms whereby communities can connect with each other through conferences and other forums.

    He also appreciates IEEE's thoughtful publishing policies. Many of his papers are available in the IEEE Xplore Digital Library.

    “I think commercial publishing companies have built a business model that is now ineffectual and is actually blocking the flow of information," he says. Through the open-access journal IEEE Access, he says, the organization is “allowing—and helping with—the flow of information."

    IEEE membership offers a wide range of benefits and opportunities for those who share a common interest in technology. If you are not already a member, consider joining IEEE and becoming part of a worldwide network of more than 400,000 students and professionals.

    Read the whole story
    emrox
    3 days ago
    reply
    Hamburg, Germany
    Share this story
    Delete

    A Simple But Effective Mental Health Routine For Programmers

    1 Comment

    After working on a coding project for a good couple of hours, many developers like myself tend to hit a wall. The level of creativity goes down, and we feel extreme mental exhaustion (especially if we have been working for more than three hours straight). We can’t help but want a fairly long break from our computers or working (desks) before we can continue with our work.

    However, when we have a deadline to meet, we usually brace ourselves and keep going. At times, doing this works because we tap into our deeply hidden mental energy, but also, there are other times when it simply doesn’t work. Our brains go on strike until their demand is met. Which demand, you ask? A long and well-deserved break to refresh and reset.

    If we decide to deny or ignore this demand consistently, sooner or later we’ll find that our overall rate of productivity goes down for a good deal of time. We also run the risk of failing at almost everything — including our personal lives.

    Let’s take a good look at how we can establish an effective routine that will help ourselves bring benefits work-wise and health-wise in the long term.

    Why Having A Routine Is Important

    Generally, having a routine we follow has been found to have its own benefits. A study published by The Lancet30139-1/fulltext) concluded that people who have a stable daytime routine tend to have a better cognitive function, restful sleep, emotional stability, and improved overall well-being due to maintaining a good circadian rhythm (the natural cycles of life, like the sleep-wake cycle).

    Another study published by Sage Journals showed that those who follow a daily routine tend to feel life is more meaningful for them than those who do not. Having a planned list of activities for the day and ensuring we do every activity when we are supposed to allow us to be less stressed and feel more fulfilled. On top of that, doing everything in our routine gives us a sense of accomplishment and purpose, and adds value to our lives. It also helps ease the tension that comes with the regular demands of life and the hecticness of some of the tough mathematical calculations and creativity-based activities we get engaged in as programmers.

    Moreover, it helps us relax and refresh our brains after a long period of work. Now let’s take a look at the actual mental health routine.

    The Simple Mental Health Routine For Developers

    Personally, my mental health routine has allowed me to be more productive, break through the mental and physical limitations at work and be able to strike a good balance of my work, family and personal life.

    Some of the techniques I have used that have proven to be effective are:

    • Resting awareness,
    • Meditation,
    • Mindfulness,
    • Reflection,
    • Body scanning,
    • Visualization,
    • Note-taking,
    • Mindful programming.

    The last one is the meat of my routine. Here, I go about my programming tasks as usual but I try to remain aware of myself as I do it. If you would like to have a look at my personal mental health routine in detail where I go in-depth about each practice and how I work with it to better myself and my programming skills, I encourage you to try it out yourself.

    Some of the benefits I have seen from the routine are as follows:

    Reducing Momentary Negative Effect

    For the most part, coding can be quite intimidating and disappointing for a beginner or even a well-versed developer. When we write code with all our hearts — hoping that we got everything right — and then find out that some areas of our code are not working and we can’t seem to figure out where exactly the problem is, we can easily become temporarily frustrated pessimists.

    During such times, mindfulness can come in handy for us because research has shown that it helps reduce momentary negative effects. By doing mindful movement techniques such as walking meditation and mindful walking, we can increase positive feelings within ourselves and help us keep going.

    Boosting Focus And Attention

    When I am aware, I often find it less difficult to keep my focus and attention levels high and I am able to keep going without distractions. Scientific research attributes this ability to a brain wave called Alpha Rhythm that regulates information that brings about distraction.

    Thinking, Remembering And Processing Information Better

    When we are in the present moment, we get to understand things easily and remember them without a lot of hassles. Reasoning and figuring out how we are going to implement certain bits of our code to achieve the desired goal also become effortless over time.

    Studies that focus on this particular topic have revealed that this is due to the ability of mindfulness practice to increase the density of the gray matter in the brain — specifically in those areas that are associated with perspective thinking, learning abilities, self-referential processing, and emotional regulation.

    Feeling More Stable After Working Long Hours

    Have you ever felt overwhelmed to the point where you you have lost control of yourself in terms of peace and calmness? Mindfulness gives us clarity on what we are working on and keeps us peaceful. In the past, I had scenarios where I felt so overwhelmed and disappointed by the constant inability to solve various bugs in my code that made me question why I got into programming in the first place.

    As I practiced mindfulness, however, I was able to tell when I was exaggerating issues in my mind and when my thoughts were blowing things out of proportion. With the help of mindfulness techniques such as mindful walking and reflection, we get to see reality as it actually is, and not as we think of it. This changes our perspective for the better.

    Regulating Stress And Anxiety

    Are you about to miss deadlines and your mind can’t calm down and let you finish up on the remaining tasks in peace? Well, mindful breathing and visualization of your situation allow you to be aware of the stress and anxiety, and better react to them. It helps bring down the high levels of the Cortisol hormone that is linked to stress.

    The points above are part of a simple mindfulness-based mental health routine that we can all easily work with as employed developers, freelancers, or as we run our own programming ventures (link to the mental health routine freebie). Implementing some of these would require a few minutes of meditation in the morning and then after that, we remain aware of ourselves and our environment as we go about our work in our typical day.

    Getting Started With Your Own Mental Health Routine

    In case you feel, individually, like you want to make some more customization to the given mental health routine above, by all means, feel free to do it. At the end of the day, it is about finding a mental health routine that goes well with you and has a positive impact on your work and life as a whole. Your mental health routine should be something that complements what you already have in your life and what you feel is good for you as a uniquely different person.

    So don’t feel the pressure to have to stick to something that doesn’t necessarily sit well with you. However, below are some ideas or other mental health improvement strategies that are effective which you can explore.

    Yoga

    Yoga is a practice that helps us quiet our minds so as to ground ourselves in unbound consciousness, which is our essential nature. It helps unite the physical, mental, and spiritual aspects of our lives. Some of its benefits include improving memory, learning abilities, social-emotional processing, sensorimotor processing, and many other cognitive functions. This can make a good addition to your routine if these are the benefits you are looking for.

    Other Meditation Styles

    Other than mindfulness meditation, there are other meditation styles such as focused attention meditation, zen meditation, religious meditation (for various religions), and others that help train our brains on various personal values. You can look at your life and decide which areas you fall short in that affect your programming career and life in general, and go for a meditation practice that helps you with that. For instance, if you struggle to remain focused, you can work with focused attention meditation to sharpen your focus.

    Sleeping

    Funny as it may sound, sleep is a really good technique to refresh our minds and bodies. Studies show that it helps with improving the communication between nerve cells. On top of the mindfulness-based practices I work with, sleep is another one of my go-to techniques when I feel I need a total refreshing of my mind.

    When you feel confused or overworked, leave your workplace and find yourself a place to lay down and shut down for a few minutes (if that won’t get you fired). However, don’t get into the habit of sleeping, or that will become counter-productive. I always recommend sleeping as the last resort.

    Plan Ahead

    One of the things that lead to confusion is a lack of planning. If you start off in many directions, you are sure to lose and come out more confused than you started. Programming requires a lot of mental planning before we get to execute it physically and research has linked this kind of planning to project success, not only in programming but also in other areas of our lives.

    What I normally do isgain a good understanding of the entire project I am working on, the areas that I am supposed to work on, what is needed in those areas, and then I break down the work into small steps in my to-do list. Everytime I finish a task, I tick it off my list. This helps me make consistent progress and achieve the goal much faster.

    Physical Exercise

    While physical fitness is good for the body, it has also been found to have a positive effect on the brain. It reduces anxiety, depression, and negative moods. So, whenever you feel anxious or moody, just get into some exercises before getting back to work and you will most likely love the results.

    Look For A Developer Friend

    Sharing your problems with someone who understands the gravity of the issues, and who can also help you solve them, is among the most valuable things in life. Look for a programming buddy or team you can easily get along with and become work and life buddies.

    Hold each other accountable, help each other through your projects, and consult each other when you need genuine feedback and constructive criticism. This makes for peace of mind, enjoyment, more productivity and satisfaction with your career.

    Change Your Working Environment (If You Can)

    This works well if you are a work-from-home developer. Although, it is also possible to change your environment in your workplace if your company has provided alternative sitting areas. Changing your environment can reset your mind and help you through some hurdles you have been struggling to get past. You can choose to change your sitting position, or move to a different corner of your office or working space. These actions might seem small but all have a significant impact.

    Get A Breath Of Fresh Air

    Exposing yourself to fresh air allows you to get more oxygen to your brain which helps improve the performance of the brain. If you stay in a poorly ventilated room for a long time, you can hurt your brain in the long run. By regularly getting some fresh air, you improve the power of your brain which can, in turn, help you push even further.

    Listen To Your Favorite Songs

    Different songs have different effects on people. Whenever you feel mentally and physically exhausted, listening to songs that remind you of your dreams, goals, and visions, as you relax, can energize you and make you want to keep going with your work.

    Just close your eyes, lean back on your working chair, and listen to those songs as you visualize your goals and the amount of effort needed to get there, and you will notice your energy levels and motivation increase after some time. My personal favorite playlist is the slow independent (indie) songs or a playlist of slow soothing songs or instrumentals.

    Conclusion

    When trying out any of the techniques mentioned in this article, please ensure that you go for the ones that will blend in with your daily schedule, habits and beliefs as that will make it possible to have a much better experience working with them.

    Taking care of our mental health is of utmost importance. We only get to have one brain throughout our lives so we need to do all we can to take good care of it. And the best part is that you don’t need to do much to make that happen. All you have to do is to get started on a mental health routine and stick to it. The first step is by adding the routine to your daily schedule. If the provided mental health routine works fine for you, figure out where you can begin doing mindfulness meditation and then remember to work mindfully.

    If you want to spice things up, you can consider the other mental health techniques you like and use them to create your custom mental health routine that best fits your lifestyle. It is entirely up to you.

    The key takeaway here is, you should seriously consider working with a routine and it’s even better if you get started with one as early as now if you want to improve your mental health, your work, and your overall well-being for years to come.

    Again, if you would like to have a look at my completely detailed mental health routine, feel free to download it here.

    So, what technique or daily routine works best for you? I’d love to hear from you in the comments section below!



    Read the whole story
    emrox
    3 days ago
    reply
    taking care of your health - mental and physical - is always important
    Hamburg, Germany
    Share this story
    Delete
    Next Page of Stories