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.

Monday, 14 May

21:00

Here are the most popular ways to make an HTTP request in JavaScript freeCodeCamp - Medium

JavaScript has great modules and methods to make HTTP requests that can be used to send or receive data from a server side resource. In this article, we are going to look at a few popular ways to make HTTP requests in JavaScript.

Ajax

Ajax is the traditional way to make an asynchronous HTTP request. Data can be sent using the HTTP POST method and received using the HTTP GET method. Lets take a look and make a GET request. Ill be using JSONPlaceholder, a free online REST API for developers that returns random data in JSON format.

To make an HTTP call in Ajax, you need to initialize a new XMLHttpRequest() method, specify the URL endpoint and HTTP method (in this case GET). Finally, we use the open() method to tie the HTTP method and URL endpoint together and call the send() method to fire off the request.

We log the HTTP response to the console by using the XMLHTTPRequest.onreadystatechange property which contains the event handler to be called when the readystatechanged event is fired.

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}

If you view your browser console, it will return an Array of data in JSON format. But how would we know if the request is done? In other words, how we can handle the responses with Ajax?

The onreadystatechange property has two methods, readyState and status which allow us to check the state of our request.

If readyState is equal to 4, it means the request is done. The readyState property has 5 responses. Learn more about it here.

Apart from directly making an Ajax call with JavaScript, there are other more powerful methods of making an HTTP call such as $.Ajax which is a jQuery method. Ill discuss those now.

jQuery methods

jQuery has many methods to easily handle HTTP requests. In order to use these methods, youll need to include the jQuery library in your project.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.ajax

jQuery Ajax is one of the simplest methods to make an HTTP call.

The $.ajax method takes many parameters, some of which are required and others optional. It contains two callback options success and error to...

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

IndyWatch Education Feed Today.

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

Sunday, 13 May

17:37

What I Learned Giving My First Talk as a Woman In Tech freeCodeCamp - Medium

I have become greatly passionate in expanding the way I help other designers achieve their personal goals in their careers. The passion to empower and evangelize UX has manifested into different forms, such as talking in my first podcast, discussion, and curating my own class.

This past month, I decided to give my first public talk outside of school. The support and opportunity came from Women Talk Design.

Women Talk Design is a platform that elevates talks by women and non-binary individuals. They enpower event organizers with tools, approaches, and information to engage more diverse speakers.

The founder of this initiative is Christina Wodtke, an amazing teacher and mentor to me during school and my career. Her strong personality, amazing experience, ability to overcome hardship, and take anything she is given into tangible value has given me courage to unapologetically pursue whatever I want. Shes given me the belief that if I put my mind towards something, with intention and perseverance, I can do anything.

I deeply believe one of the more effective ways of calling people to action is through compelling storytelling. Giving public talks in the form of crafting stories is a skill inherent in the whole field of UX design and a skill that is deeply valuable to me and my goal of helping others.

In this article, Ill be covering what I learned from giving my first talk.

Preparing a talk in a way that works for me

The process of giving my first talk allowed me to understand how to create future talks. Firstly, there are constraints you might need to consider. Because the event required us to give a lighting talk that could only be 5 minutes max, I had to be concise with the information leading up to my message. I could only include the most necessary information that most supported my talk.

So you need to decide: what is the message you want to convey?

Constraints allowed me to be realistic with my speech objectives. The way I prepared my talk was first writing it out and then practicing it to eliminate parts that that didnt flow well when I spoke. This made it easier to minimize redundancies and focus on parts that were important to identify if I was giving a longer talk, but didnt contribute any additional value to my message.

From experience, every talk has a lesson or steps of action one can take which connect to the lesson. I found that a good way to start constructing a talk is having a central message and creating points around it. Those could be experiences that connect or prove your message, statistics, conflict and resolutions, a memorable incident...

12:28

JavaScript Symbols, Iterators, Generators, Async/Await, and Async Iterators All Explained Simply freeCodeCamp - Medium

Some JavaScript (ECMAScript) features are easier to understand than others. Generators look weirdlike pointers in C/C++. Symbols manage to look like both primitives and objects at the same time.

These features are all inter-related and build on each other. So you cant understand one thing without understanding the other.

So in this article, Ill cover symbols,global symbols,iterators, iterables, generators , async/await and async iterators. Ill explain why they are there in the first place and also show how they work with some useful examples.

This is relatively advanced subject, but its not rocket science. This article should give you a very good grasp of all these concepts.

OK, lets get started.

Symbols

In ES2015, a new (6th) datatype called symbol was created.

WHY?

The three main reasons were:

Reason #1Add new core-features with backward compatibility

JavaScript developers and the ECMAScript committee (TC39) needed a way to add new object properties without breaking existing methods like for in loops or JavaScript methods likeObject.keys.

For example, if I have an object, var myObject = {firstName:'raja', lastName:'rao'} and if I runObject.keys(myObject) it would return[firstName, lastName] .

Now if we add another property, say newProperty to myObject , and if you run Object.keys(myObject) it should still return old values,[firstName, lastName] and not [firstName, lastName, newProperty] . How to do that?

We couldnt really do this earlier, so a new data type called Symbols was created.

If you add newProperty as a symbol, then Object.keys(myObject) would ignore this (as it doesnt know about it), and still return [firstName, lastName] !

