DEV Community: Luis Ramos

Publishing your first android library!

Luis Ramos — Tue, 15 Sep 2020 00:00:00 +0000

Publishing a library you develop is a journey on its own. It can be overwhelming, especially if you are targeting Android. There is a lot of documentation out here, but I could not find one that would go end to end with it. So I wrote this post!

This came about because I released my first open source library: Kroclin! It is a snapshot testing library written in Kotlin, to help out writing less code in your tests. Check it out and give it a star if would like. Now, let me tell you about the journey to release it!

Sonatype provides a guide for OSS repository hosting and another one for releasing your deployment that I read, but they could be more helpful. Everything you need to know is there, it just takes several readings and lots of googling to grok it. Here are the steps you need to go through:

First, create a Sonatype JIRA account if you don't have one already.

Then create a new project issue. Make sure to click this link, since they require that you use the template. In the issue body, write that you want to claim the domain that matches the library groupId. In the case of my library, the groupId is dev.luisramos.kroclin and I claimed dev.luisramos.*. Here is my JIRA ticket as an example.

I picked up from reading other issues that you only need to go through this process once, if you request a wildcard groupId. Other libraries released under the same groupId don't require a new project ticket to be created.

Note that you could also claim the groupId that matches your project hosting, for example, io.github.orgmir if that's where your project lives.

After you have opened a new project ticket, you need to prove that you own the domain you claimed. You can either:

Add a TXT record to your DNS referencing the url to the JIRA ticket you created (fastest)
Setup a redirect to your github page

I went with the first option, and since every DNS provider differs I won't go into specifics. Some googling on how to add a TXT record for your DNS provider should get you there.

NOTE: You will need to submit the full URL for the issue, so in my case the content for the TXT record was https://issues.sonatype.org/browse/OSSRH-60527.

I went ahead and added a comment on the ticket with the output of dig -t TXT luisramos.dev, just to show that it was working. Don't know if it made a difference 😅

After doing the proof of domain ownership, you will need to wait for Sonatype to reply to your ticket. They will let you know once the repository on their end is ready to receive artifacts. Don't actually upload anything until they give you the OK, your artifacts will just end up in a generic catch-all repository.

