Home

Awesome

Start Here

A Quick-start Guide for people that want to Do What You Love!

dwyl-logo-wide

Start where you are. Use what you have. Do what you can. ~ Arthur Ashe

Why?

The world is not perfect.
We have all worked somewhere we didn't love. <br /> We have all felt the frustration of using products that have flaws that we were unable to fix ourselves.
We have all experienced being in an environment that didn't support us in doing all we can do in the world. The aim of dwyl is to address all of these issues simultaneously: please read our mission to understand our focus on personal effectiveness as the starting point for all positive change.

If you'd like to know more about what we value, please read our manifesto.
The short version is: "Treat others as you would like others to treat you" ~ The Golden Rule

If you want to be part of the solution, join us: https://www.dwyl.com

If you haven't read Simon Sinek's book "Start with Why", we highly recommend taking a few minutes to watch his Ted Talk: https://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action

Who?

dwyl is a rapidly expanding community; here are a few of the familiar faces contributing to our projects:

dwyl-community

Join us in finding a problem you want to solve and will love working on.

What?

Q: What is dwyl?
A: dwyl (pronounced "Will" but with a "D" in front of it) is a community of people on a mission to change the world using technology.

We are starting by making the tools we need to help us (and the people we care about) get things we love done.

Our first App is Time which helps people track any time based activity.

And we are making Everything Open Source along the way, so that you too can Do What You Love!
We have plans to build many other features and we'd love you to join us!

Here are a few on the roadmap:

What question do you want to answer?

Our Approach: Scratching Your Own Itch

We believe in scratching our own itch. This means solving a problem you (or someone close to you) personally have. If you don't have any personal experience in a field you aren't going to do a good job of spotting/solving a problem in that area.

Taking the "Business School" approach of finding a "Big Market" and then identifying a problem to solve works for some companies, but we prefer the approach of solving something we are personally passionate about regardless of the (size of the) "market".

Read: https://gettingreal.37signals.com/ch02_Whats_Your_Problem.php

How?

If you want to get involved with building great tools people love, this section contains everything you need to know.

What do I need?

What tools will I need?

Access to a computer, preferably a recent (but not expensive) one (Chromebooks are Great!).
That's it.

Do I need to Write Code to Contribute?

No. Everyone can contribute, from proposing and voting on ideas, to simplifying wording to helping people understand our apps.

Please drop by and tell us what you think! Join the chat at https://gitter.im/dwyl/chat

Setup (for Coders)

If you want to start writing code now and don't already have your machine set up, see: https://github.com/dwyl/dev-setup

We also have a new developer checklist which we encourage you to review on the various online services you should know about and set yourself up on:
https://github.com/dwyl/start-here/blob/master/new-developer-checklist.md

Web Development Fundamentals

We have listed the skills you need to know in the order you need to learn them.

Basic Computer Skills

have_you_tried_turning_it_off_and_on_again_tshirt-r15b877ba3b4142bba14c938377e7fed7_v9uic_1024

If you don't feel confident using a computer, don't despair! We've all been there. There's no "secret" to becoming an expert, just experiment! If you get stuck, Google. If you're still stuck after an hour, ask for help! If all else fails, restart your computer and try again (that's what everyone does).

Touch Typing

Before you dive into programming, learning how to touch-type on your computer is the single best investment you can make. All this means is practising typing with the "correct fingers" until you don't have to think about where the keys are. Some of the best programmers we know can type faster than most people can think ... take a moment for that to settle in.

playing piano blindfolded

You need to be able to type blindfolded to become a true maestro (at anything computer-related).

A few touch-typing tutorials anyone can (should) do a few minutes per day. There are many variations on the classic QWERTY layout. You should choose a tutorial that's compatible with your keyboard layout:

You can connect your touch-typing practice with learning to code, by using the code samples in your learning resources to practice your typing. Learning to touch-type accurately is therefore important for creating the proper muscle-memory for the code (Markdown, HTML, CSS, Javascript, etc) that you are learning. Here are resources that explain the importance of typing out code by hand:

How to Learn How to Learn

Software-development is constant learning, so it is useful to think consciously about how one learns.

General Thoughts on How to Learn

A popular course is Learning How to Learn on Coursera taught by Barbara Oakley and Terry Sejnowski. It serves as a general introduction to concepts about learning how to learn, with a slight emphasis on neuroscience.

