IndyWatch Education Feed Archiver

Go Back:30 Days | 7 Days | 2 Days | 1 Day

IndyWatch Education Feed Today.

Go Forward:1 Day | 2 Days | 7 Days | 30 Days

IndyWatch Education Feed was generated at Community Resources IndyWatch.

Wednesday, 20 June

01:25

How to build a React.js chat app in 10 minutes freeCodeCamp - Medium

How the app well be building will look like.

In this article Ill show you the easiest way possible to create a chat application using React.js. Itll be done entirely without server-side code, as well let the Chatkit API handle the back-end.

Im assuming that you know basic JavaScript, and that youve encountered a little bit of React.js before. Other than that, there are no prerequisites.

Note: Im also creating a free full-length course on building chat apps with React.js. If you leave your email here Ill give you access to it before everyone else.

If you follow along with this tutorial youll end up with your very own chat application at the end, which you then can build further upon if youd like to.

Lets get started!

Step 1: Breaking the UI into components

React is built around components, so the first thing you want to do when creating an app is to break its UI into components.

Lets start by drawing a rectangle around the entire app. This is your root component, and the common ancestor for all other components. Lets call it App:

Once youve defined your root component, you need to ask yourself the following question:

Which direct children does this component have?

In our case, it makes sense to give it three child components, which well call the following:

  • Title
  • MessagesList
  • SendMessageForm

Lets draw a rectangle for each of these:

This gives us a nice overview over the different components, and the architecture behind our app.

We could have continued asking ourselves which children these components again have. Thus we could have broken the UI into even more components, for example through turning each of the messages into their own components. However, well stop here for the sake of simplicity.

Step 2: Setting up the codebase

Now well need to setup our repository. Well use the simplest structure possible: an index.html file with links to a JavaScript file and a stylesheet. Were also importing the Chatkit SDK and Babel, which is used to transform our JSX:

Heres a Scrimba playground with the final code for the tutorial. Id recommend you to open it up in a new tab and play around with it whenever you feel confused.

Alternatively, you can download the Scrimba project as a .zip file and run a simple...

01:02

Successes and failures from my three years of hosting freeCodeCamp meetups freeCodeCamp - Medium

I started a local meetup back in 2015 to meet fellow learners and coders. I had no idea at the time that it would help me so much and allow me to meet such amazing people.

I created a group page on Facebook first, replacing an inactive local freeCodeCamp group that had started earlier in the year. Members started to join one at a time and there were about 20 - 30 when I posted the first meeting.

In the beginning

The first few meetings we had were filled with code and coffee. We got together at a local cafe and worked through freeCodeCamp challenges and projects, and talked tech. We had about 4 - 8 members show up at the first few meetups and, within a few months, we started to outgrow the small cafe.

Around that time, I had grown my network in Indianapolis for almost a year and had met several people who were interested in speaking to the local freeCodeCamp members. I reached out to several co-working spaces and a few of them agreed to host us for free. In addition, the company I was working for offered to buy pizza for the group once a month. The only things left to do were schedule the meetings and let the members know.

The Facebook group started growing quickly with new members every week and we decided to start a meetup.com organization to broaden our reach. Many people look for coding groups on the meetup website, so the average number of members in attendance at the meetups more than doubled. Now, we average about 17 - 28 participants.

An experienced local developer, Jared Wilcurt, offered to start helping out with the group and that was a huge reason behind our success. He was very organized, an excellent speaker, and a great teacher too. Hes helped me plan every event weve had for almost two years now.

A note about Meetup.com: It costs $90 every six months to host a group on the platform. Some options to cover the fee could be taking donations, finding sponsors, splitting the bill between the organizers (this is what we currently do), or adding your group to someones account who already hosts a meetup, since meetup.com allows you to organize three groups with a single paid membership.

Our Best Meetups

Here are the best meetups weve had and a summary of what was covered.

Crafting a Developer Rsum

This was a talk given by a senior developer where members were encouraged to bring their rsums to review during the presentation. Rsums are still extremely important for getting hired, and this meetup detailed how tech rsums should be written and cleared up a lot of misconceptions. We had a great, interactive Q&A at the end also.

Tech interview practice

We recruited nine local developers with experience giving technical interviews. Enough members showed up to pair 2 members for ev...

00:53

New Computer Science Courses from Americas Most Innovative University Coursera Blog