After they reply, go ahead and upload your first artifact. You can copy my gradle-mvn-push.gradle script and run ./gradlew clean build uploadArchives (don't worry, I also copied it from someone else). You could also use a plugin like vanniktech/gradle-maven-publish-plugin.

Once the upload is done, go ahead and log in to https://oss.sonatype.org using your Sonatype JIRA account.

Select Staging Repositories on the side bar, and you should see a list with the repository for your library. Select the repo, and press Close on the top bar. This will perform some validation on Sonatype's side, and once the status updates and the repository is tagged as closed, select the repository again and press Release.

If you use a plugin, the upload step will probably try to close and release the staging repository. Loggin in to Nexus Repository Manager should only be needed when you are releasing for the first time, or if you use a script like me.

You can now update on your JIRA ticket that the repository has been released. This will let Sonatype know, and they will trigger a sync with maven central, so your library can show when searching in search.maven.org. This step should is also only needed the first time you are releasing.

And that's it! It might take a couple of hours for the sync to happen, but congratulations! You have released a library onto the world! What a trip it was 🚀

Ler - An RSS Aggregator for Android!

Luis Ramos — Fri, 20 Mar 2020 00:00:00 +0000

I have been working on a RSS aggregator app called Ler. Its available for Android, and you should give it a try! It is the first app I design, develop and publish all by myself, so I am pretty proud of that!

I know what you are thinking, another RSS feed app? Aren't there billions of them? Well, yes. But this one is mine. And I have plans. Big plans! Let me tell you how it came to be, and what I want to do with it.

Twitter is a time sink

I spend too much time on twitter. I checked my phone usage settings for apps, and twitter is always number one on the list, toppling YouTube (!!) and WhatsApp. I though I watched a lot of Youtube, but aparently, on a very boring day, I accumulated 4 hours of twitter usage...

So I looked into Googles digital wellbeing app, and turned on a 30 minute timeout for Twitter. And it works! Some days, I don't even reach the timeout. Unfortunatly, this also meant that a lot of the blogs I read wouldn't reach me as well.

And there you have it. I took the time I was wasting and built this app!

Ler

The app name is the portuguese word for reading. I did a search and it seems nobody claimed it, so why not? The main features that I have built so far:

You can subscribe to RSS feeds (crazy I know). You can manually type in a website adress, or you can share from the browser to the app!
You can filter out articles that you already read, or just show articles from one feed.
You can swipe an article to toggle it read, or mark all articles in a feed at once!
Feeds will be checked for updates every hour automagically.

Articles currently open in the browser. I toyed with the idea of having a built in reader, but that seemed overkill for what I wanted to do. I already used the browser to do most of my reading anyway.

I am pretty proud of how it turned out, despite not being great at UI design, I kept it simple and it does the job! I have been using it for the past couple of weeks, and I think I impressed myself by actually using it instead of defaulting to Twitter as a time killer.

Open so everyone can read it

Not only am I using this app to avoid using twitter all the time, I will also use it as a showcase project. Hence, my plan in the next weeks is to write a bunch of tests, clean up the folder structure, and open source it.

So far, I have not worked in an app that had their source open, so most often when talking about my work I can't provide examples. I applied all my knowledge and tried to build the simples app I could, while still being a good example of how I would build an app.

My plan is to also write about android development, while using the app as an example. I made some architecture choices that I can talk about, since I haven't found a lot of written examples online.

Please give it a spin, and let me know what you think! You can tweet at me or send me an email. I have a little roadmap with more features, but let me know if you want a particular feature added, and I will add it to the list!

My new blog! - Creating a Gatsby website

Luis Ramos — Tue, 17 Mar 2020 00:00:00 +0000

Welcome to my new blog! Hope you enjoy it, I have spent the last couple of weeks building it. Now that it is done, I can finally start writing about stuff!

I kinda rebuilt it because I wanted to write about building it...

So let me tell you how it works, what I learned, and how easy it is to do it!

Tech stack

To be upfront about it, this blog is built using Gatsby, and deployed using Github Actions to a Digital Ocean droplet. And I am very happy with it. This entire website is open source, so if you wanna check the code go ahead!

One day I was reading some blog posts from Tania Rascia and this post made me look into Gatsby. In it she migrated her wordpress blog to a Gatsby website that she built from a pretty bare bones template. I have been thinking of revamping my blog again, since the last one was more than a year ago. Pairing that with my interest with this new JAMStack thing, I just got excited and started looking through the docs!

After building this website, I really enjoyed working with the plugin system and I loved that it used React and Graphql.

Getting started

Following Tania's footsteps, I installed the gatsby-cli and created a website using the gatsby-advanced-starter. Turns out, that was totally overkill for me, and most of the things there overwhelmed me. So I tried again running gatsby new luisramos.dev and slowly added the plugins I needed as I went along.

Starting with the empty project, the first thing I did was setup Tailwind CSS. I am not very good in terms of design skills, and playing around with CSS is fun but can also become a huge waste of time. Tailwind fits nicelly into the "just make a component" React world, and paired with a fantastic documentation page, it is very easy to work with. You can quickly create your styles using the existing classes, and when it you start duplicating a lot, you move everything to a component! 👍

Setting up Tailwind with Gatsby was as easy as adding the plugin gatsby-plugin-postcss to gatsby configuration, adding a postcss.config.js requiring the Tailwind library, and adding the Tailwind css imports to the global.css file.

I am very impressed with the plugin system. Anything you need, and you bet there is a plugin that does it! I wanted a RSS feed with all my posts, there's a plugin for that: gatsby-plugin-feed. I want my posts to be in markdown, there's a plugin for that: gatsby-transformer-remark. I wanted syntax highlighting for my code snippets, there's even a plugin for the plugin: gatsby-remark-prismjs! Overall, very wonderful to work with.

This plugin system even got me wanting to build more websites!

React+Graphql

Another feature I enjoyed was the React and Graphql support. In the beggining it felt very overkill to have a graphql query everywhere, but the more I read the documentation, the more it made sense to me.

I have enough experience with React that I could jump straight into this new website building my layout. After I had build the header/footer/nav combo, I started thinking about the main page, and I decided that I wanted the latest three posts there. So when you land, you can immediatly read some stuff.

To do this, you write a graphql query in your React page, name it pageQuery and export it. Then, Gatsby will take the data generated from that query and feed it to the component.

The whole experience around this was incredible: I played around with the graphql browser until I had the data I wanted, I pasted the query into the page component, and like magic the data was there! Graphql is pretty sweet.

After that, I added some code to gatsby-node.js so it would create a page for all of my posts. It uses a template, so I don't need to create a component for each post manually. After that, I added a contact and about pages, an RSS feed, some more styling and a bit of content. Sooner than I was expecting, I had a website ready to be deployed!

Deployment via Github Actions

My previous blog was hosted on the same Digital Ocean droplet that this one is. I have this one box that I use to play around with several things, so since I am already paying for it, and I don't drive a lot of traffic, I planned the same for this blog.

The deployment steps to get this into the server are:

Run gatsby build to get the static version of the website
Upload the generated folder to the server, preferebly using rsync

So I shopped around a bit, and I am impressed by the amount of Github actions already available. I created a workflow that checkouts my code, runs the build and uploads the website to my server in less than half an hour. And it caches the ~/.npm folder, so it all runs in 2 mins on CI.

Yay Gatsby

I am very happy with the current setup. This website already has pulled this post out of me, so lets see if it makes me write more! Hope you enjoyed this write up as much as I have enjoyed building the site.

If you liked this post, or if you just wanna send me some feedback, send me a tweet.

As a final note, I wrote this post in a very cool markdown editor, Typora. It is free during beta, so give it a try!

Oh My Zsh prompt theme for Windows Powershell!

Luis Ramos — Sat, 04 May 2019 00:00:00 +0000

I do most of my programming in my mac these days, but once in a while my gaming desktop becomes the testground for some code bashing. Since I use git on the terminal, on windows I use powershell instead of a sweet zsh shell.

Working with powershell is not that bad, but I terribly miss not having the git branches on my prompt. Since I really enjoy the Oh My Zsh theme on my Mac, here’s a snippet that changes your power shell prompt!

function prompt {
\$ESC = [char]27

$p = Split-Path -leaf -path (Get-Location)
  $branch = $(git symbolic-ref -q HEAD) -replace "refs/heads/"
  if ($branch) {
$branch = "$ESC[34mgit:($ESC[0m$ESC[31m$branch$ESC[0m$ESC[34m)$ESC[0m "
}

"$ESC[1m$ESC[32m$([char]0x279C)$ESC[0m $ESC[36m$p$ESC[0m $branch\$ESC[0m"
}

This code lands in the $profile file, which probably needs to be created:

new-item -itemtype file -path $profile -force
notepad $PROFILE

Notepad should open up and you can copy paste the snipped there!

Auto Layout UIView Extension: A quick way to programatically create layouts

Luis Ramos — Tue, 30 Apr 2019 00:00:00 +0000

Recently I have taken a renewed interest into this blog. I have revamped the theme (mostly stealing it from my friend's blog, check it out) and now I'm focusing on writing more regularly. I noticed that a lot of my code snippets are just sitting quietly on Github or Gitlab and could use a post or two to describe why I made them!

The first one I want to talk about is a UIView extension that I always use in my iOS projects. I always prefer to build my interface programatically, so that lead me to search for a few auto layout libraries.

The issue I have with using an auto layout library is that if a new developer joins the team, that person will need to deal with my choice of library that usually comes with its own set of idioms and abstractions. My experience is that people enjoy building layouts differently and the preference will always be for some other library! Also, the added abstractions leave me a bit too far away from the auto layout specifics.

Instead of choosing a library, a few years ago I created an extension with just a couple of methods to see if I could get away without adding a dependency.

func align(with view:UIView, constant:CGFloat = 0.0) {
  translatesAutoresizingMaskIntoConstraints = false
  leftAnchor.constraint(equalTo: view.leftAnchor, constant: constant).isActive = true
  rightAnchor.constraint(equalTo: view.rightAnchor, constant: -constant).isActive = true
  topAnchor.constraint(equalTo: view.topAnchor, constant: constant).isActive = true
  bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -constant).isActive = true
}

I kept adding to it as I needed and it kept growing. Currently it looks more like this:

@discardableResult
func align(with view: UIView, constant: CGFloat = 0.0) -> [NSLayoutConstraint] {
  translatesAutoresizingMaskIntoConstraints = false
  let constraints = [
    leftAnchor.constraint(equalTo: view.leftAnchor, constant: constant),
    rightAnchor.constraint(equalTo: view.rightAnchor, constant: -constant),
    topAnchor.constraint(equalTo: view.topAnchor, constant: constant),
    bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -constant),
  ]
  NSLayoutConstraint.activate(constraints)
  return constraints
}

