Posts Tagged:browser

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

Understanding the Almighty Reducer

I was recently mentoring someone who had trouble with the .reduce() method in JavaScript. Namely, how you get from this: const nums = [1, 2, 3] let value = 0 for (let i = 0; i < nums.length; i++) { value += nums[i] } …to this: const nums = [1, 2, 3] const value = nums.reduce((ac, next) => ac + next, 0) They are functionally equivalent and they both sum up all the numbers in the array, but there is a bit of paradigm shift between them. Let’s explore reducers for a moment because they’re powerful, and important to have in your programming toolbox. There are literally hundreds of other articles on reducers out there, and I’ll link up some of my favorites at the end. What is a reducer? The first and most important thing to understand about a reducer is that it will always only return one value.…

Read More →

A Quick Roundup of Recent React Chatter

Like many, many others, I’m in the pool of leveling up my JavaScript skills and learning how to put React to use. That’s why Brad Frost resonated with me when he posted My Struggle to Learn React.” As Brad does, he clearly outlines his struggles point-by-point: I have invested enough time learning it React and ES6 travel together Syntax and conventions Getting lost in this-land I haven’t found sample projects or tutorials that match how i tend to work I’m less competent at JS than HTML and CSS It seems that Brad’s struggles resonated with others as well, inspiring empathy and help from the community. For example, Kevin Ball touches on the second and third frustrations by supplying a distinction between React and ES6 and examples of the syntax and conventions of each: For each feature, I show a couple examples of what it might look like, identify where it…

Read More →

World wide wrist

After all the hubbub with WWDC over the past couple of days, Ethan Marcotte is excited about the news that the Apple Watch will be able to view web content. He writes: If I had to guess, I’d imagine some sort of “reader mode” is coming to the Watch: in other words, when you open a link on your Watch, this minified version of WebKit wouldn’t act like a full browser. Instead of rendering all your scripts, styles, and layout, mini-WebKit would present a stripped-down version of your web page. If that’s the case, then Jen Simmons’s suggestion is spot-on: it just got a lot more important to design from a sensible, small screen-friendly document structure built atop semantic HTML. But who knows! I could be wrong! Maybe it’s a more capable browser than I’m assuming, and we’ll start talking about best practices for layout, typography, and design on watches.…

Read More →

Manipulating Pixels Using Canvas

Modern browsers support playing video via the <video> element. Most browsers also have access to webcams via the MediaDevices.getUserMedia() API. But even with those two things combined, we can’t really access and manipulate those pixels directly. Fortunately, browsers have a Canvas API that allows us to draw graphics using JavaScript. We can actually draw images to the <canvas> from the video itself, which gives us the ability to manipulate and play with those pixels. Everything you learn here about how to manipulate pixels will give you a foundation to work with images and videos of any kind or any source, not just canvas. Adding an image to canvas Before we start playing with video, let’s look at adding an image to canvas. <img id=”SourceImage” src=”image.jpg”> <div class=”video-container”> <canvas id=”Canvas” class=”video”></canvas> </div> We created an image element that represents the image that is going to be drawn on the canvas. Alternatively…

Read More →

The web can be anything we want it to be

I really enjoyed this chat between Bruce Lawson and Mustafa Kurtuldu where they talked about browser support and the health of the web. Bruce expands upon a lot of the thoughts in a post he wrote last year called World Wide Web, Not Wealthy Western Web where he writes: …across the world, regardless of disposable income, regardless of hardware or network speed, people want to consume the same kinds of goods and services. And if your websites are made for the whole world, not just the wealthy Western world, then the next 4 billion people might consume the stuff that your organization makes. Another highlight is where Bruce also mentions that, as web developers, we might think that we’ve all moved on from jQuery as a community, and yet there are still millions of websites that depend upon jQuery to function properly. It’s an interesting anecdote and relevant to recent…

Read More →

The State of Changing Gradients with CSS Transitions and Animations

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future. Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And while animating background-size or background-position or the opacity or rotation of a pseudo element layered on top can take us a long way in terms of achieving cool effects, these workarounds are still limited. There are effects we cannot reproduce without adding lots of extra elements or lots of extra gradients, such as “the blinds effect” seen below. The blinds effect (live demo, Edge/ IE 10+ only). In Edge, getting…

Read More →

​Build a realtime polling web app with Next.js

(This is a sponsored post.)Learn to build a webapp that accepts user votes, using Next.js and Chart.js. Users can vote for their favorite pet, and the results are displayed in realtime on a graph in their browser using Pusher Channels. Direct Link to Article — PermalinkThe post ​Build a realtime polling web app with Next.js appeared first on CSS-Tricks. Source: CssTricks

Solving Life’s Problems with CSS

Or: When all you have is a CSS hammer, the world looks like a CSS nail. Whenever I hear a perfectly nice comment like, “Yeah, representing the tech field!” in response to my pure-CSS art, I get a sharp feeling of panic. Like many people who work on UIs for a living, I have difficulty applying the “tech” term to myself without feeling like a fraud. Impostor syndrome is a hard thing to shake. A front-end specialist? Oh, you mean the stuff that isn’t really code? That amps up the feeling from impostor to villain. Even though 90% of my daily work revolves around JavaScript, I feel as if the “tech” label is a shiny trophy that I greedily snatched from someone more deserving. As if there are nameless, starving computer science grads out there and I’m stealing the ramen right out of their mouths. Take for example this scenario…

Read More →

Browser Extensions I Actually Use

I use around 10 at the moment and they all provide functionality to me I find extremely important. Sometimes that functionality is every day all day. Sometimes it’s once in a blue moon but when you need it, you need it. Direct Link to Article — PermalinkThe post Browser Extensions I Actually Use appeared first on CSS-Tricks. Source: CssTricks