Reason #2Avoid name collisions

They also wanted to keep these properties unique. This way they can keep adding new properties (and you can add object properties) to global without worrying about name-collisions.

For example, say that you have an object where you are adding a custom toUpperCase to global Array.prototype .

So how do you resolve this name collision that you may not know about? Thats where Symbols come in. They internally create unique values that allow you to create add propertie...

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

IndyWatch Education Feed Today.

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

Saturday, 12 May

22:45

Free Course: Level Up With Bulma CSS freeCodeCamp - Medium

KAMEHAMEHAAAA

The best CSS framework since Bootstrap

The OG Bulma. 

Meet Bulma CSS! Free course  here

Apart from being the second longest-standing character in Dragon Ball Z, Bulma is a modern CSS framework based on Flexbox from Jeremy Thomas @jgthms. And Bulma is gaining adoption fast with 150K+ downloads a month and 26K+ stars on GitHub. OKtell me more. 

With Bulma, we can create beautiful and responsive websites with ease. Jeremy designed Bulma as a reusable set of Sass patterns to kickstart new projects. Dont know Sass? Sass *compiles* to CSS. And once Flexbox became standardized, Jeremy used it to power what we now know as Bulma.

In this article, I detail *how* Bulma works and *what* we can build with it.

Want to learn how to *build* this 3D graphic? Let me know!

I also taught Bulma CSS on Scrimba, where we build these websites. Its freeclick here to enroll

Scrimba.com is a platform for front-end development, where websites are recorded as eventsnot videosand can be edited. 

How does Bulma work?

Bulma is 4.5K lines of Sass and 9.5K lines when compiled to CSS. What in the heck is all this code doing?! Bulma addresses 90% of common website patterns, like columns, forms, components, modifiers, layouts, and elements. The code is *also* responsive and can be further themed and customized.

Bulma doesnt solve all proble...

15:22

A book for Mothers Day? livingwithoutschool

Inspired by Lisas post on books for Mothers Day, I thought Id write about one of my current reads. The main character is a mother and wife. Thus, its loose Mothers Day connection.

At book club recently we discussed adult fairy tales. The patterns in the narrative. The occurrence of a magical event that transforms. The presence of a mentor or helper. The repetition in plot. The novel I write of below does not fit this genre and yetthere is a  thread of the repetition and mentor in all spy thrillers. Think John Le Carre here, for example.

Need to Know by Karen Cleveland is both a domestic novel and a spy/espionage thriller. Written by a one-time CIA analyst herself, the book provides a strong sense of realism. The reader can imagine the day-to-day work of an analyst, the drab ordinariness of what often seems to be an exciting career in espionage to an outsider.

Viven, the  protagonist, is a CIA analyst who comes across a file of Russian agents. One of whom is her husband, the father of her four young children, the husband she loves and with whom she shares a life, worrying about children, schools, money, the mortgage.

What would you do? Much of the first part of the novel involves Viven asking herself that question, amid flashbacks to the first meeting with her husband, the moment they became engaged, the time they discussed having children. Each flashback provided me with the firm conviction that Matt, Viviens husband, is a manipulator and not to be trusted but is he? Vivien herself seems unsure.

Written in first person active narrative, this thriller kept me interested. I admit that I am a fan of thrillers, and of espionage stories in particular. It is a Mothers Day story with a difference. Not flowery or happy or breezy but an edge of your seat thriller. I kept thinking  What would I do? (The answer is turn him in, to be honest. Viviens deliberation and neediness just pains me. Her almost helplessness in the face of the threat that her husband poses is a flaw in the novel.)

Interestingly, the books film rights have been sold to Universal Pictures with Charlize Theron taking the role of Vivien. Should be interesting. A possible future Mothers Day film?...

10:17

How to get out of your coding rut and move forward with your career freeCodeCamp - Medium

Dear programmers, developers, software engineers, are you feeling stuck in your career?

Are you a coder (programmer, developer, software engineer, and so on) who feels like you are trapped on a hamster wheel, running out of inspiration and motivation to write beautiful code? The one job that you used to enjoy so much feels boring, or worse, painful? Are you wondering if there is more to your career than this?

I am an Engineering Manager who was once a coder like you. And trust me, I have been stuck many times in my career as a developer, regardless of whether I was working in a fancy top-tier tech company or a small and exciting startup.

Each time, I managed to get out of my coding rut by following the exact steps that I will be sharing with you in this article.

This guide covers seven steps to get unstuck as a coder and move your career forward. Follow these steps and you will be on your way to finding your groove again.

Step 1: Assess your current situation
Step 2: Identify your options
Step 3: Set S.M.A.R.T goals
Step 4: Get out of your comfort zone
Step 5: Be at the service of others
Step 6: Take a good break
Step 7: Review your progress

Now, lets get started.

Step 1: Assess your current situation

Why are you feeling stuck in your career as a coder? Start by asking yourself a few questions. I have outlined some of the common scenarios that may make coders feel stuck in their careers. Some are driven internally, such as wanting to create more impact, while others are driven externally, such as as wanting to be recognized.

Scenario 1: Not feeling challenged

Are you not feeling challenged in your current role? Do you feel like all you do every day is fix bugs? You and I both know that fixing bugs is important to ensure quality of your software or product, but surely there must be more to your job than just fixing bugs, right?

