Menu

Journal

Trying Something New with the 3Ts

, , , , , , , , , 0

The 3Ts: Timber, Twig, and Tailwind CSS

Even though I just moved to a brand-new domain and a new approach (somewhat), I still failed to keep up with my code studies or anything technical. I wonder if I will forever remain a student and never actually get to use all my newly-learned skills thus far into real-life action? Now that would be a shame and depressing from my part.

I re-hauled my entire blog once more, and no matter how much I try to switch to new base themes and try something new, I end up going back to my previous go-to base theme.1 There’s just way too many brand-new technologies involving WordPress that I feel completely outdated. On the other hand, this shouldn’t be as a surprise. Even blogging in general is becoming outdated somewhat. I haven’t been completely motivated in doing anything coding-wise or just technology in general.

I dropped out of my #100DaysOfCode Twitter challenge again, but guess what. I’ll be going back to that challenge once more. I conquered the challenge once (many years ago) and I’m sure I can conquer it again, even if my mind isn’t completely updated anymore.

Attempting at WordPress Theme Development Again

Sometime last year, I came across a Udemy course about a different approach to WordPress theme development – using PHP frameworks Twig and Timber. As a sidenote, I’m not very well-versed with PHP at all. I managed to learn the basics, but that’s pretty much it. All this time I’ve relied so much on the child theme system and site/page builders. It’s about time that I finally level myself up and build themes completely from scratch. Maybe.

I signed up to two courses. One from Udemy, the other an independent one from Build Awesome Websites.2 Since I haven’t touched web dev/coding for awhile now because of the pandemic,3 I’ve gotten a bit rusty, even with HTML, CSS, and (basic) Javascript. I had to take some time to read the latest versions and then start the first few chapters of the courses, only to realize that a lot of the stuff installed in my system4 are outdated.

In order to start learning and developing WordPress sites with Timber and Twig, I needed to have the following:

  • A code editor – Both courses use VS Code. I use VS Code too. But you can use any code editor you’re comfortable with.
  • PHP 7.4 – Although my Homebrew installed the PHP version is 8.0, a lot of the things in both courses are outdated, plus Timber doesn’t support 8.0 yet, so I had to look up Google on how to switch my PHP from 8.0 to 7.4. I even had to bug the Timber GitHub support for the help.
  • Composer – The courses all used Composer 1, but because I’m in the middle of 2021 now and even got a note that Composer 1 is already deprecated, I had to update my currently installed Composer to Composer 2.
  • Local Environment – I made a tutorial of sorts about local environment for developing WordPress sites some years ago. Udemy uses Local by Flywheel, BAW uses MAMP. Either one (or others like AMPPS, WAMP, etc.) would work. I had to make a few adjustments according to the environment I’m using. I’m using Local by Flywheel for both.
  • Node.js – This is for the installation of Tailwind CSS. I installed Node.js in my machine some years ago for learning/studying purposes, but I’m pretty sure my version is already outdated. I’ll need to make another workaround with this one, just in case.
  • For the absolute noobs, Git (and GitHub) – You can install Git in your machine here. If you don’t have a GitHub account yet and you’re interested in sharing your code projects so other developers can see it (and help you out with any mistakes you’ve made), be sure to sign up for a free account. There are other Git repo services like GitLab, but GitHub is the most widely used repo service. I thought of having a GitLab account myself, but I don’t know what I should store in there, so I’ll stick with GitHub for now.

I have dabbled with Twig before in one of my past development courses, but I can’t remember what I used Twig for. But because Timber is being powered by Twig, I have high hopes I can finally apply what I learned to an actual real-life project, and also, boost my resume and portfolio creds a little bit.

I’m still setting up right now because of the workarounds, so I’ll explain what I’ve done so far.

Using/Switching to the suitable version of PHP

During the first few lessons of setting up the local environment, I had to check my machine if I had any of the things required already installed beforehand. Luckily I did, because the first thing I checked was if I already had PHP installed. I didn’t, so I used Homebrew to install PHP. Both courses are using Windows PC, so their instructions for installation are completely different. If you’re an absolute beginner and have never really dabbled in local environment before, you’ll have to learn to be patient to look up for specific instructions for the machine you’re using. If you’re using a Mac or some other machine that’s not Windows PC, you’d have to look up for them. Luckily, I have Homebrew installed in my machine and I got PHP installed quickly.