@discardableResult
func alignTop(to anchor: NSLayoutYAxisAnchor, constant: CGFloat = 0.0, priority: UILayoutPriority = .required, isActive: Bool = true) -> NSLayoutConstraint {
  translatesAutoresizingMaskIntoConstraints = false
  let constraint = topAnchor.constraint(equalTo: anchor, constant: constant)
  constraint.priority = priority
  constraint.isActive = isActive
  return constraint
}

As you can see, some wrapper functions with sensible defaults make auto layout better to work with. The code becomes cleaner and easier to read, and you don't loose any of the features that auto layout gives us.

func viewDidLoad() {
  super.viewDidLoad()
  // ... setup view code

  containerView.align(with: view)
  textView.alignTop(with: view, constant: 40)
  textView.alignLeadingTrailing(with: view, constant: 20)
}

This extension has grown after several years of copying this over to each new project and adding something that was missing. It fits my needs well, so I have stopped looking for an auto layout library! The full extension is available in this public gist. Thanks for reading!

Blog revamp: Migrating to Hugo

Luis Ramos — Thu, 27 Sep 2018 00:00:00 +0000

_ Update: _ Since this post was made, I have moved my blog to a new website and tech stack. Check out the post about the new revamp!

The blog has a new look! I like to think it looks a bit better now. Of course the fun side of it is the tech stack. It is now generated using hugo, deployed using Gitlab incredible CI pipelines, and also I'm hosting it on a Digital Ocean droplet.