Scenario 2: Not being recognized

Do you feel like you are not recognized for what you do? Do you feel like your hard work is overlooked because not everyone understands or appreciates the technical complexity of the feature that you have just shipped? And every developers pet peeve, did the designer or product manager get more credit because it looks nice?

Scenario 3: Not creating impact

Do you feel like you are not making an impact through your role? How does your code contribute to business goals? How can you possibly increase your value for the company that you work for?

Scenario 4: Not keeping up with the latest

Technology is always changing and...

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

IndyWatch Education Feed Today.

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

Friday, 11 May

18:48

Five Years We, The Dancers

Five years.

Five years since my dream girl with the unreal green eyes agreed to kiss a married woman, if that woman was me. Five years since we were so awkward together for two weeks until we finally kiss & came out with our feelings.

What an amazing thing, to find out that the thing youve been hoping, wishing, praying for, for so long shes been hoping and wishing and praying for, too.

How incredibly lucky to find out that the flirting wasnt all in your head. To learn that she loves you back.

Nights in the kitchen learning our own language, laughing so hard were rolling on the floor.

And then in bed, holding her tight as my baby spoon, aware that Ill lose her when she finds her forever.

I was so angry when he stepped in, inserted himself, appeared, to interfere.

So angry. I cried every day for a month when they told me they both wanted to try for a triad.

To me this meant I would lose them both, and how could I survive losing them both when I couldnt imagine life without both of them?

She said she wondered if this was a way we could actually last, long-term.

He said he felt like this was the right thing to do.

Ive always trusted his feelings, right from day one, when he asked me to move to Vancouver to live with him.

I laughed in his face and said, Thatll be awkward when we break up, and he said, I have a feeling we wont. And something made me trust him.

I dont know if he was right or if hes just stubborn, but I dont think were going to break up.

When he said he felt like the triad was the right thing to do, I wanted to punch him right in his face. But I also knew I could hold him to that.

I dont know if were all stubborn, or if we really are right together. Maybe a combination of both.

When Andi and I had been together about two months the first time the three of us hung out together she joked that she could commit to me for ten years. Seizing the opportunity, I told her I was holding her to it.

Were halfway there....

11:05

How I dropped out of an American CS program, went home to Egypt, and immediately got a dev job at a freeCodeCamp - Medium

How I dropped out of an American CS program, went home to Egypt, and immediately got a dev job at a startup

If you havent read my earlier story about how I turned my life around by deciding to become a developer, thanks to freeCodeCamp, I advise you to do that now. Ill give you some context so youll understand that this is not about me bashing CS degrees or admitting defeat.

In 2016, I had been working for a year with an Economics degree in a job that didnt really challenge or fullfill me. I felt lost and depressed without passion, love, or a life goal. That part of my life is without a doubt the lowest and darkest time I have experienced. Although I came pretty close this year, but Ill talk about that in a bit.

As I started writing this, I was on a plane going back to my country after dropping out of a US Computer Science degree. I couldnt overstay my visa. I was literally going into the unknown, but with confidence and a sense of pride.

And what do you knowwithin a few days of getting back home, I landed a developer job at a hot new startup. Heres how I got there.

Working and learning in the States

My first part-time job

It wasnt easy being a newbie, but what I lacked in experience I made up for in confidence and genuine desire to learn and do better. By the end of the year, I felt like I was thriving with family and friends at work. I even introduced a new senior developer to our tools and helped him with some major tasks.

But Ive always known that my job wouldnt be permanent. So I continued learning on my own online, toying with other frameworks like React, looking into DevOps tools like Docker, and working on my own personal projects in my free time.

My college experience

But things werent all good. The first semester in my computer science program was a terrible horror show for me. I had been out of school for over a year and my previous degree was not engineering related. There was a lot of math involved, ranging from calculus to linear algebra to statistics.

I found myself wondering quite often: where are the programming classes?!

I was asking myself that question a lot at the beginning. I was just average at math at that point. But those cou...

10:59

3 Winning Technology & Product Insights from WeChats unconventional founder freeCodeCamp - Medium

Intro: The writer is a current PM@LinkedIn. Formerly he worked as a growth engineer @Facebook. he spends~5 hours on average daily using/thinking about messaging & social apps (WeChat, LinkedIn, FB, Kik, Telegram, etc.)

Also published on LinkedIn: https://www.linkedin.com/pulse/3-unique-technology-product-insights-from-wechats-founder-henry-yan/?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base%3BSjGR8JWIS6SnFeYjDhDHqg%3D%3D

In the ever-evolving world of messaging and social apps, WeChat has seen unprecedented success.

It has surpassed 1 Billion MAU (monthly active users). It is regarded as the operating system for mobile users in Asia, with thousands of use casesbooking hotels/flights/movies, and managing assets, to name a few.

https://medium.com/media/1747610dccdc39032b25df37302298c8/href

When my friends outside Asia ask me why WeChat is so successful in China, my usual reply is: if you try living in China for more than two weeks, youll find yourself inseparable from WeChat.

To present more concrete insights behind WeChats success, I found it instrumental to study the very creator of WeChat: (Allen Zhang, the literal Chinese meaning is small dragon). If youre interested in technology and problem-solving in general, many of his insights on product management and tech will probably be of interest to you.