Homebrew installs the latest stable PHP version, and when I checked it, it was 8.0. I’ve read some comments from the students in the past complaining about how outdated the course is when it turns out that the required components to set up the environment were completely outdated from each other. I had to learn that the hard way:

Although I felt desperate and Googled like crazy, even bugged Timber GitHub for some support, now that I look at this piece of the error message I got from the Terminal, I can finally see the problems I had:

  • Composer 1.0 is already deprecated, but it automatically switched to 1.18 so that it will be able to install Timber.
  • One component of Composer, PHPUnit, doesn’t support PHP 8.0, which was the version that Homebrew installed before.

So, based on the user comments at Timber GitHub, I looked around on how to get my machine to use the previous PHP version (7.4) to get it to download Timber. I even checked to see if I had any other PHP versions installed before 8.0. It turned out that 8.0 was the first time I installed PHP, so I went ahead and installed PHP 7.4 via Homebrew again.

Finally, I installed Timber in my development theme folder:

And Timber is finally installed! Yay!

Why install Timber the “hard way” when there’s a WordPress Plugin for it?

The starter theme that I installed from Timber also said that I need the Timber plugin to be installed in order for it to work. However, the latest news from Timber is that as they start to upgrade their components (probably to get ready for PHP 8.0), they plan on deprecating the WordPress plugin version and just stick to using Composer. I know that’s a lot of work for a beginner and even for a hobbyist developer, but at the same time, we get to learn something new and eventually, be comfortable with.

Both courses also use Composer to install Timber, knowing this fact. But, since the WordPress plugin still exist for now, that would be the last step to do if Composer is failing in our machine. Luckily, I was able to find some workaround with my machine and get everything to work, so I won’t have to turn to the plugin installation.

The Udemy version uses Bootstrap, while the BAW version uses Tailwind CSS. I plan on using both, depending on the type of project I feel like doing. I’m also somewhat familiar with Foundation and Materialize CSS, I’ll be building themes using those as well. I even bookmarked a Youtube video for a Bulma tutorial.5

Conclusion

I finally got my setup ready to go. The next step would be installing Tailwind CSS for the BAW course and also setting up Bootstrap for the Udemy course. I’ll write another post for my latest updates.

I’m finally excited that I’m on my way to building WordPress themes the easier way. Let’s go!

The NINPOJineous is now Adrianne Codes!

, , , , , 0

I haven’t been blogging here for almost a year now, but I have been thinking about of moving on to a new change as I continue on with my neophyte coding journeys. I guess it’s also safe to say that I have gotten over the name of this code studies/progress blog and "grow up". Luckily, I was surprised that the domain extensions have added along with the new extension of .codes included there. I thought that this was a good opportunity to move forward, get a fresh start, and most of all, with a different and much more humble blog name: Adrianne Codes.

I’ve come up with different ideas on how I can make this an interesting blog worthy of like-minded code learners like me to be used as some sort of an inspiration. Unfortunately, even I couldn’t live up to these ideas, let alone the "ninja" name on the domain. Aside from making a fresh start, I also want to be a lot more realistic too. I was always fan of the kawaii-cute things that I wanted to add my love for the cute things everywhere in all of my life-related blogs/sites. On the other hand, I’m at that age where I really need to live life and accept my reality.

And so, welcome to my new code-learning progress tech blog, Adrianne Codes. The new theme is very simple, just like the majority of devs and techies who like to keep their blogs very simple, and I also realized how distracting the fancy-like images and graphics that splashed my previous themes. I ported everything from The NINPOJineous to this domain, so that I can easily decide what to do with my old (and outdated) content from here. The migration was really quick, since both these sites are hosted under the same host. However, I will have to spend some time to make some changes to match the Adrianne Codes purpose and not just a "renaming" of The NINPOJineous.

Updates on Code Studies