I want to talk about my experience migrating from Jekyll to hugo, and how I went about setting everything up.

Migrating to Hugo

This blog was previously hosted in Github pages, and it used Jekyll to render the static pages. All the content was in markdown already, so it was relatively easy to migrate it to hugo. The content structure is relatively similar in both frameworks. I only had trouble with the syntax higlight for my code snippets, and with processing the template sass files to css.

Hugo uses a code syntax generator called Chroma. The only change is that instead of using the normal markdown code marks, it uses specific tags:

< highlight swift >

You also need to declare the language you are highlighting (swift in that example).

Generating new content is super easy and fast, you just run the following command:

hugo new posts/title-of-blog-post.md

This command will create a new file in the specified content folder, with some front-matter meta data already setup for you to fill.

The template system is also straighforward to use, and you can easily define new content types and front-matter, to be used by the hugo new command.

Hugo Extended

I found a gap in documentation about this, but it seems that hugo has an "extended" version. It adds extras, like sass processing, to the usual binary.

When I tried to edit the template sass files, the changes weren't visible on refresh. They were being ignored, and since I was running locally there was no change it could be some cache issue.I eventually figured out that the template was using generated resources in a resources/_gen/ folder, and deleting that basically broke the generation. Since no css was found, hugo errored out and didn't generate the website.

After googling around, I found out about the extended version of hugo that you can download from their releases page. Running the extended version compiled the sass files into css, and made everything work again. But now this means I need the extended version to generate my website, since I want to process the sass files on every generation.

Deployment with Gitlab CI

If you haven't tried Gitlab you should really give it a spin. I'll to not fanboy about it too much, but they have some amazing features.

One of them is the ability to setup a CI pipeline, writing some configuration on a .gitlab-ci.yml at the root of your repo. This way, everytime I push a commit to master, a deployment is triggered by Gitlab.You get 1000 free minutes of running time each month, more than enough for all your blogging needs.

Since I have to use hugo extended to generate my website, I couldn't use the suggested image to run my build. I created a new Dockerfile that installs the right hugo binary, and also all the commands needed for deployment. This highlights another cool feature of Gitlab: you have a container register for each project, meaning you can have your container images right next to the project they are relevant to.