U.S News & World Report has named Arizona State University the most innovative school in America for three years in a row. Now on Coursera, their Master of Computer Science pushes the envelope in computing and covers cutting-edge topics like AI, cybersecurity, and big data. Ranked in the Top 5 for graduate employment by The Wall Street Journal, a Master of Computer Science from ASU gives you the edge you need to launch a new career or move ahead in your current organization. Earn credit toward your masters by trying one of the degree courses below. If you are accepted to the program, youll get credit for courses youve completed.  

1. Core Database Concepts

This course introduces the world of database systems. It provides the foundation that will enable learners to master skills in data modeling and information, as well as extract information using existing database management systems. The following main topics are covered: database design/modeling, data storage and indexing, query processing/optimization, transaction management, database security, and data analytics.

2. Distributed Database Systems

The increased capabilities of a collection of logically interrelated databases distributed over a computer network enable scalable data processing. This course addresses the components of these systems, covering the following main topics: distributed database architectures, distributed data storage and indexing, distributed and parallel query processing/optimization, and concurrency control in distributed Parallel Database Systems.

3. Introduction to Data Exploration and Visualization

This course answers the questions, What is data visualization and What is the power of visualization? It also introduces...

00:47

The most important things you need to know for a programming interview freeCodeCamp - Medium

Photo by Tyler Franta on Unsplash

This article is intended for those who are trying to start their programming career, or are preparing to interview for their dream job. As someone whos been on both sides of the interviewing table, I understand how it feels to be the the interviewee.

This non-exhaustive list of questions floated through my mind all the time.

  • Am I supposed to talk through my code?
  • How often should I communicate with the interviewer?
  • Oh god, I forgot to instantiate my variable! Am I doomed?!
  • What does the interviewer think of my answer?
  • Is it OK if I do this?

And the list goes on

It is a very scary experience. It is very difficult. And it is extremely hard to operate within this vacuum when youre being scrutinized for every single thing you say and every thing you write.

Youre interviewing for your dream job, something youve dreamed of since you were 12. And it all comes down to impressing someone youve never met within 60 minutes.

The struggle is real.

5 Things You Need To Know In A Programming Interview

1. Always think ahead

Often, youll hear an interviewer ask this: OK, I think that looks good. Now, how would you improve this code?

This is a killer question. And this is because it isnt just a filler to pass time. The interviewer is trying to assess how you think about:

  • code quality
  • some concerns/bottlenecks that werent raised in the algorithm planning session
  • how you would scale the solution at hand.

Just because you solved the problem doesnt mean youll automatically get an offer.

For example, when you look at this piece of code below, what does it do? How would you improve it? What might cause it to break?

Let me know in the comments below. Id love to hear your thoughts.

Python code to do X

Surprise: Being able to come up with a working solution is the bare minimum to be considered for the position. These questions are basic competency tests. What separates the good candidates from grea...

Tuesday, 19 June

13:41

Announcing Our freeCodeCamp 2018 Top Contributor Award Winners freeCodeCamp - Medium

A group photo at freeCodeConf in Toronto from a few months ago.

Over the past 3 years, freeCodeCamp.org has grown from a small open source project into a global community of millions of developers.

freeCodeCamp is possible thanks to thousands of contributors around the world who help expand and improve the community, mainly through:

  • leading in-person study groups in their cities
  • moderating our many online communities
  • creating articles, videos, and podcasts about programming and technology
  • contributing to freeCodeCamps curriculum, codebase, and our many open source projects

This year, we are recognizing top contributors who have volunteered dozenssometimes hundreds or even thousandsof hours of their time to the community.

Weve invited the winners of this award to attend our Top Contributor parties in New York City, Dublin, and Hong Kong. Even though our small donor-supported nonprofit cant afford to fly Top Contributors to these cities, were providing food, drinks, and plenty of inspiring people from the freeCodeCamp community to hang out with.

So far, lots of Top Contributors have RSVPd for each of these three parties, and a few Top Contributors are planning to attend more than one of them. These parties are invitation-only, but we plan to live-stream them on our YouTube channel.

RSVPs so far

Our first party will be on August 18 in New York City. The Dublin party will be some time in September, and the Hong Kong party will be some time in October.

Top Contributors will also get a special badge on their freeCodeCamp portfolio recognizing their Top Contributor 2018 status.

This is the first year weve given out these awards, so weve also included some prolific contributors from the first 3 years of freeCodeCamps existence. We will award Top Contributor 2019 status next summer, so if you didnt make this list, you still have 12 months to ramp up your contributions to the freeCodeCamp community!

Below are contributors from the freeCodeCamp community, whom our team selected as 2018s Top Contributors.

This is a good mix of teachers, authors, video creators, moderators, open source contributors, and study group leaders from throughout our global community. They come from a broad range of cities around the world and bring to our community a wide variety of skills.

