{"pageProps":{"contents":[{"slug":"swiftui-preview-with-coredata","title":"SwiftUI Preview with CoreData","description":"The SwiftUI preview errors when using CoreData managed object context.","content":"\n## Preview Error\n\nWhen you're using CoreData in a SwiftUI `View`, you'll get erros when resuming the preview with the following code.\n\n```swift\nstruct ContentView: View {\n @Environment(\\.managedObjectContext) var moc\n\n var body: some View {\n Text(\"hello World\")\n }\n}\n\nstruct ContentView_Previews: PreviewProvider {\n static var previews: some View {\n ContentView()\n }\n}\n\n```\n\nThe reason is that your preview `ContentView()` does not have a managed object context.\n\n## Solution\n\nOne 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.\n\n```swift\nstruct PreviewCoreDataWrapper: View {\n let content: (NSManagedObjectContext) -> Content\n\n var body: some View {\n let managedObjectContext = (UIApplication.shared.delegate as! AppDelegate).persistentContainer.viewContext\n\n let todo = Todo(context: managedObjectContext)\n todo.title = \"I Am Legend\"\n\n return self.content(managedObjectContext)\n }\n\n init(@ViewBuilder content: @escaping (NSManagedObjectContext) -> Content) {\n self.content = content\n }\n}\n\n```\n\nNow, you can embed every view which needs access to the managed object context within the `PreviewCoreDataWrapper` view\nand access the `managedObjectContext` to pass it into the enviroment.\n\n```swift\nstruct MoviesView_Previews: PreviewProvider {\n static var previews: some View {\n PreviewCoreDataWrapper { managedObjectContext in\n MoviesView().environment(\\.managedObjectContext, managedObjectContext)\n }\n }\n}\n```\n\nNow you can resume your preview and it should render just fine without any errors.\n\n---\n\n\n If you have feedback or questions, please feel free to get in touch via Twitter.\n\n","type":"tip","tags":["swiftui","coredata","preview"],"publishedAt":"2020-04-26T18:06:07.227Z","image":null,"updatedAt":null,"readingTime":{"text":"2 min read","minutes":1.125,"time":67500,"words":225},"data":{"title":"SwiftUI Preview with CoreData","description":"The SwiftUI preview errors when using CoreData managed object context.","tags":["swiftui","coredata","preview"],"publishedAt":"2020-04-26T18:06:07.227Z","updatedAt":null,"type":"tip"}},{"slug":"dark-mode-in-tailwindcss","title":"Dark Mode in TailwindCSS","description":"There are two ways to introduce dark mode into your TailwindCSS projects.","content":"\nThere are two ways to quickly add dark mode to your Tailwind CSS projects.\nThe first one is the quickest and easiest way. The second one is your choice if you want to have a controlled theme switch.\n\n# 1. Screen Config\n\nThis is a little hack and you can't manually switch the theme as it detects the theme from the user's operating system.\n\n## Set Config\n\nExtend your `tailwind.config.js` theme by adding a new screen type.\n\n```js\nmodule.exports = {\n theme: {\n extend: {\n screens: {\n dark: { raw: '(prefers-color-scheme: dark)' },\n },\n },\n },\n}\n```\n\n## Use Styles\n\nYou can now use it like you would use different screen sizes.\n\n```html\n

\n```\n\nIt's also possible to add states like _hover_ into the dark mode.\n\n```html\n

\n```\n\n# 2. Plugin\n\nAnother, more clean way and with the possibility to switch the theme manually is the plugin [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode)\n\nAdd the class `` to see the dark mode or remove it to see the regular theme.\n","type":"tip","tags":["design","tailwindcss","design"],"publishedAt":"2020-04-12T20:48:09.100Z","image":null,"updatedAt":null,"readingTime":{"text":"1 min read","minutes":0.87,"time":52200,"words":174},"data":{"title":"Dark Mode in TailwindCSS","description":"There are two ways to introduce dark mode into your TailwindCSS projects.","tags":["design","tailwindcss","design"],"publishedAt":"2020-04-12T20:48:09.100Z","updatedAt":null,"type":"tip"}},{"slug":"rapilo","title":"Rapilo","description":"An iOS game build with SwiftUI using custom animations and transitions.","content":"\nAs you might already know, I love coding and designing.\nI couldn't help myself but use the powerful SwiftUI framework and build an iOS game with playful animations.\n\n# Learning Resources\n\nI started looking into SwiftUI the day it was released. I started with Apple's own tutorials.\n\nA couple of days later, I discovered [Hacking with Swift](https://www.hackingwithswift.com) on Twitter.\nThere, I learned a lot about SwiftUI and its API, but couldn't find as much as I wanted about animations and transitions.\nMeanwhile you can find a complete list called [SwiftUI By Example](https://www.hackingwithswift.com/quick-start/swiftui).\n\nTo dive deeper into animations and transitions, I went back to my trusted design tutorial source [Design+Code](https://designcode.io/).\n\n# Design\n\nI 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.\n\n

\n\n## Colors\n\nBesides the gray colors, I used the default iOS colors `Color.pink`, `Color.orange`, `Color.green` and `Color.blue`.\n\n## Icons\n\nI used the new iOS icons font introduced with iOS 13 called _SF Symbols_.\nThe leaderboard is the only icon I designed myself, which is exported as _PDF_ to be used as a vector.\n\n# Developement\n\nAfter exporting the one icon and the gray colors to the `Assets.xcassets`, I was ready to start coding in Xcode.\n\nI 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.\nIt took me some time until I had something I felt was the right amount of animations and types of transitions.\n\n

\n\nAfter the UI and animations, I added the state management using the _Combine_ framework.\nAdding the leaderboard by using Game Center, was the last bit i did before I started beta testing.\n\n# Beta Tester\n\nIf you want to be a beta tester, just sign up [right here](https://testflight.apple.com/join/WwxTW39J).\nDon't forget to give me your feedback. It helps me to improve the game so you can have even more fun.\n","type":"project","tags":["swiftui","game","ios","animations"],"publishedAt":"2020-04-06T21:43:11.000Z","image":"/contents/project/rapilo/logo.jpg?v1","updatedAt":null,"readingTime":{"text":"2 min read","minutes":1.735,"time":104100.00000000001,"words":347},"data":{"title":"Rapilo","description":"An iOS game build with SwiftUI using custom animations and transitions.","testFlightUrl":"https://testflight.apple.com/join/WwxTW39J","appStoreUrl":"https://apps.apple.com/us/app/rapilo/id1503915715","image":"/contents/project/rapilo/logo.jpg?v1","tags":["swiftui","game","ios","animations"],"publishedAt":"2020-04-06T21:43:11.000Z","updatedAt":null,"type":"project"}},{"slug":"export-your-medium-articles","title":"Export Your Medium Articles","description":"How to export your articles from medium.com into Markdown files.","content":"\n# Export to HTML\n\nGo to [medium.com settings](https://medium.com/me/export) and request your export.\n\nAfter a while, you'll get an email with a download link.\nDownload the `medium-export.zip` file and unpack it.\n\n# Transform to MD\n\nInside the `medium-export` folder you'll find another folder `posts` with `.html` files in it.\nTo transform your `.html` files to `.md`, you can execute the `medium-2-md` NPM package with NPX.\n\n```shell\nnpx medium-2-md convertLocal Downloads/medium-export/posts -f\n```\n\nYour posts in `.md` format can be found in the `medium-export/posts/md_*` folder\n","type":"tip","tags":["medium","export","markdown"],"publishedAt":"2020-03-30T19:49:12.215Z","image":null,"updatedAt":"2020-03-30T20:54:12.215Z","readingTime":{"text":"1 min read","minutes":0.415,"time":24900,"words":83},"data":{"title":"Export Your Medium Articles","description":"How to export your articles from medium.com into Markdown files.","tags":["medium","export","markdown"],"publishedAt":"2020-03-30T19:49:12.215Z","updatedAt":"2020-03-30T20:54:12.215Z","type":"tip"}},{"slug":"this-blog-is-open-source","title":"This Blog Is Open Source","description":"Use this blog to start your own. Be online within minutes by add your data, choose your favorite color and write your first article.","content":"\nThis blog is built with [Next.js](https://nextjs.org) using [Tailwind CSS](https://tailwindcss.com) for styling.\nThe source code is on [GitHub](https://github.com/lailo/lailo.ch) and it's deployed on [Zeit's Now](https://zeit.co).\n\n# Get Started\n\nTo get started, you only need to pull or fork the repository, update some config variables and choose your favorite color.\nYou can find a step-by-step instruction in the [README.md ](https://github.com/lailo/lailo.ch/blob/master/README.md) of the project.\n\n# Add Article\n\nAdding new posts is as simple as creating a new Markdown file inside the `/articles` folder and pushing it to GitHub's `master` branch.\n\n## Meta Data\n\nIt's important that you keep the meta data at the top of the file.\n\n```yml\n---\ntitle: 'This Blog Is Open Source'\ndescription: 'Use this blog to ....'\ntags: ['open-source', 'web', 'react', 'nextjs', 'tailwind-css']\npublishedAt: '2020-03-29T19:14:12.215Z'\nupdatedAt: '2020-03-29T19:14:12.215Z'\n---\n\n```\n\nKeep in mind that the variable `publishedAt: '2020-03-29T19:14:12.215Z'` must have a value to publish your article.\n\nIf it's set to `published: ''`, your article will only be visible in development.\n\n# Hosting\n\nI personally like the simplicity of [Zeit's Now](https://zeit.co) and that's exactly what I use to host this blog.\nConnect your GitHub repository to a Now project and as soon as you push to master, a new build is executed.\nWithin minutes you'll see your new article online.\n\nIf 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.\n\n# Feedback\n\nIf you have any questions or feedback, please feel free to contact my via [Twitter](https://twitter.com/lailo-ch) of directly add an issue or create a PR on [GitHub](https://github.com/lailo/lailo.ch).\n","type":"article","tags":["open-source","web","react","nextjs","tailwindcss"],"publishedAt":"2020-03-29T19:14:12.215Z","image":"https://fullmetallinux.files.wordpress.com/2012/01/open-source-software.jpg","updatedAt":"2020-03-30T20:52:12.215Z","readingTime":{"text":"2 min read","minutes":1.335,"time":80100,"words":267},"data":{"title":"This Blog Is Open Source","description":"Use this blog to start your own. Be online within minutes by add your data, choose your favorite color and write your first article.","tags":["open-source","web","react","nextjs","tailwindcss"],"publishedAt":"2020-03-29T19:14:12.215Z","image":"https://fullmetallinux.files.wordpress.com/2012/01/open-source-software.jpg","updatedAt":"2020-03-30T20:52:12.215Z","type":"article"}},{"slug":"500-error","title":"500 Error","description":"We built 500error.co because we had to solve one of our own problems.","content":"\nCo-Written by [Susana Garcia](https://susana.dev)\n\nWe built [500error.co](https://www.500error.co) because we had to solve one of our problems. The idea was first pitched on [Pitchcard.io](https://www.pitchcard.io) and got a lot of traction. So we decided to built it, and we did it in less than two weeks.\n\n# How It Started\n\nWe ([Susana Garcia](https://susana.dev) 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.\n\nAs 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.\n\n# Developing in Bratislava\n\nWe’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.\n\nWe 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.\n\nWe 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](https://www.pitchcard.io).\n\nFrom day three up to day seven, we built the MVP and send some invite emails to the investors of [Pitchcard.io](https://www.pitchcard.io). They liked the simplicity and gave us really good feedback, what we could improve and what they were missing.\n\nWe used the second week to improve the UI for mobile, tablet and desktop. We also added a simple subscription with [Stripe](https://medium.com/u/3ecae35d6d66) (we really like Stripe). And we added better documentation of how to integrate it into Heroku, GitHub Pages and more.\n\n# Customize Your Page\n\nOur 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:\n\n- Add your own brand color\n- Choose one of the funny GIFs or just add your own Logo\n- Define your title and description so it sounds like you\n\n# The Result\n\nWe’re happy that our beta users liked the first version and we’re proud of what we could built in less than two weeks.\n\nNow 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.\n\nDo you want to be able to sleep at night without worrying about your server? [Visit **500error.co**](https://www.500error.co), create your own error page, integrate it into your existing projects and have one less thing to worry about.\n","type":"project","tags":["error","server","web"],"publishedAt":"2016-12-18T20:47:11.000Z","image":"/contents/project/500-error.jpg?v1","updatedAt":null,"readingTime":{"text":"3 min read","minutes":2.365,"time":141900,"words":473},"data":{"title":"500 Error","description":"We built 500error.co because we had to solve one of our own problems.","websiteUrl":"https://www.500error.co","image":"/contents/project/500-error.jpg?v1","tags":["error","server","web"],"publishedAt":"2016-12-18T20:47:11.000Z","updatedAt":null,"type":"project"}},{"slug":"list-of-ideas-and-unfinished-projects","title":"List of Ideas and Unfinished Projects","description":"This is a story of my huge list of ideas and a folder full of unfinished projects. I fought it with Pitchcard.io.","content":"\nCo-Written by [Susana Garcia](https://susana.dev)\n\nThis is a story of my huge list of ideas and a folder full of unfinished projects. I fought it with [**Pitchcard.io**](https://www.pitchcard.io)**.**\n\n# List of Ideas\n\nLike 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.\n\nThe 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.\n\n> The best feedback is brutal honesty.\n\nI 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.\n\n# Unfinished Projects\n\nWith the feedback of my friends and some google search sessions, I could priorities my ideas. So the next step was to actually built them.\n\nAs 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.\n\n> Projects folder: A graveyard of good ideas.\n\nThis 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. \nI 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.\n\n> Nobody will steal your Idea.\n\nAfter 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.\n\nThere 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](https://medium.com/@leegordon/nobody-will-steal-your-shitty-advertising-idea-fd6c79860ffb) written by [Lee Gordon](https://medium.com/u/e7353574c06e).\n\n# The One Project\n\nI wanted to be quick on evaluating my ideas. I did some research but couldn’t find any good solution. That’s why we ([Susana](https://susana.dev) and I) decided to do one more project (I know, again another project) to make this flow very easy and quick.\n\nThe result is [**Pitchcard.io**](https://www.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.\n\n# An Idea\n\nPeople 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.\n\n# Skills and Expertise\n\nPeople 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.\n","type":"article","tags":["pitch","idea","projects"],"publishedAt":"2016-07-17T09:14:05.215Z","image":null,"updatedAt":null,"readingTime":{"text":"3 min read","minutes":2.935,"time":176100,"words":587},"data":{"title":"List of Ideas and Unfinished Projects","description":"This is a story of my huge list of ideas and a folder full of unfinished projects. I fought it with Pitchcard.io.","tags":["pitch","idea","projects"],"publishedAt":"2016-07-17T09:14:05.215Z","updatedAt":null,"type":"article"}},{"slug":"pitchcard","title":"Pitchcard","description":"Since the iPhone released and the following AppStore boom, a lot of people began to tell us: \"Hey, I have an app idea...\".","content":"\nCo-Written by [Susana Garcia](https://susana.dev)\n\nSince 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.\n\n# Get to the Point\n\nThey 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.\n\nWe 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.\n\n# Share Your Idea\n\nThere are another few things that some people don’t know about good ideas.\n\nSome 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.\n\nAnother 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.\n\n# Quick Feedback\n\nThat’s why we’ve built [Pitchcard.io](https://www.pitchcard.io/) to get quick feedback. We’ve picked this name because of the elevator pitch.\n\n> “\\[..\\] the idea that it should be possible to deliver the summary in the time span of an elevator ride, or approximately thirty seconds \\[..\\]”\n\n## How it works\n\n1. Visit [www.pitchcard.io](https://www.pitchcard.io/)\n2. Create your _Pitchcard_\n3. Share it\n\nWe 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._\n\nYou can share your _Pitchcard_ with close friends via WhatsApp and email, or with everyone via Facebook, Twitter or others.\n\nAnother 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.\n\nWe hope you like our product and wish you good luck with your next billion dollar idea. 😜\n","type":"project","tags":["pitch","idea","web"],"publishedAt":"2016-05-08T07:07:37.915Z","image":"/contents/project/pitchcard.jpg?v1","updatedAt":null,"readingTime":{"text":"2 min read","minutes":1.97,"time":118200,"words":394},"data":{"title":"Pitchcard","description":"Since the iPhone released and the following AppStore boom, a lot of people began to tell us: \"Hey, I have an app idea...\".","websiteUrl":"https://www.pitchcard.io","image":"/contents/project/pitchcard.jpg?v1","tags":["pitch","idea","web"],"publishedAt":"2016-05-08T07:07:37.915Z","updatedAt":null,"type":"project"}}]},"__N_SSG":true}