Here I am again, participating in the #100DaysOfCode challenge on Twitter. However, this time, I will be refreshing again with a Udemy course called 50 Projects for 50 Days. It contains small projects that we can build and re-use for our future projects that involves HTML, CSS, and Javascript. I’m alright with HTML5, but there’s so many new things that I still have to get used to, such as the Flexbox and CSS Grid and variables for CSS, and then basic Javascript and DOM. No frameworks like React, just good ol’ vanilla Javascript.

So far, I only made 2 projects. I only started with the challenge again 2 days ago after all. You can check them out on my CodePen.

I’m also going to attempt to get back to Python again. I started with the Udemy Course 100 Days of Code – The Complete Python Bootcamp for 2021 by one of my favorite Udemy instructors, Dr. Angela Yu. I know I’ve taken a Python course before, but because the structure is based on the #100DaysOfCode challenge, I decided to enroll in this one too. I only got up to the 3rd day and still haven’t started with the 4th Day yet. And yet, there’s more to come.

I’m also interested in learning data science, data analysis, and QA/Software Testing as well, but we’ll see how that goes.

I do art as well!

The pandemic really shifted my aim from being a coder into being an artist. To be honest, I wanted to be an artist at first, but being from a (semi-)traditional Asian family, having a career in art back in those days won’t lead me to guaranteed success. But still, I love art.

I converted (somewhat) my fanfiction/stories blog into an art blog. It still has that same URL: Adri Mars INK. Please visit if you’re interested in my art progress.

And that’s it for my first entry for Adrianne Codes. I now look forward to blogging more regarding my new coding progress.

Till next time.

Community Contributing

, , , , , 0

It’s almost the end of the month, and being at home is beginning to mess up my biological clock in a way. I’ve been very sluggish, waking up in the afternoon (12:00 pm – 1:00 pm) instead of in the morning, and there are at times that I don’t even know what the date and time is. It’s as if every single day is the same day, like Groundhog Day. But, I’ve been doing more time studying, namely Python again, because the more I started to read news and statistics about COVID-19 and the nationwide lockdown that I started to get more interested in data science and analysis.

To be honest, I never really associated myself with math and statistics. Sure, computer science, programming, web development, and such have ties with math also, but there are some aspects within computer science and programming that I really enjoyed and wanted to pursue further. I don’t know if it’s because I had strict teachers at my former elementary school 1 that I felt discouraged in gaining more interest in math. Even when I moved here in the States, I never really got my interest peaked in math. But everything else that somewhat has ties to math, such as computer science, computer engineering, sciences that involve biology, anatomy, and a little bit Chemistry, and anything that has logic in it is where I felt I have strengths with, even if it was a bit. Regardless, I still hate math, and what’s worse back then, that in order for me to take these introductory courses, I had to have a decent grade in math, so I never really had a chance to take introductory computer science courses back in high school. I was able to take Statistics course, I did decent in them, but I hate word problems. I feel that is the part of math that I’m really bad at.

But, since I finished the Python course in Skillcrush and gave me an introduction to data visualization, data manipulation, and a bit of an intro to data science and machine learning, the subject got me very interested too. Especially now with the unknown and unpredictable outcomes of what’s going to happen to this world with the pandemic still active, the field me made me become a lot more interested.

That’s not to say that I’m no longer into web development. I still would like to develop something that would benefit everyone, but building something turned out to be a lot harder than I thought. Maybe if I can do reports and do some reviews on the data that we receive on anything daily, I would feel a lot more productive and it would help everyone as well.

Rather than talking about what I’ve been self-learning during this time, 2 I’d like to write about my first experience as a contributor of a GitHub project. In this case, helping out building/modifying Techtonica‘s learning curriculum program.

My first contribution completed

This is actually a follow-up to my previous post. From my previous post, I mentioned about making my first open contribution on GitHub by doing a few tasks in building and upgrading the course curriculum for Techtonica, a local non-profit tech education organization to teach tech 3 women and non-binary folk with low incomes. They provide on-the-job apprenticeships for top tech companies for those who qualify in periodical cohorts, as well as providing other services such as career placement, counseling, and more. I attended one of their online meetups for the first time looking for volunteers to update and complete some of their courses for their upcoming cohort this summer (June). I’ve wanted to do open contributions for the longest time, but I never really know where to start, and I always thought that local tech meetups would be a good place to go and contribute something.

