Post image
Strategy

Drawing a shape seen on google earth (golf greens) : graphic…


I am trying to create my own green book for golf. Using google earth I can see the outline of the green. I want to draw the outline of the green and make my own book from it.

I’m trying to create the second picture from the first picture below (just the outlines not the contours)

I have tried doing this with Powerpoint/Word but it is too difficult to do. Any advice on programmes/how to do this?

Post image

Google earth

Post image

Green outline



Source link

Data binding in Angular
Strategy

Data Binding and Server-Side Rendering in Angular and React


Today, almost all modern web applications are built with frontend frameworks or libraries like Angularjs and React. Presently, these both frameworks are trending because of their superheroic capabilities, and significant aspects, such as Data Binding and Server Rendering. 

Let’s see these both aspects in detail in Angularjs and Reactjs.

Data Binding in Angular

Angular uses two-way data binding, so there’s no question that any tech stack can beat the synchronization between two different elements that Angular does. It keeps the two layers updated with the same data. That is to update the model layer as the value changes in the input.

It binds the HTML element to the model variable and not just displays it but also changes it in the backend. It helps in coordinating the two different data models of a framework, which helps in creating an interactive user interface without the intervention of several callbacks and extra efforts by the programmer. 

Data binding in Angular

Data binding in Angular

Two-way data binding is the most efficient technique for fetching data from large ERP-based software, like medical software, accounting, and other software that demands a highly complex requirement. The bidirectional nature of Angular makes it easy to build enterprise resource planning software. 

You may also like:
Getting Started With Data Binding in Angular 8.

Data Binding in React

As a library, React does not follow the automatic approach to data binding and sticks to its simple but solid architecture. It does not let developers fall into the nitty-gritty of the complex handling of objects. However, React uses one-way data binding with two-way data binding helpers to manage both heavy parsing work and extensive manipulation of data. 

Server-Side Rendering in Angular

Angular facilitates web crawlers by generating static versions of an application that are easily searchable. With the use of server-side rendering, Angular renders the application by creating a static view before it gets fully interactive. It is up to you how cleverly you use the combination of JSON and client-side caching to increase server-side performance. Nothing beats Angular when it comes to reducing the traffic between client and server. 

Angularjs is designed in a pattern that has in-built testing requirements, such as dependency injection and mocking objects. Since Angular has got Google as a backup, we cannot doubt its upcoming improvements. It is capable of reducing the amount of code by eliminating the need to recompiling and quickly reflecting the changes in the frontend.

Server-Side Rendering in React

To make your application SEO strong, you would need to render the application to the server. Reactjs does this with ease with the help of some specific functions. You can do it by calling the RenderToString function instead of calling Render. Unlike other javascript frameworks, React lacks rigidity.

Alternatively, you can also use renderToStaticMarkup if you want to avoid creating DOM attributes, such as data-react-id, which is useful for creating a simple static page generator. 

The most prominent example of a Reactjs application is Facebook. It has: 

  • Super high-speed rendering.

  • Better functionality, even with a mediocre internet connection.

Let’s look at another example with Dropbox. It is:

  • Renowned for online file hosting platform.

  • Smooth and rapid synchronization of data in the cloud.

  • Offers remote connectivity.

Conclusion

Angular can update data simultaneously in both models. Additionally, it can capture a static view before an application gets fully interactive. These are the two major aspects for which Angularjs stands as a superheroic framework, and hence it is used by giant platforms like Upwork and PayPal.

Further Reading



Source link

Same HTML, Different CSS
Strategy

Same HTML, Different CSS


I stumbled upon a project called “Evolution of Web Design”, which shows a web page about Nasa and space. The interesting thing is that there is a slider mimics how the design looked for each year (1993 – 2015). The idea is so inspiring and it challenged me to do the same, which is to get a component or a web page and try to do multiple designs for it without touching the HTML content.

In this article, we will go through an HTML content that should look at different styles without changing the HTML code. It seems like quite a challenge, right?

Through the process of working on each design variation, I will force myself to think deeply and try to come up with a solution. Some times, it’s tempting to add a <div> without thinking and asking ourselves whether it is really necessary?

