DEV Community: with Pyaar

Surviving as a Black Female Ambivert in Tech...

with Pyaar — Tue, 28 Apr 2020 05:19:12 +0000

Note, I’m writing this on my phone so forgive punctuation errors.

I joined a small team where I faced issues I wasn’t prepared for, but had always been there, throughout my career. Let me know if you relate.

I’m automatic perception is i am unknowledgeable. I have to be the best in order for that stereotype to dissipate and that takes an unusual amount of energy, not just technically, but soulfully.
My accomplishments are typically overlooked ( I read an article on the importance of touting your own horn, which seems valid... which I don't do well) and not rewarded in meaningful ways like a pay increase. I worked for a company where I trained someone well and found out they were making a lot more money then me, doing the same job. 🤪
Other females get intimidated and territorial, this leads to sabotage. 🐍
You have to be jolly, you can’t just sit and do your work or else you’ll be labeled unpleasant even if you’re polite to everyone. You have to put on an act in order to fit in. That’s mostly everywhere, but it’s on steroids with us. You have to make the environment comfortable for everyone else, not yourself. 👩🏾‍💻
You’re isolated because tech spaces aren’t diverse. 🤷🏾‍♀️
Typically I see male gender bias. I also see males yell at you and are condescending and think it’s ok. I’ve seen it way too many times in corporate spaces. It’s a sign of ineffective leadership, work on communication instead of yelling. 🤬
People gasp if you have expensive technology like them. They are deeply flabbergasted by how you’re able to afford it. 🧐
Some people are just flat out prejudice and don’t do much to hide it and your co-workers are fending for themselves. Class consciousness anyone? 😕

Hopefully I’m not suffering from hysteria. 😏

Go Dark mode with CSS Filter

with Pyaar — Fri, 03 Jan 2020 01:30:35 +0000

There are a plethora of plugins to use and JS to write to achieve dark mode on your website. A straightforward and single-layered way of doing this is by adding the CSS rule filter:(invert). An example is below.

<section> This is some text. </section>

<a href = "#'> a Link </a>

html { 
       background: black;
       filter: invert(1); /* This will flip the contents on the page, from black to its inverted color*/
}

a {
    color: green; /* This will render as a light pink or purple*/
}

To have the link render as green, add the hue-rotate()function to the filter property.


html { 
       background: black;
       filter: invert(1) hue-rotate(180deg); /* This will flip the color back to its original value.*/
}

Inspiration for this post is by Dev Ed on YT https://www.youtube.com/watch?v=CxC925yUxSI&feature=youtu.be
Timestamp: 17:29

Happy Coding! 😊

Darkmode.js Emoji Rendering Fix

with Pyaar — Thu, 14 Nov 2019 01:31:37 +0000

As of recent web designers and developers have been implementing a dark/light mode toggle feature on their websites. I decided to try it out by adding a widget via Darkmode.js.

Ways to Implement:

via JSDelivr CDN.
using NPM.
Enable/disable Darkmode programatically.

I used the CDN and the following object to render the widget.
After saving, I ran into an issue with the label not rendering the emoji.

My document:

Alternate document:

I tried a few things like viewing my document in different browsers, editing the options, adding a positive value for the z-index and hardcoding the emoji within the document, etc.

I then decided to try the ::after pseudo element.

Fix:

.darkmode-toggle::after {
content: "🌓";
}

My Updated Document:

That fixed the issue.

There are probably other fixes out there, this was mine. Here is the issues page.

Seven Common Characteristics of Creative Thinkers

with Pyaar — Sat, 09 Nov 2019 20:49:17 +0000

"In the Information Age, intellectual property can be the most important asset in a business." Mary Stewart (Launching the Imagination, 110).

Who is and isn't creative? I think everyone is, to some degree. I also think creativity can be cultivated. Below are the common characteristics of creative thinkers according to Stewart.

Receptivity
"Creative people are open to new ideas and welcome new experiences." Judgement is something we project on people due to conditioning we've received whether that be by others or our own observations. While we can determine probability based on past events, we have to be open to the idea that we may be missing information. Just because someone is short one day, doesn't mean this person is inherently ill-tempered, it means that for that encounter their reaction was situational, and temporary to you. However, it could very well mean that they have adapted this temperament. What's clear is, we don't know. Be open to new ways of thinking about things.

Curiosity
"Researching unfamiliar topics and analyzing unusual systems is a source of delight for most creative people." While undertaking unknown concepts, with the intent to fully understand, can be scary, it's necessary if you want to learn, what you have set out to learn. This thing has to be self-realizing or self-serving, it cannot be what someone else wants you to learn, or what you think someone else thinks you should know, you have to want to learn it. Because you might reach a learning curve doesn't mean you should abandon this journey. Conflict or tension is present in almost everything in my opinion. During your process of learning, it's important to be honest with yourself.

Wide Range of Interests
"...an artist who has a background in literature, geology, archery, music and history can make more connections than a narrow-minded specialist." Stewart makes being a specialist sound unworthy, while it can be the opposite, however, creative people have the propensity to learn about various different areas of life. This assortment of knowledge enables us to make more connections. It's important while learning to make clear goals for your self and organize effectively.

Attentiveness

"Realizing that every experience is valuable, creative people pay attention to seemingly minor details." My belief is that everything is interconnected. I'm constantly finding myself connected to objects like paper or materials like cement, because i think, how they can be transformed. Pay attention to the details, they're how you get to a functional big picture.

Connection Seeking
"Seeing the similarity among seemingly disparate parts has often sparked a creative breakthrough." This harks back to making connections, once we are receptive to new ideas, we see how even opposites are connected.

Conviction
"Creative people value existing knowledge". Our knowledge base is built upon. Scientists build upon old ideas to extend their work, sometimes transforming those older ideas and creating something new. I've always hated the adage "Don't re-invent the wheel". I've always felt as though the wheel needs to be re-invented, especially as time progresses, however, there is something to leaving the wheel the way it is. There are some fundamentals that might not be absolutely true, albeit they can give us direction nonetheless.

Complexity
"The risk-taker gets the job started; the safe-keeper gets the job done." There are a plethora of things/emotions that occur when completing a project. There's excitement, there's fear, there's passion, there's critical analysis, you may have to start over a few times, you might abandon the project, you might need to follow certain steps to get the work done, the project might require you to experiment. Either way you must continue to have focus, determination or direction and consistency. Whatever you need to do to regroup- do it.

Citation
Stewart, M. (2008). Launching the imagination. Boston, MA: McGraw-Hill.

Cover art
pexels.com/@steve

Object-Fit CSS Property is my Favorite, What's your favorite Property?

with Pyaar — Mon, 04 Nov 2019 04:27:04 +0000

I love Object-Fit because, resizing images is the worst. Having to crop images to fit inside a gallery can be annoying when your programs are running slow or you're in rush. Resizing using CSS is an option you should consider.

Let's say you have different sized images, and you want to create a gallery of images 300px x 300px or a consistent width and height. How would you go about accomplishing this? Let me know in the comments. I usually crop if I don't intentionally make the images the same image size. I was in a time crunch, my photo editor kept crashing, so I searched "resize image css" and the property I was looking for, popped up, and voila: Object-Fit. Below is the code I used to resize my images.

.resize {
object-fit: cover; /* The image keeps its original aspect ratio and the image area is completely covered. */
width: 300px;
height: 337px;
}

Here is a link to the article I found: https://alligator.io/css/cropping-images-object-fit/

One thing I wonder is if the original image, although cropped, has an impact on load time if the dimensions aren't intrinsically reduced.

CSS Button Transition (Animation)

with Pyaar — Sun, 03 Nov 2019 02:08:35 +0000

Transitions: The transition CSS property specifies the name of the CSS property the transition effect is for. In this case we will be transitioning the transform property. You can transition most properties in CSS, like background, color, etc.

A transition needs a beginning and an end state. Thus, transitioning buttons is a great way to use them. Let's do that below.

The beginning state is div styles for the button, which is 200px wide, 75px in height, along with other CSS properties. Our end state will be a hover, or, when a user hovers over the button.

On hover the button changes its background color and scales down. To scale down we apply a transform property and set its value to scale which is a function of the transform property. Transformation functions can rotate, resize, distort and move an element in 2d or 3d space. In this case we are choosing the scale function to resize the button.


div {
width: 200px;
height: 75px;
border-radius: 50px;
background: #0000FF;
transition: transform .6s .25s ease-out; /* apply transition property to the object (div element) that will be transitioning and set the value to the property to transition */
} 


div:hover {
background: #0F0F94;
transform:scale(.9); /* apply transition effect */
}

See CodePen here: shorturl.at/gx038

Browser Sync Permissions Issue

with Pyaar — Wed, 23 Oct 2019 00:42:52 +0000

When Downloading Node.js

How frustrating. Downloading and implementing programs these days take as much time as it does to write a complex code block. When downloading Node.js to install Browser Sync, a live reload application, I ran into a permissions issue. If you’re having trouble installing Browser Sync read on.

Download Node.js
on Browser Sync’s homepage, they have a “Get Started” button on the first third of the page, which will lead you to the download page for your operating system.
Install Browser Sync
The node package manager (npm) installs Browser Sync. Render the terminal and paste the following command.

npm install -g browser-sync

So Browser sync didn’t install?

If you have an EACCESS message, you may not be able to install the package because you’re not an authorized user. How-To Geek has a step-by step-guide on how to enable the root user.

When installing as the root user, you should be succesfull, however, I was not when I switched over to my regular user account. I still had the following permissions issue when running the browser sync command.

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/browser-sync

To fix this, change the global install directory using the npm config command below.

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
That Should do it 🙂

Start Browser Sync Run a command to see where you are in the terminal, like “whoami” (displays username of the current user) or “cd” (changes the directory you are in) to adjust the following to lead to a directory in which you have an “index.html” file.

browser-sync start --server --files "css/*.css"

I hope this helps! More information can be found on Github here: http://npm.github.io/installation-setup-docs/installing/a-note-on-permissions.html