DEV Community: Daniel Madalitso Phiri

Articles that made my Week #008 & #009 - 😢

Daniel Madalitso Phiri — Fri, 03 Apr 2020 11:00:02 +0000

Hey! Getting into the week I hadn't published my weekly blog post on time and felt really sad about it. I hate that I haven't been consistent enough with these mini updates. I don't feel like I'm the most motivated at the moment.. but really who is?

Something nice happened though!

// Detect dark theme var iframe = document.getElementById('tweet-1243251471015129088-71'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1243251471015129088&theme=dark" }

Last week was err tough too! A lot of my time went into getting this article about my career up. Loving writing it. Definitely different.

DevRel to Me...

Daniel Madalitso Phiri ・ Apr 1 '20

#devrel #community #career

So jumping right into it. I'm happy that I have been reading content I should be. As a conference and developer event organizer I'm really getting into running events online seeing as offline isn't possible at the moment. I love a good hackathon and this article by Arkodyuti is super informative for anyone in the developer events space.

How to host successful Online Hackathons🎉

Arkodyuti Saha ・ Mar 26 '20

#hackathon #github #opensource #devrel

This is a little cheeky but I really liked reading the articles I wrote. I didn't write up my mini update because I was busy writing articles, coping and healing. So sharing these was really nice, and hearing that people loved reading them was even better. So if you want it. Last weeks article is here.

Articles that made my Week #007 - Sorta

Daniel Madalitso Phiri ・ Mar 24 '20

#career #watercooler

The folks at Orbit are great!! Their newsletter is always fun and engaging. This particular release though mentioned a tool I love - auxparty. It's one of the only thinks keeping sane right now and they shared how you can add the audio from an auxparty to a Zoom call and I'm here for it. There's a lot more though, check it out.

The Observatory #3: Hot takes and cool tools for building community remotely

Patrick Woods for Orbit ・ Mar 24 '20

#devrel #community

Networking in Docker can be nightmare, I'm working on some Docker content and I'm trying to get as much information as I can before putting anything out. Check out Maxim (who has the coolest username btw) and his article to get you past those networking blues.

4 Reasons Why Your Docker Containers Can't Talk to Each Other

Maxim Orlov ・ Mar 26 '20

#docker #node #webdev #devops

I'm slowly getting back into my rhythm so I'm happy about that. How was your week?

DevRel to Me...

Daniel Madalitso Phiri — Wed, 01 Apr 2020 04:36:26 +0000

Amidst interviewing for my next developer relations gig I kept asking “What does all this mean to me?" It wasn’t until early in 2020 that I got the answer to this. I was at a launch party for a product and someone clearly in finance asked me what I do. Developer Relations felt too vague and like vomit out of a baby awkwardly I said “I do growth for SaaS startups”. That night was over, thankfully! A few days later I found myself on a quick call with Kelsey Hightower. He does these amazing office hours now and then. During our chat, we went deep into modern software development, tooling and how developer relations ties into everything. As with almost every conversation around developer relations, metrics came up and I was left with so much to think about. This article is a result of that conversation.

I won't lie, even though I was doing so much community work before getting into developer relations. For the most part it only looked appealing to me because everyone made it seem like I would be traveling and speaking all the time. Spoiler alert, most of the time I wasn’t and you probably won’t either. The most people facing of our kind are obviously noticed and it reinforces the idea that really, that is all there is to developer relations. These two tweets sum it up.

// Detect dark theme var iframe = document.getElementById('tweet-1063745195223724033-840'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1063745195223724033&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1167054172899938306-875'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1167054172899938306&theme=dark" }

I write this because I feel like so many people new to the field, particularly younger, less experienced folk feel they’ll travel the globe and go stage-to-stage - sharing your experiences with the masses or writing killer articles one after the other (I know I did). When I talk to hiring managers for DevRel positions, they all see promising candidates concentrate on a very small part of the job. According to them, that is usually a red flag. So many miss some of the finer more process oriented parts of the job. Funny enough, these have become my favorite part of it all. I was curious to know what effect my activities as a developer relations professional had on the companies I worked for. My professional experience started off with a part-time role at Hasura before shifting into a full-time role at PubNub and eventually into full-time consulting which I do at the moment. I wouldn’t have a short answer for you if you asked me what a day in any of these roles looks like, hopefully you get that out of what I have to say next. My modest and somewhat broad DevRel experience has brought out three key words for me.

Awareness | Adoption | Revenue

Remember when I said I do growth for startups? Bet…

Nothing drives growth like a good and well refined product that people actually want. Getting there however is another story. I think this is where DevRel shines. Done right, collaboration with multiple departments, the ability to advocate for both the community (sometimes customers) and the company creates some of the best products and communities. Most times, if not all - a welcoming and inclusive community is all it takes to put you ahead of the pack. How? Every internet entrepreneur shouts out “Don’t sell a product, sell a solution.” As ubiquitous as that phrase has become it does hold some truth. Now I have to point out that DevRel isn’t all about driving sales. If we’re honest with ourselves, we know that we work for companies that need to make payroll somehow. You can’t run on VC money forever. I’m not telling you to start selling to your open source community - please don’t. More often than not, DevRel does help drive the growth of some sort of metric that is important for the company. If it doesn’t then you might have a problem. Where am I going with this? DevRel gives you the unique ability to refine your product while growing a community of people who will/want to actually use it. How?

Three syllables - stra-te-gy

When coming up with a team strategy, it is important to get a good idea of what stage your products are at. Keeping in mind different products can be in different stages and you will have to tweak your actions to suit them. While also remembering that in everything you do, you must have your communities best interests at heart. Back to those three stages i.e Awareness, Adoption, Revenue Generation. From my experience companies want to drive at least one of these in one way or another.

Awareness is getting people to know about you exist
Adoption is getting people to actually use your product
Revenue Generation is getting your product to make money

Before getting deeper into each and the the actions associated or that represent them. I think it is worth mentioning that the core of developer relations are advocacy and community enablement. Advocacy means you might have to work with a few departments here and there. Departments like marketing, product and yes sometimes sales. The aim here of course being to advocate for your community inside various departments and to do the same for your company and some teams to your community. Community enablement is at least in my opinion, best achieved with some sort of community management. An efficient feedback loop between your community and company better serves the needs of your community. More importantly, it also drives product refinement. I find applying various principles of community management necessary.