Before we start, I would like to list the requirements for the result:

  • Fully Accessible
  • Responsive Design
  • Performant
  • Progressively Enhanced

Update: 14 Feb 2020

If you started your web career in the old days, you might be familiar with the creative project, CSS Zen Garden. The article is similar to it but on a component level.

An Article Header

Usually, each article or blog post needs an introductory header before the article body. In this example, we have a header containing a title, a figure, an author and categories. Here is the basic HTML:

<div class="c-entry">
    <h1 class="c-entry__title">Tech companies tried to help us spend less time on our phones. It didn’t work.</h1>
    <img class="c-entry__figure" src="figure.jpg" alt="">
    <p class="c-entry__author"><img class="c-avatar" src="shadeed.jpg" alt="">By
      <a href="#"><span>Ahmad Shadeed</span></a> <a href="#"><span>@shadeed9</span></a></p>
    <ul class="c-list">
      <li class="c-list__item"><a class="c-tag" href="#">Design</a></li>
      <li class="c-list__item"><a class="c-tag" href="#">Tech</a></li>
      <li class="c-list__item"><a class="c-tag" href="#">Business</a></li>
    </ul>
</div>

Article Header Design Variations

The challenge is to work on seven variations of the article header, without touching the HTML code. To give you an idea of the final result, see the below video:

CodePen Demo

Option 1 – Article Header

You’ll notice that the order elements in the design is different from the order in the HTML markup. The latest is ordered as follow: title, figure, author, and categories.

I ordered them like this to keep the HTML as semantical as possible. Imagine writing an article on your notebook, what should come first? Definitely the title. For that reason, you should always write your HTML in a semantic way without thinking too much about how it appears visually. Let’s get to work!

After adding some baseline styles for the elements, the result looks like the figure below.

As per the design variation we are working on, the categories are placed at the top of the article header, so we need to change its order. As far as I know, flexbox is the best way to do that.

.c-entry {
    display: flex;
    flex-direction: column;
}

I changed the direction to column since the default is row so that the child elements are now stacked on top of each other. The next step is to change the order of the categories list.

Now I need to take care of the vertical spacing between the elements. I will avoid adding margins to specific elements as much as I can. Instead, margins will be added to the parent element.

.c-entry > * + * {
   margin-top: 1rem;
   outline: solid 2px;
}

To make it clear, I added an outline to see the elements that got a margin-top. Notice that the categories element is among those elements who got a margin-top. The reason is that CSS added the spacing as per the source order in HTML.

The highlighted areas in blue represent the spacing between elements. Notice that the category has a spacing, which is not needed. The solution is to add margin-bottom for all elements and reset it to 0 for the author element.

/* Select all the direction descendants of `c-entry` element */
.c-entry > * {
  margin-bottom: 1rem;
}

.c-entry__author {
  margin-bottom: 0;
}

Option 2 – Article Header

This variation is a bit more challenging. The layout is divided into two columns and the categories element is centered inside the article figure. A friendly reminder, this should be coded in CSS, without changing the HTML.

The first thing that I got in mind is CSS grid. I added the following CSS:

.c-entry {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    grid-gap: 1rem;
}

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

.c-entry__figure {
    grid-row: 1/3;
}

This is the result of the initial CSS. However, the categories list should be placed at the top-right corner. Also, the spacing between the article title and the author should be smaller.

While the above might seem good, it’s not. When the image has a bigger height value, things will get weird.

Notice how the spacing between the title and the author got bigger. That’s because CSS grid adds rows based on the content height. The default alignment for grid items is stretch. To override that, I added align-self: start for the title and author elements.

However, this didn’t solve the issue. I still want to stack the title and the author element below each other. After many trial and error, I moved to another solution.

First, I positioned the figure absolutely and gave it a width of 47% (Yes, it’s 47% because the columns are not equal halves).

.c-entry__figure {
  position: absolute;
  height: 300px;
  right: 0;
  width: 47%;
  object-fit: cover;
}

Then, I added align-content: start to the article header container element. That worked! For the categories list, I also used positioning to make it overlap with the article figure.

.c-entry {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    grid-gap: 1rem;
    align-content: start;
}

.c-list {
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 47%;
  justify-content: center;
}

