Forem: Tee

🎮 CSS Nintendo Switch (Box Shadow & Gradient Practice)

Tee — Thu, 24 Sep 2020 02:00:18 +0000

Hello world. I've missed you all. I hope you all are happy, healthy, and well ❤️

After some major life changes and enormous projects, it's great to be back! I'm conjuring up on a new animation video involving the Nintendo Switch 😊 I wanted to improve my use of box-shadows, so I challenged myself to make a realistic looking Switch. My fiancé then had the splendid idea of showing gameplay on the screen--what an ideal opportunity to spread more ACNH euphoria!

It was gratifying to apply box-shadows meticulously. I look forward to sharing the Switch animation when it's done. There were some fun challenges and learning outcomes I'm itching to share with this animation video.

I'll document my process differently, with an accompanying article on DEV. Now that my schedule's subsided, I can't wait to share more content with you all.

Please don't hesitate to reach out if you have any questions 😊 Have a great day!

🖼 CodePen

🎥 YouTube

👩🏾‍💻 GitHub

🎀 Instagram

25 Days of CSS Animations: Teaching Myself CSS through Motion Design.

Tee — Sun, 20 Oct 2019 19:27:24 +0000

25 Days of CSS Highlights

It was the first day of 2019 and I was not where I wanted to be. I felt at my peak when learning something new. The new year started with a project idea, and the winter ended with an unmotivated, unfinished project.

I missed the college coding grind--learning new things and bringing ideas to life. A skill I've always wanted to master was CSS. I want to leverage it and create compelling user experiences for people to enjoy. My background in Python, Java, and C++ gave me a solid computer science foundation. Now it was time to modernize my skills and make my work functional and visually appealing.

One day I opened CodePen, felt waves of inspiration, and got right to work. I studied HTML and CSS using the MDN Web Docs, W3Schools and CSS Tricks.

Around this time I was also teaching myself vector drawing and animation using Adobe Illustrator and After Effects (until my free trial ran out...). When I found this pure CSS BB-8 animation on CodePen, I was captivated. I had to learn how to do that.

And so it began.

I challenged myself to spend 20 days coding CSS animations before the end of the year. The final day was when I got the most ambitious, and the most creative, so I spent a total of 25 days!

You can view my 25 Days of CSS journey on CodePen.

Tools

The Bare Minimum

Everyone starts small. For the first 10 days of the challenge, I used the following to brush up on the basics. These served as the foundation for my frontend skills:

HTML: Hypertext Markup Language; creates the content of a webpage.
CSS: Cascading Style Sheets; describes the style of a webpage.
Javascript: A programming language used to describe a webpage's behavior. This was used for select animations.
CodePen: An online code editor for HTML, CSS, and Javascript where users can showcase their work - great for getting your web dev code seen and debugged.

Power Ups

Everyone also gets lazy and curious (by everyone I mean me). Once I was comfortable with the bare minimum, I explored tools that would improve the development process:

Sass: Style sheet language that provides variables, functions, mixins, and more to streamline CSS.
Pug: A template engine for a more clean, whitespace sensitive syntax for HTML--great for speeding up development.
Visual Studio Code: A cross platform source-code editor. Used to practice setting up my Pug and Sass developer environment.

The Process

I wanted to take time and care to learn and understand CSS properties and its uses. Breaking down my creative process in this way enabled me to make something fun and learn something new.

1. Have an Idea

I'd browse Dribble, CodePen, and r/MotionDesign for inspiration.

I can be overly ambitious when learning something new, so finding inspiration on these sites helped me scope my animations while realizing CSS's capabilities.

My collection of inspiration from CodePen and Dribbble

Then I wrote down every possible idea I had with no limits. Most of my ideas came from things I enjoy like video games, sci-fi, kawaii culture, the list goes on…This would help me persevere through challenges and motivate me to keep working on it.

Brainstorm Bomb 🤯

2. Sketch a Blueprint

I'd start off with a rough sketch of the animation. This is where I planned my HTML elements, and the animation directions for specific elements.

Sketch for Day 10

3. Find Examples

The beauty of coding is that you can learn from existing implementations and repurpose them for your own.

Why reinvent the wheel? Improve it with new ideas.

I inspected animation code that seemed similar to what I was trying to accomplish, and combined it with what I learned to form an elegant solution. CodePen and the Chrome developer tools were a big help here.

4. Animate!

Equipped with ideas, blueprints, examples, and my Bulbasaur plushie, I brought my CSS ideas to life. I've had roadblocks, I've been personally victimized by typos, and I wasn't always happy with my pace. Thankfully, online research and rubber ducking helped me learn from my mistakes and progress faster and faster after each project.

