The Power of RegEx in Dreamweaver

Thanks to all my time spent this year on learning JavaScript, I’ve come to the conclusion that so many little things can be automated. And powerful programs, like Dreamweaver, are just waiting for its users to take advantage of their automation features.

Today, while coding at work, I delete 64 hyperlink references that had been set up as placeholders during a project in development. As I looked over all of these, I thought, “wouldn’t it be great if I could just do a simple search-and-replace with regex??” After fiddling with the possibility, I finally googled it and found that Dreamweaver did, indeed, have a quick post about searching with regex.

Here is what I was able to do in Adobe Dreamweaver CC:

regex

Using

wellness/\*\w+\.pdf

I was able to search out:

  • the reference to the “wellness” folder,
  • followed by a forward-slash (escaped with a backslash),
  • followed by any alphanumeric character that occurred more than once,
  • and followed by a “.pdf” (the dot had to be escaped, too).

Thanks, JavaScript, for teaching me the importance and usefulness of Regular Expressions in my work! It saved me some time and annoyance. And thank you, Dreamweaver, for making a powerful web design/dev tool.

DW Power User Level: unlocked.

100 Days of Accessibility

disability-e1449518386699

“How wonderful it is that nobody need wait a single moment before starting to improve the world.”
― Anne Frank, Anne Frank’s Tales from the Secret Annex

I had so much success and felt such accomplishment achieving some of my long-standing coding goals via the 100 Days of Code challenge, that I thought it was worth a shot to strive for another long-standing goal using a focused conduit like the 100 Days challenge. So, here I am, planning my start of 100 Days of Accessibility or #100DaysOfA11y.

I commit to follow similar principles as Alexander Kallaway instituted with his 100 Days of Code initiative:

  • learn and apply web accessibility for at least an hour a day for 100 days
  • tweet my progress every day with the hashtag #100DaysOfA11y and note which day of the challenge I’m on
  • track my time spent, what I’ve learned, and how I applied it through weekly blog posts
  • count any day as progress when time is well-spent reading about or applying accessibility principles
  • allow one skip day per two weeks, if something critical comes up, but will not count that day as one of those 100 days

Naturally, I hope several things will come out of my challenge. However, the most important goal I hope to obtain by the end of this challenge is to be able to hold a much clearer view of who all the different users of the Internet and IoT are and empathize with challenges they face. This challenge is for me, a web designer/developer, who wants to make the web accessible to all because it’s for us all. As one who has encountered my own barriers in a visually-based world, I want to contribute to knocking down barriers that hinder others from living life, experiencing autonomy, and pursuing happiness.

Follow or learn along with my journey starting May 1st. I’ll be blogging once a week on Carney Develop It and tweeting #100DaysOfA11y every day for 100 days.

Video Player, Konami Code, and Local Storage

Custom HTML5 Video

  • double underscore in CSS and HTML is a sub-element that is modified
  • video properties (currentTime, paused, textContent, offsetX)
  • more addEventListener use!

Key Sequence Detection

http://www.cornify.com/js/cornify.js

const pressed = [];
const secretCode = 'wesbos';
window.addEventListener('keyup', (e) => {
  console.log(e.key);
  pressed.push(e.key);
  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
  if (pressed.join('').includes(secretCode)) {
    console.log('DING DING!');
    cornify_add();
  }
  console.log(pressed);
});
  • konami code (like Easter eggs)
  • cornify all the things! (unicorns and rainbows everywhere)

Slide in on Scroll

  • debounce = limiting the rate at which events fire in order to improve performance
  • copying code snippets like debounce are the way of the dev rather than reinventing the wheel
  • a bit of event listening and math process involved in order for this to function
  • I’m definitely leaning toward arrow functions as a preference which make methods like forEach() easier to comprehend

Object and Arrays – Reference vs Copy

  • Booleans, strings, and number variable reference to a variable will not change when the original is changed
  • Reference of an array references back to original array, so change happens within the original array
  • To make an actual copy rather than a reference:
    • array.slice()
    • [].concat(array)
    • […array]
  • objects work the same way in referencing as an array
  • To copy an object:
    • Object.assign({}, person, {number:99}) //only one level deep
    • {…person} //React
