Front End web development

… Read more… from The Sass Way https://ift.tt/2HCj4Bb

Bootstrap is a large and complex frontend library with some powerful functionality and customization built-in. Occasionally though, we get asked to make things even more customizable for folks with more CSS properties and default variables. This is largely because Bootstrap’s CSS relies on some limited global inheritance of general styles ( font , color , line-height , and more), but developers and designers often want to customize things further. So we were typically faced with adding CSS we didn’t need at the outset, and that you might need. This just didn’t seem right for any of us. Back in January , thanks to one of our maintainers Martijn , we started using null value default variables to combat that bloat while still increasing our level of customization. Here’s a basic example: $body-text-align : null ! default ; body { text-align : $body-text-align ; // Won ’ t compile } As you can see, the Sass compiler will ignore the entire property: value; declar...

The DOM is just a little weird about some things, and the way you deal with attributes is no exception. There are a number of ways to deal with the attributes on elements. By attributes, I mean things like the id in <div id="cool"></div> . Sometimes you need to set them. Sometimes you need to get them. Sometimes you get fancy helpers. Sometimes you don't. For this article, I'll assume el is a DOM element in your JavaScript. Let's say you've done something like const el = document.querySelector("#cool"); and matched <div id="cool"> or whatever. Some attributes are also attributes of the DOM object itself, so iff you need to set an id or title , you can do: el.id; // "cool" el.title = "my title"; el.title; // "my title"; Others that work like that are lang , align , and all the big events, like onclick . Then there are attributes that work similarly to that but are nested deeper....

Opinion piece o’the week: React: Why I have a problem with React the library and spend a lot of time talking to my therapist by the inimitable Charlie Owen Writing a Web Monetized Game “In my game, Goblin Farmer, you get your in-game money from Web Monetization micropayments.” Google proposes new privacy and anti-fingerprinting controls for the web ‘The scale of the problem is enormous’: Apple flexes strong anti-tracking stance Hi, Alexa. How Do I Stop You From Listening In On Me? – Protecting your privacy on Alexa, Siri and Google Home. (PSA: if you say “my leg hurts”, Alexa starts listening to you.) New & Experimental CSS Tools in Firefox – 18 minute presentation at SFHTML by Victoria Wang. Some very cool work here that makes Firefox an indispensable tool for developing modern websites. Google finds ‘indiscriminate iPhone attack lasting years’ “attackers were using 12 separate security flaws in order to compromise devices. Most were bugs within Safari … Simply visitin...

Listen, I am no GraphQL expert but I do enjoy working with it. The way it exposes data to me as a front-end developer is pretty cool. It's like a menu of available data and I can ask for whatever I want. That's a massive improvement over REST and highly empowering for me as a front-end developer who desires to craft components with whatever data I think is best for a UI without having to make slew of calls for data or ask a back-end developer to help make me a new bespoke API for my new needs. But... who builds that menu of data? Somebody does. If that somebody is a person or team at your own company because you've built out your own GraphQL API for your own needs, that's great. Now you've got control over what goes in there (and when and how). But sometimes GraphQL API s are just handed to you. Perhaps that is how your CMS delivers its data. Still cool and useful, but that control is at the mercy of the CMS . You still have a menu of options, but the menu ju...

One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after ) in my CSS. This technique offers several advantages: They don't require any additional HTTP requests other than the CSS file. Using the background-size property, you can set your pseudo-element to any size you need without worrying that they will overflow the boundaries (or get chopped off). They are ignored by screen readers (at least in my tests using VoiceOver on the Mac) so which is good for decorative-only icons. But there are some drawbacks to this technique as well: When used as a background-image data URL, you lose the ability to change the SVG's colors using the "fill" or "stroke" CSS properties (same as if you used the filename reference, e.g. url( 'some-icon-file.svg' ) ). We can use filter() as an alternative , but that might not always be a feasible solution. SVG markup can look big and ugly...

