Forem: James Baldwin

How to create a dropdown with TailwindCSS and Vue

James Baldwin — Sat, 08 Feb 2020 00:05:40 +0000

Create custom dropdowns with TailwindCSS and Vue

This post was originally posted on my personal blog at jwbaldwin.com

I'm going to assume you already have Vue and TailwindCSS set up, but if you don't here is a great resource: github.com/tailwindcss/setup-examples

Here are the versions of Vue and TailwindCSS that I'm using:

Vue: 2.6.10
TailwindCSS: 1.2.0

All the code for this can be found on my github at github.com/jwbaldwin and in the codesandbox below!

Alright, let's get right into it.

First: The Setup

We'll have two main components for this. The Vue component that will act as the dropdown, and the Vue component which will open the dropdown when clicked.

The dropdown component will be pretty straight forward:

//MainDropdown.vue
<template>
    <div>
        <div>
            <div></div> <- Where our functionality will go
            <slot></slot> <- Where we will put the dropdown items
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return { <- Where we will track our modal state (open/closed)
        };
    },
    methods: { <- Where we will toggle the state
    },
};
</script>

Okay! Nothing fancy going on here. A little Vue slot api usage, so that we can reuse this component for dropdowns all throughout the app! Basically, we're going to define what we want rendered in that slot in another component.

So, let's scaffold the items we'll display!

//ButtonWithDropdown.vue
<template>
  <main-dropdown>
    <template> <- Where we will say "hey vue, put this in the slot"
      <img src="../assets/profile.png" alt="profile image">
      <div> <- What we want displayed in the dropdown
        <ul>
          <li>
            <a to="/profile">
              <div>{{ username }}</div>
              <div>{{ email }}</div>
            </a>
          </li>
          <li>
            <a to="/profile">Profile</a>
          </li>
          <li>
            <a>Sign out</a>
          </li>
        </ul>
      </div>
    </template>
  </main-dropdown>
</template>

<script>
import MainDropdown from "@/components/MainDropdown";

export default {
  name: "button-with-dropdown",
  data() {
    return {
      username: "John Wick",
      email: "dontkillmydog@johnwick.com"
    };
  },
  components: { MainDropdown }
};
</script>

Great, so it looks terrible and doesn't work. Let's fix the style with TailwindCSS.

Next: The Styling

//MainDropdown.vue
<template>
  <div class="flex justify-center">
    <div class="relative">
      <div class="fixed inset-0"></div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

The div element with fixed inset-0 will cover the entire page. Just remember this little guy. More on what it does later!

We're going to make sure the parent is "relative" so that we can position the child dropdown absolute in relation to that element. And then we apply some other positioning so that it sits where we want it to!

//ButtonWithDropdown.vue
<template>
    <main-dropdown>
        <template>
            <img class="h-10 w-10 cursor-pointer rounded-full border-2 border-gray-400 object-cover" src="../assets/profile.png" alt="profile image">
            <transition 
             enter-active-class="transition-all duration-100 ease-out" 
             leave-active-class="transition-all duration-100 ease-in" 
             enter-class="opacity-0 scale-75"
             enter-to-class="opacity-100 scale-100"
             leave-class="opacity-100 scale-100"
             leave-to-class="opacity-0 scale-75">
                <div class="origin-top-right absolute right-0 mt-2 w-64 bg-white border overflow-hidden rounded-lg shadow-md">
                    <ul>
                        <li>
                            <a to="/profile" class="rounded-t-lg block px-4 py-3 hover:bg-gray-100">
                                <div class="font-semibold ">{{ username }}</div>
                                <div class="text-gray-700">{{ email }}</div>
                            </a>
                        </li>
                        <li class="hover:bg-gray-100">
                            <a class="font-semibold block px-4 py-3" to="/profile">Profile</a>
                        </li>
                        <li class="hover:bg-gray-100">
                            <a class="font-semibold block px-4 py-3" to="/profile">Sign Out</a>
                        </li>
                    </ul>
                </div>
...
</script>

There's a bit more going on here. Most of it is just styling, but we are adding a couple of things I want to point out.

We are using the transition element provided by Vue and then combining that with TailwindCSS classes to make the dropdown fade in and out! (when it actually opens and closes)
We have some hover: pseudo-class variants that apply styles based on if an element is hovered or not.

Alright! It's really coming along. Not half-bad, but let's make it work!

Finally: The Functionality

The key interaction here:

The MainDropdown.vue component, that we slot the button into, will allow the ButtonWithDropdown.vue component to access it's context and call methods provided by MainDropdown.vue.

Let's see how that works!

//MainDropdown.vue
<template>
    <div class="flex justify-center">
        <div class="relative">
            <div v-if="open" @click="open = false" class="fixed inset-0"></div>
            <slot :open="open" :toggleOpen="toggleOpen"></slot>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            open: false,
        };
    },
    methods: {
        toggleOpen() {
            this.open = !this.open;
        },
    },
};
</script>

Okay so let's go over what we did here:

We added a boolean open: false to our component data. This will determine if we show the dropdown (and our "fixed inset-0" element) or not.
We added a toggleOpen() method that will simple invert the state of that open state.
We added v-if="open" @click="open = false" to our fixed inset-0 element. Remember how I said this element will cover the whole page? Right, so now it only shows when our dropdown is open, so if we click anywhere outside of the dropdown...boom! The dropdown closes as you'd expect! (told ya I'd explain that, not magic anymore)
Finally, we bind :open and :toggleOpen to our 'slot'. Whatever get's "slotted" into this component, can now access :open and :toggleOpen as props. In our case, that's our ButtonWithDropdown.vue. We'll see how in the next snippet!

Okay, the final touches!

//ButtonWithDropdown.vue
<template>
    <main-dropdown>
        <template slot-scope="context">
            <img @click="context.toggleOpen" class="h-10 w-10 cursor-pointer rounded-full border-2 border-gray-400 object-cover" src="../assets/profile.png" alt="profile image">
            <transition enter-active-class="transition-all duration-100 ease-out" leave-active-class="transition-all duration-100 ease-in" enter-class="opacity-0 scale-75"
                enter-to-class="opacity-100 scale-100" leave-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-75">
                <div v-if="context.open" class="origin-top-right absolute right-0 mt-2 w-64 bg-white border overflow-hidden rounded-lg shadow-md">
                    <ul>
                        <li>
...

Only three things to note here:

We tell our component that we can access the scope by using the variable context (slot-scope="context"). Now we have full access to those props we just bound (:open, :toggleOpen)
We listen for clicks to our image, and toggle the dropdown using that context: @click="context.toggleOpen"
Finally, we hide the dropdown elements: v-if="context.open"

THAT'S IT!

You now have a fully functioning dropdown in Vue, with styling courtesy of TailwindCSS!

Here is a codesandbox with the full example!

Fin

The full working example (with each step as a branch) can be found in my github.com/jwbaldwin

If you liked this and want to see more stuff like it, feel free to follow me on twitter @jwbaldwin_ or head over to my blog where I share these posts :)

Thanks!

⚡10 Vim + VSCode tips that will supercharge your productivity

James Baldwin — Wed, 15 Jan 2020 01:48:59 +0000

Develop faster with these quick Vim + VSCode tips

This post was originally posted on my personal blog at jwbaldwin.com

When I started Flowist.io, I decided: I want to learn vim. And I want to be fast.

Learning Vim can be hard at first. But combining it with VSCode can make that a bit easier - and you get the best of both worlds!

Here are some of the most useful tips and tricks that instantly allowed me to work faster! P.S.: great resource for starting out: devhints.io/vim

Vim secret: It's not hard. Just learn what the letters mean, combine them, and see what happens!

Setup

First of all, to install vim in vscode:

1. Open Visual Studio Code
2. Go to Extensions
3. Search for vim
4. The first plugin named Vim is the one you want
5. Click install
6. Boom!

1. vim-surround

This plugin lets you surround with or remove surrounding elements (think: ", ', {}, (), etc.)

This is a must-have plugin for Vim. I don't believe in immediately installing tons of plugins, but some of them are just necessary.

ve S<tag>

2. vim-motion

Press the keybind and then use the letters to move through your file. Another must-have. Not a replacement for other Vim movements, but incredibly useful for moving quickly and being more productive.

My keybind and config to jump-start you :)

    "vim.easymotionMarkerFontFamily": "FiraCode-Retina",
    "vim.easymotionMarkerBackgroundColor": "#7e57c2",
    "vim.easymotionMarkerWidthPerChar": 8,
    "vim.easymotionMarkerFontSize": "14",
    "vim.easymotionMarkerYOffset": 4,
    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": [" "],
            "after": ["leader", "leader", "leader", "b", "d", "w"],
        }
    ],
    "vim.easymotion": true,
    "vim.hlsearch": true,

> <space>

3. jj

