#vue.js intro | Explore Tumblr posts and blogs

t-baba · 5 years ago

Photo

p5.js 1.0, Node best practices, and a podcast for the weekend

#478 — March 6, 2020

Unsubscribe : Read on the Web

JavaScript Weekly

An Interactive Introduction to D3 — D3, the JavaScript library for producing interactive data visualizations, has just turned 9 years old so you’re probably familiar with it by now.. but this introduction is particularly neat as it’s an example of a live, interactive ‘notebook’ style tutorial.

MIT Visualization Group

Understanding the ECMAScript Spec, Part 2 — Part 1 looked at how to understand a single (and simple) method by reading the official ECMAScript specs. Part 2 goes into a trickier domain, understanding how ES interpreters do prototype lookups.

Marja Hölttä

🐋 Learn Docker in the New, 'Complete Intro to Containers' — Learn to create containers from scratch and with Dockerfiles, run containers from Docker Hub, and learn best practices are for front-end and Node.js code in containers.

Frontend Masters sponsor

p5.js 1.0: The 'Creative Coding' Libary — A major milestone for a long-standing JavaScript library that builds upon Processing, a popular creative coding environment (which also inspired the Arduino IDE). p5 is a bit hard to explain succinctly, so definitely check it out.

lauren mccarthy

Rollup 2.0 Released: The ES Module Bundler — Write your code using ES modules and get tree-shaking/dead code elimination and bundling to the format you require. v2 gets rid of lots of deprecated stuff, goes zero-dependency, and includes chokidar to improve its ‘watch’ mode’.

Lukas Taegert-Atkinson

A Growing Collection of 86 Node.js Best Practices — An in-depth guide for Node devs, available in multiple languages. Divided into 7 sections and updated regularly.

Yoni Goldberg

💻 Jobs

Senior JavaScript Developer (Warsaw, Relocation Package) — Open source project used by millions of users around the world. Strong focus on code quality. Join us.

CKEditor

JavaScript Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Find a Dev Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

ℹ️ If you're interested in running a job listing in JavaScript Weekly, there's more info here.

📘 Articles & Tutorials

4 Best Practices To Writing Quality ES Modules — Principally these ideas are around organizing modules you create: prefer named exports, do no work during import, favor high cohesion and avoid long relative paths.

Dmitri Pavlutin

The Perils of Rehydration: An Eye-Opening Realization about Gatsby and React — We love how the author explains this piece himself: “Last week, I learned a whole lot about how React’s rehydration works. Wrote up those findings in a blog post!”

Josh W Comeau

Top GitHub Best Practices for Developers — Expanded Guide — Implementing these best practices could save you time, improve code maintainability, and prevent security risks.

Datree sponsor

7 Types of Native Errors in JavaScript You Should Know — A beginner’s level introduction to understanding the meaning behind errors like RangeError, ReferenceError and URIError.

Chidume Nnamdi

▶ Discussing JavaScript Deployments with Brian LeRoux — Brian is well known as an expert in the JavaScript space and is working on a serverless based platform for deploying JavaScript-powered APIs so it’s neat to hear what he thinks.

Software Engineering Daily podcast

▶ Building an Animated Counter with JavaScript — JavaScript has just gotten so serious nowadays, so I like to frequently link to tutorials like this that cover building neat Web page effects.. like we used JavaScript for back in the 90s 😄 18 minutes.

Traversy Media

3 Ways to Render Large Lists in Angular — An overview of the available techniques to render large lists of items with Angular.

Giancarlo Buomprisco

CES, Viacom & Intel Use .Tech Domains. What About You? Search Now

.TECH domains sponsor

In Favor of Small Modules and Plumbing — “This post examines how I used to be of the mindset that publishing a plethora of “focused” modules is a waste of time but now think is a fantastic idea.”

Paul Anthony Webb

An Introduction to Vue.js Computed Properties and Watchers

John Au-Yeung

🔧 Code & Tools

Stryker: Test Your Tests with Mutation Testing — Stryker fiddles with your tests (in a large and complicated number of ways) and expects this to break them. If it doesn’t, your tests are too brittle and therefore failed the test. This is not something to run frequently (as it can be very slow) but is an interesting way to stress test your tests, if you will.

Jansen, de Lang, et al.

Immer 6.0: The Popular Immutable State Library — Immer only continues to get better over time but take note of the breaking changes.

immer

A Much Faster Way to Debug Code Than with Breakpoints or console.log — Move forward and backwards through your code to understand the conditions that led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.JS sponsor

Vue Formulate: The Easy Way to Build Forms with Vue.js — A well presented library that brings a lot of simple form-building power to Vue apps.

Braid LLC

Goxygen: Quickly Generate a Go and MongoDB-Backend for a JS Project — We first linked this opinionated full stack app generator only a few weeks ago, but since then it’s had a 0.2 version that extends its support from React to Angular and Vue.js too.

Sasha Shpota

ls-lint: A Fast File and Directory Name Linter — Written in Go but clearly aimed at JS/front-end dev use cases. ls-lint provides a way to enforce rules for file naming and directory structures.

Lucas Löffel

isomorphic-git 1.0: It's git but in Pure JavaScript — A pure JavaScript implementation of git for both Node and the browser.

isomorphic git team

Bootstrap Treeview: A Simple Plugin to Build A Treeview with Bootstrap 4 — Here’s a live demo.

Sami Chniter

🎧 Something for the weekend..

▶ 'Somebody Somewhere Is Generating JS From Fortran..' — This is more a fun podcast listen for the weekend if you have the time. Brian Leroux (yes, again!) and Kevin Ball tackle all sorts of JavaScript topics from modules and progressive bundling to building infrastructure as code and the future of ‘JAMstack’.

JS Party Podcast podcast

by via JavaScript Weekly https://ift.tt/38r0p5L

#Javascript Branding #Javascript Weekly

0 notes

suzanneshannon · 6 years ago

Text

Emcee Tips for a Conference or Meetup

There are some great resources out there to help conference speakers give better talks, but fewer for people who are preparing to take on the role of emcee at meetup or conference.

I've been fortunate enough to emcee conferences more than 20 times now, most recently JAMstack_conf which I help organize. I also enjoy hosting smaller, less formal meetups which benefit just as much from having somebody to keep things rolling nicely along.

Since emcee-ing is a rather visible role, I often get asked, "Got any tips for emcee-ing?" I do. At the same time, note that there is no substitute for finding the approach that fits you and lets you be yourself. But I've found what works for me, and what I enjoy in an emcee when I'm attending or speaking at a conference.

Here's my advice:

Biggest tip: Enjoy yourself.

I find that trying to relax (yeah, easy to say) and remembering that the audience want you to succeed really helps. When you remember that you're not hosting the Oscars (if you are reading this in preparation for hosting the Oscars, please contact me directly. DMs are open), and that people are very happy with you being human and personable, it gives you license to relax and talk to the room as if everyone is your friend. That’s liberating and helps you to be more natural.

The crowd's view of the stage at Vue.js London. Image copyright www.edtelling.com.

To err is human

While we all want things to run as smoothly as possible, mistakes happen. Don’t panic or let them throw you off too much. I find that owning mistakes and communicating them honestly to the audience can be a feature rather than a bug. It also helps them trust you and be on your side. (I believe that there is only one “side” at a conference anyway. And this can help to establish that.)

Many of the moments I consider highlights have come from some silly mistake I’ve made on stage, like giving the wrong information and being corrected by the audience. It’s fine. We’re in it together. Have a little fun with it.

Technical difficulties

It’s really common for there to be technical difficulties during a conference. They often only take a few moments to resolve, but they can occasionally drag on and become a little uncomfortable.

As a speaker it is horrible to think that you are on your own to fix things while a room full of people impatiently watches on. As an emcee, you can help enormously by being ready to jump in if it looks like things might need some time and concentration from the speaker, or if a helpful member of the audio-visual team is sprinting to the stage.

I like to step back on the stage to provide a little buffer. No need to panic. Often just a little company on stage and some headspace is all that is required. My trick is to keep a little pocket-sized notebook on me all day. I keep a few notes ready, things like news and announcements for the audience. Where will the refreshments be later? Who are the sponsors and where can you find them? What are the details for the social later on? Those kinds of things. You may need them at the start of the next break anyway, but you can buy a little time for the speakers and save time for later by being ready to share that at this "handy opportunity."

“Me again! We’ll get this fixed in a second. While we have a mo...”

Even when there isn’t a problem, the speaker might still take a little time to plug in their laptop, be certain that they can see their speaker notes, and so on. If the conference does need each speaker to plug in as they come to the stage, I like to invite them up while I introduce them, and then check that they are ready when it looks like they have stopped tinkering with their setup. This doesn’t need to be a secret from the audience. “It looks like Jina is ready to go. Are you all set? Excellent! OK, a big round of applause please, for...”

Longer pauses. Oh this is getting awwwwwkward!

Every once in a while, there is a larger technical issue. The audio-visual team is on it, but you’ve used up all your padding material, pulled a couple of jokes from your back pocket, and now you and the speaker are stranded on stage with nothing to say and that horrible feeling of not knowing where to put your hands so that you look natural. Not to worry. Be honest.

Eventually the audience will start to feel awkward too, so cut this off at the pass. If things look like they really do need a few minutes, tell the audience. A bright and breezy update buys you some time and some good will.

"It looks like we still need a couple more minutes to figure this out, so we’ll step off stage for a moment and then come on again to enjoy a second, bonus round of applause. Don’t go anywhere, we’ll be right back!"

This sort of thing can take the pressure off everyone. Including the audience. And you can milk that second round of applause for the speaker as they return.

Just be honest. Everyone is on your side, remember.

Practice all the names

A mistake that makes me uncomfortable is botching somebody's name when I introduce them. That is a bit of a fear I still have and I've done it many times despite my best efforts. I like to watch YouTube videos of all the speakers that I don't already know to get a sense of what they've spoken about in the past, and also as a chance to listen to how they introduce themselves. I practice them out loud and write them down phonetically if they are tricky.