After testing the above, I noticed an interesting issue that I didn’t think about while working on the layout. Due to the figure being positioned absolutely with a fixed height that is bigger than its container, the figure is kind of going out of its container.

That’s an issue because when there are other elements below the article header, the figure will overlap them. To solve that, a min-height should be added to the container, and the figure height should be 100%.

.c-entry {
    min-height: 300px;
    /* other styles */
}

.c-entry__figure {
    height: 100%;
}

Additionally to the code above, I also need to add the yellow bar that before the title.

.c-entry__title {
    position: relative;
    margin-top: 1rem;
    /* other styles */
}

.c-entry--title:before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0;
    height: 18px;
    width: 90%;
    background: $brand-primary;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

Now that the hardest part is done, it’s time to check how the design will look on smaller screens. Remember that one of our requirements is to create a responsive design.

To achieve the above mockup, I will keep CSS grid, and use the advantage of grid-row-gap to add the spacing. That way, I won’t need margins for the spacing between elements.

.c-entry {
  display: grid;
  grid-row-gap: 1rem;
}

@media (min-width: 550px) {
  .c-entry {
    grid-template-columns: 1fr 0.9fr;
    grid-gap: 1rem;
    min-height: 300px;
    align-content: start;
  }
}

The final result is a responsive article header as shown in the video below.

Option 3 – Article Header

The order of elements in this variation is similar to the first one that I worked on with the following differences:

  • The figure image is in a half-circle style
  • The author’s picture is positioned differently
  • There is a border after the figure image

First, I used CSS grid to add the spacing between elements, and center the content:

.c-entry {
    display: grid;
    grid-row-gap: 1rem;
    justify-items: center;
}

Then, I needed to move the categories list to the top, so I used the order property again. I learned that it works with CSS grid too!

The next step, is to limit the width of the title and center it with text-align. I chose to use the character and viewport units because they allow us to have a dynamic width that is proportional to the viewport and content.

.c-entry__title {
  max-width: calc(25ch + 5vw);
  text-align: center;
}

Then, the author’s picture needs to be taken care of. I used the good old CSS positioning for that, since it fits the use case quite perfectly.

.c-entry__author .c-avatar {
   position: absolute;
   left: 50%;
   top: -200%;
   transform: translateX(-50%);
}

The last part is the yellow line that is below the figure image. How should this one be handled? Just for clarification purposes, here it is:

I thought about adding the line as a pseudo-element for the author. However, I noticed that the author element doesn’t use the full width of its parent.

The reason is that I added justify-items: center for the container element .c-entry. That caused the element to be resized to fit its content only. To override that, I simply reset the justification for the author element like this:

.c-entry__author {
    justify-self: normal;
    /* other styles */
}

Now, I can just add a pseudo-element to represent the line across the width of the container.

.c-entry__author:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1rem;
    height: 3px;
}

Option 4 – Article Header

For this variation, the figure is positioned below all the content, with a transparent overlay to help making the content readable. The first thing I did is, positioning the figure and added a pseudo-element for the overlay.

.c-entry:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.4;
}