For a beginner, especially if you know very little to no coding, there are other ways to contribute. Because I’m still more or less green with coding in general, plus there are a lot of volunteers, I decided to choose the tasks on their TO-DO list that involves reviewing and pretty much documentation, technical writing, etc. I ended up taking a reviewer task4 and a slightly larger task.5 At that time, since there was one reviewer already taking care of the reviewing task, I decided to focus on the bigger task: Recreating/replacing Bash to Zsh for their command line course.

Step 1: Forking and Cloning the Repo

This is the first time that I’ve done open contributions in GitHub, so I had to use my GitHub cheatsheets from my Git course in Skillcrush, which I finished sometime last year6. Just press the Fork button at the top right corner, and then clone the repo. We can do this by either downloading the repo as a zip file or type the following on your command line 7:

Because I was way too excited to work on the task, I deliberately skipped a step or two and went ahead and created a branch. Not following along with the cheatsheet and not really thinking that the steps before creating a new branch and working on the files would cause me some merge conflicts that took me days to fix it 8

Luckily, the conversion just needed to be completed before the beginning of their next cohort in June, and it was still the beginning of April. I was able to get through the steps with my mentor and finally understood what went wrong. But before that, I did go through Googling and searching around Stack Overflow and they all had different answers to my merge conflicts problem. My conflicts cheatsheet also didn’t help me much and still searched around for answers. After having no luck of finding the solution, I gave up and turned to my mentors at Skillcrush to get me unstuck.

It was then that I found out that I did skip steps because I was too excited and went on to work. My mentor was patient enough to guide me through all the steps that I needed to get me back on track. I’ve neglected to add the original repo as an upstream repo.

Never be stubborn with things such as this and never rush things just because you’re excited. Always follow all the steps from the beginning to the end!

Step 2: Add the original repo as an upstream repo.

After forking and cloning, add the original repo, in this case, the Techtonica Curriculum repo, as an upstream repo. This is key because you are contributing your help to the existing content of the repo by adding or modifying and that you’re not creating something new:

Step 3: Syncing your fork with the original repo

This is so your fork can be read by the original repo when you make your changes. All the changes will be saved in the forked repo, and when you start pushing them, it’ll go directly to the original repo on GitHub.

Step 4: Create your branch and edit your files on your computer

Finally, time to create your branch. But first, we check to see the existing branches of the original repo. This would also help prevent you from naming your branch that can be a duplicate of another existing branch.

Once you finally get to view the existing branches, we can go ahead and create a branch. But before that, we have to be sure that we’re at the master branch of the repo.

Once the branch is created, you will automatically be located in your branch instead of the master branch. We can finally work on the files from our computer using our favorite IDE or text editor.

Step 5: Add, commit, and push your changes to your branch

Just like when you start adding, committing, and pushing your files to your master repo, the steps are the same with your branch:

Finally, push your files to your branch:

Step 6: Submit a Pull Request

Let the project heads know that you’ve got something to contribute to their repo. Head over to the repo site and click on their Pull Requests section. From there, you can comment on what you did, the changes you made, etc. Then you wait until the reviewers and others who are assigned to work/check with the issue you’re working on respond through commenting. In my case, my pull request is here. You can read our communication history on what was done right, what still needs to be fixed, etc.

After that, the entire process starts over until everything’s fixed. Once they’re all fixed and approved by the reviewers, they can merge your branch to the master branch, applying all your changes to the previous/original files. Your pull request will be closed and from there, you can also delete your branch.

Merge Conflicts

When I submitted my pull request for the first time, I wasn’t aware that (aside from skipping steps the first time) the files I was working on were moved to a new/different location, therefore my modified files can’t be merged to the original files on the same location. This was where I requested my Skillcrush mentor to help me out and sync my branch to the new location, so I can properly work on what needed to be fixed and merge them. In that way, the reviewers would be able to see my changes and would be a lot easier to merge when everything’s good to go.