Kinda! There is no simple or standard way to do it, but it's possible. You can change the cursor to different built-in native versions with CSS with the cursor property , but that doesn't help much here. You can also use that property to set a static image as the cursor. But again that doesn't help much because you can't rotate it once it's there. The trick is to totally hide the cursor with cursor: none; and replace it with your own element . Here's an example of that: See the Pen Move fake mouse with JavaScript by Chris Coyier ( @chriscoyier ) on CodePen . That's not rotating yet. But now that the cursor is just some element on the page, CSS's transform: rotate(); is fully capable of that job. Some math is required. I'll leave that to Aaron Iker's really fun demo: See the Pen Mouse cursor pointing to cta by Aaron Iker ( @aaroniker ) on CodePen . Is this an accessibility problem? Something about it makes me think it might be. It...

I’m also using the Press This bookmarklet and am looking to do the following: Create a default post format (“Link” post format) for posts coming from Press This Create a default category (i.e. “link”) for posts coming from Press This Is this possible? If so, how best to accomplish that? Press This: Default category? | WordPress.org from Brad Frost https://ift.tt/2PfC0fg

Some great thoughts in here. The ABCs of Design Systems – Curiosity by Design – Medium from Brad Frost https://ift.tt/2ZqsNAl

I really enjoyed this interview with Jeremy Keith on the state of the web, how things have changed in recent years and why he’s a mix of optimistic and nervous for the future. One thing that caught my attention during the interview more than anything was where Jeremy started discussing how folks think that websites are pretty crummy in general. This reminded me that I cannot count the number of times when someone has said to me “ah, I can’t view this website on my phone.” We have websites that aren’t responsive! We have websites that litter the UI with advertisements and modals! And we have websites that are slow as all heck just when we need them the most! Of course folks are going to start complaining about the web and working around them if they find that this is the case. I’ll even catch myself sending an email to myself when I know that the mobile experience is going to be crummy. Or I’ll Instapaper something because the design of the website is particularly difficult to rea...

Ruffle is an Adobe Flash Player emulator written in the Rust programming language. Ruffle targets both the desktop and the web using WebAssembly. npm Pulls Malicious Package that Stole Login Passwords – “computers that had this package installed or running should be considered “fully compromised because it deployed an executable for Windows operating system.” Midyear ADA Web & App Accessibility Lawsuit Report – “The rate of lawsuits filed in federal courts related to website and app accessibility has now hit a rate of one-an-hour, that’s 8 a day, 40 per week and set to be on pace for over 2,000 lawsuits again this year.” A Potential Privacy Model for the Web: Sharding Web Identity (part of Chromium’s Improving privacy and security on the web ) Stop the Open Data Bus, We Want to Get Off “Anonymised” data: “re-identification of individuals in the Myki public transport dataset … We demonstrate the ease with which we were able to re-identify ourselves, our co-travellers, ...

Have you been wanting to design with modular scales, but the math and static-ness of CSS has held you back? Modular Scale is a Sass mixin that does all the heavy lifting and math for you to calculate the values of the modular scale. So put down the calculator and get excited about “prearranged sets of harmonious proportions” and let Sass do the work! Read more… from The Sass Way https://ift.tt/2HnDLjY

In this week's roundup, how to determine a slow connection, what we should put into alt text for images, and a new polyfill for the HTML loading attribute, plus more. Detecting users on slow connections Algolia is using the Network Information API (see the API ’s Chrome status page ) to detect users on slow connections — about 9% of their users — and make the following adjustments to ensure a good user experience: increase the request timeout when the user performs a search query (a static timeout can cause a false positive for users on slow connections) show a notification to the user while they’re waiting for search results (e.g., "You are on a slow connection. This might take a while.") request fewer search results to decrease the total response size debounce queries (e.g., don’t send queries at every keystroke) navigator.connection.addEventListener("change", () => { // effective round-trip time estimate in ms let rtt = navigator.connecti...