Hitting <esc> sucks. I didn't realize I wasn't the only one who felt this, and everyone knew a better way. Map something simple to <esc> instead (I use jj, but anything easy works.)

    "vim.insertModeKeyBindings": [
        {
            "before": ["j", "j"],
            "after": ["<esc>"]
        }
    ]

> jj

4. cmd + p

Open files super quickly. Don't use the mouse!

> cmd+p

5. V

Visual mode (think highlight and select) but for a whole line at a time.
Didn't know this existed either.

> V

6. yip, yap

Here's where things get expressive!

Helpful for grabbing functions or methods and quickly copying them to paste elsewhere.

y = yank
i = inner (in)
p = paragraph

and

y = yank
a = a
p = paragraph (including newlines)

> yap

7. cit, yit

Great for editing HTML. 10x faster then navigating inside of the tag and editing or copying it.

c = change
i = inner (in)
t = tag (YES, html tags!)

Bonus tip: Use ", and { to speed up html and javascript editing too!
and

y = yank
i = inner (in)
t = tag

> cit

8. dw, df

Easily remove words faster.

d = delete
w = word

and

d = delete
f = find
= item to search for and include in the delete

> dw dfs

9. ci", ci{

Change class tags, hrefs, strings and edit function bodies way faster.

c = change
i = inner (in)
" = item to change inside of

and

c = change
i = inner (in)
{ = item to change inside of

> ci{

10. f_, F_

Super useful for moving to specific items. Way faster than lllllll or even 8l...h

f = find (ahead of cursor)
_ = anything to search for

and

F = Find (behind cursor)
_ = anything to search for

> f2 F3

BONUS: u, r

Some bonus must-haves!

u = undo the last change

and

r = replace (r + thing to replace with)

> <space> dit ... u

Conclusion

Since I started working on Flowist.io I made a serious effort to get proficient with vim. Hopefully, this helps you boost your vim speed too!

Thanks for reading :) Catch me on twitter @jwbaldwin_

3 Ways I Improved My Remote Work

James Baldwin — Sun, 29 Dec 2019 20:06:25 +0000

Boost your productivity and balance with 3 simple things

This post was originally posted on my personal blog at jwbaldwin.com

Remote work is awesome. Remote work is growing. Remote work is deceptively tough. At first it seems like the dream, but it can be a lot harder than it first appears if you don't take it seriously.

1. Transition In/Out of Work

One thing that makes remote work tough, mentally, is that there is no physical transition period. There is no commute where you get ready for work, or get ready to be home and spend time with your family.
Remote makes it easier and easier to blur the work/life lines, and soon enough you start bringing work with you wherever you go. Here's the fix: don't remove the commute, change it.

Instead of a 30 minute drive, setup a routine of doing something (gym, coffee + book, meditate, etc.) before hitting the day's work. Turn what was your unproductive commute time, into a productive slice of time where you transition from home to work and back. Even if that means commuting to your favorite coffee shop for an hour of emails. This breaks the day into specific chunks and turns a blurry, unhealthy mix of work + life, into a clear time for work and home.

2. Take Breaks

This one is simple. Breaks are necessary - but when you're working from home it's easy to just grind for hours and hours - after all, there's no one there to interrupt you!

Taking breaks lets you organize your mind, and improve your mental health.

Here are some things I do for breaks:

5 minute walk with my dog
Make a snack
Do 10 minutes of an exercise
Read some articles
GET COFFEE :) (I do this a lot)

3. Make Time for Focus

The biggest boon for me when I work from home, is the amount of focused time I can create. So when you have that one task that needs your attention - plan your breaks and your work day around this. Schedule your meetings on either end of this block of time.

Set time aside so that you can enter flow.

Remove distractions. Disable notifications. Take the dog out to pee. Then get to it!

Conclusion

There are tons of little hack and tricks that help boost your remote work life. Hopefully these ideas, fresh or just reiterated, can allow you to lead a more balanced and productive work day!

Thanks for reading :) Catch me on twitter @jwbaldwin_

Solving FizzBuzz with Elixir

James Baldwin — Mon, 09 Dec 2019 04:40:45 +0000

Solve FizzBuzz in Elixir

FizzBuzz with multiple solutions in Elixir. Which is best?

Why FizzBuzz?

It’s a problem everyone knows, so we can focus more on the way I solve it, than how I solve it.

The Solutions

Elixir is a functional language. And it’s very flexible.

This means there are tons of ways to solve a problem like FizzBuzz, and sometimes that means too many.