To me, initially awareness & adoption sounded very similar. Luckily for me the difference became more apparent as I got deeper into both. Taking a step back, my experience with the different stages of DevRel made me realize that each requires a different skill-set & a different approach.
In awareness we’re trying to get people to know about the company, the product, we’re doing things like event sponsorship, stickers, t-shirts, conference talks, banners, blog posts and the whole lot. The concept of developer personas was a little confusing for me. Driving adoption of a product helped me realize what events make sense in terms of content and approach. I had to adjust for different types of developers and ecosystems whilst trying not to get caught in the ROI trap. I developed my own writing style, built processes around my activities - fun times. I definitely think if you have the resources, keeping these things in mind can really help you get a candidate the speaks to your strategy and what your team or company are trying to achieve. This helped me discover a tonne of cool developer spaces and ecosystems and understand how the dynamics of each are different.

For me, simply put - adoption sees you try and get more developers using your product. This might be getting developers moving from just trying it out to possibly using it in production. Sometimes it might even be trying to find out why people aren’t using your product a certain way & working towards fixing that. In my experience, when driving adoption, people are aware of your product or tool but aren’t really captivated by it. At this stage it makes more sense to add nuance into how you approach content and engagement. I started to do much smaller and more personal meetups/user groups and webinars. If you’re at adoption, your community must have grown quite a bit. Lurking around Slack or StackOverflow answering questions becomes your life. How-to guides, documentation refinement and detailed tutorials make perfect sense for this stage, it's the small things that matter. I loved my experience with driving adoption, I think it was extremely important. It was here that I really started to get feedback to drive product refinement and in hindsight, company growth. I noticed how I grew and became more empathetic to pain points developers face. Trying out non-traditional means of content creation was also very rewarding.

Revenue - when they say DevRel takes time, they mean it. Not to say that revenue is the endgame for everyone, it is for most. People need to be aware, before they can adopt and you can refine, then you can sell. Driving revenue is a little different for different companies. It depends on how they’re getting this revenue. I like to ask things like this because if it’s my job to do it, I must be in the know. Does revenue come from a subscription? Enterprise users? Support? When you know this then you can build a strategy around it. Sometimes it requires less flashy actions & more deliberate actions to even engage individually with specific customers or users. It can be tricky talking about money, pricing and payment plans. Luckily I’ve never had to but nonetheless it is information you must know - thus the revenue question.

I choose to see my experiences with each stage, adjusting to the activities and getting new skills as me growing professionally. The DevRel career path is still being paved. For me doing things like growing and engaging different communities, discovering different ways to look at and approach various customer problems, and reporting to execs all look like things that leave some very nice career doors open for me. So now that you see that developer relations isn’t all talks and stickers, here is what I take it to be.

Awareness is getting eyes and attention. You usually see people work more with the marketing team. Ideally I'd call them evangelists. Adoption is getting users and improving retention. You usually see people work more with the product or developer experience team. Ideally I'd call them advocates Revenue is getting sales, ensuring developer happiness and reducing churn. You see such a person work a little more closely with sales or customer success. Ideally I would call them solutions or happiness engineers.

When you consider these, you don’t really care about the title you have. What matters is getting where you need to go and how you get there. Of course making sure your community is at the core of those plans. That is DevRel to me...

Do say hello on Twitter if you want to keep the discussion going or contact/hire me. I’m more than happy to engage. Stay safe and take care.

Articles that made my Week #007 - Sorta

Daniel Madalitso Phiri — Tue, 24 Mar 2020 06:41:29 +0000

Hey! So I'm trying to setup my week so I can publish this 3 days earlier. I'm trying to get back to doing this Friday nights.

Before I continue. This is last weeks article.

Articles that made my Week #005 & #006 🤭

Daniel Madalitso Phiri ・ Mar 15 '20

#career #watercooler #todayilearned

Sort of looking back to why I started doing this. I wanted to be consistent and intentional with what I'm consuming and doing this every week was my way of remaining aligned with my goals both professionally and personally. I love doing it, I go back and read the ones I've done before this. Lately though life has just been harder than usual and even though routine in a time like this has been advised. It is insanely hard to follow at the moment. I won't lie... I didn't read much this week. I've been battling with very unexpected rejections, having to self isolate. It's a hard time for everyone, sending out good vibes!

Back to this, I use this as a diary. I gauge past week, like Dev as a Diary (DaaD) and I guess this is just a reflection of where I'm at. I want to use this as a reset for the week. Rekindling the flame! I'll share articles I've written recently and hopefully they can make your week.

Vuex: Why We Need SPA State Management

Daniel Madalitso Phiri ・ Mar 12 '20

#vue #webdev #tutorial #javascript

Dynamic Styling in Vue.js: Inline CSS

Daniel Madalitso Phiri ・ Mar 5 '20

#vue #webdev #css #todayilearned

Event Triggered GraphQL: Making Static Sites Dynamic

Daniel Madalitso Phiri ・ Feb 5 '20

#graphql #hasura #gridsome #vue

Building a Realtime Collaborative Microsoft Paint

Daniel Madalitso Phiri ・ Feb 12 '20

#javascript #tutorial #webdev #showdev

Just some of my writing over the last month.

If they do make your week. Let me know - it'll make my week. Have great one!

Articles that made my Week #005 & #006 🤭

Daniel Madalitso Phiri — Sun, 15 Mar 2020 11:29:11 +0000

I want to start this by saying I'm sorry??

As you can see! I've merged two posts into one! I missed last weeks post - time is quite the thing... very unpredictable. It's been a really tough few days, really busy too! Yet here we are!

Per the newly minted tradition, this is last weeks article.

Articles that made my Week #004

Daniel Madalitso Phiri ・ Feb 29 '20

#career #watercooler #todayilearned

So if you've been watching (or reading), I've really committed to this writing thing. I want to get better at it do it right and make sure it serves me or at least adds value to the people around me. Rachel was pretty spot on with this!

Better Blogging - Building Your Brand

Rachel ・ Mar 13 '20