Allen is an introvert and computer geek. Some people have joked online that its fascinating how a man who himself isnt super sophisticated at communication built one of the most successful communication/messenger products

Allen started his career as an engineer, and later became a product manager. He founded an email software startup, Foxmail, which was acquired by Tencent.

...

10:04

A functional approach to merge sort and algorithms in general freeCodeCamp - Medium

Photo by Dhruv Deshmukh on Unsplash

Algorithms are often difficult for people to understand. I believe that this is because they are most often programmed or explained in a language that encourages thinking in procedures or instructions which are not intuitive.

Very often the meat of an algorithm (how you solve a particular problem logically without computer coding) looks very simple and understandable when described graphically. Surprisingly, however, it often does not translate well into code written in languages like Python, Java, or C++. Therefore it becomes much more difficult to understand.

In other words, the algorithmic concept doesnt map directly to how the code should be written and read.

Why are algorithms so difficult to code?

Well, we could blame it on the inner workings of early electro-mechanic computers. The early inventors of some of the most used programming languages today could never get rid of those features. Or perhaps they couldnt help leaving their fingerprints on their inventions. Once you understand computers that well, theres no undoing that.

To make matters worse, on top of already micro-managing languages, somebody had to invent an API for better micro-management. They called it object-oriented programming (OOP), and added the concept of classes to programmingbut I think modules and functions could handle the same things just fine, thank you very much.

C++ didnt make C any better, but it did pave a way by inspiring more descendants of OOP. And all together, all these things make abstract algorithmic thinking hard for the aforementioned reasons.

The case study: merge sort

For our discussion, we will use a merge sort algorithm as a specimen. Take a look at the diagram below. If you can count and put together jigsaw puzzles, then you can probably understand how it works in a few minutes.

By Swfung8Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=14961648

The key steps of producing a merge sort are few and simple. In fact, I can explain it using my daughters number blocks (helpful to follow these by going back to the animated diagram for reference):

  • First, we need to keep subdividing a list of numbers (or letters, or any type of sortable values) by half until we end up with many single-element lists. A list with one eleme...

08:09

How to build a realtime map with Swift freeCodeCamp - Medium

Photo by NASA on Unsplash

Realtime maps are very popular nowadays. Especially now that there are many on-demand transportation services like Uber and Lyft that have realtime location reporting. In this article, we are going to learn how to build a realtime map on iOS using Pusher.

Before we continue, youll need to make sure you have all of the following requirements:

  • A MacBook (Xcode only runs on Mac).
  • Xcode installed on your machine.
  • Knowledge of JavaScript (Node.js).
  • Knowledge of Swift and using Xcode. You can get started here.
  • NPM and Node.js installed locally.
  • Cocoapods package manager installed locally.
  • A Google iOS API key. See here for instructions on how to get a key.
  • A Pusher application. Create one here.

A basic understanding of Swift and Node.js is needed to follow this tutorial.

Assuming you have all of the requirements, lets begin. This is a screen recording of what we will be building:

As you can see in the demo, every time the location is updated, the change is reflected on both devices. This is what we want to replicate. Lets get started.

Setting up our iOS application

Launch Xcode and create a new Single-app project. You can call the project whatever you please.

When the project is created, close Xcode. Open your terminal, cd to the root directory of your application, and run the command below to initialize Cocoapods on the project:

$ pod init

The command above will create a Podfile in the root directory of our application. In this Podfile, we will specify our project dependencies and let Cocoapods pull and manage them. Open the Podfile and replace the content of the file with the content below:

platform :ios, '10.0'
target 'application_name' do
use_frameworks!
    pod 'GoogleMaps'
pod 'Alamofire', '~> 4.4...

07:32

How to build native desktop apps with JavaScript freeCodeCamp - Medium

When I was writing this article, Atwoods Law came to mind:

Any application that can be written in JavaScript, will eventually be written in JavaScript. - Jeff Atwood
dont worry about it

Today we are going to take a look at Proton Native, and make a simple encryption app with it.

Unlike Electron apps, apps built with Proton Native are actually native (hence the name) and not web-based on chromium.

Proton Native is like React Native but for desktop. It compiles to native platform code, so it looks and performs like a native app.

So lets get started.

Windows

Install the build tools by running:

npm install --global --production windows-build-tools

Linux

Youll need these libraries:

  • libgtk-3-dev
  • build-essential

Mac

You dont need anything.

Now run the following:

npm install -g create-proton-app

and

create-proton-app my-app

to make a new project.

Open the project directory with your favorite code editor. The directory should look like this:

 node_modules
.babelrc
index.js
package.json
package-lock.json

index.js should look like this:

As you can see it look like React/React Native File

Just like any React or React Native Project, we import the react library and make a class component.

The App element is just a container that holds the Window and Menu, and the Window has three props: title (the window title), size (takes an object that contains the width and height of the window), and menuBar (set to false because we dont want a menu bar).

Before we start coding, lets install crypto using npm:

npm i crypto

We will use crypto to encrypt the text with the MD5 algorithm.

index.js

https://medium.com/media/058d6638575e804705426f222f58ffa7/href