It was in this issue that took me awhile to get it fixed. I remembered how I started to panic then because I didn’t want to mess up the original files in their repo. But, eventually I remembered that this is Git/GitHub that I was dealing with, and it is a version control system. I wouldn’t be losing or mess up any of the original files because git can revert the files back to its previous version before I made the changes/mess. Through this experience, I started to understand a lot better as to why it’s important for every developer/programmer from beginners to professionals to have solid knowledge of git and GitHub. They’re a complete lifesaver!

What’s next?

I also want to do contributions also with my other local non-profit group, Tech By Choice (TBC). I signed up to create a course draft on Markdown because I didn’t see anyone suggesting to have this in the currently under development TBC curriculum. I already have a tutorial about Markdown here, but it doesn’t mean I’m going to just copy/paste what I have from there and be done with it. There may be a lot of types of Markdown versions/enhancements that are compatible on certain platforms, like GitHub documentation, blogging, and so on.

I also want to start contributing a little bit for MDN (Mozilla Developers Network), namely on content creation, modification, documentation, etc. I still don’t have confidence with my coding skills just yet, but this would also help me develop some of my non-technical skills that are also essential to working in tech. However, they have certain style guides that they need to keep uniformed throughout the MDN site. MDN has become a go-to documentation site for developers and programmers of all levels that it would feel strange to see any article formats different from the current existing types.

Lastly, I’d like to contribute for WordPress also, but I’m not sure what to do just yet.

Do you have any lists of non-profits and other organizations that need volunteers to finish their online projects? Please share me some names and links.

Thank you very much.

Amidst the Pandemic

, , , , , 0

It’s been over a month since my last post. To be honest, I was never good at documenting my self-studying progress. All I can do is to show the results of my course projects and a few side projects in my still under construction portfolio. But, even if it’s a month passed, a lot of things happened, not just with my code learning journey, but even life itself.

As many of you know, a brand-new pandemic has disrupted daily life early this year. Only this time, it spread so fast that the entire world has been greatly affected. I used to hang out at the local coffee shops to do my self-made bootcamp courses and make/practice some digital art, but because of the mandatory shelter in place that started early March here, I’ve been doing my self-learning at home. I even dabbled into some non-tech hobbies, like getting back into mobile games and occasionally watch some Asian dramas on Netflix and Amazon Prime with my mom. I also started going back to doing adult coloring books again, sketch journaling 1, and also started going back to refreshing/learning Japanese again.

Open Source Contributions

I also started to get in touch with the meetup groups I’m part of. I admit that I haven’t been active because it was difficult to find time to travel out to the cities 2 during late hours. Now that we’re all at home, keeping ourselves safe from the pandemic, I’m now able to become more active since everything is online.

One of the first things I’ve done so far is being able to make my first open source contribution to one of the local non-profit organizations that support low-income women and non-binary folk through tech/coding education, Techtonica. Because they’re still in their current cohort, the only thing I can do to help out was to contribute something to their curriculum. I was assigned to be as one of the reviewers of the Python to Javascript conversions and to also transition their Command Line course from Bash to Zsh3. I’m still a noob with Mac and still a noob with the Command Line in general, but I’ve gotten myself familiar with Zsh while I was setting up OS Catalina months ago when it was first released. Because Catalina now uses Zsh as their default shell, I had to read and learn about it, at least the basics, on my own. Right now, the Zsh course is still pending review, hopefully it’ll be completed before their next cohort. Maybe I can join their cohort too, since I’m also unemployed.

My local meetup group Tech By Choice is also rebooting their curriculum development program. We might as well because everything is online now. Sometime last year or the year before, I submitted a proposal to open a basic WordPress course, with notes and such. I thought about submitting another proposal on Markdown, especially if we’re also going to teach non-tech savvy individuals on how to blog. Not only that this is for blogging, but also for those writing documentation on platforms such as GitHub. I think teaching enthusiasts Markdown can also be beneficial as well.

I don’t have any solid on the job experience with coding in general, so to speak, but making more open source contributions really does help me build up my resume and simply show employers that I have some experience, even though I’m not getting paid for them.

I also signed up to do some contributions also for MDN Web Docs and probably do some for WordPress documentation too. When I do get better at coding/programming, I’d be able to contribute more towards the code base, rather than just reviewing/editing any form of written documentation. Let’s see where this will take me?

Conclusion

I’ll write a better, well-documented blog entry next time, with better notes and better insight of what I’ve learned so far.

