<![CDATA[Lailo]]> https://www.lailo.ch RSS for Node Sun, 26 Apr 2020 16:28:11 GMT <![CDATA[SwiftUI Preview with CoreData]]> Preview Error

When you're using CoreData in a SwiftUI View, you'll get erros when resuming the preview with the following code.

struct ContentView: View {
  @Environment(\.managedObjectContext) var moc

  var body: some View {
    Text("hello World")
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

The reason is that your preview ContentView() does not have a managed object context.

Solution

One solution I found is to create a wrapper view which adds test data to the managed object context and passes it back to the view.

struct PreviewCoreDataWrapper<Content: View>: View {
  let content: (NSManagedObjectContext) -> Content

  var body: some View {
    let managedObjectContext = (UIApplication.shared.delegate as! AppDelegate).persistentContainer.viewContext

    let todo = Todo(context: managedObjectContext)
    todo.title = "I Am Legend"

    return self.content(managedObjectContext)
  }

  init(@ViewBuilder content: @escaping (NSManagedObjectContext) -> Content) {
    self.content = content
  }
}

Now, you can embed every view which needs access to the managed object context within the PreviewCoreDataWrapper view and access the managedObjectContext to pass it into the enviroment.

struct MoviesView_Previews: PreviewProvider {
  static var previews: some View {
    PreviewCoreDataWrapper { managedObjectContext in
      MoviesView().environment(\.managedObjectContext, managedObjectContext)
    }
  }
}

Now you can resume your preview and it should render just fine without any errors.

If you have feedback or questions, please feel free to get in touch via Twitter. ]]> https://www.lailo.ch[object Object] swiftui-preview-with-coredata Sun, 26 Apr 2020 18:06:07 GMT <![CDATA[Dark Mode in TailwindCSS]]> There are two ways to quickly add dark mode to your Tailwind CSS projects. The first one is the quickest and easiest way. The second one is your choice if you want to have a controlled theme switch.

1. Screen Config

This is a little hack and you can't manually switch the theme as it detects the theme from the user's operating system.

Set Config

Extend your tailwind.config.js theme by adding a new screen type.

module.exports = {
  theme: {
    extend: {
      screens: {
        dark: { raw: '(prefers-color-scheme: dark)' },
      },
    },
  },
}

Use Styles

You can now use it like you would use different screen sizes.

<div class="text-gray-800 dark:bg-gray-200"></div>

It's also possible to add states like hover into the dark mode.

<div class="border-b hover:border-gray-800 dark:hover:border-gray-800"></div>

2. Plugin

Another, more clean way and with the possibility to switch the theme manually is the plugin tailwindcss-dark-mode

Add the class <html class="dark-mode"> to see the dark mode or remove it to see the regular theme.

]]> https://www.lailo.ch[object Object] dark-mode-in-tailwindcss Sun, 12 Apr 2020 20:48:09 GMT <![CDATA[Rapilo]]> As you might already know, I love coding and designing. I couldn't help myself but use the powerful SwiftUI framework and build an iOS game with playful animations.

Learning Resources

I started looking into SwiftUI the day it was released. I started with Apple's own tutorials.

A couple of days later, I discovered Hacking with Swift on Twitter. There, I learned a lot about SwiftUI and its API, but couldn't find as much as I wanted about animations and transitions. Meanwhile you can find a complete list called SwiftUI By Example.

To dive deeper into animations and transitions, I went back to my trusted design tutorial source Design+Code.

Design

I stared designing in Sketch to get a feeling of how the game would be. After some iterations, I had something I could start coding in Xcode.

Colors

Besides the gray colors, I used the default iOS colors Color.pink, Color.orange, Color.green and Color.blue.

Icons

I used the new iOS icons font introduced with iOS 13 called SF Symbols. The leaderboard is the only icon I designed myself, which is exported as PDF to be used as a vector.

Developement

After exporting the one icon and the gray colors to the Assets.xcassets, I was ready to start coding in Xcode.

I strongly believe that if a UI feels wrong, it's not going to be used. That's why I started with the UI and animations first. It took me some time until I had something I felt was the right amount of animations and types of transitions.

After the UI and animations, I added the state management using the Combine framework. Adding the leaderboard by using Game Center, was the last bit i did before I started beta testing.

Beta Tester

If you want to be a beta tester, just sign up right here. Don't forget to give me your feedback. It helps me to improve the game so you can have even more fun.

]]> https://www.lailo.ch[object Object] rapilo Mon, 06 Apr 2020 21:43:11 GMT <![CDATA[Export Your Medium Articles]]> Export to HTML

