Exploring color-contrast() for the first time.

Exploring color-contrast() for the first time.

I saw in the release notes for Safari Technical Preview 122 that it has support for a color-contrast() function in CSS. Safari is first out of the gate here. As far as I know, no other browser supports this yet and I have no idea when stable Safari will ship it, or if any other browser ever will. But! It’s a very good idea! Any native tool to get us to ship more accessible interfaces (of which color contrast is a part) is cool by me. So let’s attempt to get it to work.

Anybody can download Safari Technical Preview, so I did that.

I had to ask around about this, but just because this is a pre-release browser, it doesn’t mean all these features are active by default. Just as Chrome Canary has feature flags you have to turn on, so does Safari Technical Preview. So, I had to flip it on like this:

The release notes don’t have any information about how to actually use color-contrast(), but fortunately web searching turns up a spec (it’s part of Color Module 5), and MDN has a page for it with very basic syntax information.

This is how I understand it:

That example above is a little silly, because it will always return white — that has the most contrast with black. This function actually gets useful when one or more of those color values is dynamic, meaning very likely it is a CSS custom property.

The function returns a color, so the top use-case, I would guess, is going to be setting a color based on a dynamic background. So…

section {
  background: var(--bg);
  color: color-contrast(var(--bg), white, black);

Now we can toss any color at all at --bg and we’ll either get white or black text, depending on what has the most contrast:

That’s extremely cool, even in the most basic use case.

Here’s a demo from Dave where he’s not just setting the text color in the parent, but the color of links as well, and the links have a different set of colors to choose from. Play with the HSL sliders (in Safari Technology Preview, of course) to see it work.

Just picking two colors that have enough contrast is easy enough (although you’d be surprised how often it’s screwed up by even those of us with good intentions). But oh wow does it get complicated quick with different situations, let alone having a bunch of color variations, or god forbid, arbitrary combinations.

Here’s a video of me playing with Dave’s tester so you can see how the colors update at different places.

Source link


I developed a website to check new film releases and check i…

After starting to work with Angular by my own a few months ago I just developed my first project:


This little Angular web-app it’s hosted on firebase and let you check new movie releases and based on your location finds out on what platforms can you see a movie.

I haven’t finished yet but I ‘d love to have feedback about functionality or design. What do you think?

r/webdev - I developed a website to check new film releases and check in what platforms can you find a movie based on your current location.

Atlantida Angular Web App

Source link

Remote Pair Programming with Visual Studio Code and Live Sha...

Remote Pair Programming with Visual Studio Code and Live Sha…

Remote work has killed pair programming. Or has it? If anything, it certainly presents an interesting challenge for pair programming when the two developers involved are no longer sitting side by side in the same room. But can you still successfully pair program in this world of remote work?

In this article, we’ll look at some of the benefits of pair programming and how you can use technology like the Visual Studio Code Live Share extension to continue to pair program remotely with your colleagues.


What is Pair Programming?

Let’s start with a quick definition. We’ll define pair programming as a development technique in which two developers write code at a single workstation. Typically this means only one computer and one keyboard. The developer at the keyboard “drives” while the developer without the keyboard “observes” or “navigates”.

The driver provides the hands that write the code. The observer-navigator provides the strategic decision-making for which files to look at and which problems to tackle. The observer-navigator also reviews the code that is being written and helps catch simple typos and other mistakes in real time. The two developers switch roles at some agreed-upon interval, typically every 30 minutes or so.


Benefits of Pair Programming

Now, why on earth would anyone do this? Two developers working on the same thing at the same time? Surely that’s a waste of time. Couldn’t you produce twice as much code if the developers were working independently on their own machines?

These are certainly valid arguments and ones worth examining. So let’s look at the benefits of pair programming. What good do we get from two developers working together?

Teaching and Mentoring Opportunities

First off, pair programming provides a perfect teaching opportunity. It’s rare that the two developers are at exactly the same skill level. Instead, one is usually more senior and the other more junior. Pair programming allows the senior engineer to mentor the junior engineer as they work on real problems together. The junior engineer can learn how the senior engineer reasons through a problem, how they organize their code, how they name their variables, and how they troubleshoot issues when things go wrong. It’s also important to remember that the mentoring and teaching is a two-way street.

And seniors, don’t underestimate your junior engineers. They may have a fresh perspective on the problems at hand too. And who knows, you both may end up learning each other’s favorite IDE shortcuts and tricks.

Knowledge Sharing

Second, pair programming allows you to share knowledge regarding how the system is architected. When developers work in individual silos, you’ll often have one engineer code a feature from start to finish. Even though code reviews are done throughout the development process, having a single engineer be the main point of contact on a project results in that one person having the most understanding and knowledge of the final solution. Pair programming, on the other hand, results in two developers both gaining a deeper understanding of their code.

Error Prevention

Third, pair programming makes it easy to catch simple mistakes and typos faster with a second pair of eyes. You’ll be surprised how much faster the two of you can find the missing semicolon or why your code won’t compile when you have a second person watching every character you type.

Interpersonal Communication Skill Improvement

Fourth, pair programming is a great opportunity for engineers to develop their interpersonal skills. Can you talk through a solution with another person? Can you bounce ideas off each other? Can you clearly communicate your ideas in a way that another engineer can understand? Can you tactfully guide someone away from a poor solution if you see a better one? And perhaps most importantly, how do you respond to feedback and correction on your own ideas? These soft skills are valuable for engineers at any level.

Defect Reduction and Increased Productivity

Finally, and perhaps most interestingly, studies have shown that when engineers pair program they write better code with fewer bugs. The extra development-time cost of having two people work together is estimated at 15%. But when you think about all the time saved through fewer customer support issues and less time spent debugging, you may find that pair programming actually increases productivity!


Pair Programming Remotely

So, we’ve established that pair programming has several benefits. But how do we pair program remotely? COVID-19 has forced many companies to adopt a remote work policy, even those companies that may have initially been very averse to the idea of remote work.

As for me, I’ve typically worked at the office, but I’ve been working remotely since March 2020, and I’m loving it! Zoom meetings and Slack messages have become my default methods of communication. But what about for pair programming?

One option might look something like this:

  1. Dev 1 and Dev 2 get on a video call together
  2. Dev 1 starts as the driver, and Dev 2 starts as the observer-navigator
  3. Dev 1 shares their screen and starts writing code while Dev 2 navigates
  4. When it’s time to switch roles, Dev 1 commits what they’ve written and pushes it to a branch on the remote repository
  5. Dev 2 pulls down the latest code from the branch
  6. Dev 2 shares their screen and starts writing code while Dev 1 navigates
  7. When it’s time to switch roles again, Dev 2 commits what they’ve written and pushes it to the branch
  8. Repeat steps 3-7 until the pair programming session is over

Those steps look pretty similar to what you might see when pair programming in-person, with the exception of the video call and screen sharing. The other notable difference is the need to commit the code and push it up in order for the other person to have the latest code. When pair programming in person, you don’t have that same challenge, as you’re both working on the same computer.

So that begs the question: Is there any way to collaborate without having to commit your code in between switching roles?

The answer: Yes, there is! Visual Studio Code (VS Code) has a handy extension called Live Share that helps facilitate the remote pair programming process. Live Share allows you to share your code while others follow along in VS Code on their own computer. But that’s not all – you can even share your localhost server or a terminal instance!


How to Use VS Code Live Share

You can find the VS Code Live Share extension for free on the Visual Studio marketplace. After clicking the Install button and then restarting your VS Code application, you’re ready to start collaborating! They have excellent installation instructions and a quick start guide on their marketplace listing at the same link as above, so I’d highly recommend following along there.

To experiment with this extension, I created a simple Node.js project hosted on Heroku. I opened the project directory in VS Code on my own machine, clicked the Live Share icon on the left-hand side of the screen, and then clicked Share to create a new collaboration session.

Click the Share button to start a new collaboration session

Since this was my first time using the extension, I was prompted to sign in, which I did through GitHub.

Sign in with your GitHub or Microsoft account

After signing in, I was given a collaboration session URL which I could then share with up to 30 people at a time.

Send the collaboration session URL to anyone you’d like

I sent this URL to myself on a second computer and signed in as an anonymous John Doe user. After doing that, I received a notification on my first machine that John Doe was attempting to join my collaboration session. At that point, I could grant read-only access to let him follow along, read-write access to let him write code along with me, or reject his request and keep him out of the session. I clicked the “Accept read-write” button.

Accept or reject requests to join your session

Over on my second computer, once access was granted, VS Code pulled open the project directory on my machine. This is really neat! I didn’t even need to pull down the code locally or clone the GitHub repo.

Once multiple people are in the session, each person’s cursor is shown, and you can collaborate in real time, much like editing a Google doc together. As you can see below, I was able to write a line of code from both computers, and I can see two cursors on the screen.

Multiple cursors can be seen in VS Code, one for each participant

I was running the app locally on my first machine by using the npm start command. The app output running on localhost:5000 is seen below:

Demo app running locally on localhost:5000

Now, here’s where it gets really exciting. Beyond just writing code together, I can also share my localhost server with others in the session. I chose to share localhost:5000. Then, on my second computer, I navigated to localhost:5000, and I could see the app there too! As a collaborator, not only did I not need to clone the repo, I also didn’t need to install any dependencies or run the app locally on my own machine. All of that was handled by the first user!

Share a session, servers, or terminals with others

In addition to sharing servers, you can also share terminals with collaborators. I shared a terminal from my first computer, and then on my second computer I was able to enter the npm test command in an attempt to run the project’s test suite. (But alas – there are no tests to run.)

Shared terminal instance

During the collaboration session I added a new section to the app titled “Features to Try.” Our Live Share collaboration session was a great success!

End result for the demo app



I was honestly really impressed with how smoothly things went using Live Share and all the additional features it offered beyond simple code-editing collaboration. The only real challenges presented would be if VS Code was not your preferred IDE or if anyone in the pair programming session experiences internet connectivity issues.

Pair programming yields many benefits: fewer defects, higher productivity, and excellent mentoring opportunities. COVID-19 may have forced us all to work remotely, but that doesn’t mean we can’t still pair program. With tools like VS Code Live Share, remote pair programming can be just as easy as pair programming in the office.

What has your remote pair programming experience been like? I’d love to hear from you in the comments.

Source link

r/graphic_design - How to do this line texture style?

How to do this line texture style? : graphic_design

Hi, I’m trying to learn Photoshop. I am fairly familiar with Illustrator but i am struggling to learn photoshop. I try to learn by ‘replicating’ styles I see online. I wanted to try this style and i thought it would be very straight forward, but to my disappointment it doesn’t feel right, no matter how i try it. I tried looking for some tutorials online but i couldn’t find anything, so i’m posting it here to see if some of you might know what i am doing wrong.

r/graphic_design - How to do this line texture style?

The style i’m trying to replicate

Source: https://twitter.com/team_empire

I started in Illustrator by placing a vertical line. I then copied it across several times until it filled the screen. I group those lines into one layer and duplicated the layer twice. I rotated one of the copies +60 degrees and one -60 degrees. I then Applied some brush strokes to the lines, to make them ‘feel’ hand drawn. Due to the different strokes, they also appear ‘bolder’ or ‘thicker’ than eachother which i like and the inspiration also has. I then mesh warped the groups (all at the same time to have the intersection angles between the lines stay consistent). which got me this:

r/graphic_design - How to do this line texture style?

Illustrator end result

I exported the three layers separately so i could pick and choose where to have all three and where to only have one or two with the brush tool in Photoshop.

In Photoshop i started with the artwork that i wanted to transform into this style:

r/graphic_design - How to do this line texture style?

OG Artwork. https://valorant.fandom.com/wiki/Omen

I gave it a quick background colour and then I put a slight texture over it using Overlay. I then put my three line texture layers from Illustrator over it and I put a gradient map over it. I used the brush to pick and choose the amount of lines i wanted, like explained before. I tried playing around with some other things too, but the best result i got was this:

r/graphic_design - How to do this line texture style?

Best result, not great…

I also tried the lines on a white background like seen in the reference image. That looked like this:

r/graphic_design - How to do this line texture style?

White background

This one doesn’t look too bad, but it doesn’t really look like the reference. Does anyone know what i am doing wrong? If you have some quick tips, please tell me 🙂

Source link

r/graphic_design - Computer Servicing IT Branding Logo

Computer Servicing IT Branding Logo : graphic_design

World’s largest giant companies make their branding logo in a unique, modern & professional look most out of them. This logo is created for a computer IT servicing brand shop which is providing computer accessories, computer servicing, and selling laptop components. The brand color is blue and green and that’s why I tried to give a feel of the combination of blue and green. The most recognizable customers of this brand are the corporate holders.

r/graphic_design - Computer Servicing IT Branding Logo

Source link

Vote on the best logo for a software review site!

Vote on the best logo for a software review site!

Vote on the best logo for a software review site!

submitted by /u/IneedyourKNEES

Source link