Moving along with the Bootcamp

, , , , , 0

Updates on Skillcrush

I finished their entire Python program (from their intro, web dev w/ Flask, data visualizations) and I really had a lot of fun with it. It also gave me the opportunity to redo my single-page portfolio with a lot of projects that I built using Python and its modules. My aim was to strictly become a web developer, but I really had a lot of fun with data visualizations and a little bit of data analysis using Python. Maybe I should also think about taking data science courses as well and also have a chance to be a data scientist.

In a way, you could say that I’ve fallen in love with Python. Initially, I wanted to be a WordPress web developer, since I’ve gotten used to WordPress and I really do love WordPress. But Python was a complete eye opener for me and I’m now considering practicing and build more projects – possibly building my own blog software – using Python, Flask, or even with Django. I haven’t started learning Django just yet, but very soon, I will.

I still have yet to add and update more on the portfolio site, such as adding screenshot thumbnails of each project, as well as cleaning up and organize my About section. The content is all in there, but it still needs some fixing and final touches before I can finally declare it as my professional portfolio.

Right now, I went back to working on their Introduction to Javascript course. I started it some years ago but never really had the time to continue and finish it. I don’t know how many Javascript courses I’ve already taken, but no matter how much I’ve taken these intro to JS courses several times, I forget them and then feel unmotivated that I end up signing up for another intro to JS course and then feel like everything is new again. I guess you could say that in other words, I don’t know how or where to start applying everything I learned to the projects I’ve always wanted to built.

I hope that soon, I’ll be able to go through this intro course and finally take their React course. From there, we’ll see where I will end up. I may take the WordPress course again because since then, WP has upgraded so much, which includes the new Gutenberg Block system, so now everything I’ve learned from the past is not very much valid today.

Lastly, there will be another CSS course to be added to the program, and it will solely focus on flexbox and CSS Grids. It may even include preprocessors like Sass and LESS, but for sure, there will be more focus on flexbox and CSS Grid. I plan to enroll in this one too.

Updates on Python

I started renting/purchasing a few eBooks that focus on certain aspects of Python, namely with both building web apps and focus more on data visualizations and dabble more with data science. I’m not very good with math, but hopefully data science, however much I get into it, would probably inspire me to take general math courses again. To put it in easier words, the advanced college math courses, like linear algebra, calculus, discrete math, maybe statistics (again).

I haven’t started with it yet, but I know I have to. I’d like to learn Django and be more familiar with it. The local tech meetup group that I’m a member of Tech By Choice has their official website/blog run by Wagtail CMS, a blogging software built using Python and Django. There’s a ton of courses and tutorials on how to build your own blogging software using Python, but so far, the popular ones I’ve seen were built using Django. The only framework I’ve been exposed so far from the Skillcrush Python course was Flask. Maybe I’ll focus more on Flask first before I jump into Django.

My new portfolio site

I’ve finally finished (at least the main parts) of my new portfolio site. It now has a brand-new sweet URL too. It’s based on a base template and just basically added and modified a few things here and there to make it look a lot more personal. I’ve incorporated my past scenery/landscape digital artwork and created a vector version of one of my handwritten signatures as my logo to reflect the personal bit while still providing information about my work, my skills, and such. I tried to make it a lot more minimal as possible, but I’m infamous for being too wordy of my content, so I’ve got a lot of work needed to be done here. For instance, I still need to add thumbnail images for all of the projects I’ve done, tightening up my "Intro" and "About" sections, and so on and so forth.

Conclusion

Lastly, not too long ago, I’ve given this blog the ability to support Markdown. I started writing (fan)fics using lightweight writing software that’s in plain text and also provide Markdown support. I’ve written a "tutorial" on Markdown here, but I haven’t really utilized it as much because I was so used to writing everything on the CMS’s interface. Now that I’ve gotten used to Markdown, lately I’ve been writing a few of my blog posts in Markdown that I thought that it’d be easier if I write using Markdown on the CMS interface as well. I just turned it on from the Jetpack plugin.

That’s it for now. I don’t have a lot of details to write about, but this is just a quick overall review on my current progress.

«‹ 2 3 4 5›»