Lead QA Manager, Web – Smartsheet – Bellevue, WA

Working knowledge of browser developer tools and plug-ins. Support a growing group of developers, designers, project managers and QA resources….From Smartsheet – Wed, 23 May 2018 22:31:40 GMT – View all Bellevue, WA jobs Source:

Senior QA Manager, Web – Smartsheet – Bellevue, WA

Working knowledge of browser developer tools and plug-ins. Support a growing group of developers, designers, project managers and QA resources….From Smartsheet – Wed, 23 May 2018 22:31:40 GMT – View all Bellevue, WA jobs Source:

Learning Gutenberg: React 101

Although Gutenberg is put together with React, the code we’re writing to make custom blocks isn’t. It certainly resembles a React component though, so I think it’s useful to have a little play to get familiar with this sort of approach. There’s been a lot of reading in this series so far, so let’s roll-up our sleeves and make something cool. Article Series: Series Introduction What is Gutenberg, Anyway? A Primer with create-guten-block Modern JavaScript Syntax React 101 (This Post) Setting up a Custom webpack A Custom “Card” Block (Coming Soon!) Let’s make an “About Me” component We’re going to make a single React component that updates the background color of a page and the intro text based on data you input into a couple of fields. “I thought this was supposed to be cool,” I hear you all mutter. I’ll admit, I may have oversold it, but we’re going…

Read More →

How React Reconciliation Works

React is fast! Some of that speed comes from updating only the parts of the DOM that need it. Less for you to worry about and a speed gain to boot. As long as you understand the workings of setState(), you should be good to go. However, it’s also important to familiarize yourself with how this amazing library updates the DOM of your application. Knowing this will be instrumental in your work as a React developer. The DOM? The browser builds the DOM by parsing the code you write, it does this before it renders the page. The DOM represents documents in the page as nodes and objects, providing an interface so that programming languages can plug in and manipulate the DOM. The problem with the DOM is that it is not optimized for dynamic UI applications. So, updating the DOM can slow your application when there are a lot…

Read More →

The backdrop-filter CSS property

I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or blur) of the background of an element without changing the text or other elements inside. Take this example where I’ve replicated the iOS notification style: see how the background of each of these boxes are blurred but the text isn’t? That’s only a single line of CSS to create that faded background effect, just like this: .notification { backdrop-filter: blur(3px); } Now it’s worth noting that browser support for this CSS property isn’t particularly well supported just yet (see below). But we’ve been trying to do this sort of filtering stuff for a really long time and so it’s great to see that progress is being made here. Chris wrote…

Read More →

It All Started With Emoji: Color Typography on the Web

“Typography on the web is in single color: characters are either black or red, never black and red …Then emoji hit the scene, became part of Unicode, and therefore could be expressed by characters — or “glyphs” in font terminology. The smiley, levitating businessman and the infamous pile of poo became true siblings to letters, numbers and punctuation marks.” — Roel Nieskens Using emojis in code is easy. Head over to emojipedia and copy and paste one in. In HTML: Or in CSS: And JavaScript, too: (Alternatively, you can specify emoji with a Unicode codepoint.) However, you might run into a problem… Lost in translation: Emoji’s consistency problem The diversity of emoji across platforms might not sound like a major problem. However, these sometimes radical inconsistencies leave room for drastic miscommunication. Infamously, the “grinning face with smiling eyes” emoji ends up as a pained grimace on older Apple systems. This…

Read More →

Page Transitions for Everyone

As Sarah mentioned in her previous post about page transition using Vue.js, there is plenty of motivation for designers and developers to be building page transitions. Let’s consider mobile applications. While mobile applications are evolving, more and more attention is given to the animation experience, while the web pretty much stays the same. Why is that? Maybe it’s because native app developers spend more time working on those animations. Maybe it’s because users say that’s what they want. Maybe it’s because they know more about the environment in which the app is going to run. All of that helps to improve the experience over time. Overall, it seems like mobile app developers somehow seem to know or care more about user experience. If we take a look at how mobile apps are designed today, there is very often some sort of animated transition between states. Even ready-to-use native components have…

Read More →

Where Lines Break is Complicated. Here’s all the Related CSS and HTML.

Say you have a really long word within some text inside an element that isn’t wide enough to hold it. A common cause of that is a long URL finding it’s way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do. This is what a break-out text situation might be like: The text hanging out of the box is a visual problem. One possibility is overflow: hidden; which is a bit of a blunt force weapon that will stop the text (or anything else) from hanging out. Yet, it renders the text a bit inaccessible. In some desktop browsers with a mouse, you might be able to triple-click the line to select the URL and copy it, but you can’t count on everyone knowing that or that it’s possible in all scenarios. Overflow…

Read More →

Overriding Default Button Styles

There are a variety of “buttons” in HTML. You’ve got: <button>Button</button> <input type=”button” value=”Button”> Plus, for better or worse, people like having links that are styled to match the look of other true buttons on the site <a href=”#0″ class=”button”>Button</a> One challenge is getting all those elements to look and layout exactly the same. We’ll cover that a few ways. Another challenge is getting people to use them correctly This is a bit surprising to me — but I hear it often enough to worry about it — is that more and more developers are using <div>s for buttons. As in, they just reach for whatever generic, styling-free HTML is handy and build it up as needed. Andy Bell explains why a real button is better: So, <button> elements are a pain in the butt to style right? That doesn’t mean you should attach your JavaScript events to a <div>…

Read More →

Back to Top