{"pageProps":{"tips":[{"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":"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"}}]},"__N_SSG":true}