Go to medium.com settings and request your export.

After a while, you'll get an email with a download link. Download the medium-export.zip file and unpack it.

Transform to MD

Inside the medium-export folder you'll find another folder posts with .html files in it. To transform your .html files to .md, you can execute the medium-2-md NPM package with NPX.

npx medium-2-md convertLocal Downloads/medium-export/posts -f

Your posts in .md format can be found in the medium-export/posts/md_* folder

]]> https://www.lailo.ch[object Object] export-your-medium-articles Mon, 30 Mar 2020 19:49:12 GMT <![CDATA[This Blog Is Open Source]]> This blog is built with Next.js using Tailwind CSS for styling. The source code is on GitHub and it's deployed on Zeit's Now.

Get Started

To get started, you only need to pull or fork the repository, update some config variables and choose your favorite color. You can find a step-by-step instruction in the README.md of the project.

Add Article

Adding new posts is as simple as creating a new Markdown file inside the /articles folder and pushing it to GitHub's master branch.

Meta Data

It's important that you keep the meta data at the top of the file.

---
title: 'This Blog Is Open Source'
description: 'Use this blog to ....'
tags: ['open-source', 'web', 'react', 'nextjs', 'tailwind-css']
publishedAt: '2020-03-29T19:14:12.215Z'
updatedAt: '2020-03-29T19:14:12.215Z'
---

Keep in mind that the variable publishedAt: '2020-03-29T19:14:12.215Z' must have a value to publish your article.

If it's set to published: '', your article will only be visible in development.

Hosting

I personally like the simplicity of Zeit's Now and that's exactly what I use to host this blog. Connect your GitHub repository to a Now project and as soon as you push to master, a new build is executed. Within minutes you'll see your new article online.

If you want to share your new article with someone to review without having it released, just create a pull request on master and you'll get a preview URL from Now.

Feedback

If you have any questions or feedback, please feel free to contact my via Twitter of directly add an issue or create a PR on GitHub.

]]> https://www.lailo.ch[object Object] this-blog-is-open-source Sun, 29 Mar 2020 19:14:12 GMT <![CDATA[500 Error]]> Co-Written by Susana Garcia

We built 500error.co because we had to solve one of our problems. The idea was first pitched on Pitchcard.io and got a lot of traction. So we decided to built it, and we did it in less than two weeks.

How It Started

We (Susana Garcia and I) like to build things. We don’t like to talk about how cool it would be to do this and that — we just do it. The outcome is that we have a lot of projects simultaneously.

As we all know, servers can crash and “oooh boy they do”. And you know what, they crash at the worst time. They crash while your release and you lose important leads. Or they crash while you sleep and we really like to sleep 💤. We decided to fix this problem.

Developing in Bratislava

We’re digital nomads and we moved to a new city every other month, but that’s another story. For this month, we’re in Bratislava.

We used our very first day in Bratislava to collect all feedback from Pitchcard.io, friends and other developers. We picked the most important features for a MVP.

We used the second day to choose the right tools to built this, and ended up using NodeJS with Express for the backend and React for the front end, as we had already positive experiences with these tools building Pitchcard.io.

From day three up to day seven, we built the MVP and send some invite emails to the investors of Pitchcard.io. They liked the simplicity and gave us really good feedback, what we could improve and what they were missing.

We used the second week to improve the UI for mobile, tablet and desktop. We also added a simple subscription with Stripe (we really like Stripe). And we added better documentation of how to integrate it into Heroku, GitHub Pages and more.

Customize Your Page

Our beta users like the way they could customize their error pages. They like it because it’s simple and funny. Here is what some things you can customize:

  • Add your own brand color
  • Choose one of the funny GIFs or just add your own Logo
  • Define your title and description so it sounds like you

The Result

We’re happy that our beta users liked the first version and we’re proud of what we could built in less than two weeks.

Now we can sleep at night without worrying about a crash on all these projects. If a server crash happens, we can fix it the day after and notify the new subscribed users. It’s simple as that.

Do you want to be able to sleep at night without worrying about your server? Visit 500error.co, create your own error page, integrate it into your existing projects and have one less thing to worry about.

]]> https://www.lailo.ch[object Object] 500-error Sun, 18 Dec 2016 20:47:11 GMT <![CDATA[List of Ideas and Unfinished Projects]]> Co-Written by Susana Garcia

This is a story of my huge list of ideas and a folder full of unfinished projects. I fought it with Pitchcard.io.