I got to be the featured guest over on The Keyframers the other day. We looked at a Dribbble shot by Björgvin Pétur Sigurjónsson and then slowly built it, taking some purposeful detours along the way to discuss various tech. We start by considering doing it entirely in CSS, then go for some light JavaScript to alter some data attributes as state, then ultimately end up using flipping . This is where we ended up: See the Pen Navbar Nudging w/ Chris Coyier | Three Person Collaborative Animation Tutorial | @keyframers 2.14.0 by @keyframers ( @keyframers ) on CodePen . The video: (My audio goes from terrible to good at about 12 minutes.) Other takes! Some of our Animigos made their own fantastic versions of this animation! ➡️ @steeevg : https://t.co/ZP5RxJcAAa ➡️ @mariod : https://t.co/PAFiGyZzGs Have another solution in mind? Give it a shot and share your results! — the @keyframers (@keyframers) August 15, 2019 The post Navbar Nudging on @keyframers appeared first o...

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way. TLDR : Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for storing things like the timestamp and the request’s ID. useRef is not only for DOM references There are three ways to store variables within functional components: We can define a simple const or let whose value will always be reinitialized with every component re-rendering. We can use useState whose value persists across re-renderings, and if you change it, it will also trigger re-rendering. We can use useRef . The useRef hook is primarily used to access the DOM, but it’s more than that. It is a mutable object t...

That rhymed lolz. I mentioned on a podcast the other day that I sorta think WordPress should ship with Turbolinks . It's a rather simple premise: Build a server-rendered site. Turbolinks intercepts clicks on same-origin links. It uses AJAX for the HTML of the new page and replaces the current page with the new one. In other words, turning a server-rendered app into "Single Page App" ( SPA ) by way of adding this library. Why bother? It can be a little quicker. Full page refreshes can feel slow compared to an SPA . Turbolinks is kinda "old" technology, but it's still perfectly useful. In fact, Starr Horne recently wrote a great blog post about migrating to it at Honeybadger : Honeybadger isn't a single page app, and it probably won't ever be. SPAs just don't make sense for our technical requirements. Take a look: Our app is mostly about displaying pages of static information. We crunch a lot of data to generate a single error report...

This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed. It still behaves essentially exactly the same: click, play video in place. The trick is rooted in srcdoc , a feature of <iframe> where you can put the entire contents of an HTML document in the attribute. It's like inline styling but an inline-entire-documenting sort of thing. I've used it in the past when I embedded MailChimp-created newsletters on this site. I'd save the email into the database as a complete HTML document, retrieve it as needed, and chuck it into an <iframe> with srcdoc . Arthur credits Remy for a tweak to get it working in IE 11 and Adrian for some accessibility tweaks. I also agree with Hugh in the comments of that post. Now that native lazy load...

One of the best parts of the Scratch community is the diversity of Scratch projects. Community members have used the Scratch programming language to create many different kinds of interactive applications, from full game engines to music sequencers. One genre is especially unique: Multiple Animator Projects, or MAPs. These Scratch projects compile animations from many […] from Bocoup https://ift.tt/2z5UbsO

Page builder plugins make it easier for both novices and experienced developers to build websites faster. With a page builder, you don't need to know how to code—you can build your site with drag and drop.  There are many free and premium WordPress page builders in the market. In this post, I’ll show you the page builders available on CodeCanyon and some of the best add-ons to page builders.  WordPress Plugins The Ultimate WordPress Page Builder: WPBakery Daniel Strongin WordPress What Makes WPBakery (Visual Composer) the Best WordPress Page Builder Today? Jane Baker WordPress Get Started With WPBakery (Formerly Visual Composer) Ashraff Hathibelagal Introduction A website has many moving parts like menus, headers and footers, gallery, contact forms, shopping carts, reviews, and testimonials. To build a site from scratch means you have to code and configure each of these parts. And if for some reason you need to make some changes you'll have to go through th...