Latest Items
- From Ember to React — Part 1: Data fetching optimization for react-router nested routes
From Ember to React — Part 1: Data fetching optimization for react-router nested routesWhile refactoring a section of our React app at HealthTree I stumbled upon a common use-case where a parent route/component could potentially share (part of) his data context with his children components, something like: | <Route path> | Component | API call | |--------------|----------------|--------------------| | /tasks | <TaskList ...> | GET /api/tasks | | /tasks/:id | <Task ...> | GET /api/tasks/:id |As a newcomer, the obvious way to handle this in React (& react-router) is to have data fetching logic in both components’ lifecycle methods: https://medium.com/media/8ac23fd22e6903cc659ffa1160fb5bdf/hrefFor some use-cases like this one, data fetched in the first component can be re-used for the second one, thus we have an opportunity to potentially save some bandwidth and improve user experience! After Googling a bit, I found this approach to send state to a route via the Link component: https://medium.com/media/9c11de14c064ee8dbab64d434ea65c4a/hrefThat’s cleaner, as we only load the task once, but having to use this.props.location to pass data looks weird, and also this doesn’t solve the fact that it breaks deep linking inside our app! as navigating to the URL or refreshing it will fail to get the state context. Cross-pollination...
Continue reading... - Import Apple Health
Our main goal with Sundly is to empower people by owning and being in full control of their personal health records. One of the items in our public roadmap was to have a way to import medical records from existing apps, such as as Apple Health. Among other features in our backlog, we asked Twitter for feedback on how to prioritize the development: https://twitter.com/getsundly/status/1079109967762776064We’re please to announce a MVP version of such functionality, check out the following video or the steps ahead: https://medium.com/media/f2f8fc3a0fe814dee397272bf1b7002e/hrefStep by StepOpen Apple Health in iOSProfile > Export Health DataUnzip export_cda.xml fileOpen Sundly > Sign inGo to Settings > Click “Import CDA” buttonSelect file export_cda.xmlImport Apple Health was originally published in Sundly on Medium, where people are continuing the conversation by highlighting and...
Continue reading... - How we hacked a prototype before lunch
We recently had a 3-day Design Sprint at Ecaresoft. The challenge was about tackling the prioritization of incoming bug fixes, feature requests, technical support, etc… (psst… want to learn what a Design Sprint is? check this out: https://designsprintkit.withgoogle.com) Naturally, there are already existing solutions in this particular space, like ZenDesk, Jira, FreshDesk, etc. Without entering into many details, we already use some solutions internally at Ecaresoft. Therefore we didn’t want to simplify the whole design sprint output as simply deciding to use new tools, we could do better. Fast forward to the last part of the design sprint, it consists on throwing out a prototype of the ideas gathered in the prior days. We narrowed the solution components into 3 mini-teams: Design: MockupAlgorithm: PrioritizationTechnology: Proof of ConceptWe took the tech side of things and started to research about existing tools to get the job done. We didn’t want to just use existing solutions and stitch ’em together (with Zapier, for example), but we also didn’t wanted to throw many lines of code for a simple prototype. We considered falling back to Airtable or Coda.io, but the use case was too complex for these tools. Meet RetoolRetool is a new startup tackling the challenge of creating simple “internal” apps with few clicks and even fewer lines of code (or none), a concept know as “visual programming”. Literally its founders want it to be the Visual Basic of Web 2.0! When we show Retool to people, they often think “oh! it’s visual basic for the web!”. And in...
Continue reading... - gist:08162f1182845d3d41a494182044640aVerifying my Blockstack ID is secured with the address 1DAj3qXbJRVG6WTSAJv7DSSN6f5uVwFqBG https://explorer.blockstack.org/address/1DAj3qXbJRVG6WTSAJv7DSSN6f5uVwFqBG
- Hacking a Trello card velocity tracker with Glitch
At Nimbo X we use Trello to keep track of our Kanban development pipeline. We needed a way to track the card velocity/cadence of our development team. Unfortunately most existing products weren’t free and offered much more functionality. The ones free were outdated or mediocre at best.
I remixed a Trello card velocity trackerusing Glitch. I’m very impressed how easy it was, definitely feels like the future for collaborative coding & quick hacking.
Code: https://glitch.com/edit/#!/trello-cards-velocity
App: https://trello-cards-velocity.glitch.me/
https://trello-cards-velocity.glitch.me/ Hacking a Trello card velocity tracker with Glitch was originally published in The Backlog by Ecaresoft on Medium, where people are continuing the conversation by highlighting and responding to this story.
- Creating a serverless web app with Airtable, Glitch, Node.js, Surge.sh & Ember.js
Continue reading...TL;DR;In this post I show how I built a serverless CMS/Blog system based entirely on free and modern PaaS services such as Airtable, Glitch (formerly Gomix, Hyperdev) & Surge.sh.The end result is:https://medium.com/media/c04f0af49229ba610972f9f1c18d4b35/hrefYou can visit it at: http://caring-eggs.surge.sh/And check out the source code:Frontend: https://github.com/benoror/experiment_blog_xt014_dProxy: https://github.com/benoror/proxy_blog_xt014_d & https://glitch.com/#!/project/keen-gorillaOk, tell me more…Lately I’ve been thinking how server code is becoming less and less relevant each day, and how everything you needed to code back in the day is now offered as a cloud service at your disposal, such as:Authentication/authorization (Auth0, Twilio), asset hosting (AWS S3), database (Firebase, Airtable), AI (google prediction API), payment processing (Stripe), etc…The remaining parts of your app, the ones that make you “unique”, can be written in isolated & scalable modules in any language and/or framework of choice, which nowadays can be also easily deployed. Such easy-to-deploy, lego-like blocks of functionality can be achieved with modern services such as AWS Lambda, Zeit Now or, what concerns us today, Glitch.Since I’ve been messing around with these ideas for a while, I decided to see how doable it really was by making a PoC:A Markdown Blog system, à la Canvas or Medium, with Airtable as Database/CMSPaaS ArchitectureDisclaimer: I chose services I’m interested in and/or using at the moment, altough the stack can be flexible at every level:Database/CMShttps://airtable.comAlternatives: Fieldbook (see my related post) , Firebase Realtime, etc…Node.js Proxy/Auth Backendhttps://glitch.comAlternatives: Heroku, Zeit Now, Parse, Aerobatic, AWS Lambda, etc…Ember.js SPA Frontendhttps://surge.shAlternatives: Zeit Now, Aerobatic, Firebase Hosting, Pagefront, AWS S3, Github Pages, etc…Designing the Database StructurePosts tablehttps://airtable.com/shrwpGUmpyeRtvpfTAuthors tablehttps://airtable.com/shradskAUbxUeUPhfComments tablehttps://airtable.com/shriWy0K1HdG8qTs9Crafting a nice client with Ember.jsI won’t enter into much details here, but I prototyped a blog app with Ember.js, using my own ember-airtable data adapter addon. If you like to learn more make sure to check out my post about it.I chose Ember.js since it’s the framework we’re currently using at work (Nimbo X), but you can use whatever framework/library you like, say React, Angular, Vue, etc…The Ember app’s source code is available at: https://github.com/benoror/experiment_blog_xt014_dAt this point Ember Data’s Adapter is pointing directly to the Airtable API URL while exposing the secret API token to the browser, which is clearly not an ideal situation.To overcome this issue I decided to pull a trick up the sleeve…Setting up an HTTP ProxyStoring credentials in a server is a good idea to keep them private. Also interesting are the possibilities of this architecture, as we can provide other kind of functionalities at this layer, such as Auth (albeit our experiment might become less serverless), but that’s material for a future post.First I decided to avoid reinventing the wheel and use http-proxy-middleware to redirect request to my Airtable API. The code snippet to accomplish it is:https://medium.com/media/31890724b2289367316618c0452d2325/hrefDeploying the thingy…Deploying an app into Glitch is a breeze, as you can import the code from a Git repository, or edit it directly in the browser:Storing secretsWith Glitch you can set .env file with the API secrets, visible only to you:Tip: If you decide to use Zeit Now they recently announced support for environment variables and secrets!Now we can change our Ember adapter accordingly:Surge.shAs usual business, deploying to Surge.sh is a piece of cake. We can see the application running immediately afterwards:... - Node.js Airtable API Proxy
Continue reading...var express = require('express');var proxy = require('http-proxy-middleware');var options = {logLevel: 'debug',target: 'https://api.airtable.com/v0/' + process.env.APP_ID,changeOrigin: true,headers: {'Accept': 'application/json','Authorization': 'Bearer ' + process.env.API_KEY},pathRewrite: {'^/api' : ''},secure: false,ssl: {rejectUnauthorized: false}};var apiProxy = proxy(options);var app = express();... - Ember & Electron for Desktop Apps
Recently at Nimbo X we realised our end users would greatly benefit from having a “Desktop-like experience” when using our app, so we set ourselves to produce a first version of it. In this post we’ll explain our experience from a technical point of view. Download it now for OS X & Windows Publishing it to the “App Stores” distribution channels is still a work in progress, which deserves a post for itself, where we’ll narrate the bureaucratic experience while submitting the app.Meet Electron ⚛electron.atom.ioElectron is a runtime environment based on Node.js & Chromium. It allows creating desktop applications using regular web technologies, giving them access to the filesystem, hardware, OS notifications, etc. Ember + ElectronThe awesome ember-electron addon by Felix Rieseberg allowed us to quickly build app executables for major platforms by simply running: ember electron:packageIt wraps other amazing tools, like ember-packager and electron-osx-sign, into a single easy-to-use package. Other tools we relied on were: <a...
Continue reading... - 2do Meetup Ember Monterrey — Overview: EmberCLI, Ember Data, JSON API & Mirage
https://medium.com/media/66b11acda714ae47a108697fcf538112/hrefUna de las primeras preguntas que nos hacemos como developers después de aprender lo básico de un framework front-end como Ember es: Cómo creamos aplicaciones para problemas reales, con un backend y una base de datos como cimientos que nos permitirán escalarla?Ember Data es una capa de abstracción que nos permitirá conectar nuestra aplicación SPA (client-side) con nuestro backend API de manera transparente, asegurando la mayor compatibilidad y la menor fricción posible. Sin embargo es común que durante la etapa de prototipeo alguna de las siguientes situaciones se presenten: No somos/tenemos desarrolladores backendAun no se ha decidido el stack (proveedores, arquitectura, base de datos, framework)Tiempo y recursos limitadosPor estas y otras razones es conveniente usar una herramienta como ember-cli-mirage para contar desde un inicio con un API que asemeje al real, lo que nos permitira: Ser agiles al crear, adaptar y descartar ideas rapidamenteBest practices desde el inicio: TDD (Test-driven development)Productividad y escalabilidad de equipos de desarrolloSlidesOVERVIEW: EMBER-CLI, EMBER DATA, JSON API & MIRAGE by Benjamin Orozco...
Continue reading...
Generated at Nov 9, 2026, 5:10 PM