After I built and pushed the image, I just needed to reference it in my CI file to get it running the deployment without a hitch! It's pretty satisfying to finally get a CI job green. Check out the .gitlab-ci.yml and the Dockerfile used for this.

Hosting on Digital Ocean

The final command of the deployment is a rsync into a Digital Ocean droplet. Pretty satisfied with the setup process for creating a droplet, it's a one button click for most of what you need. Haven't had an issue with it yet!

I am using nginx to serve the website on the droplet, which was fairly easy to setup with all the info that is available online. I setup certbot to create and automatically renew ssl certificates for the website. It also takes care of updating the website config for you.

Also, since Cloudflare has a one website free tier, I got all of my traffic running through it. So hopefully, my droplet will barelly be touched!

DevOps for the common man

I am really happy with this setup. Hugo is a powerful framework, quick to setup but roboust enough to handle more heavy duty websites. Gitlab enables DevOps for the common man, giving me control over it but in a way that I'm not overwhelmed. And hosting solutions like Digital Ocean used in conjuction with CDNs like Cloudflare mean that you can serve a lot of people for cheap. A lot can be done by leveraging this infrastructure, which gets me excited!

Next up, I'll add a static CMS like Netlify to this blog so I can write from anywhere!

iOS local notifications ninja bug!

Luis Ramos — Tue, 26 Sep 2017 00:00:00 +0000

Recently I was working in a project that require me to show a local notification. And for the love of XCode, the app would not show an alert! I was at a loss!

Beggining with iOS 10, the iOS notification framework was revamped to unify both remote and local notifications. This threw me into a loop while trying to figure out the problem. The only thing I had to go by was an error message that poped up when adding the notification to UNUserNotificationCenter:

Adding notification request failed with error: Error Domain=NSCocoaErrorDomain Code=4097 "connection to service named com.apple.usernotifications.usernotificationservice" UserInfo={NSDebugDescription=connection to service named com.apple.usernotifications.usernotificationservice}

What a cryptic message, thanks Apple Dev team! I had a custom action setup, so the user could open a url with more info. I was adding this URL to the userInfo of the notification and here was where the bug lived! The issue was that I was adding the URL object, instead of an absolute string of the url. As soon as I changed this, everything worked.

Of course, a stackoverflow answer helped me figure this out!

Fastlane Supply uploads everything!

Luis Ramos — Tue, 05 Sep 2017 00:00:00 +0000

Ever since I found out about fastlane, I've been using it to deploy Android and iOS apps. It's amazing how streamlined things can get: it saves you a bunch of time when deploying a release; it supports integrations with your favourite distribution platforms (yay Crashlytics); and you can easily copy the setup from one app to the other! Couldn't be happier with it.

Here's a tip for the Android devs out there using fastlane, add this to your before_all step:

before *all do
  sh "rm -f ../app/build/outputs/apk/*/\_/\*.apk"
end

I've found that when deploying Android builds using supply, the tool tries to upload whatever it can find in your build/outputs folder. And often the error you get are unrelated like:

Google Api Error: apkUpgradeVersionConflict:
APK specifies a version code that has already been used.

This is obviously not true if you check your google play console and your build.gradle file. Looking at the output the (at the GRADLE_ALL_APK_OUTPUT_PATHS variable), it seems supply is trying to upload every apk he finds, including debugging version and other flavors. Adding that line will save you some time and stop you from screaming "Why don't the versions match??"

Xcode crash on auto-complete: Snippets!

Luis Ramos — Sun, 07 Feb 2016 00:00:00 +0000

My XCode crashed after updating it to version 7.2. It happened everytime I tried to use auto-complete in an Obj-c file. Since my project was in Swift, it didn't bother me much. Things got worse when I actually needed to edit some library code!

It crash with this exception:

(NSInvalidArgumentException): -[__NSCFData isEqualToString:]: unrecognized selector sent to instance 0x7fd01c5d4530

Since I got bored fast using a text editor to work around it, I tried to fix it. I use some plugins, one of them being fuzzy-autocomplete (if you don't use it, check it out, it's awesome!) I assumed the problem was with one of them. I removed them one by one and everytime I tried, BAM! Still crashing!