Days 1–8: Start Small & Recreate Examples with a Twist

The first 9 days focused on understanding shaping, positioning, keyframes, and transitions. I grabbed designs, animations, and pens I really liked, and tried to recreate them from memory.

25 Days of CSS: Hello CSS (A twist on Marjo Sobrecaray's Hello Pen)

25 Days of CSS: Pokéball, Go! A recreation of a Dribbble by Mark Usmiani

25 Days of CSS: Egg Head in Love - An animated version of a Dribble shot by MBE

25 Days of CSS: Eggstraterrestrial - a twist on Marjo Sobrecary's pen Glowing Meteor

25 Days of CSS: Sun Blocked - a recreation of Gal Shir's Dribbble animation

25 Days of CSS: Beauty and the Beast's Enchanted Rose - a twist on Marjo Sobrecaray's Enchanted Rose Pen

Intermission

Part way through my challenge I felt insecure. I wondered whether or not there was any merit or value to learning CSS this way.

Am I wasting my time? Is this even useful for web development?

Well, let's find out.

I put my new skills to the test by designing and coding the frontend for a make up e-commerce site using plain old HTML and CSS:

Shimmer and Shine: Make Up E-commerce Site.

Here I used the traditional column layout with the clearfix method, studied the tradeoffs between traditional columns, flex boxes, and CSS grids after using flex boxes in my animations, applied media queries, and debugged elements through Chrome's developer tools.

Then, I worked on a fun redesign of MAC Makeup's landing page inspired by Julie Park's FitBit landing page. I applied my knowledge of CSS positioning, transitions, borders, box shadows, render orders, fonts, and clips.

MAC Makeup Landing Page

Animating armed me with the ins and outs of numerous CSS properties like backgrounds, transforms, borders, positions, the list goes on. Animating reinforced newly acquired skills, and thus exercised them by building static web pages.

Whether you're a frontend developer, CSS animator or hobbyist, we're all using the same language -- the skills and concepts learned are transferrable by default.

// Detect dark theme var iframe = document.getElementById('tweet-1179702722376982532-671'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1179702722376982532&theme=dark" }

Days 9–25: Climb the Curve & Code from the Heart

My later projects were based on original ideas once I got more comfortable with CSS. I've always wanted to make an animated avatar, and cute animations inspired by my everyday life. Some of my work was also inspired by my favorite Nintendo video games like Super Mario World 2: Yoshi's Island and Pokémon.

25 Days of CSS: Interactive Self Portrait

Day 10 is one of my personal favorites. I made this once I realized how much I love coding. Before this challenge I've had several low points, wallowed in doubt, and grew skeptical of my path as I felt my skills and projects weren’t as competitive and impactful as my peers yet.

Thankfully I remembered why I'm doing this--to learn and to create engaging experiences. With that in mind I pursued this challenge with hard work, determination, and self improvement, and in turn it restored my love for coding.

25 Days of CSS: Coder.

Day 12 was spent styling my first full stack project for my coding bootcamp which was a single paged Tic Tac Toe game. Since our whole cohort was assigned the same game, I gave my version an animated personality:

25 Days of CSS: Tic Tac Toe

I resumed my personal animations for days 13 - 25:

25 Days of CSS: Super! (My reaction to passing my first bootcamp project \o/)

25 Days of CSS: Under Kamek's Spell - I loved the spell trail effect in Yoshi's Island and felt like recreating it 🌈✨

This one is another favorite. Days 17-18 was inspired by this gorgeous scene from my favorite Pokémon episode Bulbasaur and the Mysterious Garden.

25 Days of CSS: Pokemon Friends. Bulbasaur and Pikachu go great together like CSS and animations.

This last pen was an interesting one to work on. I revisited Pokémon X for the Nintendo 3DS and opened up Pokemon Amie. This feature lets players pet and feed their their Pokemon using the 3DS touch screen. It's fun and therapeutic on a rough day, so I was compelled to code a desktop version for myself and others to use.

25 Days of CSS: Pokemon Amie ❤️ Hover over Eevee and hold left click to pet it.

I'm grateful for this journey. I learned key CSS concepts like keyframes, transitions, transformations, blend modes, clipping, masking, media queries, pseudo elements, flex boxes, and much, much more.

Additionally, I grew more confident in my coding and problem solving abilities. I've picked myself back up by completing projects from start to finish, managing my scope, asking questions, and maintaining a growth mindset.

I'm encouraged by this challenge. I'm excited to learn more and tackle more frontend projects in the future.

A Kawaii Introduction to Web Sockets & Socket.IO ✨

Tee — Tue, 01 Oct 2019 22:31:46 +0000

This is a skill building project for understanding the fundamentals of Web Sockets, and Socket.IO with Express. My goal is to integrate web sockets into a new full stack project, and brush up on web sockets for future contributions in open source repos like Discord.js, and SocketIO.

Design inspired by Angela He. Project source code can be found here.

Tools:

HTML - Hyper Text Markup language.
SCSS - A CSS Preprocessor to streamline styling.
JavaScript - Used for server side code and webpage events
jQuery - A JavaScript library to streamline HTML DOM manipulation.
Express - A JavaScript framework for building application servers.
Node - A JavaScript runtime environment for JavaScript code written outside of the browser.
Socket.io - A JavaScript web socket framework for real time server client/communication.

What's a Web Socket

A web socket is a bi-directional protocol that helps us communicate with a client, and a server in real time!

Think of a group chat in Slack or Discord. When you're sending a message about that upcoming deadline to your colleagues, or voice chat in a video game where you're shouting at your teammates for not completing the objective, everyone in the group chat will receive that message immediately after you've sent it.

Why Use Web Sockets?

Web sockets were designed around the HTTP send/receive paradigm. Because web sockets are real time and similar to Peer-to-Peer (P2P), we don't have to wait for a response from either endpoint, and we don't have to deal with the overhead that comes with HTTP requests like opening a new connection, closing a connections, and making frequent server requests for updates within seconds or minutes (a.k.a polling). This wouldn't be useful if we want a quick response.

Web sockets however are much more flexible and reliable for this type of communication. We don't need to repeat GET requests often just to see if there's anything new. The connection stays open, and data can be sent between clients and servers at any time.

There are instances where HTTP would be best. One reason is that it's supported by all web browsers. It's also better for apps with a large amount of connected users since the server wouldn't need to sustain a large number of open connections.

Another alternative to web sockets are Server-Sent Events (SSE). This creates a uni-directional connection between the client and the server--only the server needs to push data to the client.

Socket.io

SocketIO is a JavaScript framework for building apps with web sockets. Below are two code snippets used for the client and server to send data back and fourth to each other.

Server Code

In server.js, we establish 3 event listeners:

Connection event
- A client's entered the chat
Disconnection event
- A client leaves the chat
Chat message event
- A client's sent a message

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)