.c-entry__figure {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The current result looks like the screenshot below. Note that the elements are not ordered properly and need to be positioned.

At first, I thought about using CSS grid to center the elements, however, I faced some challenges to center them correctly as there were unneeded spaces between them. I then tried the following CSS:

.c-entry {
    display: grid;
    align-items: center;
    justify-items: center;
}

See how each element is centered horizontally and vertically in its row. While this might look correct, it’s not the desired result.

With flexbox, things can be different. The centering happens across the container, not like what grid did. So I added the following:

.c-entry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Isn’t flexbox better? With this last change, we’re actually done with this variation. The final result looks like the image below.

Option 5 – Article Header

At first glance, working on this variation seemed a bit complex to me. How would I wrap the categories, title, and the author in one element when the HTML looks like this:

<div class="c-entry">
    <h1 class="c-entry__title"><!-- Title --></h1>
    <img class="c-entry__figure" src="figure.jpg" alt="">
    <p class="c-entry__author"></p>
    <ul class="c-list"></ul>
  </div>

Note how there is no wrapping div for the elements mentioned above… So let’s explore how I thought about solving this one.

With CSS grid applied, the elements look like the screenshot below:

Now, I need to align all of them to the center, and the end of their containing element. So I used justify and align properties as shown in the code below:

.c-entry {
    /* other styles */
    justify-content: center;
    align-content: end;
}

With that, I can now add a pseudo element to each of the categories, title and author. This pseudo element will act as a background for them.

.c-entry__title:after,
.c-entry__author:after,
.c-list:after {
  content: "";
  background: #ffe649;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

Since each of those elements have a position: relative applied to them, we can use the top property to shift them down a bit.

.c-entry__title,
.c-entry__author,
.c-list {
    position: relative;
    top: 130px;
}

Finally, the box needs rounded corners, so I will add them to the first and last elements only.

.c-list:after {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.c-entry__author:after {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Update: 18 Feb 2020

Overusing the order property might affect the user experience. When used, the focus order will be based on the HTML source order, not the visual order. Thanks to Geoffrey Crofte for pointing this out!

Final Words

Coming up with five variation for the article header wasn’t easy. Coding them was even harder. With this experiment, I learned new things and got a good reminder that it’s important to think before changing the HTML when a design has changed. CSS is powerful and capable of doing amazingly beautiful things. Let’s embrace that and keep the HTML semantical instead of adapting it to the need of the next design change.

The End

That’s a wrap. Do you have a comment or a suggestion? Please feel free to ping me on @shadeed9.

Thanks

Big thanks to Michaël Vanderheyden for his help in proofreading the article.





Source link

Image title
Strategy

The Best JavaScript Testing Tools for Your React Project


Image title

Trust, but verify. A Russian phrase made popular by president Reagan fits perfectly when we are talking about testing or QA. Everyone trusts themselves, every programmer or a developer has trust in code. And why shouldn’t they? 

But, we know how it goes. In the programming world, even a miniscule mistake could cost a lot. And that is why we have testing.

The front-end ecosystem is advancing and is not getting any simpler. Companies today compete fiercely to hire front-end developers well-versed in their field. With each passing year the intricacies tend to double. 

Let’s look at some of the tools to you help in your React.js project

The baseline is choosing the JavaScript test runner. Test runners are an integral part of the testing stack. As a part of our journey being a ReactJs development company, we have seen developers using Karma which helps them suite of tests in one or more browsers at once. They help analyze if the code is safe from browser implementation quirks, providing a level of confidence that is usually unmatched by other solutions. It can also be configured to use remote services like Sauce Labs and BrowserStack.

Another choice for simplicity and ease of use is Mocha CLI. Which is fairly agreeable because Mocha CLI easily runs your Mocha tests in a Node.js environment. Unfortunately, a mechanism to run tests in the browser using the Mocha CLI does not exist.

If you want to perform cross-browser testing or you want to test significant DOM manipulations, go for Karma. Or else, you can use a combination of the default CLI and additional libraries like Enzyme and JSDOM.

JavaScript Frameworks

Make sure your test framework supports testing both asynchronous and synchronous code and make it quite easy to disable the test. Jasmine, Mocha, and Jest meet these requirements. 

Jasmine is a behavior-driven development framework for testing your JavaScript code; it doesn’t depending on any other JavaScript frameworks, nor does it require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Here is some sample code from Jasmine.

Image titleJasmine contains assertion abilities, called matchers, baked in. These assertions eliminate the need to include external assertion libraries such as Chai and Should.js. It also allows you to mock functions to cut a few dependency trees out of the scope.

Facebook’s test framework, Jest, was specifically designed for React. Jest responds to basic testing needs pretty well, but the highlight of the day is snapshot testing. It lets you serialize and save the output of components while easily detecting when that output changes. Snapshots are text files saved into source control and checked against future test runs.

Additionally, Jest offers basic assertions and mocking functionality like Jasmine.

Image title
Coming back to Mocha, it focuses on being a solid test framework. When you look at it, there aren’t any assertion libraries or fancy types of testing it can do. However, what it does, it does well.

If you choose Mocha, it means you also have to exclusively choose assertion libraries and mocking libraries. You can probably just use Chai and Sinon.js in this case. If you want to look for more options, there is a wiki page for Mocha that outlines the common ones.

In this case, if you do not have special preferences, Jest or Jasmine should be your go-to option. Even though Jest is a general JavaScript testing framework, the snapshot testing feature is exclusive to React components.

Testing Add-Ons

If you want to perform shallow rendering and assertions on the component, there are two options:

There is another option, the Airbnb library called Enzyme. It is a testing utility for React that makes it easier to assert, manipulate, and traverse your React components’ output.

Another option is using Sinon.js, a powerful mocking library with detailed assertions. It also provides a great mock implementation of the clock and easy mocking for AJAX requests.



Source link

Understanding Web Accessibility Color Contrast Guidelines an...
Strategy

Understanding Web Accessibility Color Contrast Guidelines an…


What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you’re able to read content throughout the site, but to someone else, it might be a totally different experience. How can put yourself in that person’s shoes to improve their experience?

There are some relatively easy ways to test contrast. For example, you can check the site on your phone or tablet in bright sunlight, or add a CSS filter to mimic a grayscale view). But… you don’t have to trust your eyes. Not everyone has your exact eyes anyway, so your subjective opinion can possibly be a faulty measurement. 

You can mathematically know if two colors have enough contrast between them. 

The W3C has a document called Web Content Accessibility Guidelines (WCAG) 2.1 that covers  successful contrast guidelines. Before we get to the math, we need to know what contrast ratio scores we are aiming to meet or exceed. To get a passing grade (AA), the contrast ratio is 4.5:1 for most body text and 3:1 for larger text. 

How did the W3C arrive at these ratios?

The guidelines were created for anyone using a standard browser, with no additional assistive technology. The contrast ratios that the WCAG suggests were based initially on earlier contrast standards and adjusted to accommodate newer display technologies, like antialiased text, so content would be readable by people with a variety of visual or cognitive difficulties, whether it be due to age, sickness, or other losses of visual acuity.  

We’re basically aiming to make text readable for someone with 20/40 vision, which is equivilent to the vision of someone 80 years old. Visual acuity of 20/40 means you can only read something at 20 feet away that someone with perfect 20/20 vision could read if it was 40 feet away.

So, say your design calls for antialiased text because it looks much smoother on a screen. It actually sacrifices a bit of contrast and ding your ratio. The WCAG goes into more detail on how scoring works.

There are other standards that take contrast in consideration, and the WCAG used some of these considerations to develop their scoring. One is called the Human Factors Engineering of Computer Workstations (ANSI/HFES 100-2007) was published in 2007 and designated as an American standard for ergonomics. It combined and replaced two earlier standards that were created by separate committees. The goal of the combined standard was to accommodate 90% of computer users, and cover many aspects of computer use and ergonomics, including visual displays and contrast. So, that means we have physical screens to consider in our designs.

What does the ratio mean?

The contrast ratio explains the difference between the lightest color brightness and the darkest color brightness in a given range. It’s the relative luminance of each color.

Let’s start with an egregious example of a teal color text on a light gray background. 

<h1>Title of Your Awesome Site</h1>
h1 {
  background-color: #1ABC9C;
  color: #888888;
}
Yikes!

It’s worth calling out that some tools, like WordPress, provide a helpful warning for this when there’s a poorly contrasted text and background combination. In the case of WordPress, a you get notice in the sidebar.

“This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.”

“OK,” you say. “Perhaps you think that teal on gray color combination is not exactly great, but I can still make out what the content says.“ (I’m glad one of us can because it’s pretty much a muddy gray mess to me.)

The contrast ratio for that fine piece of hypertext is 1.47:1.

I wanted a better understanding of what the contrast scores were actually checking and came to find that it requires the use of mathematics… with a side of understanding the differences between human and computer vision.  This journey taught me about the history of computer vision and a bit about biology, and gave me a small review of some math concepts I haven’t touched since college.

Here’s the equation:

(L1 + 0.05) / (L2 + 0.05)
  • L1 is the relative luminance of the lighter of the colors.
  • L2 is the relative luminance of the darker of the colors.

This seems simple, right? But first we need to determine the relative luminance for each color to get those variables.

OK, back to relative luminance

We mentioned it in passing, but it’s worth going deeper into relative luminance, or the relative brightness of any color expressed into a spectrum between 0 (black) and 1 (white).

To determine the relative luminance for each color, we first need to get the RGB notation for a color. Sometimes we’re working with HEX color values and need to covert that over to RGB. There are online calculators that will do this for us, but there’s solid math happening in the background that makes it happen. Our teal hex color, #1ABC9C, becomes an RGB of 26, 188, 156.

Next, we take each value of the RGB color and divide each one by 255 (the max integer of RGB values) to get a linear value between 0 and 1. 

So now with our teal color it looks like this:

Component Equation Value
Red 26/255 0.10196078
Green 188/255 0.73725490
Blue 156/255 0.61176471

Then we apply gamma correction, which defines the relationship between a pixel’s numerical value and its actual luminance, to each component part of the RGB color. If the linear value of a component is less than .03938, we divide it by 12.92. Otherwise, we add .055 and divide the total by 1.055 and take the result to the power of 2.4.

Our gamma corrected color components from our teal color end up like this:

Component Equation Value
Red ((0.10196078 +.055)/1.055) ^ 2.4 0.01032982
Green ((0.73725490 +.055)/1.055) ^ 2.4 0.50288646
Blue ((0.61176471 +.055)/1.055) ^ 2.4 0.33245154

This part of our equation comes from the formula for determining relative luminance.

We just sort of sped past gamma correction there without talking much about it and what it does. In short, it translates what a computer “sees” into the human perception of brightness. Computers record light directly where twice the photons equals twice the brightness. Human eyes perceive more levels of light in dim conditions and fewer in bright conditions. The digital devices around us make gamma encoding and decoding calculations all the time. It’s used to show us things on the screens that match up to our perception of how things appear to our eyes.

Finally, we multiply the different colors by numbers that signify how bright that color appears to the human eye. That means we determine the luminance of each color by multiplying the red component value by .2126, the green component value by .7152, and the blue component by .0722 before adding all three of those results together. You’ll note that green gets the highest value here,

So, one last time for teal:

Component Equation Value
Red 0.01032982  X 0.2126 0.00219611973
Green 0.50288646  X 0.7152 0.35966439619
Blue 0.33245154  X 0.0722 0.02400300118

…and add them together for luminance!

L1 = 0.00219611973 + 0.35966439619 + 0.02400300118 = 0.38586352

If we do the same to get our L2 value, that gives us 0.24620133.

We finally have the L1 and L2 values we need to calculate contrast. To determine which value is  L1 and and which is L2 , we need to make sure that the larger number (which shows the lighter color) is always L1 and is divided by the smaller/darker color as L2.

Now compare that result with the WCAG success criterias. For standard text size, between 18-22 points, a minimul result of 4.5 will pass with a grade of AA. If our text is larger, then a slightly lower score of  3 will do the job. But to get the highest WCAG grade (AAA), we have to have a contrast ratio result of at least 7. Our lovely combination fails all tests, coming far under 4.5 for regular text or 3 for headline style text. Time to choose some better colors!

I’m so glad we have computers and online tools to do this work for us! Trying to work out the details step-by-step on paper gave me a couple weeks of frustration. It was a lot of me getting things wrong when comparing results to those of automated contrast checkers.

Remember how teachers in school always wanted you to show your math work to prove how you got to the answer? I made something to help us out.

If you view this demo with the console open, you’ll see the math that goes into each step of the calculations. Go ahead, try our two example colors, like #1ABC9C and #888888.

I just want my page to have proper contrast, what do I do?!

There are a variety of accessibility resources that you can can audit your site. Here’s a list I put together, and there’s another list here on CSS-Tricks.

But here are a few tips to get you started.

First, identify areas that are not serving your accessibility needs.

The WAVE accessibility tool is a good place to start. Run your site through that and it will give you contrast results and help identify trouble areas.

Yay, passing scores!

Follow the suggestions of the audit

Use best practices to improve your scores, and remove the errors. Once you identify contrast errors, you can try out some different options right there in the WAVE tool. Click on the color box to pop open a color picker. Then play around until the errors go away, and you’ll know what you can replace in your code.

Run the test again

This way, you can make sure your changes improved things. Congratulations! You just made your product better for all users, not just ones affected by the accessibility errors!

What comes next is up to you!

You can make it easier on yourself and start all new products with the goal of making them accessible. Make accessibility guidelines part of your requirements for both technology and design. You’ll save yourself potentially hundreds of hours of remediation, and potential legal complaints. U.S. government and education websites are required to comply, but other industries are often taken to task for not making their sites equally available for all people.

If you have the option, consider using established and tested frameworks and web libraries (like Bootstrap or Google’s Material Design) that have already figured out optimum contrast theme colors. In many cases, you can take just what you need (like only the CSS) or at least review their color palettes to inform choices. You should still check the contrast though because, while most standard text options in a framework may follow contrast ratio WCAG suggestions, things like alert and message styles may not. (I’m looking at you, Bootstrap!)

Derek Kay has reviewed a list of web frameworks with a focus on accessibility, which I suggest you read if you are looking for more options. The U.S. Web Design System shows one way to solve color/contrast puzzles using their CSS token system that labels colors to make contrast differences super clear), but they also link to several very good resources for improving and understanding contrast.

We took a deeper dive here than perhaps you ever really need to know, but understanding what a contrast ratio is and what it actually means should help you remember to keep contrast in mind when designing future sites, web apps, and other software.

Having a clearer understanding of what the contrast ratio means helps me to remember who poor contrast can affect, and how to improve web and mobile products overall.

I’m not the ultimate subject expert on contrast, just a very, very curious girl who sometimes has issues reading things on the web with low contrast.

If you have any additional thoughts, corrections or further research to share, please leave a comment and I’ll amend this article! The fuller our understanding of the needs and requirements of our sites is, the better we can plan improvements and ultimately serve the needs of our audiences.



Source link

Magic Eye / Stereogram
Strategy

Magic Eye / Stereogram


Magic Eye / Stereogram

Does anyone know how to create these or point me in the right direction? I did some googling but only found generators and Id like to learn how to create these from scratch.

https://preview.redd.it/w23wvm5xjwh41.jpg?width=450&format=pjpg&auto=webp&s=3dce0075793055d66deb7f4a88e9b8b836a24be8

https://preview.redd.it/mbf1it5xjwh41.jpg?width=720&format=pjpg&auto=webp&s=825cf92d26273c4dfdef190fab592d2565692313

submitted by /u/phatsugarbear
[comments]



Source link

Post image
Strategy

First website hosting problem : web_design


Hello,

So I created my first website using HTML, CSS, JS and GSAP for animations. The site only consists of a landing page. I purchased a domain and linux cpanel hosting. Once I uploaded the site it was loading REALLY slow (ie 2-3mins) and during that time it would either break (not load the css for example) or give “site cannot be reached” error.

At first I thought the images were too large or something (even though I had 2 images only one of which was 3MB). I compressed the large image file but the issue didn’t go away.

At this point I contacted the support and they told me they had a glitch on their end and it would be resolved in a few hours.

The next day the issue continued and I contacted them again and they said the IP was under mitigation and this was normal for security reasons and the issues would be resolved in 24 hours time.

Now I am a complete newbie and have no idea what IP mitigation is and why it is happening or if this is just some sort of “stop asking us and wait” strategy support uses.

What can be causing this issue? Is IP mitigation a normal thing with hosting sites like goDaddy? Would I have needed to set up some custom settings to get the website to run smoothly? I read it could be caching issue, what would I need to cache at this point? The site doesn’t even use a database or anything just simple Landing Page.

p.s I am not sure If i can put a link to my site here. If its okay just mention it in a comment and ill add it.

Thanks a lot for the help!

Post image



Source link

Post image
Strategy

Hiring managers (or employed designers), do you prefer desig…


Been applying for tons of design internships (graphic design, marketing, and UI/UX positions specifically) for the past 6 months and haven’t had any offers yet. I have had 4 or 5 companies interview me, so I was curious if my resume was an issue. It is currently very text heavy, and was thinking about switching it up to a less informative, more interesting format. Do you think changing to a better looking resume will be beneficial?

This is a blurred out photo of my current resume for reference.

Post image



Source link