If you find a name particularly difficult, you can even use the voice recorder on your phone to capture how they pronounce it on YouTube, or your own best try, and then have it ready as a last-minute primer just before you need it.

Know more than the speaker's bio

Speakers often get introduced by someone reading out their bio. I don't think this gives the impression that you have enthusiasm for, or awareness of them. Both of which are, I think, valuable for creating trust with the audience and comfort for the speaker. I like to look them up and make some notes based on previous talks, the links on their own sites, or whatever else I can scrounge. I like to have an intro that goes beyond the bio that the attendees all have and will recognize as being read verbatim when they hear it.

Introducing Divya Sasidharan onstage at Vue.js London. Image copyright www.edtelling.com.

Jake has a good thought related to this:

... it shouldn't matter if the speaker has published 18 books, or if they're just an intern starting out their career, their talk content is what matters.

Yes! Listing their full resume isn't the point at all. I personally just like to convey that I know who this is, and that I'm not encountering them for the first time as I read the schedule — and that I’m looking forward to hearing what they have to say, irrespective of how extensive their previous experience or fame may be.

It's also worth double-checking that the job title and company details you have for somebody are still correct. It's nice to make sure that you didn't miss a recent role change.

Another good nugget from Jake is to avoid surprising the speaker. I've wandered into this territory before where I've enthused about a speaker in their introduction and mentioned a bunch of things that they were planning to say for themselves in their intro. As he says:

Make the speaker aware of the kind of intro they'll get, so they can adjust their own intro accordingly.

That's good. Communicating with the speaker ahead of time so that you can tune your own intro is likely to be easier than them adjusting their own content, what with slides and timings, etc.

"No surprises" is probably a good motto for this.

Avoid "in jokes"

When you emcee, you might sometimes be introducing somebody you know. Perhaps it's a friend, a colleague, or somebody you shared a nice chat and giggle with at the reception or dinner the night before. While I think it's fine to reference a history or relationship in an intro for context, It's safer to focus on things that everyone can relate to and not just those who already know you or the speaker.

Private jokes don't mean anything to the vast majority of the audience, and can even alienate you a little by creating a bit of a clique as Jan thoughtfully mentioned on Twitter.

Don't assume or rely on "fame"

"This next speaker needs no introduction" is rarely true. Even if it's likely that a lot of people in the room might already know who a given speaker is, there will be some who don't.

As Luke observed:

Don't assume the audience knows who the speaker is.

Each speaker deserves a nice introduction. And there will always be some in the audience thinking "who dis?" Even a little background can be a helpful foundation and give the speaker a nice springboard to get started.

Announce and thank people with vigor

