Front End web development

JavaScript (or ECMAScript) is the programming language that powers the web. Created in May 1995 by Brendan Eich, it’s found its place as a widely-used and versatile technology. Despite its success, it’s been met with its fair share of criticism, especially for idiosyncrasies. Things like objects being casted to string form when used as indices, 1 == "1" returning true, or the notoriously confusing this keyword. A particularly interesting quirk though, is the existence of various techniques for variable privacy. In its current state, there is no "direct” way to create a private variable in JavaScript. In other languages, you can use the private keyword or double-underscores and everything works, but variable privacy in JavaScript carries characteristics that make it seem more akin to an emergent trait of the language rather than an intended functionality. Let’s introduce some background to our problem. The "var” keyword Before 2015, there was essentially one w...

Arguably the most common way to express a date is to include the day of the month, the month, and the year. And there are many ways to order that information. For example, day, month, year, like 20/11/2020. Or perhaps a more common example is month, day, year, like 12/30/2024. Any programmer will tell you that there are endless variations and possibilities. With the scripting language PHP for example, there are many ways to format a date . So it begs the question, is there an optimal way to write dates? Why yes in fact, there is.. YEAR/MONTH/DAY format maintains perfect calendrical order and scales infinitely. Numerical Order is the Key For one-off dates, like when filling out a form or something, you can use whatever date format makes sense. But when working with multiple dates, like with archived files, it’s always best to write numerical dates in descending order . Doing so preserves calendrical order and is infinitely scalable. To understand this, consider some examples. P...

Sometimes, it feels like people who can code seem like they have superpowers. But what is code, anyway? Code is all around us. Code is used in things like computers, phones, self-driving cars, and all other... The post What Is Code? appeared first on Treehouse Blog . from Treehouse Blog http://bit.ly/2HP0Flc

Here’s a bonafide CSS/HTML trick from Brad Frost and Dave Rupert where they use the <picture> element to switch out a GIF file with an image if the user has reduced motion enabled . This is how Brad goes about implementing that: <picture> <!-- This image will be loaded if the media query is true --> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <!-- Otherwise, load this gif --> <img srcset="animated.gif alt="brick wall"/> </picture> How nifty is this? It makes me wonder if there are other ways this image-switching technique can be used besides accessibility and responsive images... Also it’s worth noting that Eric Bailey wrote about the reduced motion media query a while back where he digs into its history and various approaches to use it. Direct Link to Article — Permalink The post Reducing motion with the picture element appeared first on CSS-T...

Link O’ The Week: Privacy Preserving Ad Click Attribution For the Web – a very interesting proposal by Apple WebKit engineer @johnwilander, already an experimental feature in Safari Technology Preview 82+. Cake or death: AMP and the worrying power dynamics of the web by Andrew Betts. Excellent read. W3C and WHATWG to work together to advance the open Web platform – Winners will be web developers who don’t have competing specs claiming to be The Truth. And if WHATWG will take some of the accessibility & authoring advice from W3C specs, we all win. *If*. reducing motion with the picture element – do this if you use animated GIFs CSS Grid Generator by Sarah Drasner. ( Explainer ) Meet the Flexbox Inspector – avoid the “Flexbox Pit of Despair” with the new Firefox devtools A Model for WordPress Accessibility by hunky Uncle @aardrian Learn Docker in 12 Minutes – nice YouTube video introducing Docker Compiling C to WebAssembly without Emscripten by Das Surma First Amer...

Thinking about learning Python? That’s a great idea. What is Python? Python is a general purpose programming language that is used for a variety of different web applications. It was designed to be very easy to... The post Why You Should Learn Python appeared first on Treehouse Blog . from Treehouse Blog http://bit.ly/2W5xbmF