// start with strings, numbers and booleans
    // let age = 100;
    // let age2 = age;
    // console.log(age, age2);
    // age = 200;
    // console.log(age, age2);

    // let name = 'Wes';
    // let name2 = name;
    // console.log(name, name2);
    // name = 'wesley';
    // console.log(name, name2);

    // Let's say we have an array
    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

    // and we want to make a copy of it.
    const team = players;

    console.log(players, team);
    // You might think we can just do something like this:
    // team[3] = 'Lux';

    // however what happens when we update that array?

    // now here is the problem!

    // oh no - we have edited the original array too!

    // Why? It's because that is an array reference, not an array copy. They both point to the same array!

    // So, how do we fix this? We take a copy instead!
    const team2 = players.slice();

    // one day

    // or create a new array and concat the old one in
    const team3 = [].concat(players);

    // or use the new ES6 Spread
    const team4 = [...players];
    team4[3] = 'heeee hawww';
    console.log(team4);

    const team5 = Array.from(players);

    // now when we update it, the original one isn't changed

    // The same thing goes for objects, let's say we have a person object

    // with Objects
    const person = {
      name: 'Wes Bos',
      age: 80
    };

    // and think we make a copy:
    // const captain = person;
    // captain.number = 99;

    // how do we take a copy instead?
    const cap2 = Object.assign({}, person, { number: 99, age: 12 });
    console.log(cap2);

    // We will hopefully soon see the object ...spread
    // const cap3 = {...person};

    // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.

    const wes = {
      name: 'Wes',
      age: 100,
      social: {
        twitter: '@wesbos',
        facebook: 'wesbos.developer'
      }
    };

    console.clear();
    console.log(wes);

    const dev = Object.assign({}, wes);

    const dev2 = JSON.parse(JSON.stringify(wes));

Local Storage and Event Delegation

  • a little SVG exposure
  • submit event listener is best for when is button is clicked (or someone hits Enter key)
  • .preventDefault() prevents page from reloading
  • CSS trick for hiding checkbox to insert custom checked image
  • ES6 makes innerHTML much easier to work with!
  • learned about localStorage to keep list items even after refresh
  • event delegation targets parent so it can relay event listeners to children

Canvas, Arrays, and Event Listeners

Ajax Type Ahead

This was a great run-through of using Ajax without using jQuery! I thought it would be more complicated than this. But for something as basic as this activity, it seemed like a good way to go.

Most of this was pretty new to me, so I needed to walk through it at a slower pace the second time around. The useful things I got out of this project:

  • fetch(endpoint) instead of $.getJSON()
  • .json() to identify type
  • .then()
  • (…data) to spread an array within an array
  • practical use of filter() and map() and replace()
  • more use of backtick
  • CSS3 transform:perspective

Extra credit: changed .addEventListener(‘change’) to (‘input’) so suggested list appears immediately rather than when user clicks outside of box

Array Cardio, Day Two

Wow! I think between this rundown and the Ajax Type ahead, I’m going to be able to fill in the missing pieces of a project I’m working on at work.

Material covered:

  • some(): checks array for at least one instance
  • every(): checks if every array item matches
  • find(): returns the first one it finds, rather than a subset
  • findIndex(): finds where something is within the array (the index number)
 const people = [
 { name: 'Wes', year: 1988 },
 { name: 'Kait', year: 1986 },
 { name: 'Irv', year: 1970 },
 { name: 'Lux', year: 2015 }
 ];
 const comments = [
 { text: 'Love this!', id: 523423 },
 { text: 'Super good', id: 823423 },
 { text: 'You are the best', id: 2039842 },
 { text: 'Ramen is my fav food ever', id: 123523 },
 { text: 'Nice Nice Nice!', id: 542328 }
 ];
 // Some and Every Checks
 
 // Array.prototype.some() // is at least one person 19 or older?
 const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19);
 console.log({isAdult}); // shows name of variable as well as value
 
 // Array.prototype.every() // is everyone 19 or older?
 const allAdult = people.every(person => (new Date()).getFullYear() - person.year >= 19);
 console.log({allAdult});
 
 // Array.prototype.find()
 // Find is like filter, but instead returns just the one you are looking for
 // find the comment with the ID of 823423
 const findId = comments.find(comment => comment.id === 823423);
 console.log(findId);
 
 // Array.prototype.findIndex()
 // Find the comment with this ID
 // delete the comment with the ID of 823423
 const index = comments.findIndex(comment => comment.id === 823423);
 console.log(index);
 comments.splice(index, 1);
  // or create new array with updated content
 const newComments = [
 ...comments.slice(0, index), // spread array into new array
 ...comments.slice(index + 1)
 ];
 console.table(newComments);