#writing #productivity #career #beginners

This week has been tough - interviewing, finishing up projects and trying keep my health in check it's only normal that some thoughts of inadequacy pop up. I dealt with them as best as I saw fit but Sarahs article was so nice to read, a quick reminder to compare myself to.. myself? I wrote up all my experience and work and immediately felt so much better. Sometimes we just need a boost.

You're Better Than Your Impostor Syndrome

Sarah Beecroft ・ Mar 12 '20

#beginners #codenewbie #motivation #100daysofcode

You might not be aware, at the moment I'm jobless. It's not as sad as it sounds lol but yeah it can be hard to feel technically proficient amidst the hoops of interviewing but it is still very important to stay on top of your game, there are some really cool tips by Hassan in his article. Staying positive can be hard especially with everything going on in life, I'm just learning to take it as it comes.

Developers: How to stay on top of your game even without a job.

Hassan Sani ・ Jan 24 '20

#learning #recruiting #developer #growing

This one is pretty straight forward, being a community manager right now is tough. Having to switch from in-person meetups to online ones can be a lot! There's a lot to consider and Brian was kind enough to share his vast experience with everyone.

Tips for Running Virtual Meetups and Events

Brian Rinaldi ・ Mar 12 '20

#career #discuss

A few weeks ago, I was building a CI/CD pipeline for my package dzina the experience has great and writing tests to add to it was dope! Adding more tests to my applications has been at the back of my mind since. Andrea Stagi did a pretty thorough tutorial for testing Vue.js applications. You don't see much content on that.

Writing a Vue component using TDD: a gentle introduction

Andrea Stagi ・ Mar 5 '20

#vue #typescript #tdd #tutorial

Like the article says we probably don't think too much about deploying single page applications - stuff like Netlify or Zeit make everything so easy. I've been working a lot with Docker lately and this article sort of cemented a lot of my thoughts around the idea. Might just do it for Vue.js. Thank you Bruno Paulino for sharing!!

Dockerizing React Apps

Bruno Paulino ・ Mar 3 '20

#react #docker #webapp #devops

Will wrote a really good article that sort of takes you back to the earlier days of software development. It's always good to hear the perspectives of people who have been doing something for a long time. To me it spoke to not losing touch to yourself. That is extremely important.

Coming back to development after a decade away

Will👨🏾‍💻✨(he/they) ・ Mar 3 '20

#beginners #codenewbie #career #blog

That's been my two weeks. How were yours?

Vuex: Why We Need SPA State Management

Daniel Madalitso Phiri — Thu, 12 Mar 2020 17:57:47 +0000

One of the most beautiful things about Vue.js is the relative simplicity it brings to modern web development, building Single Page Applications has never been easier. JavaScript frameworks like Vue came with component based design patterns. Whole web applications are just a collection of individual pieces (components) sharing data, the bigger the application gets, the harder it is for data to remain consistent and be managed in each individual component. This data is commonly referred to as application state. For Vue.js, Vuex is the most widely used state management library, today we’ll go into adding and integrating Vuex into a Vue.js applications.

Not only does Vuex work as a central store for your application state, it sets rules to ensure data is changed in a way that is expected. Vuex ensures your views remain consistent with your application data. Don't worry if this doesn't make sense now, it'll all come together as we go on and build something.

As an semi-regular conference and event goer, I tend to meet a bunch of people, during our interactions I agree to do certain stuff that I most certainly always forget. So we’re going to build something literally no one else but me will use - a reminder (glorified to-do list) app.

Before we dive into it, here’s a few things you’ll need:

Basic knowledge of Vue.js
Node.js and Yarn installed

Alright!! We’ve already covered what Vuex does and why it does it. We need to setup our project, open your terminal and type vue create <project-name> to do so, you’d need the Vue CLI installed. If you don’t have that installed you can get it here. Select the default project setup and once everything is done and we have our project initialized, run cd <project-name> and yarn serve. You should see your usual vue starter page

After getting this running, we need to add vuex to our project. In your terminal, type vue add vuex and after, you should see your directory structure change quite a bit. As with most state management tools, Vuex has a central store/single state tree to store application state, ours is in the src folder, you get a store.js file or a store folder with an index.js file. If not you can create them and paste the following code in



    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    export default new Vuex.Store({
      state: {
      },
      mutations: {
      },
      actions: {
      }
    })

You will also see a change in src/main.js, as we import the store. If not, paste the following code,



    import Vue from 'vue'
    import App from './App.vue'
    import store from './store'
    Vue.config.productionTip = false
    new Vue({
      store,
      render: h => h(App)
    }).$mount('#app')

At this point looking at store, you’re probably wondering what all the sections are for. We’ll briefly go over them before we can go deeper.

State: Application state is the data your application uses.

Mutations: Synchronous method of changing store state and directly commit to change state.

Actions: Commit mutations and give way for for asynchronous operations.

bonus

Getters: Computed properties derived from store state.

Don’t worry if it doesn’t all make sense now, we’ll get into building to make it easier. We’ve just added Vuex to our project, now we have to test it. We’ll start out by defining some data for our store. In your store, we’ll define a new data property called username by pasting username: "danielphiri" into the state portion of our store. We want to make this show on our webpage, in HelloWorld.vue, clear the tag and paste the following



    <template>
      <div>
        <h1> {{ username }} </h1>
      </div>
    </template>

In the <script> section of the same file, we need to add import mapState from 'vuex' and paste the following



    computed: {
        ...mapState(["username"])
      }

We should then see the value we kept in our store displayed on the screen.