I first imported Text and TextInput so I could use them later. Then in the class after setting the text and md5 to empty strings in the state object, I created a function encrypt that takes a text argument.

In the encrypt function, we set the state to text and declare md5 to store the encrypted text (as below)

this.setState({ text });
let md5 = crypto.createHash("md5")
.update(text, "utf8").digest("hex&quot...

07:05

How to dynamically theme your Ionic application and make your users happy freeCodeCamp - Medium

Designing a sleek color scheme for your mobile application can be time consuming. Why not let the user choose their own favourite theme?

This is one of my favorite features in apps. It provides a great experience for users who dont want to be tied down to one primary accent color scheme or want to personalize the theme to suit their own style.

A great example of dynamic themes in the ToDoist app

In this Medium post, we will work through a project which will have a number of themes the user can select at run-time just like above. When a theme is selected by the user, ideally this change should happen in real-time rather than requiring the user to reopen the app.

Installation and getting started

Ionic, if you havent used it before, is a mobile application framework which lets you write mobile apps in HTML, CSS, and Typescript. With one shared codebase, you can develop an application for iOS or Android or you can deploy it as a web app.

To install Ionic, open a terminal and enter :

npm install -g ionic@latest

Note: you must have Node JS and npm installed. If you get an error with code EACCES, then you may need sudo or admin privileges.

For this tutorial, the sidemenu template provides a good starting point. To generate a project with this template, enter this command into the terminal:

ionic start <name of your app> sidemenu

Example terminal output from the CLI

After the project has generated, change into the directory with:

cd <name of your app>

Now you have an Ionic project with a sidemenu and two pages ready to go! To see your creation, enter ionic serve in your terminal.

Setting up the first 2 themes: Todoist Red vs Noir

In order to set up the first two themes, well need to complete a number of steps. Pretty much all of these steps need to be followed in order to get the themes working.

First, we need to denote an SCSS file which will be used when the theme is applied. In the src/theme directory of your project, youll find a variables.scss . The respective theme files are located here, too. Create a new file called:

red.theme.scss

This file will be used to apply the first theme. From this file, any of the default Ionic styling can be overridden. There are two options for how we can apply the themes:

Option 1: Styling just the navbar and certain elements

Option 2: Applying the theme to all background content

Here is an example of both options applied. The code has a checkpoint halfway down. If you dont want to style the whole app, comment out the rest of the code below it:

...

02:46

How you can develop Progressive Web Apps that feel native freeCodeCamp - Medium

Im currently developing a Progressive Web App that will also serve as the native app of my next service.

As many of you know, PWAs are apps that can run in the browser or in a standalone window and can take advantage of features native to the OS, such as push notifications and the ability to work offline.

Theyve recently gotten a lot of media coverage because theyre the best option for developers who want to reach many different platforms. Just think of an app that needs to work both on mobile and desktop devices that requires native features. Its developers would be forced to develop four apps: one for Android, one for iOS, one for Windows, and one for macOS.

Now, thanks to the fact that Google and Microsoft (and hopefully Apple in the not too distant future) are embracing this new set of web technologies, developers are able to add a native touch to their web apps. And this requires only minimal tweaks to ensure the best experience on any system.

The problem with this new software paradigm is that many developers are failing to give a native feel to their apps. Im not talking about missing native features or bad performance. Rather, I mean the lack of polish that is needed in certain aspects of an app to make it feel native.

In this article I will try to explain what are the little touches that can transform your PWA.

Keep in mind that this article will not focus on the practical side of implementing these solutions (that is coding) but rather on the theoretical aspects.

Disable pinch-to-zoom

Many Progressive Web Apps (for example Twitter) allow their users to freely zoom in by pinching. The main problem of this approach is that, by doing so, some parts of the UI inevitably wind up out of the view. Furthermore, most of the native apps do not allow pinch-to-zoom outside limited areas (such as pictures or maps), and this makes PWAs look not that native by comparison.

Because of these downsides, I would suggest disabling this feature. At this point, you might argue that it is handy to have this ability in text-based web apps. But in my opinion, two buttons to increase or decrease the font size work far better.

Make interactive elements not selectable

No native app lets you select with the mouse cursor the interactive elements of its interface. Meanwhile, almost every web app is completely (or for the most part) selectable. This has the effect of making the web page look more like a document and less like a full-fledged interface.

Since a page can be made not selectable with literally six lines of CSS code (see the snippet below), I cannot see why it is not more common. Still, I think that every developer should think about this while developing...

01:35

How to talk to your tech lead and fix your communication glitches freeCodeCamp - Medium

Heres where you messed up.

Your tech lead told you to build out a new API endpoint for an upcoming feature. It was supposed to be simple: just return a list of the current users email addresses.

You start with the usual boilerplate. You register the new endpoint. You associate it with a controller. You add an explanatory comment.

Then you discover that the query is impossible. The users email addresses all live on different database shards.

The footlights flip on. The curtain rises. This is your time to be a software superstar! Youll use your hard work and creativity to find a solution to this unique problem.

You begin building a denormalized table to keep the data local to the users shard, as well as a wrapping layer to keep the copies in sync. Your solution is scalable and performant. Look at you go!

Heres the problem. You didnt talk to your tech lead. From their perspective, they gave you a simple thing to work on, and its taking you three times longer than expected. It doesnt matter if youre creating the perfect architecture. Youve eroded trust in your relationship with your team lead.

The best engineers can create elegant systems, but they also talk to their tech leads the right way. Heres what I recommend.

1. During meetings, focus on how youre tackling whats going wrong

Its time for the standup. What are you going to say to your team and your teach lead?

Ive made some progress on this thing yesterday. I ran into some test failures, and Im fixing them now. I hope to ship this today.

That was a status update. And it was pointless.

Status updates are communications that have no response other than OK, sounds good. Why spend the time giving these in-person updates then?

The whole point of holding standups is to encourage team members to unblock one another. The traditional three questions are:

1. What did you finish yesterday?
2. What will you finish today?
3. What's blocking you?

People often focus on the first two and omit the final thing entirely. But its the most important!

People often interpret Whats blocking you as Whats completely stopping you from working? Thats why I prefer the question Whats your red flag? instead.

A red flag is anything thats going to slow you down. Here are some examples of red flags:

  • Im not sure how to get started on the test for this.
  • I need to figure out what the mobile team needs me to do here.
  • I need to refactor this component to get this to work.

None of these are things that are completely stopping you from working. But they are going to take up a considerable portion of your time.

This is what your tech lead wants to hear. Its their best opportunity to do their job, to help speed...

01:21

How to validate forms and user input the easy way using Flutter freeCodeCamp - Medium

Coming from an Android background, validating forms and user input requires lines upon lines of boilerplate code.

First, you have to get a reference to the EditText (or any View for that matter). Except if you are using Kotlin Android Extensions, you have to resort to the good old findViewById() or @BindViewfor those using Jake Whartons ButterKnife. After which, you get a reference to the text and do any validation on it.

Now imagine doing that for a UI that requires 10 different types of user input. You practically have to write a jungle of nested if-else statements.

How is User Input Validation Handled in Flutter?

Now, Flutter comes with a very simple form validation API. It just requires the use of Form and TextFormField widgets.

Form is a container for FormFields (and its descendants) and other widgets. We also have save, validate, and reset functions. These facilitate easier validation and manipulation of data inputted in one or multiple FormFields.

TextFormField is just a FormField that contains a TextField. It has onSaved and validator optional typedef parameters. Both functions are called when save and validate are respectively called on the container Form.

How to Validate Forms and User Inputs in Flutter.

So, lets dive in into the actual code

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String email;
String password;
bool _autoValidate = false;
...
new Form(
key: _formKey,
autovalidate: _autoValidate,
child: new Column(
children: <Widget>[
new SizedBox(
height: 20.0,
),
new TextFormField(
decoration: const InputDecoration(labelText: 'Email'),
onSaved: (String value) {
email = value;
},
validator: _validateEmail,
keyboardType: TextInputType.emailAddress,
),
new SizedBox(
height: 20.0,
),
new TextFormField(
decoration: const InputDecoration(labelText: 'Password'),
onSaved: (String value)...

Thursday, 10 May

19:10

How I used a simple Google query to mine passwords from dozens of public Trello boards freeCodeCamp - Medium

A few days ago, while researching, I found that a lot of individuals and companies are putting their sensitive information on their public Trello boards. Information like unfixed bugs and security vulnerabilities, the credentials of their social media accounts, email accounts, server and admin dashboardsyou name it, is available on their public Trello Boards which are being indexed by all the search engines and anyone can easily find them.

How did I discover this?

I searched for Jira instances of companies running Bug Bounty Programs with the following search query:

inurl:jira AND intitle:login AND inurl:[company_name]
Note: I used a Google dork query, sometimes referred to as a dork. It is a search string that uses advanced search operators to find information that is not readily available on a website.WhatIs.com

I entered Trello in place of [company name]. Google presented a few results on Trello Boards. Their visibility was set to Public, and they displayed login details to some Jira instances. It was around 8:19 AM, UTC.

I was so shocked and amazed 

So why was this a problem? Well, Trello is an online tool for managing projects and personal tasks. And it has Boards which are used to manage those projects and tasks. The user can set the visibility of their boards to Private or Public.

After finding this flaw, I thoughtwhy not check for other security issues like email account credentials?

I went on to modify my search query to focus on Trello Boards containing the passwords for Gmail accounts.

inurl:https://trello.com AND intext:@gmail.com AND intext:password

And what about SSH and FTP?

inurl:https://trello.com AND intext:ftp AND intext:password
inurl:https://trello.com AND intext:ssh AND intext:password

What else I found

After spending a few hours using this technique, I uncovered more amazing discoveries. All while I kept on changing my sear...

15:31

A quick and simple guide to JavaScript Regular Expressions freeCodeCamp - Medium

Introduction to Regular Expressions

A regular expression (also called regex for short) is a very performant way to work with strings.

By formulating a regular expression with a special syntax, you can:

  • search text a string
  • replace substrings in a string
  • extract information from a string

Almost every programming language implements regular expressions. There are small differences between each implementation, but the general concepts apply almost everywhere.

Regular Expressions date back to the 1950s, when they were formalized as a conceptual search pattern for string processing algorithms.

Implemented in UNIX tools like grep, sed, and in popular text editors, regexes grew in popularity. They were introduced into the Perl programming language, and later into many others as well.

JavaScript, along with Perl, is one of the programming languages that has support for regular expressions directly built into the language.

Hard but useful

Regular expressions can seem like absolute nonsense to the beginner, and many times to the professional developer as well, if you dont invest the time necessary to understand them.

Cryptic regular expressions are hard to write, hard to read, and hard to maintain/modify.

But sometimes a regular expression is the only sane way to perform some string manipulation, so its a very valuable tool in your pocket.

This tutorial aims to introduce you to JavaScript Regular Expressions in a simple way, and to give you all the information to read and create regular expressions.

The rule of thumb is that simple regular expressions are simple to read and write, while complex regular expressions can quickly turn into a mess if you dont deeply grasp the basics.

What does a Regular Expression look like?

In JavaScript, a regular expression is an object, which can be defined in two ways.

The first is by instantiating a new RegExp object using the constructor:

const re1 = new RegExp('hey')

The second is using the regular expression literal form:

const re1 = /hey/

You know that JavaScript has object literals and array literals? It also has regex literals.

In the example above, hey is called the pattern. In the literal form its delimited by forward slashes, while with the object constructor, its not.

This is the first important difference between the two forms, but well see others later.

How does it work?

The regular expression we defined as re1...

12:25

How to code the Game of Life with React in under an hour freeCodeCamp - Medium

Recently I watched the famous video that creates a snake game in less than 5 minutes (on Youtube). It looked pretty interesting to do this type of quick coding, so I decided to do one by myself.

When I started to learn programming as a child, I learned a game called Game of Life. It is a great example of cellular automation and how simple rules can result in complex patterns. Imagine some kind of life form living in a world. At each turn, they follow some simple rules to decide whether a life is alive or dead.

Conway's Game of Life - Wikipedia

So I decided to code this game. Since it does not involve too many graphicsjust a grid and some blocksI decided React would be a good choice, and it can be used as a quick tutorial for React. Lets start!

React setup

First we need to setup React. The amazing create-react-app tool is very handy for starting a new React project:

$ npm install -g create-react-app
$ create-react-app react-gameoflife

After less than one minute, react-gameoflife will be ready. Now all we need to do is start it:

$ cd react-gameoflife
$ npm start

This will start a dev server at http://localhost:3000, and a browser window will be opened at this address.

Design choices

The final screen we want to make looks like this:

Conways Game of Life

It is simply a board with a grid, and some white tiles (cells) which can be placed or removed by clicking the grid. The Run button will start the iterations at a given interval.

Looks pretty simple, huh? Lets think about how to do this in React. First of all, React is not a graphic framework, so we wont think about using canvas. (You can take a look at PIXI or Phaser if you are interested in using canvas.)

The board can be a component and can be rendered with a single <div>. How about the grid? Its not feasible to draw the grids with <div> s, and since the grid is static, it is also unnecessary. Indeed we can use CSS3 linear-gradient for the grid.

In regard to the cells, we can use <div> to draw each cell. We will make it a separate component. This component accepts x, y as inputs so that the board can specify its position.

First step: the board

Lets create the board first. Create a file called Game.js under the src directory and type...

10:46

How to get started with Angular 6.0 freeCodeCamp - Medium

Learn whats new and build an app

Angular has released its latest version, Angular 6.0. In this article, we will understand the new features of Angular 6.0 and also set up a new project with the help of Angular CLI 6.0 and Visual Studio Code.

Whats new in Angular 6.0?

ng update

A new CLI command that will update your project dependencies to their latest versions.

ng add

Another new CLI command that makes adding new capabilities to your project easier.

Angular Elements

This is a new feature that allows us to compile Angular components to native web components which we can use in our Angular app.

<template> element is deprecated

You cant use <template> anymore inside of your component templates. You need to use <ng-template> instead.

Library support

Angular CLI now has the support for creating and building libraries. To create a library project within your CLI workspace, run the following command: ng generate library <name> (for example: ng generate library my-demo-lib)

Angular Material Starter Components

If you run ng add @angular/material to add material to an existing application, you will also be able to generate 3 new starter components:

  • Material Sidenav
    A starter component including a toolbar with the app name and the side navigation
  • Material Dashboard
    A starter dashboard component containing a dynamic grid list of cards
  • Material Data Table
    A starter data table component that is pre-configured with a datasource for sorting and pagination

Workspace support

Angular CLI now has support for workspaces containing multiple projects, such as multiple applications and/or libraries.

The .angular-cli.json file has been deprecated

Angular projects will now use angular.json instead of .angular-cli.json for build and project configuration.

Use RxJS V6

Angular 6 will also allow us to use RxJS V6 with our application.

Tree Shakable Providers

Angular 6.0 allows us to bundle services into the code base in modules where they are injected. This will help us to make our application smaller.

For example: Earlier, we used to reference our services as below.

// In app.module.ts  

@NgModule({
...
providers: [MyService]
})
export class AppModule {}

// In myservice.ts

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
constructor() { }
}

This approach will still work, but Angular 6.0 provides a new and easier alternative to this. We no longer need to add references in our NgModule. We can inject the reference directly into the service....

08:12

Heres how I couldve ridden for free with Uber freeCodeCamp - Medium

Summary

This post is about a critical bug on Uber which could have been used by hackers to get unlimited free Uber rides anywhere in the world. This post also explains few best practices while integrating payment gateways.

Description

Uber Technologies Inc. is an online transportation network company, headquartered in San Francisco, California, with operations in 528 cities worldwide. Users can create their account on Uber.com and book a ride. When the ride is completed a user can either pay cash or charge it to their credit/debit card.

But, by specifying an invalid payment method (for example, abc, xyz, and so on), I was able to ride Uber for free.

To demonstrate the bug, I got permission from the Uber Team and took a free ride in India. I wasnt charged for any of my rides, using the invalid payment method.

Vulnerable request:

POST /api/dial/v2/requests HTTP/1.1 Host: dial.uber.com {start_latitude:12.925151699999999,start_longitude:77.6657536,
product_id:db6779d6-d8da-479f-8ac78068f4dade6f,payment_method_id:xyz}

Steps to reproduce:

  1. Replayed the above request with random characters as payment_method_id.
  2. Ride was free.

Video POC:

https://medium.com/media/b6542aa132fd9a8a94f3ec1f244b4549/href

Thanks to Uber Security team for fixing this quickly.

The timeline

Aug 22nd 2016: Vulnerability Report to Uber.

Aug 26th 2016: Uber requested more information about the bug.

Aug 26th 2016: Took a free ride and replied with ride details

Aug 27th 2016: Vulnerability fixed by Uber.

Sep 10th 2016: Rewarded with $5000 bounty by Uber.

Takeaways

As a developer, you should always take care of the below test cases when integrating payments:

a) Verify if the payment was success or failure by doing a server to server request to payment gateway or verifying checksum to the payment gateway provider.

b) Always validate the amount of the item with the amount which was paid by the user to the payment gateway.

c) Validate currency in the payment API calls. For example, the attacker can pay 50 IDR for a 50 USD item.

d) If you are storing credit cards/debit card information, then always check for authorisation if an identifier is being passed in one of the API requests.