io.on('connection', socket => {
  console.log('A new user connected! ✨')

  socket.on('disconnect', () => {
    console.log('A user has disconnected.')
  })

  // Listens for the client chat event
  socket.on('chat message', msg => {
    // send the message out to everyone
    io.emit('chat message', msg)
  })
})

There is an additional method we're calling called emit(). This is how we send events from the server to the client, and vice versa. In server.js, emit() sends a 'chat message' event to the client whenever it receives a new message from the client.

Client Code

In index.html, we also have an event listener and event emitter:

  <script>
    const socket = io()
    const chatBubbleDiv = '<div class="bubble"></div>'
    $('form').submit(e => {
      // prevent page refresh 
      e.preventDefault()

      // send chat event to the server
      socket.emit('chat message', $('#message').val())

      // clear the message in the form
      $('#message').val('')
      return false
    })

    // display sent message to all clients
    socket.on('chat message', msg => {
        $('#messages').append($(chatBubbleDiv).text(msg))
    })
  </script>

The event emitter tells the server when a user sends a message. Then, when the server sends a 'chat message' event back to the client, it displays the message to all connected users.

Web sockets can be a good way to facilitate data streams for various projects! This was a fun skill building project and am excited to apply this to future projects. Feel free to add any thoughts or comments down below. Thanks for reading!

References

Socket.IO Documentation: https://socket.io/
Server-Sent Events: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events

Conceptual Solutions & Library Solutions w/ LeetCode's "Peak Index In Valley Array" Problem ✨

Tee — Fri, 27 Sep 2019 14:02:04 +0000

This is part of my series where I explain approaches to solving coding problems. This is to help me articulate my thought process better, and inspire new problem solving approaches for developers!

Problem Statement:

Let's call an array A a mountain if the following properties hold:
A.length >= 3
There exists some 0 < i < A.length - 1 such that A[0] < A[1] < ... A[i-1] < A[i] > A[i+1] > ... > A[A.length - 1]
Given an array that is definitely a mountain, return any i such that A[0] < A[1] < ... A[i-1] < A[i] > A[i+1] > ... > A[A.length - 1].

Somewhat of a doosey right? Don't worry, we'll break this down!