There are a few differences between keyboards and screen readers and Léonie Watson highlights of them: When using the tab key, keyboard focus and screen reader focus are synchronised with each other. The rest of the time, screen reader users have an enormous range of commands at their disposal for reading and navigating content independently of keyboard focus. The commands vary between screen readers, but they all have one thing in common: they’re tied to different HTML elements. This is also a good reminder that screen readers behave differently from one another. It’s worth doing some research to see how our sites work in all these environments. One thing is clear from this post though: writing semantic and concise HTML is the best way to improve accessibility for both users with keyboards and screen readers. For example, Scott O'Hara has this recent post on best practices using the tabindex attribute to ensure accessible navigation using the keyboard. Direct Link to Art...

Today, we are excited to announce our partnership with JoyLabz, which began in 2017 and has centered around the development of a new game console called GameBender. JoyLabz, developers of Makey Makey and Drawdio, and founded by former Lifelong Kindergarten researcher Jay Silver, has been an incredible partner. We are excited to finally share the […] from Bocoup http://bit.ly/2I2KYpg

Hey everybody! 👋 Ryan here again. I have some exciting news. I’m assuming you’re here for two reasons. First: You want to learn more about how to create balanced and diverse teams at your company. Second:... The post What I’m Learning: How to Create Balanced and Diverse Teams appeared first on Treehouse Blog . from Treehouse Blog http://bit.ly/2EH6hMd

I was just talking with Dave about the accessibility of moving images on the web, and he said: hm… I wonder if you could use picture + prefers-reduced-motion ? He then sends the following code: <picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img srcset="animated.gif alt="brick wall"/> </picture> I copied the code, dropped it into a post of mine , created a static image of an animated GIF, and turned on the “reduce motion” preference (System Preferences > Accessibility > Display). And then BOOM. Just worked. In real time! I think this is so freaking cool. I always associated prefers-reduced-motion with CSS, but of course the picture element accepts media queries! Where else could this be useful? This technique would definitely be helpful for posts with embedded animated GIFs in it. Authors would have to grab a static frame of a GIF as a fallback, so the...

I’m doing some changes to this WordPress site and wanted to get out of the loop of FTPing a new version of my CSS to the live server and refreshing the browser. Rather than clone the site and setup a dev server, I wanted to host it on my local machine so the cycle of changing and testing would be faster and I could work online. Nice people on Twitter recommended Local By Flywheel which was easy to install and get going (no dependancy rabbit hole) and which allows you to locally host multiple sites. It also has a really intuitive UI. To clone my live site, I installed the BackUpWordPress plugin , told it to backup the MySQL database and the files (eg, the theme, plugins etc) and let it run. It exports a file that Local by Flywheel can easily injest – simply drag and drop it onto Local’s start screen. (There’s a handy video that shows how to do it.) For some reason, although I use the excellent Make Paths Relative plugin , the link to my main stylesheet uses the absolute path, so I ...

A report from the AMP Advisory Committee Meeting – Uncle Tezza (@edent) joined the AMP Advisory Committee so Google aren’t surrounded by yes-men, and so you don’t have to. Buy him a pint next time you see him and give him a big snog to say thanks. Sheetson – “Instantly turn any Google Sheet into RESTful API.” Animation Handbook – looks pretty good (but I know nothing about animation) SVG Properties and CSS – “the SVG elements that are available to us as well as the CSS properties for them.” If you use AMP, are your sites accessible? (from the official AMP Advisory Committee minutes) Hands-on with Portals: seamless navigations on the Web as Malte Ubi writes “with Portals you can make something that feels like a single SPA even though page A is built with LegacyAngularWeNoLongerTouchThis and page B is built with ReactInternProjectWeDidntKnowHowReduxWorksYet.” Switching From WordPress To Hugo – convert an existing WP site to static site generator Everything You Ever Wanted...

Did you know? 1.3 million new developer jobs will be created in the next 10 years. No matter your background or previous experience, there’s never been a better time to start your journey toward one of... The post Tech Jobs: An Explainer appeared first on Treehouse Blog . from Treehouse Blog http://bit.ly/2QgPlAT