...

04:25

An introduction to Policy Gradients with Cartpole and Doom freeCodeCamp - Medium

Our environment for this article

In the last two articles about Q-learning and Deep Q learning, we worked with value-based reinforcement learning algorithms. To choose which action to take given a state, we take the action with the highest Q-value (maximum expected future reward I will get at each state). As a consequence, in value-based learning, a policy exists only because of these action-value estimates.

Today, well learn a policy-based reinforcement learning technique called Policy Gradients.

Well implement two agents. The first will learn to keep the bar in balance.

The second will be an agent that learns to survive in a Doom hostile environment by collecting health.

Our Policy Gradients Agent

In policy-based methods, instead of learning a value function that tells us what is the expected sum of rewards given a state and an action, we learn directly the policy function that maps state to action (select actions without using a value function).

It means that we directly try to optimize our policy function without worrying about a value function. Well directly parameterize (select an action without a value function).

Sure, we can use a value function to optimize the policy parameters. But the value function will not be used to select an action.

In this article youll learn:

  • What is Policy Gradient, and its advantages and disadvantages
  • How to implement it in Tensorflow.

Why using Policy-Based methods?

Two types of policy

A policy can be either deterministic or stochastic.

A deterministic policy is policy that maps state to actions. You give it a state and the function returns an action to take.