The global freeCodeCamp community has more than 6,000 contributors, and only about 200 of them made this list. We thank you all for your contributionseven if you didnt make this short list. We would love for you to be on next years list!

Congratulations to our Top Co...

12:34

How to solve a CMS problem when youre caught between RESTful, WordPress, and a hard place freeCodeCamp - Medium

Photo by Samuel Zeller on Unsplash

Last fall I was trying to decide on how to host and manage a small storytelling project built by around 40 usersmy students. I wanted them to have a clean and easy experience uploading their content (images and audio files, along with some text). I also wanted it to be stored long-term in a format my little Vue.js app could easily pull in to display without a lot of set up and overhead on my part.

Ive relied very happily on WordPress as a primary Content Management System (CMS) for years, but its been feeling a bit old lately, and its not quite designed for such a heavily AV-based, multi-user project, so I decided to look around for good fresh options.

Option 1: Google Sheets

The simplest path seemed to be setting up a Google Sheet the students could populate with links to their own self-hosted media. Ive had good experiences building small sites like this before pulling in the data through JSON.

For this case, though, with around fifteen different content pieces going into each users contribution, if I used a spreadsheet it would be a beast, and populating it would not be a good user experience for the students.

The links to the students self-hosted media also risked going bad over time, as accounts lapse, and services dry up. I didnt want the project to get patchy, and I didnt want to have to do too much maintenance on it each year to keep it solid.

So, no to Google Sheets.

Option 2: Contentful

Contentful is a headless CMS, which means it provides infrastructure for storing, editing, and serving content without providing any sort of front-end display. Traditional WordPress, in contrast, is set up to do bothstore your content, and offer up all the code that retrieves and displays it. This big stack of abilities makes it pretty bulky, and increasingly it doesnt feel as nimble as a web tool should.

I was really excited about Contentful. Its so pretty and slick! And so smartit permits direct geotagging of content! Ahhh. And I could set up a custom content model that exactly matched the project at hand, and it was fun! Yay.

After spending some time configuring Contentful, I desperately wanted to use it, but I began to lose interest the more I thought through how the students would upload their work.

The free tier maxes out at five users. While I could have had the students upload their content through one generic user account,...

12:04

A growth mindset can reduce the gender gap in STEM Coursera Blog

By: Alan Hickey, Vinod Bakthavachalam, Alexandra Urban and Talia Kolodny

The challenge of expanding access to education is central to creating an equitable and thriving society. Yet, overcoming structural inequalities demands more than mere access. Research shows a significant gender gap in both enrollment and achievement when it comes to scientific and technical education. This gap also occurs in the online learning world sometimes, its even wider. We would like to suggest a few strategies that promote equal opportunity and help diverse communities of learners succeed.

The challenge

In business, data science, and computer science courses on Coursera, male learners are 5% more likely to complete courses when compared to female learners. Courseras data shows that the gap between male and female learners widens even more for learners who score poorly on their first assignment.

Leveraging data and machine learning for solutions

Using machine learning tools, weve found that targeted review material for struggling learners (a video in this case) significantly boosted exam completion rates and continuation rates for female learners. The review material had no effect for males performance. The results suggested that small behavioral interventions can positively impact learning outcomes specifically for females, thus reducing gaps between genders. To learn more about this experiment, stay tuned for an upcoming post on Medium.

What you can do

Provide learners with actionable feedback: research shows that immediate and actionable feedback on assessments can support better learning outcomes. Feedback supports all learners success, but females can benefit even more, thus reducing gender gaps. As mentioned above, females are more likely than males to succeed after reviewing relevant content when struggling. There are several ways to offer effective feedback on Coursera. One is embedding...

11:28

How to get your app featured on the App Store freeCodeCamp - Medium

Photo by Medhat Dawoud on Unsplash

Im a Swift developer and indie maker. I have made several apps, and theyve been featured on the App Store every time. Threader, a Twitter client that curates good threads and displays them on a single page, even became featured as App of the Day.

Here is some advice from my experience that might help Apple consider your app for promotion as well.

Note: Although this advice applies to all app categories, the game category is a bit more specific. I wont cover the game app category in particular in this post.

How to get featured in the New Apps We Love section

Threader featured in New Apps We Love

A clean app

Of course, the first thing to consider is how to make a bug free app with a clean design. Think design, UX, and wording among other things. Dont forget to test it (different devices, different OS, different people).

Make things homogenous: use the same set of fonts and colors everywhere. Avoid text when you can. Dont reinvent the wheel, especially if youre not a designer. Use the standard iOS items: buttons, navigation bar, and so on.