If you're using a theme you downloaded from the free WordPress theme repository, or maybe one you've bought from ThemeForest , you may want to make some tweaks to it. Maybe you want to register a new font. Or add a new template file. Maybe you want to add some code from one of the tutorials or courses here on Envato Tuts+ . Or perhaps you want to use the theme as the basis for a theme of your own design. You might be tempted to just go and edit the source code for a third-party theme (ie. a theme you didn't write yourself), but don't! The next time you update that theme, new files will be downloaded and you'll lose all the changes you made. Frustrating, to say the least. But what can you do, if you do need to edit the theme? Luckily there is a way to edit the code in a theme, and still have the ability to download the latest updates: that's by creating a child theme using the original theme as a parent theme. This means that you'll activate the child t...

I can guess what you are thinking: another React testing library? So many have already been covered here on CSS-Tricks (heck, I’ve already posted one covering Jest and Enzyme ) so aren’t there already enough options to go around? But react-testing-library is not just another testing library. It’s a testing library, yes, but one that’s built with one fundamental principle that separates it from the rest. The more your tests resemble the way your software is used, the more confidence they can give you. It tries to address tests for how a user will use your application. In fact, it’s done in such a way that tests won’t break even when you refactor components. And I know that’s something we’ve all run into at some point in our React journey. We’re going to spend some time writing tests together using react-testing-library for a light to-do application I built. You can clone the repo locally: git clone https://github.com/kinsomicrote/todoapp-test.git And, if you do that, insta...

If you haven’t yet read the IWSI America report on Modern Apprentices, then I suggest you do. It talks about how to get started with apprenticeship and gives a list of key tasks to tackle. Here’s... The post 10 of My Best Tips on How to Start a Tech Apprenticeship Program appeared first on Treehouse Blog . from Treehouse Blog http://bit.ly/2Hwpy4P

Domain-specific markup for fun and profit It doesn’t come as a surprise to Dull Old Web Farts (DOWFs) like me to learn last month that Google gives a search boost to sites that use structured data (as well as rewarding sites for being performant and mobile-friendly). Google has brilliant heuristics for analysing the content of sites, but developers being explicit and marking up their content using subject-specific vocabularies means more robust results. For the first time (to my knowledge), Google has published some numbers on how structured data affects business . The headlines: Jobrapido’s overall organic traffic grew by 115%, and they have seen a 270% increase in new user registrations from organic traffic After the launch of job posting structured data, Google organic traffic to ZipRecruiter job pages converted at a rate three times higher than organic traffic from other search engines. The Google organic conversion rate on job pages was also more than 4.5 times higher than it...

So, you're working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to: Limit the width (for large screens) Pad the edges Center the content It's "the inside problem" in web layout. It's not hard, it's just that there are lots of considerations. The "inside" issue. Centered, max-width/padding containers inside full-width color bands. What's your favorite pattern? (Just a fun every day thing with many possible solutions to consider!) pic.twitter.com/pNYf5YsQMp — Chris Coyier (@chriscoyier) March 14, 2019 The classic solution is an outer and inner container. The parent element is naturally as wide as it's own parent, and let's assume that's the <body> element, or the entire width of the browser window. That takes the background-color and pads the lef...

Here are my slides for The HTML Treasure Hunt , my keynote at the International JavaScript Conference last week. They probably don’t make much sense on their own, unfortunately, as I use slides as pointers for me to ramble about the subject, but a video is coming soon, and I’ll post it here. Given that one of my themes was “write less JS and more HTML”, feedback was great! Attendees gave me 4.8 out of 5 for “Quality of the presentation” (against a conference average of 4.0) and 4.9 for “Speaker’s knowledge of the subject” (against an average of 4.5). Comments included: great talk talk! reminding of the basics we often forget. amazing way to start the second day of this conference. inspiring to say the least. great job Bruce very entertaining and great message. excellent speaker Thanks, that was a talk a lot of us needed. Remarkable presentation. Thought provoking, backed with statistics. Well presented. Very experienced and inspiring speaker. I would really like to i...