This was bad, because plugins where my only option. After googling for a while, I didn't find anyone with a similar problem, so I guessed it had something to do with my custom instalation. And this is dumb, but I should have looked to the XCode crash log sooner...

6 0x00000001038f4708 +[IDECodeSnippetLibraryCompletionStrategy_scope:matchesScope:atBOL:] (in IDEKit)

After checking the crash log, it was apparent who the culprit was: Snippets!

It was the only custom thing left on my instalation. I renamed the snippets folder, effectivly stoping XCode from finding them. And guess what? Yes! Auto-complete worked again! I re-added all my loved plugins (fuzzy-autocomplete included), and back to coding I was. I dind't add my snippets, because I wasn't using them at all. But recreating them with the new XCode should solve the problem.

Just another day working with XCode...

PS: On a side note, if you don't use plugins with XCode, check Alcatraz, a plugin manager! You are bound to find something that will improve your XCode usage :)

iOS Project Structure

Luis Ramos — Mon, 11 Jan 2016 00:00:00 +0000

To better organized my code, I have been changing my project structure along the years. I think I've finally set with one, so time to record it for the future!

There are two basic guidelines when creating a project structure. First, keep it simple. Second, use something that makes sense to you.

If you google a bit for this topic you may find this quora answer or these guidelines. They both suggest something like this:

View Controllers
Views
View Models
UI (aka storyboards)

If you have small projects, this structure will work fine. But when you start adding more files to it it becomes confusing. I rather organize files in a functional way, separating them by areas and layers of the app. So it ends up something more like this:

Interface

Base
Onboarding
Feed
User
Settings
- Networking
- Local Storage

Classes

Categories/Extensions
Classes that don't fit anywhere else
- Resources

Inside those folders I usually follow the first setup, separating files by Views, ViewControllers, etc. This way you have almost every file related to an area of the app in one folder. All my images are stored in XCAssets. Fonts and other raw files are in Resources (usually with a dedicated folder for each).

If you have an even awesome setup or if you just want to share yours, feel free to send me a tweet.

Swift Variables in Extensions

Luis Ramos — Mon, 19 Oct 2015 00:00:00 +0000

I have recently started working on a project that uses Swift2.0! I have been using Obj-C for the past 3 years, and when Swift came I wasn't one of the early adopters. Problems with the language and with SourceKit always crashing in XCode 6 didn't make for a good dev enviroment. Now with the 2.0 released to the wild, the promisse of open source and XCode 7, Swift is good to go!

One of the first problems I had is one that happens to many iOS developers that use extensions/categories in their projects: How do I add a variable (static or not) to an extension?

Since I seem to always be googling for this one, I'll log it here for future convinience.

Static Variables

For a static variable, there is actually a really neat way:

extension UIView {
  struct Static {
    static var defaultPadding : CGFloat = 16
  }
  func widthWithPadding() -> CGFloat {
    return self.bounds.width + Static.defaultPadding
  }
}

Since you can declare structs in an extension, you can use these value objects to hold your static variables and they function the same way as declaring a static variable on the class. If you don't like the extra Static. declaration, you can create wrappers using computed variables:

extension UIView {
  var defaultPadding : CGFloat { return Static.defaultPadding }
}

Instance Variables

For instance variables the solution is to use the obj-c runtime. You need to create computed variables that get and set an associated object using objc_getAssociatedObject() and objc_setAssociatedObject(). This is the same approach taken if using it with Obj-C.

import ObjectiveC

extension UIViewController {
  struct Static {
    static var MainTitle = "\_MainTitle"
  }
  var mainTitle: String? {
    get{
      return objc_getAssociatedObject(self,&Static.MainTitle) as? String
    }
    set(value){
      if newValue = newValue {
        objc_setAssociatedObject(self,&Static.GenericTitle,newValue as NSString?,.OBJC_ASSOCIATION_RETAIN_NONATOMIC)
      }
    }
  }
}

That way you can extend to your heart desire! If you want to understand the difference between structs and classes check out the Apple docs. And to find out more about what kind of magic you can do with obj-c runtime check out NSHipster post on it.