Its not always possible, but it can be useful to see people use your app. If you see that theyre not using it as expected or dont manage to perform certain actions, then you might need to review your UX.

Use Apples APIs

Extensions

Although I dont have solid proof of this, Apple likes when you take advantage of all their platforms. Think of iMessage, share & action extensions, and so on.

For example, Threader has an action extension. It allows you to open a thread directly from Twitter and read it on a single page, just like on the app. Its an extension of the main app. Its useful and allows certain actions outside of it, without opening it.

Threaders action extension to read a thread directly from Twitter

Great visuals

All the information about your app is important and plays a role in...

10:34

Why you learn when you teach freeCodeCamp - Medium

Photo by NESA by Makers on Unsplash

The best way to learn is to teach.

Youve heard many people say this. But is it true?

I knew teaching had benefits. For example, if you teach, people will know you exist. People may be able to learn from your experience. But learn? I was skeptical.

But I realized the statement is true. You learn best when you teach. I can vouch for it after teaching frontend development for many years.

This article explains my thoughts on why teaching others helps you learn.

To understand why teaching helps you learn, we have to first talk about learning. You cant teach something when you havent learned it.

The learning process

Lets say you want to learn JavaScript. All you know is youre on one side of a cliff. The endpoint is on the other side of the cliff.

You dont know how to cross the gap (yet).

When I tried to learn JavaScript, I read through countless books and tutorials. I even looked at source code to see how people coded. I also searched for best practices.

Each bit of material I come across acted as a tiny foothold for me to get to the other side. Some materials were easy to understand. Others were hard.

Sometimes the footholds were too far apart. I missed my step, I fell into the valley, and I tried again.

Sometimes I hit a wall. I didnt understand articles I read. I fell into the valley, and I tried again.

After trying enough (and losing enough lives), I toned up my leg muscles. I could jump a little farther and higher than before. I tried the articles I couldnt understand again.

And sometimes I succeeded in getting past the stage I was stuck at.

And I got to the other side.

Only to realize theres more to go

But thats okay. Theres always more to go. Thats what makes learning fun.

Teaching helps you gain perspective

I didnt know how far Id gone until I started teaching JavaScript. I thought I knew very little. No...

10:15

One Little Word Cassandra Rankin

My husband with his beautiful heart reminded me yesterday of the story of the adulteress that Jesus stood up forand wrote in the sand forand forgave. I wrote this piece with her in mind, and for someone else that I know needs to hear this today, even though I dont know her yet.   I []

09:42

Deep copy vs. shallow copy and how you can use them in Swift freeCodeCamp - Medium

Copying an object has always been an essential part in the coding paradigm. Be it in Swift, Objective-C, JAVA or any other language, well always need to copy an object for use in different contexts.

In this article, well discuss in detail how to copy different data types in Swift and how they behave in different circumstances.

Value and Reference types

All the data types in Swift broadly fall into two categories, namely value types and reference types.

  • Value typeeach instance keeps a unique copy of its data. Data types that fall into this category includeall the basic data types, struct, enum, array, tuples.
  • Reference typeinstances share a single copy of the data, and the type is usually defined as a class.

The most distinguishing feature of both the types lies in their copying behaviour.

What is Deep and Shallow copy?

An instance, whether its a value type or a reference type, can be copied in one of the following ways:

Deep copyDuplicates everything

  • With a deep copy, any object pointed to by the source is copied and the copy is pointed to by the destination. So two completely separate objects will be created.
  • CollectionsA deep copy of a collection is two collections with all of the elements in the original collection duplicated.
  • Less prone to race conditions and performs well in a multithreaded environmentchanges in one object will have no effect on another object.
  • Value types are copied deeply.
https://medium.com/media/1dbfee73f1e693cb0acdc021f8fb6279/href

In the above code,

  • Line 1: arr1array (a value type) of Strings
  • Line 2: arr1 is assigned to arr2. This will create a deep copy of arr1 and then assign that copy to arr2
  • Lines 7 to 11: any changes done in arr2 dont reflect in arr1 .

This is what deep copy iscompletely separate instances. The same concept works with all the value types.

In some scenarios, that is when a value type contains nested reference types, deep copy reveals a different kind of behaviour. Well see that in upcoming sections.

Shallow copyDuplicates as little as possible

  • With a shallow copy, any object pointed to by the source is also pointed to by the destination. So only one object will be created in the memory.
  • CollectionsA shallow copy of a collection is a copy of the collection structure, not the elements. With a shallow co...