Let’s take a look at two ways we can use Elixir’s features to solve FizzBuzz in a clean and readable way. I don’t think one is better than the other, that’s for you to decide.

Though, it’s my opinion that the one that doesn’t make you say ugh, or scratch your head, is the better one.

“Whenever I have to think to understand what the code is doing, I ask myself if I can refactor the code to make that understanding more immediately apparent.”
— Martin Fowler

1. Guards

https://hexdocs.pm/elixir/guards.html

The first solution uses Elixir’s guards. A feature that augments pattern matching by allowing you to add some additional checks to your function.
i.e. ( from the docs)

def empty_map?(map) when map_size(map) == 0, do: true
def empty_map?(map) when is_map(map), do: false

Here’s what is looks like when applied to FizzBuzz

defmodule GaurdFizzBuzz do
  def solve(min, max), do: Enum.each(min..max, &(solve(&1)))
  def solve(num) when (rem(num, 15) == 0), do: IO.puts "FizzBuzz"
  def solve(num) when (rem(num, 5) == 0), do: IO.puts "Buzz"
  def solve(num) when (rem(num, 3) == 0), do: IO.puts "Fizz"
  def solve(num), do: IO.puts num
end

2. Conditionals

https://elixir-lang.org/getting-started/case-cond-and-if.html

The second solution uses Elixir’s conditionals.
A way to match based off of some operations. Like a condensed and simple way to do if-else's

They look a bit like switch statements, but operate like an if clause.

i.e. ( from the docs)

cond do
  2 + 2 == 5 -> "This is never true"
  2 * 2 == 3 -> "Nor this"
  true -> "This is always true (equivalent to else)
end

Here’s what is looks like when applied to FizzBuzz!

defmodule MatchFizzBuzz do
  def solve(min, max), do: Enum.each(min..max, &(solve(&1)))
  def solve(num) do
    cond do
      rem(num, 15) == 0 -> IO.puts "FizzBuzz"
      rem(num, 5) == 0  -> IO.puts "Buzz"
      rem(num, 3) == 0  -> IO.puts "Fizz"
      true              -> IO.puts num
    end
  end
end

Conclusion

Which is better? Each has its merits. And as far as which I would rather see in a production code-base. I’m not really certain. Let’s take a look at the pros and cons:

Gaurds

Are not as readable when used for lots of pattern matching
Would be more extendable and testable.

Conds

Are more readable.
Would be harder to extend if some other requirements came down.
You’d have to refactor it if you wanted to add additional logic to it.

It’s really up to you and your team which you’d rather work-with. Often the finally level of optimization (guard v.s. cond) is not worth it. Shipped code is the best code.

So there you have it! FizzBuzz solved in two ways, each using a different language feature of Elixir.

Thanks for reading :)
Catch me on twitter https://twitter.com/jwbaldwin_

How To Create a Great Blog Title

James Baldwin — Tue, 19 Nov 2019 01:58:18 +0000

This post was originally posted on my personal blog at jwbaldwin.com

Writing a good blog title is an art. Here are some tips I use personally, that will help make your blogs stand out from the rest. We'll use the blog title below as a starting point, and see how we can make it something that might actually get clicked on.

Our starting blog title for our awesome blog:

Generating websites with Elixir and Phoenix

1. How To's and Listicles

These are the most common forms of blogs, and for good reason. They easily describe the contents of the artciles and pique people's interest. Don't be afraid to use this tried and true method!

Instead of: Generating backends with Elixir and Phoenix Framework

Rephrase it just a bit to be: How to generate a backend in a couple minutes with Elixir and Phoenix

This small shift allows you to tell your reader that you're going to teach them something useful, and it's catchy while not being false.

2. Provide value

This is the #1 THING

Blog titles should be all about communicating what value you provide to the reader as fast as possible. Keep it short and punchy with a clear value statement.

Instead of: How to generate a backend in a couple minutes with Elixir and Phoenix

Show the value with: How to create your backend in 5 minutes with Elixir and Phoenix

3. Keep it Short

People don't have time to read your long blog title. They will just gloss right over it.

Instead of: How to create your backend in 5 minutes with Elixir and Phoenix

Drop the implied words: Create your backend in 5 minutes with Elixir and Phoenix

4. Conclusion

Basically, catch peoples attention with the what and why.

What are they clicking on.

Why should they read it.

If you put each blog title through these filters, and make sure it answers those questions, you're well on your way to a great blog title!

I hope this helps! Reach out to me with questions or comments :)