Deterministic policies are used in deterministic environments. These are environments where the actions taken determine the outcome. There is no uncertainty. For instance, when you play chess and you move your pawn from A2 to A3, youre sure that your pawn will move to A3.

On the other hand, a stochastic policy outputs a probability distribution over actions.

It means that instead of being sure of taking action a (for instance left), t...

04:09

Joanne Kaminski What Children Need To Fall In Love With Reading [PODCAST #563] School Sucks Project

Today, the story of a public school teacher who eventually found a much better way to connect with and teach young people. Joanne Kaminski joins me to discuss her path into and out of public school teaching, why she left, and the advantages of online tutoring she has discovered. We'll also cover some of her ...

Feeds

Feed RSS Last fetched Next fetched after
Cassandra Rankin XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Charlotte Mason in the City XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Citizenship and Social Justice XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Coursera Blog XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Critically Chatting Collectives Blog XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Dadosaurus Rex XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Denise Gaskins' Let's Play Math XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Dumbo Feather Conversations XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Education, Economy and Society XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
freeCodeCamp - Medium XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Homeschooling The Well Prepared Child XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
http://detachedyouthwork.ning.com/profiles/blog/rsd XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
https://bethbuddenteacher.wordpress.com/author/bethbudden/ XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
https://melanieblignaut.wordpress.com/feed/ XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
https://www.codecademy.com/blog.rss XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
IN DEFENCE OF YOUTH WORK XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
IN DEFENCE OF YOUTH WORK XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Informally Young XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Learning Happens XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Lib Ed articles XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
livingwithoutschool XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Murrayshire Academy XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Random Acts of Candice XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
School Sucks Project XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
The "Focus Room" Horror XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
The Adventures of Rover an Alaskan Boy XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
The Architecture of Open Source Applications: The Blog XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
The Cookie Train XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
The Mommy Writer XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
We, The Dancers XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Work Boxes For Children XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May
Zinn Education Project XML 01:54, Tuesday, 15 May 02:54, Tuesday, 15 May

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