Now getting into the core of the reminder app we want to build, we will need to be able to input task details and who we need to perform them for. We should also be able to dismiss all tasks or individual tasks. We need to conceptualize a data model for the state so we know what data we’re using up in the HTML portion of our application. In your store, paste the following code



    state: {
        username: "danielphiri",
        tasks: [
          { taskName: "take pictures", taskReciever: "mom and dad" },
          { taskName: "email organisers slides", taskReciever: "myself" },
          { taskName: "send resume", taskReciever: "dev job" },
        ]
      },
      mutations: {
        ADD_TASK: (state, task) => {

          state.tasks.push(task);
        },
        REMOVE_TASK: (state, task) => {
          state.tasks.splice(task, 1);
        },
      actions: {
        removeTask: (context, task) => {
          context.commit("REMOVE_TASK", task);
        },
      }

In our state, we define a username and an array that holds our tasks and related data. We define two mutations, ADD_TASK which changes the state by adding a task to the tasks array, and REMOVE_TASK that removes a task from the tasks array. Lastly we define an action removeTask that gives the option a remove tasks asynchronously with some custom logic. You will notice the context object as the first argument in removeTask, actions in vuex use context which gives them access to store properties and methods like context.commit() which it used to commit a mutation.

To get started we’ll create a component to allow us to input tasks and display them as well as remove them. Let’s call this Main.vue and we’ll paste the following code in the <script> section:

Don’t forget to add your Main component to your App.vue file.



    <script>
    import { mapState, mapMutations, mapActions } from "vuex";
    export default {
      name: "Main",
      data() {
        return {
          taskName: "",
          taskReciever: "",
        };
      },
      computed: {
        ...mapState(["tasks", "username"])
      },
      methods: {
        ...mapMutations(["ADD_TASK"]),
        ...mapActions(["removeTask"]),
        addTask: function() {
          let newTask = Object.create(null);
          newTask["taskName"] = this.taskName;
          newTask["taskReciever"] = this.taskReciever;
          this.ADD_TASK(newTask);
          this.taskReciever = "";
          this.taskName = "";
        },
        removeTasks: function(task) {
          this.removeTask(task);
        }
      }
    };
    </script>

At the top of the file, you will notice that we import a couple of helper functions. They’re all pretty similar in functionality, mapState for example helps us map store state to local (component) computed properties. So mapMutations does the same for store mutations and mapActions for store Actions. We go on to use mapState to enable us display “username" and “tasks" in our component. We also use mapMutations in the methods property so we can call store mutations as functions with parameters as we did when we defined addTask() which we use to perform mutations while passing the newTask object as a parameter.

In the section of our Main.vue, we paste the following code



    <template>
      <div class="home">
        <div class="hello center">
          <div >
            <h1 class="header-text"> Hi 👋, {{ username }}</h1>
            <h3 class="header-text"> Add a few tasks</h3>
            <form @submit.prevent="addTask">
              <input class="input" type="text" placeholder="I'm supposed to.." v-model="taskName" />
              <input class="input" type="text" placeholder="for this person..." v-model="taskReciever" />
              <button class="add-button" type="submit" placeholder="Add task to list">Add task to list</button>
            </form>
            <ul>
              <li v-for="(task, index) in tasks" v-bind:key="index">
                {{ task.taskName }} for {{task.taskReciever}}
                <button
                  v-on:click="removeTasks(index)"class="remove">Done ✅</button>
              </li>
            </ul>
          </div>
          <div class></div>
        </div>
      </div>
    </template>

We can directly interpolate our username from store because we mapped it as a computed property using mapState, the same goes for the tasks. We use v-for to loop over the tasks array from our store and display all our tasks their properties i.e taskName and taskReciever . We also use a form to mutate tasks to our store. On submit (@submit) a.k.a when we press the button after filling in tasks, we call the addTask method which then changes our state by adding whatever we input to the tasks array. Optionally you can add a style section by pasting this



    <style>
    html,
    #app,
    .home {
      height: 100%;
    }
    body {
      background-color: #050505;
      margin: 0;
      height: 100%;
    }
    input {
      border: none;
      padding: 5%;
      width: calc(100% - 40px);
      box-shadow: 0 3px 3px lightgrey;
      margin-bottom: 5%;
      outline: none;
    }
    .header-text {
      color: #e9e9e9;
    }
    .add-button {
      border: none;
      border-radius: 2px;
      padding: 5%;
      background-color: #0cf50cbb;
      box-shadow: 0 2px 2px #fff;
      width: calc(100% - 100px);
      margin-bottom: 2%;
      outline: none;
    }
    .main {
      display: grid;
      grid-template-columns: repeat(2, 50%);
      grid-template-rows: 100%;
      height: 100%;
    }
    .center {
      display: flex;
      justify-content: center;
    }
    .left,
    .right {
      padding: 30px;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    ul li {
      padding: 4%;
      background: white;
      margin-bottom: 8px;
      border-radius: 5px;
    }
    .right {
      grid-area: right;
      background-color: #e9e9e9;
    }
    .remove {
      float: right;
      text-transform: uppercase;
      font-size: 0.8em;
      background: #050505;
      border: none;
        border-radius: 5px;
      padding: 5px;
      color: #00ff88de;
      cursor: pointer;
    }
    </style>

Save your work and run it you should see this.

Right now, we have some basic vuex operations working but you can’t really tell why we use vuex, we’re only using a single component. Let’s create another compenent called Stats.vue, we’ll use this to display a few stats and show how vuex actions can be properly put to use.

For starters, we want to be able to display the number of pending tasks we have, in our store we can define a getter to do this by pasting the following text below the state object,



    getters: {
        taskCount: state => {
          return state.tasks.length;
        }
      },

We then add another mutation to the store



    REMOVE_ALL: state => {
          state.tasks = [];
        },

This lets us clear every task in our list. Finally in our state, we add another action to the store right below removeTask by adding the following code.



    removeAll({ commit }) {
          return new Promise((resolve) => {
            setTimeout(() => {
              commit("REMOVE_ALL");
              resolve();
            }, 2000);
          });
        }

You notice we define a promise and use setTimeout function to add a bit of a delay (2 seconds) before we commit our REMOVE_ALL mutation. Thus the asynchronous nature of vuex actions. We’re free to play around with the logic that dictates how we perform actions, this could be used in a shopping cart, trading website, chat application - it has so many uses.

Back to our Stats.vue file, we paste the following in the <script> section



    <script>
    import { mapGetters, mapActions, mapMutations, mapState } from 'vuex'
    export default {
      name: 'Stats',
      computed: {
        ...mapGetters(['taskCount']),
        ...mapState(["username"])
      },
      data() {
        return {
          message: ""
        }
      },
      methods: {
        ...mapMutations(['REMOVE_ALL']),
        ...mapActions(['removeAll']),
        removeAllTasks() {
          this.removeAll().then(() => {
            this.message = 'Self care - tasks are gone'
          });
        }
      }
    }
    </script>

In Stats.vue, like we said, we wanted to be able to count how many tasks we have pending. We use the mapGetters helper to display that computed property. In methods, we initialize our removeAll action and REMOVE_ALL mutations as well as define removeAllTasks which remember, has a promise and lets us use the then() prototype to display text once the promise is fulfilled.

In the <template> section of Stats.vue, paste the following code



    <template>
      <div class="stats">
        <h3 class="header-text">Here are your numbers, {{username}} 😬 </h3>
        <p class="header-text">You need to perform {{ taskCount }} tasks fam</p>
        <button class="" v-on:click="removeAllTasks">Nope, can't even..</button>
        <p class="header-text">{{ message }}</p>
      </div>
    </template>

Here we have a button to remove all the tasks and a message that gets displayed when our promise is fulfilled.

Run your app and you should have a pretty nifty web app like this

Conclusion

We went over why we need Vuex, Vuex operations and helpers and built an app using it. We have a functional web app that you can test out here, we say how we can use Vuex to manipulate a single data source and avoid inconsistencies. We built a multi component app and shared data between them,

Should you want to dive deeper in the topic I recommend the following resources.

Check out the full version this on GitHub or CodeSandbox. I hope you enjoyed this and if you have any questions or want to say hi, feel free to tweet at me. Till next time.

Dynamic Styling in Vue.js: Inline CSS

Daniel Madalitso Phiri — Thu, 05 Mar 2020 03:22:40 +0000

If you know me, you know I like Vue.js fro some reason, I don't hide my love for it's simplicity and elegance. I almost always learn something super cool that you can do with it. You know - developers, always learning. Today in my Vue adventures, I'm sharing a brief into to dynamic styling.

I was putting together a project and thought, "Wouldn't it be cool if we could change background colours dynamically by injecting a JavaScript data object into CSS?" - sort of.. A few google searches later I came found that Vue.js supports this.

In the official Vue.js Documentation, it's referred to as Class and Style Bindings

Have a look ✨

Please don't shame me for my crappy CSS, I really had to put this together quick 😖

Anyways I think it's a pretty cool way to do styling for some very specific use cases.

Animating buttons for user actions
Highlighting fields to emphasize a certain flow
Customizing user display options

In my example, I used inline CSS to change the styling of tags. You could change the font size, text decoration or colour. In theory as long as it is a CSS property, Vue can change it dynamically. If you look through the CodeSandbox code, you notice a couple of data properties - textSize,textColor and textDec all interpolated into some inline CSS as a reference value for specific CSS properties and that's it. Super fun.

Note: CSS has uses kebab case (font-size) and that throws errors for inline styling. Vue lets you use the camel case equivalent (fontSize) to style things dynamically just in case you get into some trouble.

We can keep adding a bunch of inline CSS with the data properties but it's messy and does make the most readable code ever. So lets over complicate things (jokes) and go for CSS classes! Hopefully they'll be cleaner.

Just as we did for styling, we can bind classes to HTML in. We'll do that next time with hopefully much better CSS and more real world examples. Let me know if you try it and how it works out for you.

Articles that made my Week #004

Daniel Madalitso Phiri — Sat, 29 Feb 2020 22:11:14 +0000

Hey! Getting into the week I hadn't published my weekly blog post on time and felt really sad about it.

// Detect dark theme var iframe = document.getElementById('tweet-1232247644258521089-951'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1232247644258521089&theme=dark" }

I eventually published it a few days later and was so happy to get the 4 consecutive weeks of writing badge so on wards we goo!

// Detect dark theme var iframe = document.getElementById('tweet-1232684784549273600-908'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1232684784549273600&theme=dark" }

Per the newly minted tradition, this is last weeks article.

Articles that made my Week #003

Daniel Madalitso Phiri ・ Feb 25 '20

#career #discuss #watercooler #todayilearned

I know at the beginning of the these posts, I talked about matching intention with action and looking at what I've been consuming, there's been a huge shift. This week I guess was the worst - having noticed these I changed it soon enough and tried to consume content that actually matches my intentions.

Decided to get up to speed on this, I've built a couple of microservices in the past and I was curious to see how things have changed. I love how James Hickey added a chart of major technologies and how far they are in terms of main stream adoption. Then he gets pretty deep into microservices. It a long read but it's pretty good.

Should I Use A Microservices Architecture?

James Hickey ・ Feb 25 '20

#architecture #microservices #webdev

It's always good to see people share how they've found developer relations. I loved reading about Josh Alphonse and his journey. It made me think about my own journey and since I've been thinking about what has changed for me.

A Few Lessons I've Learned As A Developer Advocate (So Far...)

Josh Alphonse ・ Feb 24 '20

#devrel

ellie-html brought it with this one, I've been playing around with the possibility of putting up a nice site for my music and mixes and I think it was really nice to see what's possible you know. Sometimes we tend to limit ourselves.

CREATING A SPOOKY WEBSITE

ellie-html ・ Feb 22 '20

In thinking about what's next for me, I've been thinking about whether remote work is something I want to do again. So I guess reading this article by Kara Luton made a lot of my feelings around remote work feel valid. I've been craving that in-person interaction and it shows aha.

Reflecting On One Year of Remote Work

Kara Luton ・ Feb 27 '20

#remote #webdev #career

I'll be honest, when I looked at this, I thought Max Ong Zong Bao was going to teach me how to not forget peoples names. Reading into it more, it's really what it says it is - how to remember as a developer. The sprinkle effect of developer blogs though, it's something I forgot about. At the moment I'm learning so much and it was a good reminder to document it because surely enough, future me will forget and I will have to reference something.

How Do You Remember as a Developer?

Max Ong Zong Bao ・ Feb 26 '20

#career #beginners

It wasn't the easiest week, I haven't been well but that little boost at the beginning made me feel so much better. How was your week?

Articles that made my Week #003

Daniel Madalitso Phiri — Tue, 25 Feb 2020 10:14:14 +0000

I figure if you read these then you're pretty aware of what I'm doing :p

Articles that made my Week #002

Daniel Madalitso Phiri ・ Feb 15 '20

#career #discuss #watercooler #todayilearned

I ended up posting it much later than I was supposed to (Friday the 21st Feb). I had quite a busy week with family coming over and my health taking quite the dive. Regardless here it is... also I'm sad that I won't get my 4 weeks of consecutive posting badge as soon as I wanted but hey 🤷

Tomasz Łakomy tweeted asking about what content people are creating and I replied with a few things I'm doing.

// Detect dark theme var iframe = document.getElementById('tweet-1229712929517424641-359'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1229712929517424641&theme=dark" }

It made me think of my npm package and plans I have for growing it. Victor Nogueira brought out some really good points on what to consider when he shared his experience publishing and sharing a package. I don't want to put too much on my plate at the moment but this is definitely something I want to refine.

Article No Longer Available

Zubair Mohsin asked something I've always wanted to. CSS isn't my strongest skill and so many people have mentioned how revolutionary flexbox is, I loved the answers. They pointed me towards some really great resources and cheat sheets.

Explain FlexBox Like I'm Five

Zubair Mohsin ・ Feb 16 '20

#explainlikeimfive #css #webdev

The who idea of JamStack sites always confused me and like I'm just happy Brian Rinaldi put this article out. It gives us a very brief and concise history of the term and what it actually means.

"JavaScript, APIs and markup (the JAM in JAMstack) can describe pretty much every site on the web. Overly generic sounding buzzwords immediately set off most developer's BS detector."

did it for me haha.

Is JAMstack All Branding and Little Substance?

Brian Rinaldi ・ Feb 18 '20

#jamstack #webdev

Headless CMS is another term that always threw me off. I've worked with them without knowing it, reading this article by Gift Egwuenu explains what they are, what they do and which ones are worth using - all things worth knowing if that's your cup of tea.

What’s a Headless CMS and Why Should You Care?

Gift Egwuenu ・ Feb 20 '20

#jamstack #headlesscms

The folks at Orbit are always dropping community gems. I've never seen anyone put out a newsletter on dev.to and as if the idea alone isn't appealing, the content is just so nice and helpful. For a first edition, somethings in the newsletter really caught my eye - the idea of a high gravity community is an interesting one. You should check out the latest edition by Josh Dzielak.

The Observatory #1: High Gravity

Josh Dzielak 🔆 for Orbit ・ Feb 21 '20

#devrel #community

To make up for putting this out late, I added the full five articles lol. How was your week??

Articles that made my Week #002

Daniel Madalitso Phiri — Sat, 15 Feb 2020 15:34:43 +0000

Hello again! I started this thing where I share five articles I read that meant a lot to me for some reason. This is last weeks..

Articles that made my Week #001

Daniel Madalitso Phiri ・ Feb 8 '20

#career #watercooler #discuss #todayilearned

This week has been a little tougher for some reason. Random events, terrible scheduling, below par health and just a bunch of other things. Regardless here they are.

A lot of my week has been spent doing prep and planning for DevCon Zambia (Yes, 6 months before). I've been trying to think about new ways to enable, speak about and promote collaboration in the community. Though not very related, this article by Jeremy Meiss gave me more than a few things to think about and consider.

Broaden your Community and Developer Relations reach through collaboration

Jeremy Meiss ・ Feb 11 '20

#devrel #community

Amrata Ranade makes a return to the list, I'm really enjoying her content. I'm trying to get better at writing, I realized that I'm really good at writing tutorials but really suck at in-depth analysis and opinion pieces. I'm trying to get better and this did help me figure out what I was doing wrong.

How to write a blog post: The four-drafts method

Amruta Ranade ・ Jan 5 '20

#writing #devrel #showdev

Career wise, if you're like me and want to be intentional with what you learn and how that helps you grow then this article will be really good for you. I'm at a stage in life where I just want to work towards being incredibly good at something. This piece by Foundsiders just spoke to that part of me and low-key reignited that flame to excel! Helps stay motivated with the job hunt at least.

When Is the Perfect Time to Move on as a Developer?

Alex Fedorov for Foundsiders ・ Feb 11 '20

#beginners #career #webdev #productivity

On a list of things I've been wanting to go in-depth with, Kubernates is a close second. KodeKlouds idea of a Kubernates walk-through that is both engaging and informative was hard to ignore to be honest. Not to mention the Game Of Thrones vibes, if you're looking to learn too you should check it out.

Learn Kubernetes by Playing the “Game of Pods”

KodeKloud ・ Feb 12 '20

#devops #kubernetes #beginners

It's less than last week but hey, that's been my week - slow. How was your week??

Building a Realtime Collaborative Microsoft Paint

Daniel Madalitso Phiri — Wed, 12 Feb 2020 10:41:27 +0000

I built a thing, tweeted about it and promised to write about it. I didn't until now.

// Detect dark theme var iframe = document.getElementById('tweet-1142457275430461440-457'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1142457275430461440&theme=dark" }

In this tutorial, we’ll be building a realtime collaborative graphics editor to mimic the functionality of the iconic Microsoft Paint on Windows XP. We take the editors basic functionality to manipulate pixels and extend that to multiple users enabling realtime collaboration. Additionally, we want to be able to track the number of users working together on a project at a particular time, as well as create a medium for them to communicate via chat.

At the end of this tutorial, you should have an in-browser graphics editor that looks like this.
Try a demo of it.

The aim of the project is to enable realtime collaboration, with possible use cases on distributed design teams or to classrooms. Powering our realtime collaboration is PubNub, it provides a secure, scalable and reliable realtime infrastructure to power any application through its global Data Stream Network. We'll use the PubNub JavaScript SDK to connect multiple clients using the graphics editor. The goal is to have changes made on clients screens to reflect on all the others.

Prerequisites for Building Collaborative Microsoft Paint

Basic JavaScript knowledge
Node and Npm
A browser like Chrome, Firefox or Safari

To start out, we'll need to create a few files and folders. We need to create the src folder and make two new files - main.css and app.js, we'll get back to these a little later. We'll need a few image assets to make the graphics editor look appealing. In the root directory, create a folder called images, download the image assets and paste them in the images folder. Now we’ll create an index.html file in the root directory and paste the following code:

In index.html, <header> holds our applications menu bar with a save button that enables us to save our work locally. Right after the <header> we have a <section> that houses the controls of our editor, we'll only use the brush option. <section> is followed by a <div> tag with an id of sketch that houses our <canvas> with an id of paint, the <canvas> tag is important because it lets us draw graphics in the browser. Take note of ids for both because we'll need to reference them when adding functionality to our graphics editor using JavaScript. Another thing we need to take note of is the <footer> tag which houses a couple of <div> tags which will enable us to change the colour of our brush and draw with multiple colours. At the end of the <footer>, we have an <h1> tag that we'll use to keep track of the number of collaborators online.

To add styling to our app, we need to paste the following into src > main.css

Post styling, we need to add functionality to our application. To do so, we'll paste the following into src > app.js and run through what that code does.

Our app.js file defines the functionality of our graphics editor. On the first line, we initialize PubNub and need to add our PubNub Publish and Subscribe keys. If you don't have a PubNub account, sign up for a free account to create your API keys. Sign up and log in using the form below:

After that, we define an object called mspaint that holds different properties. In the start property, we use a function that initializes our canvas by doing a few things:

We set the context to '2d' as we will be only drawing in 2d
We set the height and width of our canvas

Here, we use the subscribe() method to subscribe to a channel, draw which we defined earlier. We then define a callback function drawFromStream() which collects drawings done by other users and makes those drawings reflect on a users canvas. Next, we initialize PubNub Presence to keep track of the number of users using the graphics editor at one time.

We also have a few event listeners that track when the mouse button goes up, moves and goes back down. The event listeners translate these movements to drawings on the canvas. When a user is done drawing, we want a user’s activity on their canvas to appear on the canvases of every other user they are collaborating with. We know that a user is done drawing when their mouse button goes back up. So we take advantage of the event listener that tracks when a users mouse button goes up. It is here where we add the publish() method from the PubNub JavaScript SDK so that a user’s drawing reflects on every other user’s canvas too.

To run our graphics editor, we need to serve the files locally. To do this, we'll have to install http-server by running npm -g i http-server. In our projects root directory, run http-server in your terminal and we have a working editor.

We've got the realtime collaborative portion done, now we want to enable communication between collaborators via chat. The PubNub Chat is a scalable and reliable In-App Messaging API that powers chat-based experiences.

We'll implement this by adding another item to our menu bar that opens up a modal containing the chat section. In the index.html file, add <li><a href="#" id="openModal">Chat</a></li> to the <header> right after the last <li> tag. Now that we have the additional item in the menu bar, we need to paste this code that makes up our modal right after the closing </header> tag.



<!-- The Modal -->
      <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
          <span class="close">&times;</span>
          <p>Type your message and Press Enter.</p>
          <input id="input" placeholder="Your Message Here" />
          <p>Forum:</p>
          <p></p>
          <div id="box"></div>
        </div>
      </div>

The modal contains an input field where users can type messages they want to send to each other. The messages sent and received are displayed in the <div> tag with an ID of box, we take note of the ID because we use it to update the <div> with new messages in the chat. In app.js, the code below adds functionality to the modal.



let modal = document.getElementById("myModal");
let btn = document.getElementById("openModal");
let span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
};

span.onclick = function() {
  modal.style.display = "none";
};

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

What this code does is give us different ways to interact with and use the modal. Now that we have it working, we need to work on connecting different user’s chats to each other using PubNub. At the bottom of app.js, we have a function chat() that subscribes to chat message data in our collaborative graphics editor as well as a callback function - publishMessages() which publishes message data to the chat channel making all messages sent accessible for all the users of the chat in the graphics editor. We then initialize variables - box for the <div> tag that holds chat responses, input that handles data from the <input> tag and a channel where the communication occurs in PubNub’s Data Stream. We then subscribe to the channel using the subscribe() method and add a listener that updates the users with the latest messages from the chat by pushing them into our chat modal. We also have an eventListener() method to publish messages to the channel on a keypress. We then use the onload() method to make sure the chat functionality is enabled when the window loads. Run http-server and have a working chat to add to our collaborative graphics editor.

Now we have a Realtime Collaborative Microsoft Paint site that can track the number of online users and connect them through a chat. If you have any questions, feel free to reach out to me on Twitter.

Sorry I took so long to release it. I hope you found it useful it.

Articles that made my Week #001

Daniel Madalitso Phiri — Sat, 08 Feb 2020 17:19:13 +0000

Hey! It's been a while since I've written to you all on a personal note.

I said hi a while ago.

👋 Hello dev.to

Daniel Madalitso Phiri ・ Oct 11 '18

#beginners #introduction #career #community

I haven't changed much (I have). For some reason I forgot how therapeutic writing on here was.

// Detect dark theme var iframe = document.getElementById('tweet-1222503288593174528-374'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1222503288593174528&theme=dark" }

I plan on doing this for a long time as a way of keeping track of my actions and trying to align them with my intentions. They say we are what we eat and reading is like eating for the brain lol. Your actions mirror your intentions and keeping track of what I'm consuming can help me gauge where I'm at and what I'm gravitating towards. It'll be nothing too deep, surface level reasons for why I read/enjoyed something and hopefully you can too.

I've been looking for balance, balance in work and balance in my life. It can all be too much sometimes and figuring out ways to work through things is important. This post by Amrata Ranade did just that for me.

2020 Wellness Theme & Goals // Healthy Life in Tech

Amruta Ranade ・ Feb 7 '20

#career #showdev #productivity #health

Lots of times you feel dormant and useless, like you've learned nothing despite your constant efforts or work. Figuring out something you like, sticking with it and moving forward has been something I'm working towards and this post by Corbin Taylor, which by the way is filled with such gems, I guess helped me re-adjust and re-strategize.

How To Maximize Your Productivity And Learning By Keeping Your Goals In Mind

Corbin Taylor ・ Feb 5 '20

#productivity #codenewbie #career

I speak at conferences and meetups and although I'm definitely not new at it, I haven't necessarily benefited a lot from it and was re-evaluating whether it's something worth spending time and money (it costs a lot to speak) on it. If somehow you feel the same, Erik Dietrich wrote an amazing post that goes into how you can make public speaking benefit you.

Conference Speaking Isn't Good for Your Career Until You Make it Good

Erik Dietrich ・ Feb 4 '20

#career #speaking

It was global game jam about a week ago. My team and I built this game with Vue.js and I wasn't too happy with how slow it was in production, it's been troubling me for the longest time and Vaibhav Namburi offered some insight into what I might have to fix which was rather refreshing - I might just write about it.

5 Extremely Easy ways to drastically improve your VueJS app’s speed

Vaibhav Namburi ・ May 27 '19

#vue #javascript #frontend #optimisation

Delayed is not denied! You always see people sharing their successes and Didicodes choose to be different. It goes to show that behind so many stories of success are a number of failures, but because we only see one side, may people (including myself) find it hard to cope with their failures and push forward because we think no one else is going through anything similar. Such a good read.

Article No Longer Available

That's been my week. How was your week??

Event Triggered GraphQL: Making Static Sites Dynamic

Daniel Madalitso Phiri — Wed, 05 Feb 2020 08:34:57 +0000

I saw this amazing talk by Tanmai Gopal, one of the founders at JAMStack SF, on Making Static React Sites Dynamic .

“I could probably cook up a Vue alternative,” I thought.

My Blog happens to be built with Gridsome, a Vue powered static site generator for building blazing-fast static websites.

I’ve played around with Hasura in the past: it’s a super fast GraphQL server that gives you instant, realtime GraphQL APIs over Postgres. So we’re going to build something with Gridsome, deploy it, and then make a portion of it dynamic (sort of) with GraphQL and Netlify.

I have a list of books I've read in a GraphQL API and I want to use that as a data source for the content on our Gridsome site. We want this site to update dynamically when ever we add a new book to the list or take one out.

I’ll show you how.

TL;DR: Hasura Event Triggers

Demo

I left my GraphQL endpoint open for the sake of this tutorial, but it’s not advisable for a production environment.

Have a look at this post on securing your API by adding authorization and managing users.

We’ll start out by installing the Gridsome CLI tool with npm install --global @gridsome/cli .

When that’s done, we create a new Gridsome project with gridsome create <project name>.

After that, we cd <project name> and then run it locally with gridsome develop.

You’ll get a very simple page like this.

Now go to this page and click Deploy to Heroku. You might have to create a new Heroku account.

When that’s sorted, you’ll be prompted to create an app name. Key one in and then click Deploy.

Once it’s deployed, head over to .herokuapp.com to access your Hasura API Explorer.

It should look this:

On our API Console, we’ll head over to the data section and click add table.

We then create a table called books and go on to create the following columns:

    - `id, Integer (AutoIncrement), Unique`
    - `name, text`
    -`author, text`

Set id as the primary key. Then, click create.

Now that we’ve got a books table, we’ve got to insert data into it.

In the data section, click on the books table and pick the insert data tab. Feel free to add any books and authors you enjoy. Mine looks something like this:

We’re done with the Hasura API console for now.

Next up, we want to be able to query a remote GraphQL source.

First, we need to install the Gridsome source plugin. We’ll enter npm install gridsome-source-graphql to do so. Once that’s done, we need to edit our gridsome.config.js.

We then paste in the following code:



    plugins: [
        {
          use: 'gridsome-source-graphql',
          options: {
            url: 'https://example.com/api',
            fieldName: 'puppies',
            typeName: 'puppyTypes',

          },
        },
      ]

Be sure to change url, fieldName, and typeName (although the latter is optional).

You can get the url from the Hasura API console, i.e .herokuapp.com/v1alpha1/graphql.

I’ll name fieldType booksList and leave the typeName blank. They’re important, so remember them.

Now let's navigate to the src > pages > About.vue. This is where we want to display the data.

Gridsome uses GraphQL to query data that it displays on pages.

After the closing , we paste the following page query:



    <page-query>  
    query {
      books {
        author
        id
        name
      }
    }
    </page-query>

The query fetches the author, id, and name from the books table. Now we need to display the data we’re querying.

To do so, add the following code below the sole

tag:



    <h1>Books Read by Me</h1>
    <div v-for="book in $page.books" v-bind:key="book.id">
       <li>{{ book.author }} - {{ book.name }}</li>
    </div>

We use $page.books to access the query response and parse through it with the v-for directive, storing each value in the book variable. We then use this to display the book author and book name.

This also happens to be a really nice way of understanding how Gridsome displays data. When we run this locally and click ‘about’, we can see the books and their authors displayed.

If you head back to the Hasura API Console and insert one row into the books table, you’ll notice that the list on the site updates.

This only happens locally because the data source is continuously refreshed.

When you deploy the app, only the data available on deploy is displayed, meaning when we insert a row in the API console it will not show until the site is rebuilt.

To solve this, we’ll leverage Hasura Event Triggers to trigger a Netlify build that will then update the data in your database.

You will need to push your code to GitHub or GitLab and connect your repository to Netlify.

Gridsome put together a great resource to help out if you have any trouble doing so. Check that out here.

Once deployed to Netlify, we need to create a build hook.

I’ll call mine hasura-event-trigger.

When you create one, you get a URL that triggers a build.

Copy this URL and head back to your Hasura API console.

This time, we’ll head over to the events section.

Hasura event triggers capture events on specified tables and invoke webhooks to carry out any custom logic.

Events could be inserts, updates, or deletes on a row. They also give you the flexibility to add manual triggers.

We want to trigger a rebuild whenever we delete or add a book. After clicking ‘create’, we name it ‘author-update’, select the books table, tick ‘insert’, and update as trigger operations.

We’re then asked to add a webhook URL. This is the build hook URL we copied from Netlify.

After pasting that in, click ‘create’.

Now, every time we insert or delete a row (be it manually in the API console or with a mutation using another web app), the event is triggered and a new build will start.

This updates the side content—some would say dynamically.

Add or delete a few rows to trigger builds and your events tab will look like this:

The builds on Netlify also show what triggered them.

Conclusion

Now we have a sort of dynamic static site that leverages Hasura GraphQL Event Triggers.

Check out the full repo on my GitHub and feel free to tweet me any questions.