Fun with HTML5 Canvas

So. Many. Things.

I need to spend more time with this, but I already feel better about my knowledge in the following just from this short tutorial:

  • window.innerWidth && window.innerHeight can expand or shrink the canvas dimensions to the full browser window size
  • canvas and several of its properties (strokeStyle, lineCap, lineWidth, lineJoin, beginPath, moveTo, lineTo, stroke)
  • canvas context (2d vs. 3d)
  • HSL and a great site to see how hsl works
  • more addEventListeners (mousemove, mousedown, mouseout, mouseup)

Extra credit: I experimented with more addEventListeners to make it for touchscreen. Not successful yet, but I learned about touchstart, touchcancel, touchend, touchmove.

Extra extra credit: Added the following to give direction to the user:

context.fillText('Draw Here', canvas.width/2, canvas.height/2);

14 Must Know Dev Tool Tricks

Using Chrome Dev Tools, I can create a breakpoint to inspect via right-click on element > break on > attribute modifications.

A quick rundown by Wes:

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

function makeGreen() {
 const p = document.querySelector('p');
 p.style.color = '#BADA55';
 p.style.fontSize = '50px';
}

// Regular
 console.log('hello');

// Interpolated
 console.log('Hello I am a %s string!', '💩');

// Styled
 // console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

// warning!
 console.warn('OH NOOO');

// Error :|
 console.error('Shit!');

// Info
 console.info('Crocodiles eat 3-4 people per year');

// Testing
 const p = document.querySelector('p');

console.assert(p.classList.contains('ouch'), 'That is wrong!');

// clearing
 console.clear();

// Viewing DOM Elements
 console.log(p);
 console.dir(p);

console.clear();

// Grouping together
 dogs.forEach(dog => {
 console.groupCollapsed(`${dog.name}`);
 console.log(`This is ${dog.name}`);
 console.log(`${dog.name} is ${dog.age} years old`);
 console.log(`${dog.name} is ${dog.age * 7} dog years old`);
 console.groupEnd(`${dog.name}`);
 });

// counting

console.count('Wes');
 console.count('Wes');
 console.count('Steve');
 console.count('Steve');
 console.count('Wes');
 console.count('Steve');
 console.count('Wes');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');

// timing
 console.time('fetching data');
 fetch('https://api.github.com/users/wesbos')
 .then(data => data.json())
 .then(data => {
 console.timeEnd('fetching data');
 console.log(data);
 });

// table output
console.table(dogs);

Hold Shift to Check Multiple Checkboxes

Tidbits:

  • click event comes from mouse or keyboard, unlike change event which detects the mouse
  • instead of setting true or false, I can set a variable opposite from itself (!variable)
  • it’s better to rely less on targeting HTML structure in case updates are made in separate files
  • properties new to me: shiftKey && checked

Extra credit: updated HTML to make it more semantic for web accessibility by using lists and labels rather than divs and paragraphs.

Getting Good at Pretty Much Anything

Listening to an archived Developer Tea interview with Chris Coyier recently, I was struck with how the craftsman’s mentality has been around awhile, yet it is still hard for many of us to understand that all it takes to be good at something is putting in the time and persevering through the challenges of mastering a skill.

My takeaways from this podcast episode which I’ve discovered myself in this past year:

  • Do it a bunch.
  • Keep doing it.
  • Spend a lot of time doing it.
  • Do the job.

 

JavaScript30 Begins: First 5 Projects

Wes Bos, a Canadian web developer, has learned a lot about JavaScript by building projects, is offering a free course about JavaScript. His philosophy is that you learn code best by building things. In his JavaScript30 course, he offers simple projects to build and leads the viewer step by step on how to make those projects with vanilla JavaScript, not frameworks.