List of Ideas

Like most people with the need to build things, I also had a huge list of ideas. This list kept growing and growing. I was adding more than I actually removed or built.

The problem was, that I though I shouldn’t talk to anyone about my idea. With that mindset, the only way to get feedback, was actually to built it. So I spent weeks to build some of these ideas just to figure out later that they sucked. After some failed projects, I knew, I had to change the way I was starting projects.

The best feedback is brutal honesty.

I started to talk to friends about my ideas. Very soon I figured out, that it isn’t good either. The problem of this way to get feedback of your idea is, that friends/family try to be nice. That’s exactly what you don’t want as feedback for your idea. You want honest feedback.

Unfinished Projects

With the feedback of my friends and some google search sessions, I could priorities my ideas. So the next step was to actually built them.

As I’m a developer, I could start coding right away. After some long night and countless bugs, I actually had 90% of the idea done but It was not ready yet. I didn’t had the skills of a Designer, Social Media Expert and others. Very soon I lost my interest in that project and started another one where I could actually use my own skills.

Projects folder: A graveyard of good ideas.

This was a huge mistake, as I ended up having a folder with a lot not yet released projects. I spent so much time doing what I was good in, but it was not enough to release. 
I didn’t had the required skills and got tired of the projects very quick. I felt I was stuck in something and didn’t have progress. That’s why my project folder became the graveyard of my ideas.

Nobody will steal your Idea.

After countless hours of work and not released projects, I had to learn that feedback at the very beginning of an idea, is the most important thing. I had to learn it the hard way, that nobody will steal my idea.

There are a lot of articles on medium about why nobody is going to steal your idea. My favorite is Nobody will steal your shitty advertising idea written by Lee Gordon.

The One Project

I wanted to be quick on evaluating my ideas. I did some research but couldn’t find any good solution. That’s why we (Susana and I) decided to do one more project (I know, again another project) to make this flow very easy and quick.

The result is Pitchcard.io. A platform to pitch and explore ideas. A platform to get quick and honest feedback. A platform to find collaborators and join a team with amazing skills.

An Idea

People with amazing ideas can pitch to a variety of people (developer, designer, …) and can get honest feedback. You have just 200 chars for your description.

Skills and Expertise

People with amazing skills can explore new ideas daily and give feedback. If they really like an idea, they can offer help to actually built it. You don’t have to built a “todo list” anymore to just try out new technologies. Built something useful.

]]> https://www.lailo.ch[object Object] list-of-ideas-and-unfinished-projects Sun, 17 Jul 2016 09:14:05 GMT <![CDATA[Pitchcard]]> Co-Written by Susana Garcia

Since the iPhone released and the following AppStore boom, a lot of people around us began to have amazing ideas: “Hey, I have a really cool idea for a new app!”. Every single one of them thought, they had the next billion dollar idea.

Get to the Point

They usually tried to explain it in a very complex way or sent us very long emails. As we both don’t like emails, long emails even less, we told most people to get to the point.

We believe that every good idea needs to be pitched in 2–3 sentences. And this is only possible if you exactly know what the goal of your idea is.

Share Your Idea

There are another few things that some people don’t know about good ideas.

Some people don’t talk much about their idea to protect it. They are afraid of someone stealing it. Fact is, the more you share your idea, the better it gets. Each time you explain your idea to people, they’ll ask you questions. First you won’t have an answer but it will force you to rethink your idea.

Another important thing is, what for you might be a pretty good idea, others wouldn’t even use it. And what’s the point of creating something no one will ever use? Evaluate your idea first, then decide to build it or to move on.

Quick Feedback

That’s why we’ve built Pitchcard.io to get quick feedback. We’ve picked this name because of the elevator pitch.

“[..] the idea that it should be possible to deliver the summary in the time span of an elevator ride, or approximately thirty seconds [..]”

How it works

  1. Visit www.pitchcard.io
  2. Create your Pitchcard
  3. Share it

We know that ideas can pop up anytime and anywhere (having lunch, doing sport or meeting up with friends). That’s why we made it very easy to create a Pitchcard.

You can share your Pitchcard with close friends via WhatsApp and email, or with everyone via Facebook, Twitter or others.

Another important point of Pitchcard is, that we consequently set a 200 chars limit on the description of the idea. As we already mentioned before, we want that people get to the point.

We hope you like our product and wish you good luck with your next billion dollar idea. 😜

]]> https://www.lailo.ch[object Object] pitchcard Sun, 08 May 2016 07:07:37 GMT