The following articles by Blaz Kos from AgileLeanLife well summarise a lot of the basic concepts on efficient learning:

We feel socially obligated to mention Richard Feynman:

Learning to code has many a steep learning curve, but apparently so does becoming an astronaut!

How Learning to Code Benefits the Mind

Learning to code will challenge you in all sorts of ways, and as long as you push through the challenge, that is good for you!

How to Learn Applied to Programming

Here we present more specific information about learning how to learn and your studies in programming.

Specific Advice about Learning Programming

Here we present specific advice on learning programming. Remember to type out code by hand!:

How the internet works

Before setting off to build for the web you may appreciate acquiring some context as to how it all comes together. There is a fantastic Coursera course called Internet History, Technology, and Security that offers just this. The course is put together by an enthusiastic instructor who walks you through the historic events that led to the design of the internet that you use everyday. It is full of interviews with the folks who contributed many important bits along the way.

We consider the above course to be the most thorough general introduction to how the Internet works, and we recommend you eventually work your way through it. In case you cannot make the time commitment right now, the following links provide shorter introductions and other points of view:

Command Line

The command line is the basic way to communicate with a computer. The following links provide an introduction:

Text Editor

A text editor is the basic tool a programmer uses. Perhaps your main experience is with a WYSIWYG text editor such as Microsoft Word. If you need to become more familiar with programmer's text editors, we recommend the following links:

We use Atom, but Sublime is another popular text editor which is good for someone starting. Emacs and Vim are famous old text editors which have a much steeper learning curve. We include information about them for "culture", since they form such a basic part of the programming landscape ( see holy war of the text editors):

Markdown

If you've never heard of Markdown, get started now: https://markdowntutorial.com/
You can refer to this book for learning purposes.

HTML5

You can learn 90% of what you need to know in HTML in a couple of hours, including practice time (from scratch):

Learn HTML5 in 1 Hour: https://www.youtube.com/watch?v=kDyJN7qQETA

The rest of HTML5 you will learn just-in-time (only when you need to know it).

CSS

Cascading Style Sheets (CSS) is what makes the web attractive. If you want to see the power of CSS, visit ZenGarden: https://www.csszengarden.com/

CSS3 beginner (or refresher) Tutorial (in one hour): https://www.youtube.com/watch?v=CUxH_rWSI1k

Further CSS learning

JavaScript

Love it or hate it, JavaScript is Ubiquitous. Becoming a JS Ninja is essential.
Ines has prepared some great notes on JavaScript The Good Parts. Keep "The Good Parts" in mind while you are writing (and reading) JS.

Watch this 1 hour intro tutorial series: https://www.youtube.com/watch?v=fGdd9qNwQdQ&list=PLoYCgNOIyGACTDHuZtn0qoBdpzV9c327V
and then scan through this 1.5 hour tutorial to pick up some extra points: https://www.youtube.com/watch?v=fju9ii8YsGs (and tell us if you get stuck).

Git + GitHub

If you are completely new to Git (Version Control) and/or GitHub, we suggest you check out the following:

Open Source

You know enough Git and GitHub to make a pull request on an open source project. Before making your first open source contributions, it is useful to gather some context.

What is Open Source

History of Open Source

Contributing to Open Source

Open Source Communities

Where to Start on Open Source

General Resources

Design

Building something for someone else is hard. You don't necessarily know that person. And worrying about someone else's "experience" with your app can be a full-time job. However, it is an essential process for everyone involved in software to partake in. The very best pieces of software are differentiated by the quality of their User Experience design.

Experiences are, by nature, personal, contextual, ephemeral, and affected by things beyond your control. The job of designing one is essentially one of embodying the real people that will be using your product and imagining what the experience would be like for them. You should try to take into account as much contextual information about your users state of mind, occupation, preference towards sans-serif fonts, etc. These details will weave a picture of the real humans on the other end of your app and help you make decisions about site structure and navigation as well as other less obvious things like content hierarchy: what should the user see first?

Further Reading on Software Design

We are in the process of developing our own reading materials to help you learn about UX and UI design. In the meantime, here are some recommended links:

Ready to Get Involved?

If you want to help improve any aspect of the code, star :star: this repo on GitHub and we will add you to the organisation.

Curious about what technology we are using?

If you want to know more about the Technology "Stack" we are using
see: https://github.com/dwyl/technology-stack

HitCount