Saving this challenge for after I had completed my 100 Days of Code challenge, I’m excited to continue to build on my JavaScript knowledge. I’m also hoping these mini hand-holding projects will help me get through my last two Free Code Camp Advanced Front-End Development projects. Below are some of the valuable lessons I learned during the first five projects of JavaScript30.

Drum Kit (keyboard)

  • Discovered keycodes with keycode.info! I anticipate referring back to this as I learn how to make sites/apps for keyboard accessible.
  • .addEventListener(): this was more exposure for me because I haven’t used this often but it sure seems handy!
  • creating an audio element and using currentTime() and play(): now I can go back to my Pomodoro timer and add an alarm to sound when the timer is up
  • .classList.add() === $().addClass() === NICE
  • HTML <kbd> element: surprised that I didn’t know this one! But now I’m glad I do. More accessibility usefulness and more.
  • data-key === wildcard

Clock

  • Template Literals: so THAT’S why my clock didn’t work despite directly copying code after much frustration of following along and not getting it. Which led me to why my drum kit didn’t work immediately either without a copy-and-paste job. Backticks ` …. SO important when using a template literal ${}. Lesson learned.
  • document.querySelector: great replacement for document.getElementById, though it has its place, I’m sure.
  • Date properties: .getSeconds, .getMinutes, .getHours… brilliant! Didn’t quite get this when reading up on them for my Pomodoro timer.
  • CSS properties I hadn’t used yet, but fun:
    • transform origin: 100%; keeps a rotating clock hand Y-axis in place
    • transition (for the ticking)
    • transition-timing-function:cubic-bezier(0.1, 2.7, 0.58, 1); Mind. Blown.
  • Unsplash.it is the perfect website to find placeholder images for projects!

Extra Credit: I experimented with the idea of changing the background image for day and night. That was actually easier to figure out than I thought!

if(hours >= 7 && hours < 19){
  htmlTag = document.documentElement; //html===document.documentElement
  htmlTag.style.background = 'url(https://unsplash.it/1500/1000?image=884)';
}

Extra Extra Credit: I experimented with adding a ticking sound. And I figured it out for myself, building off of past ideas. Fun!

const audio = document.createElement('audio');
audio.setAttribute('src', 'https://github.com/wesbos/JavaScript30/blob/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav?raw=true');
audio.play();

CSS Variables + JS

  • :root (in CSS) targets the entire document
  • CSS variables: So, I don’t need Sass for this?? Use ‘–‘ instead of ‘$’.
  • document.querySelectorAll() gets a node list, but it’s not an array
  • dataset property: target my made up data tag to change it

Array Cardio, Day 1

These were much needed exercises, even though I didn’t build anything. These were used in the Console. As I worked through them they started making more sense, as I had felt rushed and often confused during my Free Code Camp lessons and algorithm challenges. Wes presented these in a quick, fun, and straight-to-the-point lesson. I’m looking forward to his second Array Cardio lesson! Fundamentals he covered in less than 25 minutes:

  • filter: returns filter results based on parameters
  • map: returns the same number of items in the array, but maybe organized differently
  • sort: sorts items in array by comparing one item to the next (a > b)
  • reduce: gives a running total returned from last time checked (I think of this as items being folded over one another until you get the final result of what you want)
  • fun fact: console.table() neatly displays data from an object array!
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's

const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
console.table(fifteen);

// Array.prototype.map()
// 2. Give us an array of the inventors' first and last names

const fullName = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
console.log(fullName);

// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest

const byBirth = inventors.sort((a,b) => a.year > b.year ? 1 : -1);
console.table(byBirth);

// Array.prototype.reduce()
// 4. How many years did all the inventors live?

const totalYears = inventors.reduce((total, inventor) => {
    return total + (inventor.passed - inventor.year);
}, 0);
console.log(totalYears);

// 5. Sort the inventors by years lived

const oldest = inventors.sort((a,b) => {
    const lastGuy = a.passed - a.year;
    const nextGuy = b.passed - b.year;
    return lastGuy > nextGuy ? -1 : 1;    
});
console.table(oldest);

// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

const category = document.querySelector('.mw-category');
const links = [...category.querySelectorAll('a')]; //Array.from(category.querySelectorAll('a'));
const de = links
            .map(link => link.textContent)
            .filter(streetName => streetName.includes('de'));
console.log(de);

// 7. sort Exercise
// Sort the people alphabetically by last name

const alpha = people.sort((lastOne,nextOne) => {
    const [aLast, aFirst] = lastOne.split(', '); 
    const [bLast, bFirst] = nextOne.split(', ');
    return aLast > bLast ? 1 : -1;
});
console.log(alpha);

// 8. Reduce Exercise
// Sum up the instances of each of these

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
const transportation = data.reduce((obj,item) => {
    if(!obj[item]){
        obj[item] = 0;
    }
    obj[item]++;
    return obj;
}, {});
console.log(transportation);

Flex Panels Image Gallery

  • CSS flex can be a nested item nesting! I thought it only started with the parent other properties trickled to its children (maybe I’m confusing with grid?)
  • .classList.toggle () === $(”).toggle()
  • flex-direction can be set to column
  • transform: translateY(-100%) puts something off-screen
  • flexbox properties I need to spend more time on:
    • flex:1 0 auto;
    • display:flex;
    • justify-content:center;
    • align-items:center;

If you’re looking for ways to build on your limited JavaScript knowledge and need very basic and quick projects to work through, this is the one. Only five lessons in and I feel better about my own JS knowledge and ability. Free Code Camp gave me a great start, but Wes has filled in some gaps and helped me have fun while doing it!

Onward to the next five lessons….

The Impact of 100 Days of Code

396 contributions on Github in the last year

“You do it because the doing of it is the thing. The doing is the thing. The talking and worrying and thinking is not the thing.”
Amy Poehler, Yes Please

Over 100 days ago, I decided that this was it. I was tired of sitting, wishing for more, reading the books, and watching the videos. I was ready to do more. To build things and progress in my knowledge while doing so. I wanted to code beyond HTML and CSS. My desire to be good at something, specifically, front-end web development, was what spurred me on to commit to the 100 Days of Code Challenge.

Deep Work Collides into 100 Days of Code

As I’ve mentioned in a prior post, I was already primed for the idea of deep work when I stumbled upon Cal Newport’s book Deep Work. Mastering a craft had jumped to the top of my list of things to accomplish in life. And Newport’s words inspired me to drop the fluff and make the time to develop my skills.

It wasn’t long after finishing his book when I ran across Alexander Kallaway’s challenge for 2017: code for 100 consecutive days. Perfect! This was just the focus I needed to get the wheels in my head spinning. I couldn’t wait until January 4, 2017 to move forward. Thus, my 15-week journey started on December 20, 2016. And the rest is history on Twitter, Github, and Carney Develop It.

What I Got Out Of This Challenge

Some of those big ideas that I had been kicking around inside my skull finally came to fruition. Below are just a few things I’m proud to say happened, instead of wishing and hoping they would come about one day:

  • started contributing to open source projects like the Women Who Code website
  • launched my personal website, hand coded with love
  • initiated development of my Mars 511 web app to learn more about API use
  • completed the bulk of Free Code Camp’s Front-End Development coursework and projects
  • dug into the basics of the Javascript by building things
  • abandoned my reliance on jQuery for use of vanilla JavaScript
  • created art with CSS for fun and learning
  • fell in love with SCSS and started using it regularly during my projects
  • dusted off my Raspberry Pi
  • dreamed bigger dreams
  • gained a whole lot of coding confidence in myself and my ability to do more dev work at my job

Total time spent coding: 153 hours

“You have to care about your work but not about the result. You have to care about how good you are and how good you feel, but not about how good people think you are or how good people think you look.”
Amy Poehler, Yes Please

What’s Next

The perk of staying the course during a long period of time? Hope. I have confirmed that I can get better at something and I will be better with time and commitment. Anything is possible.

You know what else I received? Focus. Creating with JavaScript truly adds enhancement, but my joy comes from designing with CSS. When the two work together, amazing things happen. Yet all of time and space melt away when I’m playing with those stylesheets. That’s the craft I shouldn’t stray far from. Well, that, and standards. I learned I’m a bit of a stickler when it comes to HTML structure and web accessibility.

What’s next for me? Just you wait and see!