09:14

How Time-based One-Time Passwords work and why you should use them in your app. freeCodeCamp - Medium

Photo by William Iven on Unsplash

With the increase in cyber security threats, it has become more and more necessary to upgrade the security standards of your web applications. You need to make sure your users accounts are safe.

Nowadays, a lot of online web applications are asking users to add an extra layer of security for their account. They do it by enabling 2-factor authentication. There are various methods of implementing 2-factor authentication, and TOTP (the Time-based One-Time Password algorithm) authentication is one of them.

This article explains what it is, and how and why to use it. But before understanding that, lets first briefly take a look at what two-factor authentication means.

What is Two Factor Authentication?

Two-factor authentication (or multi factor authentication) is just an extra layer of security for a users account. That means that, after enabling two factor authentication, the user has to go through one more step to log in successfully. For example, the usual steps for logging in to an account are:

But after enabling 2-factor authentication, the steps look something like this:

So this adds one more step to the login process. This method is more secure, because a criminal cannot access the users account unless they have access to both the users regular password and one time password.

Currently, there are two widely used methods to get that one time password:

  1. SMS-based: In this method, every time the user logs in, they receive a text message to their registered phone number, which contains a One Time Password.
  2. TOTP-based: In this method, while enabling 2-factor authentication, the user is asked to scan a QR image using a specific smartphone application.
    That application then continuously generates the One Time Password for the user.

The SMS-based method does not need any explanation. Its easy, but it has its own problems, like waiting for the SMS on every login attempt, security issues, and so on. The TOTP-based method is becoming popular because of its advantages over the SMS-based method. So lets understand how the TOTP-based method works.

How the TOTP-based method works

Before understanding this, lets first discuss what problems this method will solve for us.

By using the TOTP met...

07:03

How I built a handwriting recognizer and shipped it to the App Store freeCodeCamp - Medium

From constructing a Convolutional Neural Network to deploying an OCR to iOS

The Motivation for the Project  

While I was learning how to create deep learning models for the MNIST dataset a few months ago, I ended up making an iOS app that recognized handwritten characters.

My friend Kaichi Momose was developing a Japanese language learning app, Nukon. He coincidentally wanted to have a similar feature in it. We then collaborated to build something more sophisticated than a digit recognizer: an OCR (Optical Character Recognition/Reader) for Japanese characters (Hiragana and Katakana).

Basic Hiragana & Katakana

During the development of Nukon, there was no API available for handwriting recognition in Japanese. We had no choice but to build our own OCR. The biggest benefit we got from building one from scratch was that ours works offline. Users can be deep in the mountains without the internet and still open up Nukon to maintain their daily routine of learning Japanese. We learned a lot throughout the process, but more importantly, we were thrilled to ship a better product for our users.

This article will break down the process of how we built a Japanese OCR for iOS apps. For those who would like to build one for other languages/symbols, feel free to customize it by changing the dataset.

Without further ado, lets take a look at what will be covered:

Part 1: Obtain the dataset and preprocess images
Part 2: Build & train the CNN (Convolutional Neural Network)
Part 3: Integrate the trained model into iOS

What the final app could look like (demo comes from Recogmize)

Obtain the dataset & Preprocess Images 

The dataset comes from the ETL Character Database, which contains nine sets of images of handwritten characters and symbols. Since we are going to build an OCR for Hiragana, ETL8 is the dataset we will use.

Images of handwritten produced by 160 writers (from ETL8)

To get the images from the database, we need some helper functions that read and store images in .npz format.

...

06:15

These are the most effective microservice testing strategies, according to the experts freeCodeCamp - Medium

Photo by Riccardo Annandale on Unsplash

Testing microservices is hard. More specifically, end-to-end testing is hard, and thats something well discuss in greater detail in this article.

But first, a quick story.

I learned just how hard microservice testing could be when I first dove into a tech stack with seven separate microservices. Each had its own code base, dependency management, feature branches, and database schemawhich also happened to have a unique set of migrations.

Talk about hectic.

The approach we took was to run everything locally. So that meant, at any given point in time when I want to run end-to-end tests, I would need to go through the following five steps for each of the seven microservices:

  1. Ensure I was on the correct code branch (either master or feature_xyz)
  2. Pull down the latest code for that branch
  3. Ensure all dependencies were up to date
  4. Run any new database migrations
  5. Start the service

This was just a baseline requirement to enable tests to be run. Often times, I would forget to perform one of these steps for a service and spend 1015 minutes debugging the issue. Once I finally had all the services happy and running, I could then begin to kick off the test suite. This experience sure made me miss the days of testing one big monolith.