Approach:
We need to look for the point in the array where the mountain stops increasing. We can do this in 3 ways:

Scan the array until we reach a point where A[i] > A[i + 1]. This means that the mountain stopped increasing. We can definitely do this with Binary Search (here's a basic overview).
The peak index is essentially the max of the array. We can also find that and return its index.

We'll be going over two possible solutions and the trade offs to both.

Solution 1: Recursive Binary Search

// Time complexity: O(log(n))
// Space complexity: O(n)
const peakIndexInMountainArray = (A, low = 0, high = A.length - 1) => {
    if (!A.length) 
        return -1

    const mid = ((low + high) / 2) | 0

    if (A[mid] > A[mid - 1] && A[mid] > A[mid + 1])
        return mid

    if (A[mid] < A[mid - 1]) 
        return peakIndexInMountainArray(A, low, mid)

    if (A[mid] < A[mid + 1])
        return peakIndexInMountainArray(A, mid, high)
}

Explanation:
Here we add optional arguments low and high as a way for us to keep track of the initial low and high values. low is initially 0, and high is A.length -.

Recursive solutions have functions that call themselves over and over again until it finds the solution it needs. In this case, we'll call peakIndexInMountainArray over and over until we find the peak index.

A recursive solution can be one intuitive way of solving this since we're repeating steps for smaller parts of the array. It also provides a readalbe solution that's easy to understand.

If the array is empty, return -1 since there's nothing to search
Find the midpoint of the array with the distance formula (low + high) / 2 and then truncate the decimal using Bitwise OR:
```
const mid = ((low + high) / 2) | 0
```
If the midpoint is greater than the previous number AND if the midpoint's greater than the next number we found the peak. This would be our base case, which is where we'll stop making recursive calls to the function.
```
if (A[mid] > A[mid - 1] && A[mid] > A[mid + 1])
    return mid
```
If it's less than the previous number, we'll search the lower half recursively with mid becoming the new high point:
```
if (A[mid] < A[mid - 1]) 
    return peakIndexInMountainArray(A, low, mid)
```
If it's less than the next number, we'll search the upper half recursively with mid becoming the new low point:
```
if (A[mid] < A[mid + 1]) 
    return peakIndexInMountainArray(A, mid, high)
```

With recursive solutions in general, we need to consider what's called "The Call Stack". Each time we call a function, it's pushed into the call stack--This is how we keep track of all our recursive calls which is why the space complexity is O(n). Once we've hit our base case, we can pop the function call from the stack, and pass the solution retrieved from the last call to peakIndexInMountainArray().

Solution 2: Super Fun One Liner!

// Time complexity: O(n)
// Space complexity: O(1)
const peakIndexInMountainArray = A => {
    return A.indexOf(Math.max(...A))
}

Explanation:
We know that the peak index is the max of the array, so this can be a good semantic approach for finding the solution!

Since Math.max() takes in multiple arguments We use spread syntax to add all the array values into the method. Then it will give us the max.
Now that we have the max, we'll use Array.indexOf() to return the index of the mountain peak.

The cool thing about JavaScript is the ability to come up with fun one liners on top of other solutions! It's good to think of approaches that are independent of library methods in case your interviewer wants to see your understanding of the concept. Library methods not only help one understand JavaScript's functionality, they also help think about these concepts differently and succinctly.

Thanks for reading! As always questions, feedback, and ideas are always encouraged. Happy hacking!

YouTube Murals: Painting Topics in YouTube Videos with Natural Language Processing

Tee — Mon, 23 Sep 2019 22:44:40 +0000

Click here for a demo ✨

During my college modern physics class, my group and I did research on the Breakthrough Starshot project. I looked for videos that talked about the project, and thankfully they got the point across in 5 minutes. This video was next on autoplay, and being an Elon Musk super fan not even a long days worth of classes made me shelve this on my infinite display of forgotten Chrome tabs.

I eventually watched it all in one sitting, but I just wanted to watch parts I needed. It would be a miracle to have an hour to sit and watch this during group projects, and homework, and an hour commute home.

Cool video, but long right?

No way I had the energy to retain everything that was said. What if I could skip over other parts of the video?

The second time I tried to watch this I saw that Youtube included time encoded transcripts that you can view the entire transcript to the right of the video. Because they’re indexed with time stamps I can search for specific words or phrases and jump to the parts I need.

Time encoded transcripts (not machine generated)

Time encoded search results for the desired topic

Accessibility Implications

What started off as an idea for a creative coding sketch turned into a new art project presenting enormous implications for YouTube and human cognition. I had somewhat of an easy way out if I could hear what was said at a given time. This isn’t the case for many others. YouTube demonstrated their commitment to accessibility with closed captions, yet this is just the beginning. I believe there more approaches that can contribute to this.

“Everyone should be able to access and enjoy the web. We’re committed to making that a reality.” — Google Accessibility.

Making Topics Visible

A bag o’ words approach sounded straight forward and effective--group words associated with a certain topic at a given point in time. The size of each group depends on a specified duration, or sentence length. Thankfully YouTube’s API makes it possible to retrieve captions, and not just noisy auto-generated ones. These come in the form of Timed Text Markup Language. I’ll demonstrate this using a transcript from Elon Musk’s talk.

TTML v1 snippet from Elon Musk Talk

When sifted through an xml parser, I got the following below which made the processing much easier:

{'start': '75.936', 'dur': '1.302'} 
ELON MUSK: Thank you. Thank you very
{'start': '77.238', 'dur': '1.887'} 
much for having me. I look forward to
{'start': '79.125', 'dur': '3.547'} 
talking about the SpaceX Mars
{'start': '82.672', 'dur': '2.25'} 
architecture. And what I really want to
{'start': '84.922', 'dur': '3.019'} 
achieve here is to make Mars seem
{'start': '87.941', 'dur': '2.949'} 
possible, make it seem as though it&#39;s
{'start': '90.89', 'dur': '2.32'} 
something that we can do in our
{'start': '93.21', 'dur': '3.11'} 
lifetimes and that you can go. And is
{'start': '96.32', 'dur': '1.76'} 
there really a way that anyone can go if
{'start': '98.08', 'dur': '1.55'} 
they wanted to?

In Natural Language Processing it’s important to filter out stop words (common words in a specific language) to reduce noise when clustering words by topic. There’s no complete list of stop words, but I used NLTK’s stop words corpus (encoded with unicode). In the English language, these would consist of prepositions, articles, proper nouns. I removed these words from the text clusters above:

[u'i', u'me', u'my', u'myself', u'we', u'our', u'ours', u'ourselves', 
u'you', u'your', u'yours', u'yourself', u'yourselves', u'he', u'him', 
u'his', u'himself', u'she', u'her', u'hers', u'herself', u'it', u'its', 
u'itself', u'they', u'them', u'their', u'theirs', u'themselves', u'what',
u'which', u'who', u'whom', u'this', u'that', u'these', u'those', u'am', 
u'is', u'are', u'was', u'were', u'be', u'been', u'being', u'have', 
u'has', u'had', u'having', u'do', u'does', u'did', u'doing', u'a', u'an', 
u'the', u'and', u'but', u'if', u'or', u'because', u'as', u'until', 
u'while', u'of', u'at', u'by', u'for', u'with', u'about', u'against', 
u'between', u'into', u'through', u'during', u'before', u'after', 
u'above', u'below', u'to', u'from', u'up', u'down', u'in', u'out', u'on', 
u'off', u'over', u'under', u'again', u'further', u'then', u'once', 
u'here', u'there', u'when', u'where', u'why', u'how', u'all', u'any', 
u'both', u'each', u'few', u'more', u'most', u'other', u'some', u'such', 
u'no', u'nor', u'not', u'only', u'own', u'same', u'so', u'than', u'too', 
u'very', u's', u't', u'can', u'will', u'just', u'don', u'should', u'now', 
u'd', u'll', u'm', u'o', u're', u've', u'y', u'ain', u'aren', u'couldn', 
u'didn', u'doesn', u'hadn', u'hasn', u'haven', u'isn', u'ma', u'mightn', 
u'mustn', u'needn', u'shan', u'shouldn', u'wasn', u'weren', u'won', 
u'wouldn', u"'s", u"n't", u"'m", u"'d"]

Latent Dirichlet Allocation

LDA is a common model in Natural Language Processing where it discovers topics in a sentence or document. It’ll assume that you have a word count of your document. It scopes out a piece of text and finds a bunch of key words that it’ll use to learn what the document is about.

Think of harried high school students who’re preparing for a quiz in English class by reading (or skimming) their assignment for the next class, and making sure they understand what’s going on because their teacher’s on to their Spark Notes use. They’ll highlight words, sentences, paragraphs, or 99 percent of the text in a reading assignment. They’ll pick a few topics that they covered in class, and when they read the next assignment they’ll try to figure out why it fits with the topic. They’ll go through the text over and over to make sure the parts they took notes on fit under that topic.

Just like in LDA, a student take a mental snapshot of his or her reading notes, and see that for each chapter c and topic category t, he or she can see the portions of highlighted sections that go under each category for a full representation of c. If they happen to be reading something like a Harry Potter book and they finished reading chapter c, they might see that the topic distribution could be 10% friendship, 50% magic, 10% bravery, and 30% family.

After looking over the document repeatedly this model returned the probabilities of words appearing in Musk’s transcript assuming it’s looking for 5 topics:

LdaModel(num_terms=1016, num_topics=5, decay=0.5, chunksize=100)[(0, 
u'0.041*"engine" + 0.026*"really" + 0.025*"make" + 0.022*"tank" + 
0.016*"rocket" + 0.014*"vehicle" + 0.013*"also" + 0.013*"merlin" + 
0.013*"capable" + 0.012*"because"'), (1, u'0.031*"mars" + 0.028*"use" + 
0.025*"mission" + 0.024*"carbon" + 0.022*"fiber" + 0.022*"liquid" + 
0.018*"thing" + 0.017*"falcon" + 0.016*"day" + 0.015*"very"'), (2, 
u'0.045*"system" + 0.035*"would" + 0.032*"propel" + 0.028*"go" + 
0.026*"time" + 0.024*"solar" + 0.022*"mars" + 0.018*"orbit" + 
0.018*"cost" + 0.016*"greater"'), (3, u'0.034*"first" + 0.027*"station" + 
0.026*"applause" + 0.024*"dragon" + 0.020*"space" + 0.016*"think" + 
0.016*"ton" + 0.015*"mars" + 0.014*"launch" + 0.013*"go"'), (4, 
u'0.028*"booster" + 0.028*"spaceship" + 0.025*"get" + 0.023*"land" + 
0.022*"like" + 0.021*"really" + 0.021*"maybe" + 0.019*"go" + 
0.018*"anywhere" + 0.018*"actual"')]

Now that we have the estimated topic mixtures from the Musk talk after 50 iterations, here is the mural below:

Youtube Mural for “Making Humans a Multiplanetary Species”

Mural Samples 🎨

The above mural was painted assuming there were 5 possible topics in the video, and that each words are grouped by 60 second intervals. These can be configured to show more or less topics, have different time intervals, etc. Below are more murals with different settings based on time intervals, sentence intervals, number of topics, and LDA iterations.

10 topics grouped by 60 second intervals after 10 LDA iterations

10 topics grouped by 5 second intervals after 10 LDA iterations

5 topics grouped by 60 second intervals after 10 LDA iterations

10 topics grouped by 60 words per sentence after 10 LDA iterations

Each row in the murals represent a different topic, with the color varying based on the distributions of each word. The length of the mural is always constant with each mark mapped according to duration (words will share topics, especially common words that didn’t appear in the stop-words corpus). Brighter areas in a topic row show areas where more words are associated with a particular topic.

5 topics grouped by 60 second intervals after 20 LDA iterations

5 topics grouped by 60 second intervals after 50 LDA iterations

5 topics grouped by 60 second intervals after 200 LDA iterations

Murals painted after more iterations typically have brighter spots. That’s because as I mentioned earlier with high school students example, they tend to go back and double check their text to make sure they’re ready for the quiz the next day. The same thing applies to LDA — the model needs to double check to make sure words are grouped correctly to achieve maximum accuracy.

A YouTube mural used to navigate Musk’s talk.

Future goals for this project include the following:

Update XML parsing to use latest version
Implement this for TED Talks

Conclusions

Color is a powerful stimulus for the brain — that’s what it notices and remembers first. Try watching Musk’s talk now and see if you notice any differences in how you pay attention and remember it. If you did notice improvements, imagine what this would do for class lectures, videos for kids, or for older users with age-related accessibility needs like Alzheimers.

There are so many people for whom interacting in the physical world is really tough, yet interacting with an accessible web is easy, and it will get easier thanks to technological advances.

LeetCode: "Palindrome Number" w/ Fun JavaScript Mathematical Approach ✨

Tee — Sat, 21 Sep 2019 03:35:16 +0000

This is part of my series where I explain approaches to solving coding problems. This is to help me articulate my thought process better, and inspire new problem solving approaches for developers!

Problem Statement:

Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same backward as forward. Follow up: Could you solve it without converting the integer to a string?

Approach:

Now there is most definitely a super fun JavaScript one liner iterative solution, but I was also interested in the follow up approach.

This approach reverses the number mathematically--without converting it to a string, and then compares the results afterwards.

I decided to write about this approach since mathematical solutions can be much more efficient than iterative or recursive solutions. This was a good exercise for thinking about programming mathematically because math is a wonderful thing.

Solution:

/**
 * @param {number} x the number to check
 * @return {boolean} true if it's a palindrome number
 */
const isPalindrome = x => {
    if (x < 0) return false

    let reversed = 0, y = x

    while (y > 0) {
        const lastDigit = y % 10
        reversed = (reversed * 10) + lastDigit
        y = (y / 10) | 0
    }
    return x === reversed
}

Explanation:
First, we check and see if the number is negative. If it is, then we know it's not a palindrome because the numbers will read differently backwards and forwards.

if (x < 0) return false

If the number is positive, we'll create two variables. The first variable reversed will store our reversed number, and the second variable y is copy of our input number. y will be used to reverse the input number without modifying our original input.

The following steps take place inside our while loop:

Get the last digit of the number using the modulo (%) operator. This is one trick that can help you isolate the last digit for future problems. Here, we're dividing y by 10 and returning the remainder. Let's refer to the example input 121. The hundreds column 100 is divided by 10 with a remainder of 0, and the tens column 20 is divided by 10 with a remainder of 0. When we divided the ones column 1 by 10, we'll get a remainder of 1 since 1 can't be divided by 10 evenly. After, we save the remainder to lastDigit:

const lastDigit = y % 10

We append the last digit to reversed. We have to multiply reversed by 10 on the right side of the assignment to ensure that we're always appending lastDigit to the ones column.

reversed = (reversed * 10) + lastDigit

Remove the last digit from y by dividing it by 10, and truncating the last decimal. We can do this using the bitwise OR operator |. This is another trick that can help you in future JS problems. In this case, we're converting the result into an integer, and then return the new integer:

y = (y / 10) | 0

Finally, if reversed === x, then it's a palindrome!

This solution saved us from having to traverse an array of string digits, which means we didn't have to use extra storage for this problem! When trying to find a mathematical approach to a coding question, think about any patterns you notice, and ask yourself if you need to read one digit at a time. If so, you can definitely traverse a number's digits with modulo arithmetic and division.

Thanks for reading! As always questions, feedback, and ideas are always encouraged. Happy hacking!

Codewars: "Square Every Digit" w/ Fun JavaScript One Line Solution ✨

Tee — Fri, 20 Sep 2019 13:18:55 +0000

This is part of my series where I explain approaches to solving coding problems. This is to help me articulate my thought process better, and inspire new problem solving approaches for developers!

Problem Statement:

In this kata, you are asked to square every digit of a number. For example, if we run 9119 through the function, 811181 will come out, because 92 is 81 and 12 is 1. Note: The function accepts an integer and returns an integer

Approach:
For this problem, we're given an integer (no decimals). We need to return a new number, where every digit is squared.
For example, if we're given the number 9119, we would return 811181, since the 9^2 = 81, and 1^2 = 1. We need to make sure that we return an integer afterwards. You'll see why down below. Here's the general approach:

Get a list of digits.
For each digit in the list, square it.
Join each digit.
Return the new number with squared digits.

Solution 1:

/**
 * Returns a new number with squared digits
 * Time complexity: O(n), space complexity: O(n)
 * @param {Number} num an integer
 * @returns {Number} an integer with squared digits
 */
const squareDigits = num => {
    // Get an array of digits
    const digits = num.toString().split('')

    // Square each digit. Because JavaScript has 
    // automatic type coercion, it will quietly convert each string
    // into a number to perform multiplication
    const squaredDigits = digits.map(n => n * n)

    // Join each digit together, then use the + operator 
    // to convert the string into a number
    const squaredNumber = squaredDigits.join('')

    return +squaredNumber
}

Explanation:
This is a good problem to apply JavaScript's string methods to split the digits and save them into an array. Since there aren't built in methods that can do this, we have to convert the number into a string. Then, we can use array iteration methods to square each digit before we return the new number. Here's how we'll do it.

We use toString() to create a string representation of the number. If we pass our function 9119, this will create a string representation of this which would be '9119'.

Following our toString() method, we split the string using .split(''). This means that we're breaking up the number into individual digits, and then saving them to an array.

const digits = num.toString().split('')

This will result into an array that looks like this:

['9', '1', '1', '9']

For each digit, we need to square them. Now that we have an array of strings, we can use map() look through our original array, and multiply each digit by itself. This saves us space since we're only updating our original array instead of creating a new one.

const squaredDigits = digits.map(n => n * n)

You may be wondering how this is even possible since we're used to multiplying numbers only right? JavaScript hooked us up with something called "automatic type coercion!" This just means that we're using operations with certain types, in this case JavaScript will secretly convert the digits into numeric values!

After, our array will look like this:

[81, 1, 1, 81]

We'll use .join('') to join each digit together. This will give us the string representation of our new number:

const squaredNumber = squaredDigits.join('')

The problem statment wants a numeric value to be returned, not a string! We can do this easily using the + prefix before our squaredNumber constant. This will convert it into a number:

return +squaredNumber

The time complexity for this solution is O(n) since we are squaring each digit in the array. The space complexity is O(n) since we are creating a new array using .split('').

Solution 2's a neat one liner one! This was a fun way of applying Array.from:

Solution 2:

/**
 * Returns a new number with squared digits
 * Time complexity: O(n), space complexity: O(n)
 * @param {Number} num an integer
 * @returns {Number} an integer with squared digits
 */
const squareDigits = num => {
    return +Array.from(num.toString(), n => n * n).join('')
}

Now what in the world is this one doing?

Array.from() creates a new shallow-copied Array from our input.
Inside this method, we convert our number into a String--an iterable object in JS. This allows Array.from() to create an array of string digits.
Then, we use the optional mapping argument where we'll square our digits,
After, we'll join each digit and convert the String result into a Number using the + operator.

Thanks for reading! As always questions, feedback, and ideas are always encouraged. Happy hacking!

Leetcode: "Unique Morse Code Words" Fun JavaScript One Line Solution ✨

Tee — Wed, 18 Sep 2019 19:31:09 +0000

This is part of my series where I explain approaches to solving coding problems. This is to help me articulate my thought process better, and inspire new problem solving approaches for developers!

Problem Statement:

International Morse Code defines a standard encoding where each letter is mapped to a series of dots and dashes, as follows: "a" maps to ".-", "b" maps to "-...", "c" maps to "-.-.", and so on. Now, given a list of words, each word can be written as a concatenation of the Morse code of each letter. For example, "cba" can be written as "-.-..--...", (which is the concatenation "-.-." + "-..." + ".-"). We'll call such a concatenation, the transformation of a word. Return the number of different transformations among all words we have.

Approach:
We need to return the number of morse representations for the given list of words. The approach for this problem is as follows:

Look at each word in words.
For each word, look at each letter.
Get the morse representation of each letter
Build the word with the morse letter
Once we finished building the word, add it to our set if it isn't already in there
Return the number of unique morse representations.

Solution:

const alphabet = {
    a: '.-', b: '-...',   c: '-.-.', d: '-..', e: '.', f: '..-.', g: '--.', h: '....', i: '..',  j: '.---',  k: '-.-',  l: '.-..', m: '--',
    n: '-.',  o: '---', p: '.--.',  q: '--.-',  r: '.-.', s: '...', t: '-', u: '..-', v: '...-', w: '.--', x: '-..-',  y: '-.--', z: '--..' 
}

/**
 * @param {string[]} words the word array to convert to morse
 * @return {number} the length of unique morse representations
 */
const uniqueMorseRepresentations = words => {  
    // PREVIOUS SOLUTION:
    // return [...new Set(words.map(word => word.split('').map(letter => alphabet[letter]).join('')))].length

    // Edited on 9-9-2019
    return new Set(words.map(word => word.split('').map(letter => alphabet[letter]).join(''))).size
}

Explanation:
This is a fun problem to apply Array.map()! Since we're changing every element in the array, map() works nicely. We'll use the example words = ['gin', 'zen', 'gig', 'msg'] to explain how this works:

For each word, we'll split the characters of each word with our first use of map(). We'll have something like this after looking at one word:

[ ['g', 'i', 'n'], 'zen', 'gig', 'msg' ]

We'll use map() again inside our first map method. We'll do this to look at each letter of the inner array to create a Morse Code word.

For each letter during our second use of map(), we'll get the letter's Morse Code, and build a word with it using join(''). After one use of both map() methods, we'll get the first Morse word for 'gin':

['--...-.', 'zen', 'gig', 'msg']

We'll repeat steps 1-3 until we have an array of new Morse Code words:

['--...-.', '--...-.', '--...--.', '--...--.']

We'll use JavaScript's Set Object to only keep the unique representations. The Set constructor takes in an array, which will be the array shown in Step 2, and then removes duplicate elements, so we'll only be left with unique Morse Code words:

['--...-.', '--...--.']

Finally, we can return the size of the set like so:

return new Set(words.map(word => word.split('').map(letter => alphabet[letter]).join(''))).size

Thanks for reading! As always questions, feedback, and ideas are always encouraged. Happy hacking!