I've been introduced quite a few times in ways where I've been unsure whether the intro is over or not! I like to be sure that the final thing I say is the name of the speaker. (Not their talk title, although I'll likely mention that and possibly the themes in my introduction.)

An onstage introduction at Vue.js London. Image copyright www.edtelling.com.

Ending the intro with the speaker's name seems painfully obvious, but I do this even if I've used their name earlier in the intro. It makes the handoff emphatic and acts as an obvious cue for audience applause. Using an intonation which suggests "it's time to clap right now!" is also helpful. Again, it seems obvious but giving the audience clear cues is important.

Let the speakers give the talks

You might sometimes be opinionated about the topic of the next talk. Maybe you’ve given talks on the same subject yourself. Great, that will come in handy if you need to ask informed questions after the talk. But don’t fall into the temptation to show this off during your intro. The speakers are “the show” — not the emcee. And the person you are introducing is the one invited to share their expertise.

I sometimes show I value the upcoming topic, but I advise against flexing your knowledge muscles during an intro. You might cannibalize the content, or even contradict it. And you’ll never communicate it in an intro as well as the speaker can during the actual talk. You might come off as being cocky.

Don’t step on the speaker's toes. Let them present the content. This is why everyone is here.

Prep speakers for questions and answers

If there is Q&A that you’ll need to lead or curate, it’s important to know that in advance. It is one of the first things I’ll ask the organizer in the run up to a conference. I like to ask the speakers at the speaker dinner the night before the event or when they are getting mic'd up (but earlier really is better, especially when they have time to think while being relaxed) if there is anything they'd like me to ask or avoid saying altogether. There are often things people can't include due to time and this can be a chance to squeeze that in and also serve as a nice soft ball question to get things started and let them settle in.

Some speakers might not want to take questions. I like to make sure about that first, and steer the event organizers away from it if somebody prefers not to have it.

Housekeeping is a good boilerplate

At the opening of the day, I usually jump quickly into the various housekeeping stuff of toilets, exits, code of conduct, etc. soon after saying my initial hello and maintain an enthusiastic posture about the day. It doesn't require much imagination and can help you settle in.

Don't forget to introduce yourself too!

Ask the organizers what they need

Along the way, there might be a need to mention sponsors, inform people of food, or even other things. I like to check in with the organizers at every break to see if there is anything they need me to announce. Maybe there can be a private Slack channel or Whatsapp group so you can stay in contact with them. That way you can find out if they need to adjust timings or any other odds and ends as you go.

Most of all though, and to repeat my first point a little, allow yourself to enjoy the experience. It's so much fun when the speakers and audience are enjoying themselves.

Make sure you ride that wave and have fun too!

My checklist

I have this little checklist as a starting point for the events I'll be emcee-ing. It changes a bit depending on what the conference needs.

Prep speaker intro notes Prep speaker name pronunciation notes Confirm format for Q&A with organizers Prep seed questions for each talk Share event notes Google Doc with organizers Access/create emcee slack channel or WhatsApp group Confirm or create event intro/outro slides if appropriate Get housekeeping notes from organizers Get familiar with code of conduct and contact info to share Confirm event hashtags to share Get sponsor call-out requirements from organizers Meet AV team and discuss transition format Brief speakers on transition format and get ok for questions Get water / pen / notepad / mic Breath. Smile. Have fun.

What have I missed? Got any good tips? I'd love to hear them. Feel free to leave thoughts and suggestions in the comments.

The post Emcee Tips for a Conference or Meetup appeared first on CSS-Tricks.

Emcee Tips for a Conference or Meetup published first on https://deskbysnafu.tumblr.com/

0 notes

alexriviere · 6 years ago

Photo

Did an Intro to Vue.js talk last night. It went well. I hope all y'all are doing well too. #CoffeeWithFimion #WorkFromHomeWednesdays https://www.instagram.com/p/B1JTqFpJAoO/?igshid=v8e09vu2f4b4

#coffeewithfimion #workfromhomewednesdays

0 notes

javascriptw3schools · 6 years ago

Photo

RT @VueNewsletter: 🚀 @vuejs News #134 🚀 Including: 🛸 Improvements to SSR in #vuejs v2.6 🎬 First talk from @vuejsamsterdam with @Akryum 👩‍🏫 Introduction to Vue.js by @MarinaMosti 🎭 Intro to snapshot testing by @VueDose And much more! Read or listen to the podcast: https://t.co/uinGuMxAEI

#Javascript #Angular #Node #React #Vuejs #Webdev

0 notes

dfrobots-blog · 6 years ago

Text

Smart Terrarium

Automated environment for reptiles to promote good husbandry and enable maximum lifespan for animals in captivity.

Things used in this project

Hardware components

Raspberry Pi 3 Model B×1

Arduino MKR1000 ×1

Arduino UNO & Genuino UNO ×1

DHT22 Temperature Sensor×1

Adafruit Waterproof DS18B20 Digital temperature sensor ×1

DFRobot Gravity: Analog UV Sensor (ML8511)×1

DFRobot Gravity: Analog Capacitive Soil Moisture Sensor- Corrosion Resistant×1

Ultrasonic Sensor - HC-SR04 (Generic) ×2Seeed Grove - 2-Channel SPDT Relay ×1

Hand tools and fabrication machines

3D Printer (generic)

Story

Intro

Smart Terrarium is the all in one system that provides the necessary information and automation to encourage a full and happy life for your reptiles. This system provides the user with the ability to monitor a variety of sensors in their animals habitat as well as control the lighting and misting system.

Backstory

This system was designed for my chameleon, Curie. She is a veiled chameleon and loves having her cage always kept in the optimal conditions. She is currently benefiting from the daily scheduled misting routines that the Smart Terrarium provides. This keeps her humidity in the appropriate range while also providing her with a nice place to cool off and get a drink.Another great part of having the Smart Terrarium is peace of mind. You no longer need to randomly check on the status of the mister bucket water level. You can always rely on the Smart Terrarium to notify you when you are running low. Also get notifications when the drain bucket is approaching maximum capacity.The most important part of this setup is the monitoring of the UV light. Chameleons require UV-B to produce Vitamin D. When a chameleon does not absorb enough calcium a chameleon can develop abnormalities in bone growth, rachitis, Metabolic Bone Disease (MBD) or just get very weak bones that are prone to breaking. The Smart Terrarium provides constant monitoring of UV light and can notify the user when the average UV index is below a certain threshold.

Hardware

This project uses a Raspberry Pi 3, an Arduino Uno, and a ArduinoMKR1000. The Raspberry Pi acts as our main system receiving readings from the Uno and MKR1000. The Pi also acts as a web server which delivers our app to the client when a user wants to monitor their system. They simply log in to a web page allowing them to interact with the Smart Terrarium from anywhere around the globe.

Raspberry Pi 3 A+

The MKR1000 is the main workhorse for getting sensor data and it sends its readings every second over wifi to the web server running on the Raspberry Pi. It has the following sensors connected to it:

(5) DS18B20 Digital Tempearture probes

(1) DHT22 Temperature & Humidity sensor

(1) UV sensor

(1)Soil Moisture sensor

Arduino MKR1000

The Arduino Uno is connected to the

Raspberry Pi via USB. It is used to monitor the water levels and also control the relays for the lights and misting pump. It has the following hardware connected:(2) HC-SR04 Ultrasonic Sensor

(2) Relays

Arduino Uno connected to 2 proximity sensors and 2 relays

Misting Bucket, Misting Pump, Drain Bucket with Proximity Sensor

Software

This system leverages the following open source software:Node.jsJohnny-fiveRethinkDBFirmataVue

Backend

The Raspberry Piis running an Express web server which collects readings from the sensors and saves them to a RethinkDB instance. The readings are being reported to the Pi every second so the user has access to the most current measurements.

The readings are saved every 5 minutes in Rethink DB for historical data.The Uno is running the PingFirmataSketch and using serial to expose the proximity sensors and relays to the Pi using Firmata protocol. The Pi leverages Johnny-five to allow the user to program in javascript.The MKR1000 is running a custom sketch using OneWire for the 5 temperature probes and then using analog inputs for the other sensors.

It posts the values to the Pi every second making sure the readings the user sees are fresh.

Frontend

The Raspberry Pi also serves up the front end portion of this app which leverages Vue.js. It allows the user to log in from anywhere having complete control over their pet's environment. The app works on any modern web browser so you can access it from a computer, tablet, or phone.The Smart Terrarium app allows the user to view the latests readings along with a sparkline graph of the previous day's historical data.The user can click through on any of the sensors

to view their history data.

The Measurements page shows a graph with the entire sensor history. The user can select a section of the bottom graph to display a zoomed in version in the graph above. This allows the user to inspect the historic data for any spikes or dips where the environment is out of the norm.The user has the ability to schedule events including lighting and misting events.

The Event page displays the currently scheduled events and allows the user to add, edit, and delete events. These events are used to automate the lighting and misting sessions which provides peace making sure you never forget.

The Controls page allows the user to manually override the scheduled lighting and misting events. The page displays the current status of each relay and allows the user to toggle them with a click of a button.The Admin page allow the user to enter information about themselves for contact purposes. This is for the email notifications on high/low water levels on misting system as well as notifications for when the daily average UV index gets too low. There is also a spot for the animals birthday so we can provide birthday notifications.

Screenshots

Home Page

Historical Measurements

�� Historical Measurements

Historical Measurements

Historical Measurements (zoomed)>

Historical Measurements

Historical Measurements (zoomed)

Historical Measurements

Events page for lighting and misting events.

Schedule Lighting and Misting Events

Controls page where the user can override the scheduled events.

Misting and Lighting Overrides

Demo

Here is a demo of the overall system.

youtube

Demo of The Smart Terrarium

We hope you enjoyed our presentation of the Smart Terrarium and encourage any reptile owners to use this project to improve the lives of your pets.Thanks for your time and happy making!

Custom parts and enclosures

Plant Holder Brace

This provides extra support to the cage for hanging a plant.

Download Here

Mister Mount

This provides a nice clean installation of the misting head for the misting system.

Download Here

Schematics

Arduino Uno diagram

The Arduino Uno circuit used to control both relays for the lighting and misting system, as well as monitor the water levels on the misting bucket and drain.

Arduino MKR1000

This is really for the MKR1000 but tinkercad circuits didn't have it as a component. All pins are still correct.

Code

Ping Firmata

C#This is the version of firmata required for the

Proximity sensors

to function properly. Install this sketch on the Arduino Uno.

/* * Firmata is a generic protocol for communicating with microcontrollers * from software on a host computer. It is intended to work with * any host computer software package. * * To download a host software package, please clink on the following link * to open the download page in your default browser. * * http://firmata.org/wiki/Download */ /* Copyright (C) 2006-2008 Hans-Christoph Steiner. All rights reserved. Copyright (C) 2010-2011 Paul Stoffregen. All rights reserved. Copyright (C) 2009 Shigeru Kobayashi. All rights reserved. Copyright (C) 2009-2011 Jeff Hoefs. All rights reserved. Copyright (C) 2012 Julian Gaultier. All rights reserved. Copyright (C) 2015 Rick Waldron. All rights reserved. This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. */ #include <Servo.h> #include <Wire.h> #include <Firmata.h> #define I2C_WRITE B00000000 #define I2C_READ B00001000 #define I2C_READ_CONTINUOUSLY B00010000 #define I2C_STOP_READING B00011000 #define I2C_READ_WRITE_MODE_MASK B00011000 #define I2C_10BIT_ADDRESS_MODE_MASK B00100000 #define MAX_QUERIES 8 #define MINIMUM_SAMPLING_INTERVAL 10 #define REGISTER_NOT_SPECIFIED -1 #define PING_READ 0x75 // PING_READ is for use with HCSR04 and similar "ultrasonic ping" components /*============================================================================== * GLOBAL VARIABLES *============================================================================*/ // analog inputs int analogInputsToReport = 0; // bitwise array to store pin reporting // digital input ports byte reportPINs[TOTAL_PORTS]; // 1 = report this port, 0 = silence byte previousPINs[TOTAL_PORTS]; // previous 8 bits sent // pins configuration byte pinConfig[TOTAL_PINS]; // configuration of every pin byte portConfigInputs[TOTAL_PORTS]; // each bit: 1 = pin in INPUT, 0 = anything else int pinState[TOTAL_PINS]; // any value that has been written // timer variables unsigned long currentMillis; // store the current value from millis() unsigned long previousMillis; // for comparison with currentMillis int samplingInterval = 19; // how often to run the main loop (in ms) // i2c data struct i2c_device_info { byte addr; byte reg; byte bytes; }; // for i2c read continuous more i2c_device_info query[MAX_QUERIES]; byte i2cRxData[32]; boolean isI2CEnabled = false; signed char queryIndex = -1; // default delay time between i2c read request and Wire.requestFrom() unsigned int i2cReadDelayTime = 0; Servo servos[MAX_SERVOS]; /*============================================================================== * FUNCTIONS *============================================================================*/ void readAndReportData(byte address, int theRegister, byte numBytes) { // allow I2C requests that don't require a register read // for example, some devices using an interrupt pin to signify new data available // do not always require the register read so upon interrupt you call Wire.requestFrom() if (theRegister != REGISTER_NOT_SPECIFIED) { Wire.beginTransmission(address); Wire.write((byte)theRegister); Wire.endTransmission(); delayMicroseconds(i2cReadDelayTime); // delay is necessary for some devices such as WiiNunchuck } else { theRegister = 0; // fill the register with a dummy value } Wire.requestFrom(address, numBytes); // all bytes are returned in requestFrom // check to be sure correct number of bytes were returned by slave if (numBytes == Wire.available()) { i2cRxData[0] = address; i2cRxData[1] = theRegister; for (int i = 0; i < numBytes; i++) { i2cRxData[2 + i] = Wire.read(); } } else { if (numBytes > Wire.available()) { Firmata.sendString("I2C Read Error: Too many bytes received"); } else { Firmata.sendString("I2C Read Error: Too few bytes received"); } } // send slave address, register and received bytes Firmata.sendSysex(SYSEX_I2C_REPLY, numBytes + 2, i2cRxData); } void outputPort(byte portNumber, byte portValue, byte forceSend) { // pins not configured as INPUT are cleared to zeros portValue = portValue & portConfigInputs[portNumber]; // only send if the value is different than previously sent if (forceSend || previousPINs[portNumber] != portValue) { Firmata.sendDigitalPort(portNumber, portValue); previousPINs[portNumber] = portValue; } } /* ----------------------------------------------------------------------------- * check all the active digital inputs for change of state, then add any events * to the Serial output queue using Serial.print() */ void checkDigitalInputs(void) { /* Using non-looping code allows constants to be given to readPort(). * The compiler will apply substantial optimizations if the inputs * to readPort() are compile-time constants. */ if (TOTAL_PORTS > 0 && reportPINs[0]) outputPort(0, readPort(0, portConfigInputs[0]), false); if (TOTAL_PORTS > 1 && reportPINs[1]) outputPort(1, readPort(1, portConfigInputs[1]), false); if (TOTAL_PORTS > 2 && reportPINs[2]) outputPort(2, readPort(2, portConfigInputs[2]), false); if (TOTAL_PORTS > 3 && reportPINs[3]) outputPort(3, readPort(3, portConfigInputs[3]), false); if (TOTAL_PORTS > 4 && reportPINs[4]) outputPort(4, readPort(4, portConfigInputs[4]), false); if (TOTAL_PORTS > 5 && reportPINs[5]) outputPort(5, readPort(5, portConfigInputs[5]), false); if (TOTAL_PORTS > 6 && reportPINs[6]) outputPort(6, readPort(6, portConfigInputs[6]), false); if (TOTAL_PORTS > 7 && reportPINs[7]) outputPort(7, readPort(7, portConfigInputs[7]), false); if (TOTAL_PORTS > 8 && reportPINs[8]) outputPort(8, readPort(8, portConfigInputs[8]), false); if (TOTAL_PORTS > 9 && reportPINs[9]) outputPort(9, readPort(9, portConfigInputs[9]), false); if (TOTAL_PORTS > 10 && reportPINs[10]) outputPort(10, readPort(10, portConfigInputs[10]), false); if (TOTAL_PORTS > 11 && reportPINs[11]) outputPort(11, readPort(11, portConfigInputs[11]), false); if (TOTAL_PORTS > 12 && reportPINs[12]) outputPort(12, readPort(12, portConfigInputs[12]), false); if (TOTAL_PORTS > 13 && reportPINs[13]) outputPort(13, readPort(13, portConfigInputs[13]), false); if (TOTAL_PORTS > 14 && reportPINs[14]) outputPort(14, readPort(14, portConfigInputs[14]), false); if (TOTAL_PORTS > 15 && reportPINs[15]) outputPort(15, readPort(15, portConfigInputs[15]), false); } // ----------------------------------------------------------------------------- /* sets the pin mode to the correct state and sets the relevant bits in the * two bit-arrays that track Digital I/O and PWM status */ void setPinModeCallback(byte pin, int mode) { if (pinConfig[pin] == I2C && isI2CEnabled && mode != I2C) { // disable i2c so pins can be used for other functions // the following if statements should reconfigure the pins properly disableI2CPins(); } if (IS_PIN_SERVO(pin) && mode != SERVO && servos[PIN_TO_SERVO(pin)].attached()) { servos[PIN_TO_SERVO(pin)].detach(); } if (IS_PIN_ANALOG(pin)) { reportAnalogCallback(PIN_TO_ANALOG(pin), mode == ANALOG ? 1 : 0); // turn on/off reporting } if (IS_PIN_DIGITAL(pin)) { if (mode == INPUT) { portConfigInputs[pin / 8] |= (1 << (pin & 7)); } else { portConfigInputs[pin / 8] &= ~(1 << (pin & 7)); } } pinState[pin] = 0; switch (mode) { case ANALOG: if (IS_PIN_ANALOG(pin)) { if (IS_PIN_DIGITAL(pin)) { pinMode(PIN_TO_DIGITAL(pin), INPUT); // disable output driver digitalWrite(PIN_TO_DIGITAL(pin), LOW); // disable internal pull-ups } pinConfig[pin] = ANALOG; } break; case INPUT: if (IS_PIN_DIGITAL(pin)) { pinMode(PIN_TO_DIGITAL(pin), INPUT); // disable output driver digitalWrite(PIN_TO_DIGITAL(pin), LOW); // disable internal pull-ups pinConfig[pin] = INPUT; } break; case OUTPUT: if (IS_PIN_DIGITAL(pin)) { digitalWrite(PIN_TO_DIGITAL(pin), LOW); // disable PWM pinMode(PIN_TO_DIGITAL(pin), OUTPUT); pinConfig[pin] = OUTPUT; } break; case PWM: if (IS_PIN_PWM(pin)) { pinMode(PIN_TO_PWM(pin), OUTPUT); analogWrite(PIN_TO_PWM(pin), 0); pinConfig[pin] = PWM; } break; case SERVO: if (IS_PIN_SERVO(pin)) { pinConfig[pin] = SERVO; if (!servos[PIN_TO_SERVO(pin)].attached()) { servos[PIN_TO_SERVO(pin)].attach(PIN_TO_DIGITAL(pin)); } } break; case I2C: if (IS_PIN_I2C(pin)) { // mark the pin as i2c // the user must call I2C_CONFIG to enable I2C for a device pinConfig[pin] = I2C; } break; default: Firmata.sendString("Unknown pin mode"); // TODO: put error msgs in EEPROM } // TODO: save status to EEPROM here, if changed } void analogWriteCallback(byte pin, int value) { if (pin < TOTAL_PINS) { switch (pinConfig[pin]) { case SERVO: if (IS_PIN_SERVO(pin)) servos[PIN_TO_SERVO(pin)].write(value); pinState[pin] = value; break; case PWM: if (IS_PIN_PWM(pin)) analogWrite(PIN_TO_PWM(pin), value); pinState[pin] = value; break; } } } void digitalWriteCallback(byte port, int value) { byte pin, lastPin, mask = 1, pinWriteMask = 0; if (port < TOTAL_PORTS) { // create a mask of the pins on this port that are writable. lastPin = port * 8 + 8; if (lastPin > TOTAL_PINS) lastPin = TOTAL_PINS; for (pin = port * 8; pin < lastPin; pin++) { // do not disturb non-digital pins (eg, Rx & Tx) if (IS_PIN_DIGITAL(pin)) { // only write to OUTPUT and INPUT (enables pullup) // do not touch pins in PWM, ANALOG, SERVO or other modes if (pinConfig[pin] == OUTPUT || pinConfig[pin] == INPUT) { pinWriteMask |= mask; pinState[pin] = ((byte)value & mask) ? 1 : 0; } } mask = mask << 1; } writePort(port, (byte)value, pinWriteMask); } } // ----------------------------------------------------------------------------- /* sets bits in a bit array (int) to toggle the reporting of the analogIns */ //void FirmataClass::setAnalogPinReporting(byte pin, byte state) { //} void reportAnalogCallback(byte analogPin, int value) { if (analogPin < TOTAL_ANALOG_PINS) { if (value == 0) { analogInputsToReport = analogInputsToReport & ~(1 << analogPin); } else { analogInputsToReport = analogInputsToReport | (1 << analogPin); } } // TODO: save status to EEPROM here, if changed } void reportDigitalCallback(byte port, int value) { if (port < TOTAL_PORTS) { reportPINs[port] = (byte)value; } // do not disable analog reporting on these 8 pins, to allow some // pins used for digital, others analog. Instead, allow both types // of reporting to be enabled, but check if the pin is configured // as analog when sampling the analog inputs. Likewise, while // scanning digital pins, portConfigInputs will mask off values from any // pins configured as analog } /*============================================================================== * SYSEX-BASED commands *============================================================================*/ void sysexCallback(byte command, byte argc, byte *argv) { byte mode; byte slaveAddress; byte slaveRegister; byte data; unsigned int delayTime; switch (command) { case I2C_REQUEST: mode = argv[1] & I2C_READ_WRITE_MODE_MASK; if (argv[1] & I2C_10BIT_ADDRESS_MODE_MASK) { Firmata.sendString("10-bit addressing not supported"); return; } else { slaveAddress = argv[0]; } switch (mode) { case I2C_WRITE: Wire.beginTransmission(slaveAddress); for (byte i = 2; i < argc; i += 2) { data = argv[i] + (argv[i + 1] << 7); Wire.write((byte)data); } Wire.endTransmission(); delayMicroseconds(70); break; case I2C_READ: case I2C_READ_CONTINUOUSLY: if (argc == 6) { // a slave register is specified slaveRegister = argv[2] + (argv[3] << 7); data = argv[4] + (argv[5] << 7); // bytes to read } else { // a slave register is NOT specified slaveRegister = (int)REGISTER_NOT_SPECIFIED; data = argv[2] + (argv[3] << 7); // bytes to read } if (mode == I2C_READ) { readAndReportData(slaveAddress, slaveRegister, data); } else { if ((queryIndex + 1) >= MAX_QUERIES) { Firmata.sendString("too many queries"); break; } queryIndex++; query[queryIndex].addr = slaveAddress; query[queryIndex].reg = slaveRegister; query[queryIndex].bytes = data; } break; case I2C_STOP_READING: byte queryIndexToSkip; // if read continuous mode is enabled for only 1 i2c device, disable // read continuous reporting for that device if (queryIndex <= 0) { queryIndex = -1; } else { // if read continuous mode is enabled for multiple devices, // determine which device to stop reading and remove it's data from // the array, shifiting other array data to fill the space for (byte i = 0; i < queryIndex + 1; i++) { if (query[i].addr == slaveAddress) { queryIndexToSkip = i; break; } } for (byte i = queryIndexToSkip; i < queryIndex + 1; i++) { if (i < MAX_QUERIES) { query[i].addr = query[i + 1].addr; query[i].reg = query[i + 1].reg; query[i].bytes = query[i + 1].bytes; } } queryIndex--; } break; default: break; } break; case I2C_CONFIG: delayTime = (argv[0] + (argv[1] << 7)); if (delayTime > 0) { i2cReadDelayTime = delayTime; } if (!isI2CEnabled) { enableI2CPins(); } break; case SERVO_CONFIG: if (argc > 4) { // these vars are here for clarity, they'll optimized away by the compiler ��byte pin = argv[0]; int minPulse = argv[1] + (argv[2] << 7); int maxPulse = argv[3] + (argv[4] << 7); if (IS_PIN_SERVO(pin)) { if (servos[PIN_TO_SERVO(pin)].attached()) { servos[PIN_TO_SERVO(pin)].detach(); } servos[PIN_TO_SERVO(pin)].attach(PIN_TO_DIGITAL(pin), minPulse, maxPulse); setPinModeCallback(pin, SERVO); } } break; case SAMPLING_INTERVAL: if (argc > 1) { samplingInterval = argv[0] + (argv[1] << 7); if (samplingInterval < MINIMUM_SAMPLING_INTERVAL) { samplingInterval = MINIMUM_SAMPLING_INTERVAL; } } else { //Firmata.sendString("Not enough data"); } break; case EXTENDED_ANALOG: if (argc > 1) { int val = argv[1]; if (argc > 2) { val |= (argv[2] << 7); } if (argc > 3) { val |= (argv[3] << 14); } analogWriteCallback(argv[0], val); } break; case CAPABILITY_QUERY: Serial.write(START_SYSEX); Serial.write(CAPABILITY_RESPONSE); for (byte pin = 0; pin < TOTAL_PINS; pin++) { if (IS_PIN_DIGITAL(pin)) { Serial.write((byte)INPUT); Serial.write(1); Serial.write((byte)OUTPUT); Serial.write(1); Serial.write((byte)PING_READ); Serial.write(1); } if (IS_PIN_ANALOG(pin)) { Serial.write(ANALOG); Serial.write(10); } if (IS_PIN_PWM(pin)) { Serial.write(PWM); Serial.write(8); } if (IS_PIN_SERVO(pin)) { Serial.write(SERVO); Serial.write(14); } if (IS_PIN_I2C(pin)) { Serial.write(I2C); Serial.write(1); // to do: determine appropriate value } Serial.write(127); } Serial.write(END_SYSEX); break; case PIN_STATE_QUERY: if (argc > 0) { byte pin = argv[0]; Serial.write(START_SYSEX); Serial.write(PIN_STATE_RESPONSE); Serial.write(pin); if (pin < TOTAL_PINS) { Serial.write((byte)pinConfig[pin]); Serial.write((byte)pinState[pin] & 0x7F); if (pinState[pin] & 0xFF80) { Serial.write((byte)(pinState[pin] >> 7) & 0x7F); } if (pinState[pin] & 0xC000) { Serial.write((byte)(pinState[pin] >> 14) & 0x7F); } } Serial.write(END_SYSEX); } break; case ANALOG_MAPPING_QUERY: Serial.write(START_SYSEX); Serial.write(ANALOG_MAPPING_RESPONSE); for (byte pin = 0; pin < TOTAL_PINS; pin++) { Serial.write(IS_PIN_ANALOG(pin) ? PIN_TO_ANALOG(pin) : 127); } Serial.write(END_SYSEX); break; case PING_READ: { byte pulseDurationArray[4] = { (argv[2] & 0x7F) | ((argv[3] & 0x7F) << 7), (argv[4] & 0x7F) | ((argv[5] & 0x7F) << 7), (argv[6] & 0x7F) | ((argv[7] & 0x7F) << 7), (argv[8] & 0x7F) | ((argv[9] & 0x7F) << 7)}; unsigned long pulseDuration = ((unsigned long)pulseDurationArray[0] << 24) + ((unsigned long)pulseDurationArray[1] << 16) + ((unsigned long)pulseDurationArray[2] << 8) + ((unsigned long)pulseDurationArray[3]); if (argv[1] == HIGH) { pinMode(argv[0], OUTPUT); digitalWrite(argv[0], LOW); delayMicroseconds(2); digitalWrite(argv[0], HIGH); delayMicroseconds(pulseDuration); digitalWrite(argv[0], LOW); } else { digitalWrite(argv[0], HIGH); delayMicroseconds(2); digitalWrite(argv[0], LOW); delayMicroseconds(pulseDuration); digitalWrite(argv[0], HIGH); } unsigned long duration; byte responseArray[5]; byte timeoutArray[4] = { (argv[10] & 0x7F) | ((argv[11] & 0x7F) << 7), (argv[12] & 0x7F) | ((argv[13] & 0x7F) << 7), (argv[14] & 0x7F) | ((argv[15] & 0x7F) << 7), (argv[16] & 0x7F) | ((argv[17] & 0x7F) << 7)}; unsigned long timeout = ((unsigned long)timeoutArray[0] << 24) + ((unsigned long)timeoutArray[1] << 16) + ((unsigned long)timeoutArray[2] << 8) + ((unsigned long)timeoutArray[3]); pinMode(argv[0], INPUT); duration = pulseIn(argv[0], argv[1], timeout); responseArray[0] = argv[0]; responseArray[1] = (((unsigned long)duration >> 24) & 0xFF); responseArray[2] = (((unsigned long)duration >> 16) & 0xFF); responseArray[3] = (((unsigned long)duration >> 8) & 0xFF); responseArray[4] = (((unsigned long)duration & 0xFF)); Firmata.sendSysex(PING_READ, 5, responseArray); break; } } } void enableI2CPins() { for (byte i = 0; i < TOTAL_PINS; i++) { if (IS_PIN_I2C(i)) { // mark pins as i2c so they are ignore in non i2c data requests setPinModeCallback(i, I2C); } } isI2CEnabled = true; // is there enough time before the first I2C request to call this here? Wire.begin(); } void disableI2CPins() { isI2CEnabled = false; queryIndex = -1; } void systemResetCallback() { if (isI2CEnabled) { disableI2CPins(); } for (byte i = 0; i < TOTAL_PORTS; i++) { reportPINs[i] = false; // by default, reporting off portConfigInputs[i] = 0; // until activated previousPINs[i] = 0; } // pins with analog capability default to analog input // otherwise, pins default to digital output for (byte i = 0; i < TOTAL_PINS; i++) { if (IS_PIN_ANALOG(i)) { // turns off pullup, configures everything setPinModeCallback(i, ANALOG); } else { // sets the output to 0, configures portConfigInputs setPinModeCallback(i, OUTPUT); } } // by default, do not report any analog inputs analogInputsToReport = 0; } void setup() { Firmata.setFirmwareVersion(FIRMATA_MAJOR_VERSION, FIRMATA_MINOR_VERSION); Firmata.attach(ANALOG_MESSAGE, analogWriteCallback); Firmata.attach(DIGITAL_MESSAGE, digitalWriteCallback); Firmata.attach(REPORT_ANALOG, reportAnalogCallback); Firmata.attach(REPORT_DIGITAL, reportDigitalCallback); Firmata.attach(SET_PIN_MODE, setPinModeCallback); Firmata.attach(START_SYSEX, sysexCallback); Firmata.attach(SYSTEM_RESET, systemResetCallback); Firmata.begin(57600); systemResetCallback(); // reset to default config } void loop() { byte pin, analogPin; /* DIGITALREAD - as fast as possible, check for changes and output them to the * FTDI buffer using Serial.print() */ checkDigitalInputs(); /* SERIALREAD - processing incoming messagse as soon as possible, while still * checking digital inputs. */ while (Firmata.available()) { Firmata.processInput(); } /* SEND FTDI WRITE BUFFER - make sure that the FTDI buffer doesn't go over * 60 bytes. use a timer to sending an event character every 4 ms to * trigger the buffer to dump. */ currentMillis = millis(); if (currentMillis - previousMillis > samplingInterval) { previousMillis += samplingInterval; /* ANALOGREAD - do all analogReads() at the configured sampling interval */ for (pin = 0; pin < TOTAL_PINS; pin++) { if (IS_PIN_ANALOG(pin) && pinConfig[pin] == ANALOG) { analogPin = PIN_TO_ANALOG(pin); if (analogInputsToReport & (1 << analogPin)) { Firmata.sendAnalog(analogPin, analogRead(analogPin)); } } } // report i2c data for all device with read continuous mode enabled if (queryIndex > -1) { for (byte i = 0; i < queryIndex + 1; i++) { readAndReportData(query[i].addr, query[i].reg, query[i].bytes); } } } }

MKR1000 Sketch

C#This sketch sends the majority of sensor readings to the app running on the Raspberry Pi. Make sure to update the Wifi SSID and Password before uploading.

#include <OneWire.h> #include <DallasTemperature.h> #include <ArduinoHttpClient.h> #include <WiFi101.h> #include <SimpleDHT.h> // Using Pin 5 of MKR1000 #define ONE_WIRE_BUS_PIN 5 // TODO: Move out ot separate file #define SECRET_SSID "SECRET_SSID" #define SECRET_PASS "SECRET_PASS" #define RIG_NAME "Gill" char ssid[] = SECRET_SSID; char pass[] = SECRET_PASS; // Setup a oneWire instance for temperature probes OneWire oneWire(ONE_WIRE_BUS_PIN); // Pass our oneWire reference to Dallas Temperature. DallasTemperature sensors(&oneWire); // probe_a: "28 FF 2F 9C B0 16 3 34" // probe_b: "28 FF 36 1E B1 16 4 4D" // probe_c: "28 FF 27 1E B1 16 4 FC" // probe_d: "28 FF 6A 74 B0 16 5 87" // probe_e: "28 FF E B5 B0 16 3 E2" // Define device addresses for each probe DeviceAddress Probe01 = {0x28, 0xFF, 0x2F, 0x9C, 0xB0, 0x16, 0x03, 0x34}; DeviceAddress Probe02 = {0x28, 0xFF, 0x36, 0x1E, 0xB1, 0x16, 0x04, 0x4D}; DeviceAddress Probe03 = {0x28, 0xFF, 0x27, 0x1E, 0xB1, 0x16, 0x04, 0xFC}; DeviceAddress Probe04 = {0x28, 0xFF, 0x6A, 0x74, 0xB0, 0x16, 0x05, 0x87}; DeviceAddress Probe05 = {0x28, 0xFF, 0x0E, 0xB5, 0xB0, 0x16, 0x03, 0xE2}; int uvSensor = A1; int uvIndex = 0; int pinDHT22 = A2; SimpleDHT22 dht22(pinDHT22); int soilSensor = A3; int soilMoisture = 0; char serverAddress[] = "192.168.86.127"; // raspberry pi address int port = 3030; WiFiClient wifi; HttpClient client = HttpClient(wifi, serverAddress, port); int status = WL_IDLE_STATUS; String response; int statusCode = 0; void setup() { // start serial port to show results Serial.begin(9600); delay(3000); pinMode(LED_BUILTIN, OUTPUT); while (status != WL_CONNECTED) { Serial.print("Attempting to connect to Network named: "); Serial.println(ssid); // print the network name (SSID); // Connect to WPA/WPA2 network: status = WiFi.begin(ssid, pass); } // print the SSID of the network you're attached to: Serial.print("SSID: "); Serial.println(WiFi.SSID()); // print your WiFi shield's IP address: IPAddress ip = WiFi.localIP(); Serial.print("IP Address: "); Serial.println(ip); Serial.print("Initializing Temperature Control Library Version "); Serial.println(DALLASTEMPLIBVERSION); // Initialize the Temperature measurement library sensors.begin(); // set the resolution to 10 bit (Can be 9 to 12 bits .. lower is faster) sensors.setResolution(Probe01, 9); sensors.setResolution(Probe02, 9); sensors.setResolution(Probe03, 9); sensors.setResolution(Probe04, 9); sensors.setResolution(Probe05, 9); } void loop() /****** LOOP: RUNS CONSTANTLY ******/ { Serial.println(); Serial.print("Total Probes: "); Serial.println(sensors.getDeviceCount()); // Command all devices on bus to read temperature sensors.requestTemperatures(); float probeA = sensors.getTempC(Probe01); float probeB = sensors.getTempC(Probe02); float probeC = sensors.getTempC(Probe03); float probeD = sensors.getTempC(Probe04); float probeE = sensors.getTempC(Probe05); float moistureSensorValue = analogRead(soilSensor); soilMoisture = ((moistureSensorValue / 1024) - 1) * 100 * -1; float uvSensorValue = analogRead(uvSensor); uvIndex = uvSensorValue / 1024 * 3.3 / 0.1; Serial.print("Rig Name: "); Serial.println(String(RIG_NAME)); Serial.print("ProbeA: "); printTemperature(Probe01); Serial.println(); Serial.print("ProbeB: "); printTemperature(Probe02); Serial.println(); Serial.print("ProbeC: "); printTemperature(Probe03); Serial.println(); Serial.print("ProbeD: "); printTemperature(Probe04); Serial.println(); Serial.print("ProbeE: "); printTemperature(Probe05); Serial.println(); Serial.print("soilMoisture: "); Serial.print(soilMoisture); Serial.println(); Serial.print("uvIndex: "); Serial.print(uvIndex); Serial.println(); byte temperature = 0; byte humidity = 0; int err = SimpleDHTErrSuccess; if ((err = dht22.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) { Serial.print("Read DHT22 failed, err="); Serial.println(err); } else { Serial.print("DHT22: "); Serial.print((int)temperature); Serial.print(" *C, "); Serial.print((int)humidity); Serial.println(" RH%"); } String postURL = String("POST readings to " + String(serverAddress) + ':' + String(port)); Serial.println(postURL); String contentType = "application/x-www-form-urlencoded"; String postData = String( "probeA=" + String(probeA) + "&probeB=" + String(probeB) + "&probeC=" + String(probeC) + "&probeD=" + String(probeD) + "&probeE=" + String(probeE) + "&rig_name=" + String(RIG_NAME) + "&uvIndex=" + String(uvIndex) + "&soilMoisture=" + String(soilMoisture) + "&humidity=" + String(humidity) + "&temperature=" + String(temperature)); digitalWrite(LED_BUILTIN, HIGH); client.post("/temperatures", contentType, postData); // read the status code and body of the response statusCode = client.responseStatusCode(); response = client.responseBody(); Serial.print("Status code: "); Serial.println(statusCode); Serial.print("Response: "); Serial.println(response); digitalWrite(LED_BUILTIN, LOW); delay(100); digitalWrite(LED_BUILTIN, HIGH); delay(100); digitalWrite(LED_BUILTIN, LOW); delay(100); digitalWrite(LED_BUILTIN, HIGH); delay(100); digitalWrite(LED_BUILTIN, LOW); delay(1000); } // print temperature for device adress void printTemperature(DeviceAddress deviceAddress) { float tempC = sensors.getTempC(deviceAddress); if (tempC == -127.00) { Serial.print("Error getting temperature "); } else { Serial.print(tempC, 1); Serial.print(" C"); // Serial.print(" F: "); // Serial.print(DallasTemperature::toFahrenheit(tempC)); } }

SmartTerrariumClient

This is the Client portion of Smart Terrarium built using Vue.js.

ryanjgill / smart-terrarium-client

Client for Smart Terrarium —

Latest commit to the master branch on 5-27-2019

Download as zip

SmartTerrariumApp

Smart Terrarium App for receiving data, controlling hardware, and running the Smart Terrarium Client. This repo also contains the sketch for the MKR1000.

ryanjgill / smart-terrarium-app

Smart Terrarium App for receiving data, controlling hardware, and running the Smart Terrarium Client — Read More

Latest commit to the master branch on 5-31-2019

Download as zip

(This article copied from hackster.io Author: Ryan Gill)

0 notes

vuejs2 · 6 years ago

Photo

#Vue #Vuejs #JavaScript #Angular #React #Webdev #web development

0 notes

tristanleggett · 6 years ago

Text

Wroclaw’s Software Houses Are Making a Statement in IT Outsourcing

We see a very clear trend in the software development space. The top companies use the power of Inbound marketing to grow their customer acquisition and business.

They don’t chase customer, customers chase them.

How did they get here using marketing? They build stellar content about technology and their successful case study.

We’ve done the heavy lifting for you analyzing all the aspects of marketing all the top software companies do to grow.

Sounds simple but sophisticated.

Take these insights, filter them for your business and buyer persona, then implement them in your business.

We’ve learned in our previous blog posts that 3 of the top European companies in software consulting and development are from Poznan, Poland.

And all 3 of them use content marketing and inbound marketing to blast a bunch of relevant traffic to their website using content marketing.

Traffic that converts in customers or future employees.

For our next blog post series, we go South from Poznan.

In our road trip in discovering the marketing strategies of the best software houses in Poland we’ve arrived at Little Venice, Wroclaw.

Here we look at Monterail, Droids on Roids, Divante, Tooploox. Probably it doesn’t ring a bell yet, but they’re on the verge of writing some history in IT outsourcing.

In IT Outsourcing Wroclaw is aiming to lead the way. Can Wroclaw’s IT outsourcing companies cope up with the challenge?

In our 5 blog posts series, we’ll decipher how Wroclaw’s IT Outsourcing companies grow and do marketing, community management, and employer branding.

Let’s uncover their stories together.

TABLE OF CONTENT

Wroclaw’s Assets for a New Era of Growth

Wroclaw's Software Houses

Monterail - Delivering Meaningful Software

Droids on Roids - World-class Software House

Tooploox - We Build Great Products

Divante - eCommerce Software House

Summing Up

I felt a great disturbance in the Force as if millions of voices suddenly cried out in terror and were suddenly silenced - Obi-Wan Kenobi

That’s disruption right there. It’s leaving a mark on every single industry. And if you want to grow your business, you’ll need to embrace change and drive innovation.

IT Outsourcing is no exception.

Wroclaw IT outsourcing companies are turning their backs to old-school ways of doing business.

Come with me on a journey of agony and ecstasy, a journey where we’ll meet the businesses that want to write the future of IT outsourcing.

Wroclaw’s Assets for a New Era of Growth

First, let’s see what makes Wroclaw so sexy in the eyes of IT investors?

Income tax exemptions: regional public aid is granted for supporting new investments and new jobs creation

Nationwide leader in R&D centers: companies that are developing here Atos, BNY Mellon, Credit Suisse, HP, Nokia Solutions, SII, and Volvo

Local talent pool: Wroclaw University of Science and Technology offers students 50+ programs. 45k+ students enrolled in technical subjects in 2015, according to PWC report.

Wroclaw is the most attractive Polish city for relocation, as seen by native Polish employees, especially top specialists and managers. The criteria for this top referred to the aspect of the cities, career opportunities, employer activities, employer-institutions relationships.

Lots of business and tech events (startup weekends, conferences etc)

60+ tech meetup groups, with members ranging from 100 to 1600+

Wroclaw's Software Houses

According to Stratistics, the IT Outsourcing market is expected to reach $481 billion by 2022.

The growth is fueled by new business models and new technologies: cloud computing, VR, AI, blockchain.

In our growth saga, we’ll try to figure out how Wroclaw software houses are moving a needle in IT outsourcing and if they have adapted their software solutions to the new market demands. Also, we’ll unfold their marketing strategies and analyze their employer branding.

Monterail - Delivering Meaningful Software

Website: https://www.monterail.com/

No. employees: 80+

Revenue: 3M+ (Owler estimations)

Technologies: Vue.js, Ruby on Rails, NodeJS, React, AngularJS,

Services: web development, custom software development, mobile app development, product design, IoT development

Verticals: business, healthcare, financial

Key clients: Merck, Solarflare, Cooleaf, Loyco, Gutwin, Tailored, University of Wroclaw, Xchanging, Teambook, WFC, Innovestment

Offices: Wroclaw (HQ)

Reviews: 4.8 - Clutch (13 reviews), 4.7 - Glassdoor (11 reviews)

Co-founders: Szymon Boniecki and Bartosz Rega

Featured two times in Deloitte’s CEE Tech Fast 50 in 2017 and 2016, Monterail is among Wroclaw ’s most dynamic software houses.

In our next blog post of the current series, we’ll go beyond the introduction, we’ll unfold the marketing secrets behind Monterail’s growth and understand how employer branding is built.

We’ll go deep intro content strategies, social media and community engagement.

But, until then, you can take a peek inside Monterail’s company culture here:

youtube

Deloitte recognizes Monterail as one of the fastest growing tech companies in Central Europe

Droids on Roids - World-class Software House

Website: https://www.thedroidsonroids.com/

No. employees: 40+

Technologies: Android, iOS, Node.js, Ruby on Rails, React, MongoDB, Vue.js, Express.js

Services: mobile app development, web development, product design

Verticals: entertainment, business, consumer products and services

Key clients: Giphy, Oh Mi Bod, Skybuds, Loop, Electric Objects, LiveChat, Złote Wyprzedaże, Disney, Nestle, Unilever

Offices: Wroclaw (HQ), London, San Francisco

Reviews: 4.8 - Clutch (20 reviews)

CEO: Wojtek Szwajkiewicz

The company brags with being recognized by Forbes Magazine as one of the fastest growing companies from Poland. Droids On Roids is ranked in 5th place for Poland and 2nd for the Lower Silesia region, in the category “Income between 5-50 mln PLN”.

Their income has increased by 761% over the last 5 years (according to the same Forbes magazine) and they shook hands with big clients such as Nestle, Unilever or Disney.

They organize bootcamps and meetups and strive to build their employer brand.

They invest heavily in content, that’s why their monthly website traffic is around 75k (according to Similar Web), not bad for a B2B, right?

Tooploox - We Build Great Products

Website:https://www.tooploox.com

No. employees: 100+

Revenue: EUR 3M+ (2016, via Financial Times)

Technologies: Android, iOS, Python, React, C++

Services: AI, data science, blockchain, IoT, mobile app development, web development, product design

Verticals: education, tourism, health, e-commerce

Key clients: TEDx, Homebook, Happy Cow, Domodi

Offices: Wroclaw (HQ), Warsaw, Gdansk, Berlin

Reviews: 4.8 - Clutch (3 reviews), 4.6 - Glassdoor (23 reviews)

Co-founders: Pawel Solyga and Damian Walczak

Tooploox ranked 4th in Deloitte’s Technology Fast 50 CEE in 2017 with an impressive 2827% revenue growth.

With a 67% increase in employees in the last 2 years, the company has big plans. Looking at their open job positions Tooploox is embracing the AI future.

This is just a hint of our in depth-analysis, following this blog post. We’ll tackle employee branding, content and social media strategies, and try to figure out what lies behind their inspiring growth.

Furthermore, here’s an interview featuring Tooploox, Droidsonroids and Monterail’s founders/CEOs where you’ll understand their culture and what made these Wroclaw software houses grow.

youtube

Q&A session with the founders of the fastest growing tech companies in Europe according to Deloitte's Technology Fast 50: Monterail, Droids on Roids, Tooploox

Divante - eCommerce Software House

Website: https://divante.co/

No. employees: 150+

Technologies: Magento, Angular, MongoDB, Node.js, Hadoop, Symfony 2, Progressive Web Apps, Modern JS, Vue.js, React

Services: B2B Commerce, eCommerce, Mobile, UX Design, Magento developers, Magento consulting, Magento hosting, Pimcore development, OroCommerce development, Frontend development

Verticals: automotive, energy, financial services, e-commerce, telekom

Key clients: Continental, ING Bank, Tchibo, Intersport, Santander, Knauf, T-Mobile

Offices: Wroclaw (HQ)

Reviews: 4.6 - Clutch (10 reviews), 4 - Glassdoor (1 review)

CEO: Tom Karwatka

So, let me repeat this once more: Continental, ING Bank, Tchibo, Intersport, Santander, Knauf, T-Mobile. Can you feel the envy?

With premium clients, monthly website traffic over 45k, and revenue growing a minimum of about 30% year on year, Divante is an inspiration.

It also got featured in Deloitte’s Fast 500 EMEA in 2017, with four-year revenue growth of 259%.

In our next blog post, we will look into reverse engineering Divante’s marketing and employer branding. We’ll dive into how traffic acquisition and conversion rate optimization are managed. If you want to learn more about how Divante managed to hack the enterprise sales process, you can watch Tom Karwatka speaking at the Web summit 2017:

youtube

Tom Karwatka Presentation @ Web Summit 2017: hacking the enterprise sales process

Summing Up

Wrocław is a city which is becoming increasingly entrepreneurial. It started to evolve over time towards business based on specialized knowledge. The next step to be taken, based on PWC’s report, is an innovation-based economy.

Wrocław’s innovative potential is primarily the high-quality human capital as well as world class business representatives.

Wrocław’s specialization is primarily IT services, so there’s no surprise that companies like Monterail, Droids on Roids, Tooploox, and Divante have risen to Deloitte and Clutch tops.

Spoiler Alert!

Before going ahead with reading the rest of our Wroclaw software houses series, let me unfold some of my findings:

Don’t underestimate the power of open source. Take Divante for example, with its Open Loyalty and Vue Storefront it managed to impress Facebook and Whatsapp.

Long form content matters: case studies (Droids on Roids), research papers (Tooploox), reports (The State of Vue.js by Monterail), ebooks (Divante). Blog posts are merely for the awareness stage of the buyer’s journey, but you need to move the potential buyer down the funnel. And long-form content can do just that and establish you as a trustworthy and knowledgeable partner.

Choose your weapon, pick a niche. Tooploox goes with AI, Divante with e-commerce, Monterail established itself as the Vue.js guru.

Build your employer branding through social media channels and community involvement (Divante, Monterail, Tooploox, Droids on Roids)

Not enough talent pool? build it the goddamn pool: offer fellowships (like Tooploox), host workshops, hackathons (Divante), meetups or even hold your own conference (like Monterail’s Vue Conference)

Haven’t found a tech-skilled content writer, have your developers team involved in content writing! Monterail, the Droids on Roids, Tooploox and Divante are doing it.

Tools and marketing automation. Be it Hubspot (Monterail), Pipedrive (Tooploox), Hotjar(Tooploox) automation and marketing tools can save you time and money

Have a content marketing strategy: from content creation to promotion, be consistent and test a lot. Just check Monterail’s campaign on Vue.js, they’ve totally nailed it.

Now, let’s remember Wroclaw is not the only Polish city with potential for IT innovation. Poznan, Krakow, Warsaw are on the list too.

Because we don’t wanna fall in the “can't see the forest for the trees” trap, we made a macro analysis too, comparing the Polish, Ukrainian, and Romanian IT outsourcing markets in our Ultimate Guide To IT Outsourcing Companies in Central Eastern Europe.

There are a lot of stories worth reading in our IT outsourcing saga, so stay tuned.

if(window.strchfSettings === undefined) window.strchfSettings = {}; window.strchfSettings.stats = {url: "https://man-digital.storychief.io/wroclaw-software-house-5ca1ac2f94ad6?id=2056047666&type=12",title: "Wroclaw’s Software Houses Are Making a Statement in IT Outsourcing",id: "4f08255c-5e51-436c-99aa-71482a308009"}; (function(d, s, id) { var js, sjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {window.strchf.update(); return;} js = d.createElement(s); js.id = id; js.src = "https://d37oebn0w9ir6a.cloudfront.net/scripts/v0/strchf.js"; js.async = true; sjs.parentNode.insertBefore(js, sjs); }(document, 'script', 'storychief-jssdk')) from Digital Marketing Automation Consulting | MAN Digital https://mandigitalblog.blogspot.com/2019/04/wroclaws-software-houses-are-making.html via https://mandigitalblog.blogspot.com/ Read more on our blog MAN Digital MAN Digital Blogger

#Digital Marketing Automation Consulting | MAN Digital

0 notes

vuejstutorial4u · 6 years ago

Photo

@vuejs : RT @VueNewsletter: 🚀 @vuejs News #134 🚀 Including: 🛸 Improvements to SSR in #vuejs v2.6 🎬 First talk from @vuejsamsterdam with @Akryum 👩‍🏫 Introduction to Vue.js by @MarinaMosti 🎭 Intro to snapshot testing by @VueDose And much more! Read or listen to the podcast: https://t.co/uinGuMxAEI

#Vue #Vuejs #Vue.js #Javascript #Angular #Node #React #Webdev

0 notes

webpacknews · 7 years ago

Photo

A Brief Intro to Using Vue.js with NativeScript: https://t.co/xOgFjcZ4Xo (A beginners' look at how to get started with NativeScript-Vue.)

#Webpack #JavaScript #React #Webdevelopment #Webdev

0 notes

laravelvuejs · 5 years ago

Text

Full Stack Web App using Vue.js & Express.js: Part 1 - Intro

Full Stack Web App using Vue.js & Express.js: Part 1 – Intro

[ad_1] Welcome to part 1 of a new series where I will create a full stack web application using Vue.js and Express.js Video created by Cody Seibert. Check out his … source [ad_2]

View On WordPress

0 notes

t-baba · 6 years ago

Photo

YDKJS edition 2, React's concurrent mode, and Vue 3's new features

#461 — November 1, 2019

Read on the Web

JavaScript Weekly

Madge: Create Graphs From Your Module Dependencies — A developer tool for generating a visual graph of your module dependencies (works with CommonJS, AMD and ES6 modules), finding circular dependencies, and discovering other useful info.

Patrik Henningsson

Modern JavaScript Features You May Have Missed — Given how JavaScript evolves all the time, it’s often worth reflecting on what’s been added, which is why articles like this tend to be popular here 😄 This post quickly covers some highlights of the most recent standards, ES2015 through ES2019.

Jimmy Breck-McKye

Migrating a Distributed System from JavaScript to TypeScript — TypeScript can help overcome scalability issues of JavaScript. Here’s how Ably’s engineering team painlessly migrated a globally-distributed system written in JavaScript to TypeScript, and some learnings you can implement in your own migration.

Ably sponsor

You Don't Know JS Yet: Getting Started — Kyle Simpson’s “You Don’t Know JS” (a.k.a. YDKJS) book has been hugely popular in the JavaScript world since its first release five years ago. He’s been working on a second edition whose first portion is now ‘draft complete’ and you can read it on GitHub.

Kyle Simpson

React (Experimentally) Unveils Concurrent Mode — A set of much awaited, new experimental features that will help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed. Very much aimed at early adopters and the curious. Here’s why these developments are exciting.

React Team

A Look at Some Exciting New Features Coming in Vue 3 — The Vue.js Core team is bringing some exciting new features in Vue 3 (which you can see in a pre-alpha form here) such as the composition API, fragments, portals, and suspense, to name a few. Does it feel more React-like? Well, yes.

Filip Rakowski

What's Going On With CDNJS? — CDNJS is a popular CDN for open source, front-end libraries and assets, but someone noticed there have been no updates in weeks. Apparently a founder restricted access and ‘disappeared’ and things are still being sorted out (today there’s been an update posted to Hacker News by one of the founders).

cdnjs

Aurelia vNext: A 2019 Fall Update — A look at what’s coming in Aurelia 2, the next major version of what remains an interesting JavaScript framework that isn’t React, Angular, or Vue!

Rob Eisenberg

💻 Jobs

JavaScript Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Have You Tried Vettery? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📘 Articles & Tutorials

The Svelte Handbook — It’s really just a very long blog post, but nonetheless, it’s a good way to quickly learn Svelte and become familiar with the intriguing compile-time framework.

Flavio Copes

Promises: Zero To Hero, Plus Cheat Sheet — “JavaScript promises explained how I wish they were explained to me” — plus a handy cheat sheet.

Joshua Saunders

JavaScript and TypeScript Test Feedback Right in Your Editor — Wallaby runs tests and code, displaying errors and results right in your editor as you type. For Jest and Angular projects no config is required.

Wallaby.js sponsor

10 Good Practices for Building Large Vue.js Projects — As we say in the UK, pretty much “what it says on the tin.”

Nada Rifki

Encapsulation in JavaScript

Eric Elliott

How to Set Up Angular Unit Testing with Jest

Amadou Sall

What is Functional Programming? A Gentle JavaScript Intro — One for beginners or those truly new to functional concepts.

Ali Spittel

Free Download: Results from Bitmovin's Video Developer Survey 2019 — Our 2019 Video Dev Report is here - A great lens into current trends, challenges & expectations.

Bitmovin sponsor

JavaScript's 'Labeled Statements' — MDN’s docs are the best resource on the practical use of labels, but this post shows how Svelte leans on them for its own syntactic reasons.

Flavio Copes

Migrating a 50K SLOC Flow and React Native App to TypeScript — Ditching Flow for TypeScript is easier than ever and should be more future proof.

Adam Terlson

JavaScript is C — “The exact same kinds of problems I had in C, I have in JavaScript or even TypeScript today.” Yes, this is controversial, and you’ll probably disagree!

Chris Krycho

🔧 Code & Tools

vue-interactive-paycard: Credit Card Form with Smooth Interactions — This is really slick. Check out the live CodePen demo.

Muhammed Erdem

A Web Extension Starter Kit — A kit for building ‘Write Once, Run on Any Browser’ extensions via the Web Extensions API.

Abhijith Vijayan

Depcheck: A VS Code Extension That Highlights Unused Dependencies in package.json — Uses the depcheck command line tool behind the scenes to help you declutter your project.

Visual Studio Marketplace

Immer 5.0: The Immutable State Library — The popular library has introduced first class support for maps and sets.

immer

Sal: Lightweight Scroll Animation Library — Coming in at just 2.8KB, this vanilla JS library is performance focused with no dependencies. GitHub repo.

Mirosław Ciastek

A Comparison of Popular Browser Automation Tools

Taiko sponsor

Redux Starter Kit 1.0 Released — A package designed to make it easier to get started with Redux and perform common tasks.

Mark Erikson

Downshift 3.4: Primitives to Build WAI-ARIA Compliant Enhanced Input Components — “You need an autocomplete/dropdown/select and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.” Now supports Preact X as well as React.

Downshift

📊 Vue-chartjs: A Vue.js Wrapper for Chart.js — Using Vue? Want charts? Consider this. Demos here.

Jakub

by via JavaScript Weekly https://ift.tt/2PD4sWX

#Javascript Branding #Javascript Weekly

0 notes

nancydsmithus · 7 years ago

Text

A Conference Without Slides: Meet SmashingConf Toronto 2018 (June 26-27)

Vitaly Friedman

2018-05-03T12:00:09+02:00 2018-05-03T15:01:15+00:00

What would be the best way to learn and improve your skills? By looking designers and developers over their shoulder! At SmashingConf Toronto taking place on June 26–27, we will exactly do that. All talks will be live coding and design sessions on stage, showing how speakers such as Dan Mall, Lea Verou, Rachel Andrew, and Sara Soueidan design und build stuff — including pattern libraries setup, design workflows and shortcuts, debugging, naming conventions, and everything in between. To the tickets →

What if there was a web conference without… slides? Meet SmashingConf Toronto 2018 with live sessions exploring how experts think, design, build and debug.

The night before the conference we’ll be hosting a FailNight, a warm-up party with a twist — every single session will be highlighting how we all failed on a small or big scale. Because, well, it’s mistakes that help us get better and smarter, right?

Speakers

One track, two conference days (June 26–27), 16 speakers, and just 500 available seats. We’ll cover everything from efficient design workflow and getting started with Vue.js to improving eCommerce UX and production-ready CSS Grid Layouts. Also on our list: performance audits, data visualization, multi-cultural designs, and other fields that may come up in your day-to-day work.

Here’s what you should be expecting:

Building A Pattern Library with CSS Grid Fallback (Live) Rachel Andrew (Perch)

CSS Secrets Live Lea Verou (MIT)

Get The Details Right And Leapfrog The Competition Joe Leech

SVG Tricks Live Sara Soueidan

Accessibility Improvements Marcy Sutton

Live Sketchnotes Eva-Lotta Lamm

Creating A Data Visualization From Scratch (Live) Nadie Bremer

Live Animation Sarah Drasner

Overcoming Multi-Cultural Design Barriers Yiying Lu

Live Lettering Gemma O’Brien

Visual Design Aaron James Draplin (Draplin Design Co.)

Design Workflow Dan Mall (Superfriendly)

Live Performance Audit Tim Kadlec

JS Animation Seb Lee-Delisle

Mystery Speaker Somebody you definitely know, and respect.

That’s quite a speakers line-up, with topics ranging from live CSS/JavaScript coding to live lettering.

Conference

Conf + Workshop

Conference Tickets

C$699Get Your Ticket

Two days of great speakers and networking Check all speakers →

Conf + Workshop Tickets

Save C$100 Conf + Workshop

Three days full of learning and networking Check all workshops →

Workshops At SmashingConf Toronto

On the two days before and after the conference, you have the chance to dive deep into a topic of your choice. Tickets for the full-day workshops cost C$599. If you combine it with a conference ticket, you’ll save C$100 on the regular workshop price. Seats are limited.

Workshops on Monday, June 25th

Sara Soueidan on The CSS & SVG Power Combo The workshop with the strongest punch of creativity. The CSS & SVG Power Combo is where you will learn about the latest, cutting-edge CSS and SVG techniques to create creative crisp and beautiful interfaces. We will also be looking at any existing browser inconsistencies as well as performance considerations to keep in mind. And there will be lots of exercises and practical examples that can be taken and directly applied in real life projects.Read more…

Sarah Drasner on Intro To Vue.js Vue.js brings together the best features of the Javascript framework landscape elegantly. If you’re interested in writing maintainable, clean code in an exciting and expressive manner, you should consider joining this class. Read more…

Tim Kadlec on Demystifying Front-End Security When users come to your site, they trust you to provide them with a good experience. They expect a site that loads quickly, that works in their browser, and that is well designed. And though they may not vocalize it, they certainly expect that the experience will be safe: that any information they provide will not be stolen or used in ways they did not expect. Read more…

Aaron Draplin on Behind The Scenes With The DDC Go behind the scenes with the DDC and learn about Aaron’s process for creating marks, logos and more. Each student will attack a logo on their own with guidance from Aaron. Could be something you are currently working on, or have always wanted to make. Read more…

Dan Mall on Design Workflow For A Multi-Device World In this workshop, Dan will share insights into his tools and techniques for integrating design thinking into your product development process. You’ll learn how to craft powerful design approaches through collaborative brainstorming techniques and how to involve your entire team in the design process. Read more…

Vitaly Friedman on Smart Responsive UX Design Patterns In this workshop, Vitaly Friedman, co-founder of Smashing Magazine, will cover practical techniques, clever tricks and useful strategies you need to be aware of when working on responsive websites. From responsive modules to clever navigation patterns and web form design techniques; the workshop will provide you with everything you need to know today to start designing better responsive experiences tomorrow. Read more…

Workshops on Thursday, June 28th

Eva-Lotta Lamm on Sketching With Confidence, Clarity And Imagination Being able to sketch is like speaking an additional language that enables you to structure and express your thoughts and ideas more clearly, quickly and in an engaging way. For anyone working in UX, design, marketing and product development in general, sketching is a valuable technique to feel comfortable with. Read more…

Nadieh Bremer on Creative Data Visualization Techniques With so many tools available to visualize your data, it’s easy to get stuck in thinking about chart types, always just going for that bar or line chart, without truly thinking about effectiveness. In this workshop, Nadieh will teach you how you can take a more creative and practical approach to the design of data visualization. Read more…

Rachel Andrew on Advanced CSS Layouts With Flexbox And CSS Grid This workshop is designed for designers and developers who already have a good working knowledge of HTML and CSS. We will cover a range of CSS methods for achieving layout, from those you are safe to use right now even if you need to support older version of Internet Explorer through to things that while still classed as experimental, are likely to ship in browsers in the coming months. Read more…

Joe Leech on Psychology For UX And Product Design This workshop will provide you with a practical, hands-on way to understand how the human brain works and apply that knowledge to User Experience and product design. Learn the psychological principles behind how our brain makes sense of the world and apply that to product and user interface design. Read more…

Seb Lee-Delisle on Javascript Graphics And Animation In this workshop, Seb will demonstrate a variety of beautiful visual effects using JavaScript and HTML5 canvas. You will learn animation and graphics techniques that you can use to add a sense of dynamism to your projects. Read more…

Vitaly Friedman on New Front-End Adventures In Responsive Design With HTTP/2, Service Workers, Responsive Images, Flexbox, CSS Grid, SVG, WAI-ARIA roles and Font Loading API now available in browsers, we all are still trying to figure out just the right strategy for designing and building responsive websites efficiently. We want to use all of these technologies and smart processes like atomic design, but how can we use them efficiently, and how do we achieve it within a reasonable amount of time? Read more…

Location

Maybe you’ve already wondered why our friend the Smashing Cat has dressed up as a movie director for SmashingConf Toronto? Well, that’s because our conference venue will be the TIFF Bell Lightbox. Located within the center of Toronto, it is one of the most iconic cinemas in the world and also the location where the Toronto Film Festival takes place. We’re thrilled to be hosted there!

The TIFF Bell Lightbox, usually a cinema, is the perfect place for thrillers and happy endings as the web writes them.

Why This Conference Could Be For You

SmashingConfs are a friendly and intimate experience. It’s like meeting good friends and making new ones. Friends who share their stories, ideas, and, of course, their best tips and tricks. At SmashingConf Toronto you will learn how to:

Make full advantage of CSS Variables,

Create fluid animation effects with Vue,

Detect and resolve accessibility issues,

Structure components in a pattern library when using CSS Grid,

Build a stable, usable online experience,

Design for cross-cultural audiences,

Create effective and beautiful data visualization from scratch,

Transform your designs with psychology,

Help your design advance with proper etiquette,

Sketch with pen and paper,

… and a lot more.

Download “Convience Your Boss” PDF

We know that sometimes companies encourage their staff to attend a different conference each year. Well, we say; once you’ve found a conference you love, why stray…

Think your boss needs a little more persuasion? We’ve prepared a neat Convince Your Boss PDF that you can use to tip the scales in your favor to send you to the event.

Diversity and Inclusivity

We care about diversity and inclusivity at our events. SmashingConf’s are a safe, friendly place. We don’t tolerate any disrespect or misbehavior. We also provide student and diversity tickets.

See You In Toronto!

We’d love to meet you in Toronto and spend two memorable days full of web goodness, lots of learning, and friendly people with you. An experience you won’t forget so soon. Promised.

(cm)

0 notes