So yes, I discovered that end-to-end microservice testing is hardand gets exponentially harder with each new service you introduce. But fear not, because there are ways to make testing microservices easier. Ive spoken to several CTOs about how they came up with their own creative ways of tackling this complex issue.

Common microservice testing methods

Unit Testing

A microservice may be smaller by definition, but with unit testing, you can go even more granular. A unit test focuses on the smallest part of a testable software to ascertain whether that component works as it should. Renowned software engineer, author, and international speaker Martin Fowler breaks unit testing down into two categories:

  1. Sociable unit testing: This unit testing method tests the behavior of modules by observing changes in their state.
  2. Solitary unit testing: This method focuses on the interactions and collaborations between an object and its dependencies, which are replaced by test doubles.

While these unit testing strategies are distinct, Fowler puts forth that they arent competingthey can be used in tandem to solve different testing problems.

D...

05:52

Creative Coding How to create a VJ engine in JavaScript freeCodeCamp - Medium

Learn how to dynamically inject JavaScript into webpages

from radarboy3000 on Instagram

For years Ive been using the browser for my performances and installations using my own simple homegrown VJ engine. And now, after you learn a few simple tricks, you can too

A quick intro

Firstly, what is a VJ engine? you might ask. And maybe even: what is a VJ? Wikipedia defines the characteristics of VJing as:

The creation or manipulation of imagery in realtime through technological mediation and for an audience, in synchronization to music.

And a VJ engine is simply the software used for VJing.

But why would I build my own when there are so many VJ engines out there?

I never really loved VJ softwarethey always felt bloated and made everyones stuff look kinda the same. Its kind of like when you first got your hands on Photoshop, and just blended a bunch of stuff together, added some filters, and it was cool (because it was the 90s). But most of all, I wanted tighter and better integration between developing content and the sound input frequencies.

I rarely VJ these days, but it still drives most of my installations and performancesanywhere I need multiple visualisations I use RBVJ (the RB is for Radarboythats me) as a wrapper/player.

RBVJ has gone through a number of iterations over the years, as Ive bounced from Flash, to Processing, and finally now to JavaScript, all using the same simple system.

I had previously open sourced it and my content (before the days of Git and not really knowing there was a thing called open-source). It won a bunch of awards, and I saw my content being used in a whole bunch of places which was nice. So I thought it was time to make it available for others again, along with a bunch of content to show how I go about creative coding.

from radarboy3000 on Instagram

Ok, thats a long enough introduction. Show me the money, you say!

1. Structuring the Content

Essentially, a VJ engine is just a fancy content browser and player. So what we really need is a way to retrieve and play our content.

You could just dump all your content in a folder, but this system is what has worked best for me, allowing a simple structure for keyboard control:

  • Shift 09 to change sets
  • Keys 09 to change banks
  • Keys a-z to choose content...

05:31

JavaScript code cleanup: how you can refactor to use Classes freeCodeCamp - Medium

Photo by Jennifer Burk on Unsplash

In smaller React projects, keeping all of your component methods in the components themselves works well. In medium-sized projects, you may find yourself wishing you could get those methods out of your components and into a helper. Here, Ill show you how to use a Class (instead of exporting individual functions and variables) to organize your code.

Note: I work in React so thats the example well discuss here.

Typical refactor

In a typical refactor, youd take a function on the component and move it to another helper.

From:

const MyComponent = () => {
const someFunction = () => 'Hey, I am text'
  return (
<div>
{someFunction()}
</div>
)
}

To:

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
return (
<div>
{someFunction()}
</div>
)
}

and

export const someFunction = () => 'Hey, I am text'

This example is really silly, but you see where were going:

  1. Take your functions and copy them over to a separate file
  2. Import them and call them as normal.

When things get complicated, though, youll have to pass in a bunch of stuff to those functionsobjects, functions for manipulating state, and so on. Today I ran into a problem where I wanted to extract three functions out of a component and they all required the same inputs (a resource and a function to update the resource). Theres got to be a better way

Refactoring with a class

I made a big demo for this post. You can see the code on Github. The initial commit shows all of the functionality inside the main component (App.js) and the subsequent commits refactor the code to use a class.

You can run this yourself and do whatever you want to it. Remember to yarn install.

We start with a component that fetches an object (mimicking the way we might do this from an API) with certain attributes on it: repeat (number of boxes), side (height and width), text, color. We then have a number of ways we manipulate the viewchanging the color, updating the text, and so on. After each change, we display a message.

For instance, heres our change width and height method:

changeSide = si...

05:17

An Intro to Web Scraping with lxml and Python freeCodeCamp - Medium

Photo by Fabian Grohs on Unsplash

Why should you bother learning how to web scrape? If your job doesnt require you to learn it, then let me give you some motivation.

What if you want to create a website which curates the cheapest products from Amazon, Walmart, and a couple of other online stores? A lot of these online stores dont provide you with an easy way to access their information using an API. In the absence of an API, your only choice is to create a web scraper. This allows you to extract information from these websites automatically and makes that information easy to use.

Here is an example of a typical API response in JSON. This is the response from Reddit:

There are a lot of Python libraries out there which can help you with web scraping. There is lxml, BeautifulSoup, and a full-fledged framework called Scrapy.

Most of the tutorials discuss BeautifulSoup and Scrapy, so I decided to go with lxml in this post. I will teach you the basics of XPaths and how you can use them to extract data from an HTML document. I will take you through a couple of different examples so that you can quickly get up-to-speed with lxml and XPaths.

Getting the data

If you are a gamer, you will already know of (and likely love) this website. We will be trying to extract data from Steam. More specifically, we will be selecting from the popular new releases information.

I am converting this process into a two-part series. In this part, we will be creating a Python script which can extract the names of the games, the prices of the games, the different tags associated with each game and the target platforms. In the second part, we will turn this script into a Flask-based API and then host it on Heroku.

First of all, open up the popular new releases page on Steam and scroll down until you see the Popular New Releases tab. At this point, I usually open up Chrome developer tools and see which HTML tags contain the required data. I extensively use the element inspector tool (the button in the top left of the developer tools). It allows you to see the...

02:46

The Ultimate Guide for Working with Side Projects freeCodeCamp - Medium

Over the last ten years or so, Ive made a habit of maintaining at least one side project at any given moment.

Those side projects have served a couple of purposes:

  1. Learn new things: Trying out a new technology, a new field, or learning a new skill.
  2. Build something: Its nice and fulfilling when you can show your product to others, or take a look at something and know youre the one that created it.
  3. Refreshing: Its a great way to get out of your comfort zone and do something different from your day job.

Ive listed these reasons in order of importance to me. Personally, most of the times my primary goal was to learn something new, but this can be different for you.

There are a lot of articles about why side projects are important. You can read about them here or here.

Here are some of my the side projects Ive worked with:

  • 3D house model: Building a 3D model of my house back in the day. I even thought about applying for a job at Pixar. So to increase my chances of getting a job as a software engineer there, I decided to learn how to work with Maya.
  • Bill splitting app: I built a bill splitting app while exploring new fields I wanted to experience, like developing a user interface product. Thats why I created the Bill Splitter - Tip Calculator app, which later helped me get hired by a mobile startup.
  • Decorate my childrens room: When I was young I loved drawing, but I never had the time to do that when I grew up. So, I used the opportunity to learn how to draw with acrylic colors and sketch some stuff in our childrens room before my older daughter came into the world. Later, I did the same for our baby boy.
  • Write a blog: To practice my English, I started to publish content regularly. I might have written stuff that went viral, but my English is still not as good as I wish it was.

Those are just a few representative examples to give you a sense of what a side project can look like and what you can achieve.

Some side projects can help you learn something new that may be relevant to your role (For example, Android, Kotlin, Gatsby.js, etc.). Other projects can give you an opportunity to touch aspects of your job that you dont regularly have time for (For example, product, marketing, design, etc.)....

02:28

How to tune up your Progressive Web App to get a perfect audit score freeCodeCamp - Medium

Progressive Web Apps (PWAs) quickly became the hottest development platform during the last year. Lets take a look at what you need to do to adhere to the PWA standards.

Articles about the PWA concept are all over the place. I will focus on the actual steps that need to be done to have the PWA fully aligned to the specification. I will provide a GitHub link with the list of changes for each step I performed to allow you to easily try it yourself.

Prerequisites

I will start with that simple Angular application I used for showcasing the combination of Angular and PWA approach in my previous article. I have upgraded it to Angular v6 and Kentico Cloud SDK v4.

Upgrade changes

This application is a simple listing of interesting places stored in a headless CMS loaded by the SDK. The app already has these two perks that make it a PWA app:

  • manifest.json with a set of icons used when the app is installed in the system.
  • service worker implementation used for caching of the application skeleton (called the app shell) and the data from the headless CMS.

Although the app is ready to be installed and used, it still needs a few touches to meet the PWA specification.

How to get through the PWA checklist

