And another theme shop hops on the block bandwagon. Catch Themes’ first block-based theme, Catch FSE, landed on WordPress.org over the weekend.
The company is one of the most prolific authors in the official WordPress theme directory, touting a total of 109 themes. There are only a few others with such an impressive body of work, at least in sheer numbers. Averaging over 10 new releases each year for the last decade is no small feat, and that just accounts for the company’s free themes.
At a time when WordPress is still in a transitioning phase between classic, PHP-based themes and those built entirely from blocks, the community needs leaders in the space pushing the project forward.
With WordPress 6.0’s slew of features, I expect we will see more and more authors join the ride.
When reviewing new themes, I typically install them a few days ahead of time and test them off and on. Then, I decide if they are worth sharing with the Tavern audience. However, in this case, I am going in blind. Well, not entirely blind. I am familiar enough with some of Catch Themes’ past work to know the company has produced some well-designed projects. Plus, I had quickly peeked at the demo.
My immediate reaction after installing and activating Catch FSE was disappointment. The homepage did not look like the theme’s screenshot or what was shown in the demo. Instead of the business-friendly layout I expected, I gazed upon a standard blog post listing.
Default homepage blog posts.
This should not be happening in the block themes era.
Theme authors are not entirely at fault for this problem. Those who have submitted their designs to WordPress.org have been conditioned over the years to do this. This was a necessity in the classic theme era because users did not have the same control as they do now over their homepages. The site editor gives them that freedom, and it also breaks the shackles that have been holding theme authors back for years.
Now is the time to be bold. Now is the time for theme authors to put their signature on their work, showcasing their design skills with those custom homepages they have always wanted to provide out of the box. Now is the time to break free of those draconian guidelines from an era that block-based themes are leaving behind.
Catch Themes, if you are reading this, I want to see a front-page.html template in version 2.0 that outputs the following:
Homepage design from the Catch FSE demo.
Give users an immediate solution instead of forcing them to create a new page, select a template, and move into the template editor to customize it.
A blog post listing is a perfectly acceptable default for a theme, and Catch FSE’s works well enough—those gradient “read more” buttons are also sweet. However, if the screenshot and demo showcase a custom homepage, that is what I expect to see upon activation. And, based on my somewhat educated guess, it is also what the average user will expect.
After tinkering around with the theme for a while longer, I realized how well-designed it was. The typography made for an enjoyable reading experience. Each template was well laid out. The footer “widgets” even felt right. Catch FSE was suddenly making a beeline toward the top of my favorite themes list this year.
And, I must take another moment to appreciate the gradient used for buttons in the theme, as shown in this screenshot of the About Us pattern:
“About Us” block pattern.
Those who have followed me long enough know that I often dislike dark designs. Automattic’s Livro made me rethink my position earlier this year. With Catch FSE, I am moving beyond merely tolerating such designs to enjoying them. Well, some of them. Let’s not get crazy.
What Catch FSE does as well as any theme is offer a well-designed set of block patterns. In total, it ships 15 that users can pick and choose from.
Inserting a call-to-action pattern in the page editor.
From a development perspective, other theme authors should take notes. Following the DRY principle, Catch FSE routinely reuses its own patterns in its templates and parts.
The theme registers 10 block styles, but it is impossible to know what most of them do without trying them out first. The user-facing label simply reads “Theme Style” for eight of them. What does that even mean? If it is the theme style, should it not be the default?
Most are generally design variations for the various blocks they are attached to. They might alter the typography, colors, or other styles, as shown in the following screenshot of the Blockquote block with the “Theme Style” assigned to it:
Assigning a custom style to the Blockquote block.
That is actually a well-designed Blockquote style, but I would have never known it was something I would want to use if I had not been digging. Custom block styles suffer from a bit of a discoverability problem by default, and cryptic names for them are doing users no favors.
Most of the issues I had with the theme were around the comments list design. However, it is not yet using the new Comments Query Loop block shipping with WordPress 6.0. In a future release, I would like to see the author put more time into bringing it up to par with the rest of the theme’s design. At the moment, it feels like a feature that was tacked on as an afterthought.
Catch FSE is a freemium theme with a commercial add-on plugin that offers three custom blocks and 10 patterns. I like seeing the upsells focused purely on value-adds.
I have often said that the next generation of freemium themes cannot be like the last. Developers will need to focus on enticing users with solutions to their problems instead of nickel-and-diming customers, locking necessary features behind a paywall. The block system is changing the game, and when most users can flesh out their site designs via the built-in WordPress site editor, the old-school upsells will not cut it.
Turnkey, plug-n-play solutions are needed. I may be so far off-base that I am not even in the ballpark, but I foresee block patterns being a central part of that. Once commercial theme authors figure out how to market and build with these new tools, we will see an explosion of growth in the block-based themes space.
Catch Themes’ 10 commercial patterns represent a start, but I imagine the company will need to continue pushing limits to see a worthwhile return on its premium upsell. Now is the time for experimentation while the field is wide open.
My biggest nit-pick? The name.
Attention all developers: Can we stop naming themes “Something FSE” and “Guten Something”? It is confusing and makes it tough to remember which project is which. Take some time to come up with something that stands out in the crowd.
Catch FSE is a bold and beautiful business-ready theme, but it needed a name to match its personality. I only hope folks remember it.
Full Site Editing (FSE) is the next step in the evolution of WordPress Gutenberg. Here is what this means for web developers and how to access free FSE templates with WPMU DEV hosting.
Full Site Editing, or FSE, released with WordPress version 5.9, promises to transform WordPress website design forever. We say “promise” because at this time, FSE is still in its infancy as a relatively new feature of WordPress.
According to Carolina Nymark, a long-time WordPress theme developer and core contributor…
“Full site editing will change how everyone uses themes – and how we build them.”
tl;dr – If the whole Gutenberg and Full Site Editing thing seems confusing to you (or is creating a mental block), here is a quick rundown…
Gutenberg is the project name given by WordPress to the transition from “classic” to “block” editing. FSE is taking Gutenberg to the next level, by allowing blocks to be used not only in the content editor of posts and pages, but in all areas of the website (e.g. headers, footers, sidebars). Hence the term Full Site Editing.
Full Site Editing (FSE), then, is a collection of WordPress features that allow users to design every aspect of their website using blocks. FSE aims to replace widgets, menus, etc. This will all be done using blocks.
With FSE, you can use blocks to style all parts of your website visually, not just the content area of posts and pages. This includes the site’s header, footer, and sidebars.
Full Site Editing promises to change how we all use WordPress themes, so let’s take a look at the different types of WordPress themes first, before we delve further into how FSE affects themes.
The 4 Different Types of WordPress Themes: A Quick Recap
In the current WordPress ecosystem, there are four types of themes available:
1. Classic themes
Classic themes are built using PHP templates, functions.php, and more. Currently, these are the dominant types of WordPress themes that are available.
2. Block themes
Block themes are made for FSE using HTML templates, templates parts, theme.json, etc. (see “Block Themes” section below).
We can expect to see more block themes becoming available as more theme developers and users adopt Full Site Editing.
3. Hybrid themes
Hybrid themes are essentially classic themes that can adopt FSE features. Hybrid theme functionality is mostly used in specific client applications where they may need access to template files and creating custom templates.
4. Universal themes
Universal WordPress themes work with both the Customizer and the Site Editor. These are developed by Automattic. Like hybrid themes, Universal themes are mostly aimed at meeting the specific needs of private clients in mostly enterprise settings.
For additional information on the differences between WordPress theme types, see the video below:
Now that we have looked at the different types of WordPress themes available, let’s start diving into the world of FSE…
Full Site Editing Features
As described earlier, FSE is a “collection” of WordPress features that let you edit all parts of your website.
Some of these features include:
Block Themes
Block themes are WordPress themes built using templates composed of blocks.
The default Twenty-Twenty-Two theme shipped with WordPress 5.9 is a block theme.
WordPress Twenty Twenty-Two is a block theme.
A block theme lets you customize elements like colors, typography, and the layout of every single page on your site using blocks.
Click on List view to see all the blocks that the WordPress Twenty Twenty-Two block theme is comprised of.
The Twenty-Twenty-Two theme has surprisingly good reviews…
Twenty Twenty-Two theme has good reviews…
And its share of poor reviews too…
…and bad reviews too!
Block themes allow for new functionality, such as better integration with patterns, and the ability to mix and match different style presets, creating the same feel and flexibility you would experience if using multiple themes.
As FSE becomes more widely adopted, more block themes will be added to the WordPress theme directory. You can find block themes in the Themes directory using the Feature Filter and selecting Full Site Editing.
Filter Full Site Editing themes in the WordPress Theme Directory to view a growing list of block themes.
Site Editor
The Site Editor is a new feature that allows block editor users to build and customize a WordPress site entirely out of blocks using a new styling system.
It replaces features of editing classic themes like the theme customizer, widgets, and menus.
Using the Site Editor requires having an active “Block Theme” installed. With a block theme installed, the Appearance menu becomes a lot more simplified…
How the Appearance menu appears with a WordPress block theme installed.
If the active theme on your site is not a block theme (i.e. a regular non-FSE classic theme) the Appearance menu will display links to the theme customizer, widgets, menus, etc.
How the Appearance menu appears with a regular WordPress theme installed.
Note: As mentioned earlier, there are hybrid themes that can utilize FSE and the Theme Customizer.
To access the Site Editor with a block theme installed, click on the Appearance > Editor menu link in your admin area or the Edit site link in the front end admin toolbar.
Click on Edit site to access the Site Editor from the front end.
This brings you to the Site Editor screen and displays the template your home page uses. Click on the toggle next to ‘Home’ to view its template areas or select Browse all templates to view all available theme templates.
Click on the toggle to view your Home page template areas.
Click on the WordPress logo to view and access the theme’s home page template, different templates, and template parts.
Full Site Editor options.
You can choose between editing what the home page displays, a list of templates, a list of template parts, or going back to your Dashboard.
Switch between different sections of the Site Editor.
Templates
Templates are groups of blocks that combine to create the design of a webpage. When you make changes in the template editor, the blocks on all the pages or posts that use this template are automatically updated. You can create custom templates or use templates provided by the theme or a plugin. A template for a post or page displays your content with the post content block.
Site Editor templates.
Template Parts
A Template part is a block for managing different areas of your webpage and help to set the structure for reusable items like a Footer or Header. Template parts are primarily used for site structure. WordPress gives you the choice of using existing template parts or adding new ones.
Site Editor template parts.
Click on any template or template part to edit it by editing the blocks that make up the element.
Edit template blocks to modify templates and template parts.
Global Style Variations
Styles is a feature included in Block themes that lets you customize global elements of your site’s design using different colors, typography, and layouts (or you can just let your theme handle this).
To access this feature, make sure you have an active Block theme installed, then go to Appearance > Editor and click on the Styles icon next to the block settings sidebar.
Use the Styles sidebar to change global styles like typography, colors, and the layout of your block theme.
Styles lets you tweak and override your theme’s default design elements, like add a new color palette for your buttons to match your brand, manage the fonts used on the site and adjust different global elements like font family, font weight and line height, adjust blocks to your preferred size, and more.
You can access this section regardless of the template or template part you are editing.
This feature affects your entire site. If you change the background color settings using Styles, for example, the background color of all your posts, pages, and templates will change too (unless you have previously set a custom color for an individual button block, in which case changing the Styles settings won’t override those individually set colors).
Using Styles
Full Site Editing Blocks
You can use all of the available blocks to edit your site’s themes in The Site Editor, including a new set of blocks called Theme blocks.
Block themes are relatively new and the concept of Full Site Editing is not quite so easy to grasp yet, so many users have concerns about adopting Full Site Editing.
Some of these concerns include:
Full Site Editing is New
Support for Full Site Editing began with the introduction of the Template Editor in WordPress 5.8 (released July, 2021). WordPress 5.9 introduced additional FSE features, like the Site Editor and the first default Block Theme (see below).
Pre-WordPress 5.9, making changes to WordPress websites means having limited design control.
Evolving from being a simple blogging platform with expansion capabilities into a full-featured website creation tool with a powerful and feature-rich content management system was a wonderful step forward. Even though many users and web developers still resist embracing the relatively new block-based Gutenberg architecture (introduced in WordPress 5.0 at the very end of 2018), no one currently disputes that this is the direction that WordPress is headed toward.
As this article is being written, however, designing, creating, editing, and customizing WordPress sites still requires using third-party plugins, themes, and/or page builders, and dealing with all their inherent bugs, incompatibilities, and dependencies.
Although Full Site Editing promises an exciting future ahead for WordPress web design, a combination of Full Site Editing and Gutenberg blocks is required to build an entire website and create the ideal theme and website layout for individual users.
So, with FSE, WordPress web design control is still limited to using the existing blocks of the WordPress core block library, the new Patterns library, and third-party plugins, which are all still currently in the “fledgling” phase.
The WordPress Patterns library can help with FSE web design, but it still has some ways to go.
This brings us to the next concern users have about build WordPress sites using Full Site Editing…
Full Site Editing vs Page Builders
As you can see, there are challenges and limitations when it comes to designing a complete website in WordPress.
Page builders help to compensate for these challenges and limitations, while Full Site Editing promises to solve or eliminate many of these altogether.
Before uninstalling your favorite page builder in favor of using Full Site Editing, however, consider this:
Page builders like Divi or Elementor are powerful plugins with years of development behind them, millions of active installs, and dedicated software support to help users solve their problems and keep providing regular updates.
Page builders allow anyone to easily create their website and integrate workflow processes without requiring coding skills using pre-made visual layouts and feature-rich drag and drop design modules. Millions of WordPress web developers and users already know how to use these.
FSE is still relatively new and it will take time to establish a significant user base, such as those of established Page Builders like Elementor and Divi. This affects important areas like support, especially when dealing with premium plugins where support, bug fixing, and upgrades is included vs relying on free help from the WordPress community.
WordPress relies on plugins like WooCommerce for building dynamic sites with eCommerce functionality. It doesn’t have a total eCommerce “block solution” built into its core. The same applies when building complex sites like membership sites, LMS sites, event sites, directories, social networks, etc. It will take some time for FSE to catch up to the levels of integration with complex functionality that many page builders already offer.
Millions of WordPress users still haven’t even fully switched to using Gutenberg yet. Many users prefer using the WordPress Classic Editor plugin (5+ million active installations) to create and edit their posts and pages (including us), so this can considerably slow down the transition from the old to the new way of thinking about WordPress.
Will FSE replace Page Builders? With eCommerce sites, probably not for a very long time!
WordPress Full Site Editing – Next Steps
While there are many reasons to continue using regular WordPress themes and page builders to create and maintain your sites, there is no reason why you cannot begin to experiment and learn how to use Full Site Editing.
For example, here are some things you can do as suggested in the WordPress.org Handbook:
Use different Full Site Editing specific blocks like the Posts Lists block, Site Title block, Template Part block, Site Logo block, Navigation block, and more.
Explore Global Styles. Try changing settings for blocks globally.
Edit Templates like the 404 Page Template or Single Page Template.
Explore Template Editing Mode.
Explore the various browsing options between your content and Templates.
Try building a site.
Also, if you host with WPMU DEV, have a play with FSE using a staging site (included with our hosting plans) and our Block Theme Templates (also included). If you are not a member yet, take advantage of our free trial to check everything out.
Will You Make The Switch To Full Site Editing…Or Wait And FSE?
Full Site Editing is promising and has great potential.
While FSE may not be a significant threat or disruptor to established theme developers and page builders yet, it is the next step in the evolution of WordPress, after the introduction of the Gutenberg editor.
Full Site Editing could deliver a new and unique dimension to WordPress web development. Only time will tell.
SmartCrawl’s newest version release comes with an impressive new feature—support for Multilingual Readability.
Up to this point, the readability test in SmartCrawl could be used solely to calculate a score for posts or pages written in the English language.
Now, depending on what language you have set up in WordPress settings, SmartCrawl will use a different formula to calculate the readability score for a number of languages.
Our SEO analysis engine currently supports the following:
Czech
Dutch
French
German
Italian
Russian
Spanish
In this article, we’re going to take a look at this helpful new feature, and touch on a few related ones as well.
Continue reading, or jump ahead using these links:
Along with Multilingual Readability support, Post SEO Analysis will also support the above languages.
The Post SEO Analysis feature reads the page content and how it’s displayed in the frontend, then provides SEO recommendations based on the content added.
Having support for 7 languages will provide more accurate recommendations, as it uses different formulas for each one.
Let’s take a look at these settings in SmartCrawl.
Multilingual Readability
The key to learning is understanding. It’s not just about speaking in a language your audience comprehends; it’s presenting your words in a manner that is easily understood.
All of these indexes convert readability to a mathematical formula, indicating how well your readers can comprehend the text. Although the formulas differ, they consistently place heavy emphasis on these two factors: sentence length and word length.
SmartCrawl uses the Flesch-Kincaid Test. What is that exactly? Read on…
The Flesch-Kincaid Test
Lawyer, author, and writing consultant Rudolph Flesch advocated the use of phonics rather than sight reading to enable students to sound-out unfamiliar words, a method often called “look-say”.
Flesch penned many books, the most famous probably being “Why Johnny Can’t Read, and What You Can Do About It”.
In 1943, Flesch published a readability formula in his dissertation, “Marks of a Readable Style.” That formula, the Flesch Reading Ease index, was the original Flesch test.
Flesch’s work with the Associated Press helped bring the reading level of front-page newspaper stories down by five grade levels. Implementing this formula increased Publishers readership by 40% to 60%.
In 1976, the U.S. Navy commissioned J. Peter Kincaid and his team to recalculate the Flesch Reading Ease to help sailors absorb Navy training manuals faster and understand them better.
The resulting formula was the Flesch-Kincaid Test, which is now a standard for the U.S. Department of Defense, the Internal Revenue Service, and the Social Services Administration. In fact, many states now require insurance policies and other legal documents to weigh in at no higher than a 9th grade reading level on the Flesch Kincaid scale.
SmartCrawl’s Language Support
Now that we understand a bit more about readability and the test we use to evaluate it, let’s look at these features in SmartCrawl.
Once you install & activate (or update) SmartCrawl, you’ll be greeted by the splash screen, heralding the new Language Support features.
SmartCrawl Splash screen.
Navigate to your Posts or Pages content list, and you’ll see a new SEO Meta [+] link, above the classic WordPress actions menu.
SEO Meta in pages-posts list menu.
Click on the [+] to see some basic information about the post’s current SEO-optimized Title and Description. This includes colored indicators showing the character count for each.
Green highlights represent counts within the recommended range, while yellow highlights represent counts that fall outside of that.
SEO meta in Pages-Posts list menu expanded.
There are also a few new columns in the Post/Page list, as follows:
SEO – enable Page Analysis in SmartCrawl > Settings
Readability – enable Readability Analysis in SmartCrawl > Settings
Robots Meta – shows the index settings you have enabled for crawler instructions
Hover your mouse over the number indicator in the SEO column to reveal a quick overview of the recommendations SmartCrawl has for that page or post.
Readability SEO details.
If you prefer these columns don’t show on your screen, they can be toggled On/Off by clicking the Screen Options tab at the top of the WordPress dashboard. Simpy tick/untick the coordinating checkboxes. (Don’t forget to hit the Apply button to save your changes.)
WordPress screen options menu.
Additional SmartCrawl Settings
While we’re here, let’s look at a few more key features in SmartCrawl’s SEO toolbox.
In the editor screen (for any Post or Page), scroll to the bottom to access the SmartCrawl metabox.
There are four tabs available here. What you see depends on what you have enabled in SmartCrawl’s settings.These are:
SEO – customize the SEO Title and Description (that appear in search engine result pages), and run a full SEO analysis of your post.
Readability – the level of readability your content is for the average reader (determined by the Flesch-Kincaid test).
Social – customize a post’s OpenGraph elements for social network sharing.
Advanced – indexing, sitemap and automatic linking options for the post are found here.
We’ll look at each of these tabs a bit more in depth.
SEO Section
Under the SEO section, you’ll see a preview of how Google sees your post meta, with the Title at the top, followed by the post Permalink, then your post Description.
Click the EDIT META button to customize the title and description. Once again, the green underline means you’re within the desired length, while the yellow underline means you’re outside the ideal range.
Click the plus + icon to the right of either field to add dynamic data using the built-in macros from the dropdown menu. You can add as many as you like to mold the ideal structure and length for your title and description, including adding plain text to either field.
SEO meta data details.
SEO Analysis is at the bottom of the SEO section. (If it’s not showing, go into SmartCrawl settings and enable the option.)
Enter any focus keyword(s) in the text field, then click the REFRESH button to analyze the post for keywords.
SEO analysis of keywords.
You can repeat this process for as many keywords as you like, and adjust your post content accordingly to get the best keyword optimization results.
Keyword recommendations.
Click the arrow to the right of any Recommendation to see details for making improvements.
Keyword recommendation details.
There is even an option to stop getting a popup every time you run an analysis on something you know you’re not going to change. Simply click the IGNORE button on that suggestion.
Readability Section
This section allows you to manually run the Flesch-Kincaid Test.
Click the REFRESH button to see how well your post fairs for the average reader in the supported language. The ideal or target range is 70 and above.
Readability score from the Flesch-Kincaid test.
In this case, I’ve been given a 60. I should attempt to improve by clicking the arrow to the right of the Flesch-Kincaid Test, and adjusting according to the recommendations.
How to fix or ignore the Readability.
Note, you can also mute this by using the IGNORE button.
Social Section
Want your post Title, Description, or Featured Image(s) to be different when shared to social media?
No problem! Enable OpenGraph support for the post in the Social section, and configure the specifics you need for Title, Description, and Featured Images.
There is one for social networks in general (like Facebook), and one specific to Twitter.
Social section, with OpenGraph and Twitter options.
Advanced Section
In the Advanced section, you can adjust the indexing options for the post, should they differ from what you have set as the post type’s defaults (in SmartCrawl > Title & Meta).
These are the options:
Index – instruct search engines whether this post should appear/not appear in results.
Follow – tell search engines to follow/not follow the links on your page (applies to crawling them as well).
Archive – instruct search engines to store/not store a cached version of this page.
Snippet – allow search engines to show a snippet of this page in search results, and prevent them from caching the page.
Indexing, in the Advanced section.
In this sections, you can also manage Canonical page versions, 301 Redirects, set Sitemap Priority, and enable/disable Automatic Linking in a post (if you don’t see this option, you can enable it in SmartCrawl > Advanced Tools).
Additional options in the advanced section.
Linguistically Speaking
A readability score is not inherently good or bad. Simply put, it is the level you aspire to in any given piece of content based on the audience you are writing it for.
SEO readability checks analyze user posts or pages, and indicate what can be done to make them more readable. The ability to test that within a number of different languages is huge.
Try the SmartCrawl plugin today and get the simple but powerful Multilingual Language Support features, along with a stellar suite of SEO optimizations. You can take our full membership for a spin with a free trial, which includes all 11 of our Pro Plugins, Free Migration Assistance, 24/7 Expert Live Support (for ALL things WordPress), plus a lot more.
Knowing readability level helps users publish content that is more SEO-friendly, engaging, and accessible to a wider audience—therefore potentially performing better and ranking higher.
That’s a win, vítězství, overwinning, victoire, sieg, vittoria, победа, victoria!
We want to make the Dev Interrupted podcast a vital, enjoyable part of your week. Please take 2 minutes and answer our new Listener Survey. It lets us know a bit about you, what you want from Dev Interrupted and what you want from podcasts in general!
At LinearB, we like to think we spend all our time figuring out how to unlock developer potential. To find ways to let devs do more of the work they love and reduce the amount of time they spend dealing with needless hurdles, idling and churn.
Recently, I designed a simple metrics-tracking system. A Python script queries different providers' APIs for metrics, e.g., Twitter, GitHub, etc. The idea is to run this script each day, store them in Google BigQuery, and provide an excellent data visualization in Google Data Studio. I'm a big fan of automation, so I'm using GitHub Actions.
Accessing Google Cloud With a Service Account
I query the different APIs with different Python libraries. All of them allow authenticating by passing a parameter. In general, it's a token. One can store the value in a GitHub secret, get it as an environment variable in the GitHub Action and use it in the code.
No other role in Scrum can contribute to mediocre outcomes like the Product Owner—garbage in, garbage out. Therefore, the following list of some of the most common Product Owner anti-patterns might be a starting point to reflect on the role; maybe, there is room for improvement?
If you recognize some anti-patterns in your daily work, why don’t you ask the rest of the Scrum Team for support? For example, run a Retrospective with teammates and stakeholders on how the team is doing regarding figuring out what is worth building.
There has been a change in basic assumptions by which the software selections happen in an organization. Though principles, policies, and guidelines dictate the same, in most cases the following factors have a direct bearing in the selection of products, technologies, and development:
Existing skills within an organization
Availability of the chosen skill in the market
Protection of existing investment in infrastructure, IP, human resources
How the chosen product/technology deals with the existing IT landscape
And of course, other tangible benefits such as TCO, ROI, time to market, etc.
Let us get into the brass tacks of composable architecture. Every architecture is made up of domains and capabilities mapped to the domains. Each capability can be fulfilled by one or more solution components and vice versa.
I admit that I have (a few? or not so few) bad habits: one of them is that usually, I find a way to do things, and if that works, I stick with it. I know that there are other ways to do things, but hey, why bother? and sometimes a good friend asks an excellent question (are there any bad questions?), and this lets me review the way I’m doing things. and here is such a thing: exporting and importing projects in eclipse.
Archive Files With Drag & Drop
Here is how I usually move or copy a project to another machine:
Documentation Sounds Like an Annoying, Boring Thing
Maybe you feel that documenting the project or your code is an extra annoying step. Often, documentation for projects is outdated and irrelevant. In such cases, most of the expertise is hidden in analysts or just developers. In this article I'll try to explain why having a good documentation culture will make projects much more stable and successful.
Writing Good Documentation Often Makes a Big Difference
There is no specific rule on how to make perfect documentation, but obviously plain text without details is much worse than documentation with screenshots, diagrams, and images. It takes time to write a quality manual, but it's worth it because it solves many problems at once, including slow onboarding processes, slow communication, single-person projects, and lack of team support.
The Android platform provides many different types of menus to be added to an Android app. In this tutorial, we will learn how to add the most common type of menu, an Options Menu.
An Options Menu is one that appears at the right corner of the Action Bar/Toolbar. By default, all items in the menu is contained inside the overflow action.
Goals
At the end of the tutorial, you would have learned:
How to add an Options Menu to an Android app.
Tools Required
Android Studio. The version used in this tutorial is Bumblebee 2021.1.1 Patch 3.
Prerequisite Knowledge
Basic Android.
Action Bar/Toolbar.
Project Setup
To follow along with the tutorial, perform the steps below:
Create a new Android project with the default Empty Activity.
The easiest way to add an Options Menu to an Action Bar is by declaring the menu in an XML file and then inflating it in the Activitys onCreateOptionsMenu() function.
We will start with creating a simple menu with three items in it:
Refresh.
Help.
Settings.
Right-click on res -> New -> Android Resource File.
Now that we have the XML file with <menu> as the root element, we can either build the menu in the Code View by ourselves, or using the Design Surface. Regardless of how you choose to build your menu, add three Menu Item/<item> that corresponds to the three options Refresh, Help, and Settings.
Make sure that your Menu Items are using the string resources created in step 5 as the value for their android:title attributes.
Your menu should look like the screenshot below if using the Design Surface.
In Code View, they should look like the code below.
We are now done with the XML file for now, but the app will not make use of the menu resource file yet. We still have to inflate the XML resource into the Action Bar. To do this, override MainActivitys onCreateOptionsMenu(), inflate the XML resource using the built-in menuInflater object, and return true.
Run the app now to check whether the menu is working. It should behave similarly to the animation below.
Handle Click Events for Menu Items
The menu that we have created looks nice, but it does not perform any action when clicked. To respond to click events on each menu item, we will have to do a couple more things.
When an item in the menu is clicked, MainActivitys onOptionsItemSelected() will be called, so we will have to override this function if we want to respond to click events.
We should also give the menu items android:id attributes to make it easy to filter them out in onOptionsItemSelected().
Modify options.xml to add android:ids to each <item>.
Override onOptionsItemSelected() in MainActivity using the code below. The app will now change the value of the default TextView to match the menu items title.
The Android platform provides many different types of menus to be added to an Android app. In this tutorial, we will learn how to add Contextual Menus to our app.
Goals
At the end of the tutorial, you would have learned:
How to add a floating contextual menu.
How to add a contextual menu in action mode.
Tools Required
Android Studio. The version used in this tutorial is Bumblebee 2021.1.1 Patch 3.
Prerequisite Knowledge
Basic Android.
Menu XML resource.
Project Setup
To follow along with the tutorial, perform the steps below:
Create a new Android project with the default Empty Activity.
Give the default TextView an android:id of hello and android:textSize of 32sp.
Your activity_main.xml should look like the code below.
Add a menu XML resource called contextual.xml under res/menu. This will represent a menu with 3 options, Shuffle, Reset, and Insert Random. Later on, these actions will be performed on the default TextView.
The floating contextual menu should be working if you run the app now, but let us add some behaviors to the menu items to make them useful. We can listen for the floating contextual menus item clicks in onContextItemSelected().
override fun onContextItemSelected(item: MenuItem): Boolean {
super.onContextItemSelected(item)
return handleContextMenuItem(item)
}
Because we will reuse the logic to handle the menu items later on in the tutorial, we will extract this logic into a different function called handleContextMenuItem(). This function will shuffle, reset, or insert a random alphabet character at a random index to Textview.
We are now done with the floating contextual menu. The app should behave similarly to the animation below.
Add a contextual menu in action mode
In this section, we will learn how to add a contextual menu in action mode.
Comment out registerForContextMenu(textView) in onCreate() as we will not be using the floating action menu anymore.
Implement the ActionMode.Callback interface. This callback allows you to inflate, listen to click and destroy events, etc.
private val actionModeCallback = object : ActionMode.Callback {
override fun onCreateActionMode(mode: ActionMode, menu: Menu): Boolean {
menuInflater.inflate(R.menu.contextual, menu)
return true
}
override fun onActionItemClicked(mode: ActionMode, item: MenuItem): Boolean {
return handleContextMenuItem(item)
}
override fun onPrepareActionMode(mode: ActionMode, menu: Menu) = false
override fun onDestroyActionMode(mode: ActionMode) {}
}
In onCreateActionMode(), we inflate the menu XML resource as done previously in onCreateContextMenu. Because actionModeCallback is declared inside the MainActivity scope, we have access to the menuInflater in the callback as well. If your implementation of ActionMode.Callback is outside of MainActivity, then you can access a MenuInflater from the ActionMode parameter instead.
Back in onCreate(), we can bind the TextViews OnLongClickListener to invoke a function called startActionMode().
//Contextual action menu
textView.setOnLongClickListener {
startActionMode(actionModeCallback)
true
}
When we run the app now, we should get a contextual menu in Action Bar instead of a floating contextual menu.
Solution Code
MainActivity.kt
class MainActivity : AppCompatActivity() {
private val actionModeCallback = object : ActionMode.Callback {
override fun onCreateActionMode(mode: ActionMode, menu: Menu): Boolean {
menuInflater.inflate(R.menu.contextual, menu)
return true
}
override fun onActionItemClicked(mode: ActionMode, item: MenuItem): Boolean {
return handleContextMenuItem(item)
}
override fun onPrepareActionMode(mode: ActionMode, menu: Menu) = false
override fun onDestroyActionMode(mode: ActionMode) {}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val textView = findViewById<TextView>(R.id.hello)
//Contextual floating menu
//registerForContextMenu(textView)
//Contextual action menu
textView.setOnLongClickListener {
startActionMode(actionModeCallback)
true
}
}
override fun onCreateContextMenu(
menu: ContextMenu?,
v: View?,
menuInfo: ContextMenu.ContextMenuInfo?
) {
super.onCreateContextMenu(menu, v, menuInfo)
menuInflater.inflate(R.menu.contextual, menu)
}
override fun onContextItemSelected(item: MenuItem): Boolean {
super.onContextItemSelected(item)
return handleContextMenuItem(item)
}
private fun handleContextMenuItem(item: MenuItem): Boolean {
val textView = findViewById<TextView>(R.id.hello)
val text = textView.text
return when(item.itemId){
R.id.shuffle -> {
textView.text = text
.asSequence()
.shuffled()
.joinToString(separator = "") {
"$it"
}
true
}
R.id.reset -> {
textView.text = getString(R.string.hello_world)
true
}
R.id.insert_random -> {
textView.text = StringBuilder(text)
.insert(
text.indices.random(),
alphabet.random()
)
true
}
else -> false
}
}
companion object {
//Don't want chars 91->96
private val alphabet = CharRange('A', 'Z').plus(CharRange('a', 'z'))
}
}
Kubernetes gained popularity as it simplifies the scalability and management of containerized applications. It enables you to deploy and manage nodes, pods, containers, services, and configuration maps across the entire application lifecycle. It was difficult to achieve such flexibility and control with scripts. But thanks to Kubernetes’ declarative approach to infrastructure, you can define precise changes at any scale. Kubernetes also empowers you to integrate multiple tools to facilitate automated scheduling, deployment, monitoring for the containers. One such tool is Helm, a CNCF-adopted automation framework that has gained popularity not just in Kubernetes circles, but in the GitOps ecosystem as well. In this post, we look at how Helm helps automate the deployment of cloud-native applications on Kubernetes the GitOps way.
What Is Helm?
Although described as a package manager, Helm is a powerful tool to automate installation, deployment, upgrade, and management of Kubernetes applications. Managing Kubernetes manifests is a task that grows in complexity as systems scale. A single deployment needs multiple YAML files with duplicated and hardcoded values. This required a better way to manage Kubernetes YAML files through a simple packaging format, which led to Helm Charts. However, Helm’s scope goes beyond templating.
You’ve probably heard the term “cyber threat” used more than once in the context of cybersecurity. What you may not know, however, is that the term “threat” is often mistakenly used to refer to other risks to cybersecurity, such as vulnerabilities. Although these three terms may seem to mean the same thing, they each have […]
You want to start a blog, or perhaps you already have one and want to improve your style. Maybe you’re writing documentation and struggling to make it concise and clear. Whatever the case, you have a blank screen in front of you and a head full of ideas. How do you start? How do you write a blog that other developers will enjoy?
Here are 13 things I’ve learned over my years of writing for developers.
Traditionally, companies with low-latency requirements deployed to bare-metal servers, eschewing the convenience and programmability of virtualization and containerization in an effort to squeeze maximum performance and minimal latency from “on-premises” (often co-located) hardware.
More recently, these companies are increasingly moving to public and private “cloud” environments, either for satellite services around their tuned low-latency/high-volume (LL/HV) systems or in some cases for LL/HV workloads themselves.
Sometimes in JavaScript, we have an object which we need to conform to a specific set of keys. This is possible through type enforcement in TypeScript, but if we want to do certain things if the keys don't exist, then we have to take a different approach.
For example, suppose we are receiving the following object from an array, where firstName, lastName, and age are all needed for an operation we want to complete. For example
At LinearB, we like to think we spend all our time figuring out how to unlock developer potential. To find ways to let devs do more of the work they love and reduce the amount of time they spend dealing with needless hurdles, idling and churn.
You’ve probably heard the term “cyber threat” used more than once in the context of cybersecurity. What you may not know, however, is that the term “threat” is often mistakenly used to refer to other risks to cybersecurity, such as vulnerabilities. Although these three terms may seem to mean the same thing, they each have […]