To verify whether the app meets all the criteria defined by the Google checklist, one can use various tools these days. The most popular is called Lighthouse.

Google checklist

Lighthouse is already embedded into the Google Chrome browser developer tools on the audit tab. To run it, I recommend that you publish the production variant of the app on the interne...

02:20

Web Caching Explained by Buying Milk at the Supermarket freeCodeCamp - Medium

If you have ever bought milk at the supermarket, then you can understand server-side and browser-side caching.

If you are an avid internet user (you probably are), you have benefitted from caching over and over again. But, you might not know when or how it is working its magic behind the scenes.

From a developers perspective, caching makes it much easier to build high-performing web apps and web servers. Instead of needing to constantly optimize servers that are overwhelmed by thousands of requests, developers can implement caching protocols to make life much easier.

Since caching might make a difference between 1 second to load a page and 2 seconds, the impact can feel a little bitunderwhelming. But, its necessary if you want to handle a high volume of users.

After using caching in a past web app, I realized that there had to be a better way to explain it than just walking through the terminology. I noticed that it aligned very well with the pathway of milk from a farm to your refrigerator, so I figured that would be a better way to explain it.

In order to understand this guide, you just need to know about the basics of web servers. Lets get into it!

What would the internet look like without caching?

Before we get into caching, lets think about what the internet would look like without caching. Imagine, for a moment, that you are living in the 1700s or 1800s in a rural area. You own a farm, and there is no refrigeration available. You have a few cows on your farm, but their milk is not nearly as valuable since it will spoil quickly.

Quick interruption: Some cultures still do not have access to refrigeration. They will either drink raw milk directly from a cows udder, or mix milk with grains and let it ferment. Interesting.

ANYWAYS, you want to sell your milk to others in your village. But, they will have a very limited time to drink the milk. Lets say that one of your cows can produce a gallon of milk per day. But, if too many people show up to your farm looking for milk, you will need to send some home and ask them to wait til the next day.

Also, you cant even think about adding more cows and scaling up your operation since you have such limited distribution. Only the other members of your village can buy your milk. You have some clear limits.

Without caching, you are limited by the computing power of your servers. Caching is us...

00:36

Wanna be a developer? Here is what you need to take into account. freeCodeCamp - Medium

It might not be as easy as youve thought

A common myth about software developers is that theyre boring and dry geeks, who were math geniuses at school, that spend hours in front of computer screens writing code.

Yes, developers may spend their life in front of computer screens writing code. However, there is much more to it than just coding like a machine the whole day. For me personally, being a developer means you have the chance to build cool stuff by yourself.

I started self-learning front-end development my sophomore year. My journey has been filled with self-doubt and hurdles, along with joy and extreme excitement. I never imagined I could experience all that while learning something.

Sometimes, even now, I still wonder whether I am following the right path. However, by telling myself that there is nothing more pleasurable than being able to do what I love, I keep putting my head down and I continue working.

It has been around two years since I started writing my first lines of code. After many hours of practicing, with sometimes feeling like giving up followed by temporary discontinuity, I would like to share with you a few things that I wish I knew from the beginning.

Dont treat coding as a leisure interest

First and foremost, if you think that you need to be serious while coding, youre 100 percent right. It is definitely true that you will probably not spend time doing something you dont like.

However, doing it just on a hobby basisthat is, you only code when you feel like doing it without any specific commitment or schedulewill probably not lead you to the career that you have always wanted.

In addition, when you encounter obstacles and difficulties, are you sure that you will have enough patience to keep your little interest alive? Rather, you might end up giving up or potentially going through a long stagnation in the middle.

Therefore, you should be incredibly dedicated to your passion, my friends. Yes, I am sure that all of us developers have a great interest in coding and technology in general.

However, passion is nothing without the right execution. By committing to a specific goal along with an appropriate schedule, you are building milestones along your journey. Put in a huge commitment to your given timeframe. Specify which skills and technologies you want to learn over a certain period of time. Then youll be closer than ever to making learning how to code an imperative part of your life.

Figure out which technologies you need to focus on

Once youve started taking coding seriously, the next step is to be honest with yourself. What kind of developer do you want to be?

Start by asking yourself what interests you the most. Are you passionate about building user interfaces which control the way users intera...

IndyWatch Education Feed Archiver

Go Back:30 Days | 7 Days | 2 Days | 1 Day

IndyWatch Education Feed Today.

Go Forward:1 Day | 2 Days | 7 Days | 30 Days

IndyWatch Education Feed was generated at Community Resources IndyWatch.

Resource generated at IndyWatch using aliasfeed and rawdog