Top 3 graphic design apps for social media marketing

Modern software has given creators the tools they need to showcase their work to the world. Here are the best free apps that I’ve been using that will help your talent shine in 2019:

AppWrap – Do you want to feature your latest website or app design to your followers? Are you building a portfolio for the UI/UX projects you worked on? This app is a great way to wrap your screenshots in a mobile device view. You can add effects, backgrounds, and text to really polish the look and feel. Their template gallery will give you inspiration to make something gorgeous. http://www.appwrap.in/

AntPace.com mobile device view

Canva – This is one of my favorites. With a library of over 60,000+ templates, this app has something for every platform. Whether you need to create a great looking post, story, or cover image, this app has designs for Instagram, Facebook, YouTube and much more. If you want your online presence to look professionally designed, check this one out! https://www.canva.com/

Anthony Pace creativity takes courage

Hatchful – Do you need a logo for your brand, business, or product? This app let’s you create one quickly. By customizing templates, you can draft, and iterate designs. Having logo design done fast, cheap, and easily allows you to focus on the actual product. It’s important to not get hung up on the logo, especially early into your venture, and instead focus on the actual value your service proposes. https://hatchful.shopify.com/

antpace.com

I’ve used all of these apps, and personally gained value from them. What apps do you use for your graphic design?

A template for web app startups

code templates

Having a framework in place when you start up will let you hit the ground running. This applies not just to software, but also business, health, fitness, and just about everything else in life. Having the dots ready to connect helps you to draw the right picture.

I recently released BJJ Tracker as a web app. You can read about it here. I built it knowing that I would want to reuse its code, and have it serve as a framework for future projects. I cleaned it up into a GitHub repository, trying to make it as generic as I could. Here is the link: https://github.com/pacea87/ap-template.

BJJ Tracker

I wanted to create a template to rapidly roll out digital products and software. This source code is a starting point. The goal is to be quick and cheap, without sacrificing quality. It runs in a LAMP environment. If you want to run this software on your computer, look into WAMP or MAMP.

This code base provides a front-end that leverages modern web technologies and standard best practices. A basic layout is described, including a header, menu drawer, feature buttons, and detail pages. It uses Bootstrap, jQuery, Font Awesome, Google Fonts, and Google Charts.

The back-end is object oriented, RESTful, and secure. Code that talks to the database, or to 3rd party APIs, has been separated out into *-service.php files. It includes SQL to create a user database. The database interacts with a custom registration and login engine. It allows for anonymous users, so that data can be saved before signing up, and a password is not needed to get started. It provides a reset password mechanism for users. It seamlessly integrates with Mailchimp and Facebook login. Redirects are in place to force SSL and WWW, and to remove file extensions from URLs. Next versions will address technical SEO and new API integrations.

source code

If you’d like to contribute to this repo, feel free to fork it, and make a pull request.

GitHub

BJJ Tracker, a fitness app

BJJ tracker, a fitness app

www.BJJTracker.com

BJJ Tracker is a fitness app for tracking Brazilian jiu jitsu training. It’s the sort of fitness app I was looking for, but couldn’t find. Version 1.0 is a bare bones MVP, but has a list of features on the way. Future versions will add gamification (including challenges and goals), UX/UI enhancements, training recommendations, and more.

The app allows users to record their training sessions, with details about drilling and sparring, as well as competition. This data is visualized over charts and calendars. The idea started from physically writing my training sessions onto an actual calendar, with a minimum goal per week. Building it has been a great exercise in digital product development, software design, and UI/UX strategy.

fitness tracker calendar

Software

BJJ Tracker is a web app, hosted on a AWS Linux server, running Apache, PHP, and MySql. I used Initializr to generate a bootstrap template to get my front-end started. One goal of this project was to build a web app framework that I could use to quickly get future projects running. This code would include user registration and login services, as well as other back-end concerns, on top of a front-end. I’ve cleaned most of this code into a generic repo on GitHub. You can read my post explaining its features.

Design

This app was designed with “mobile first” in mind, assuming that most users will be on a smart phone. The look and feel of the color palette, font-choice, and UI layout took some experimenting and visual research. It’s not final, and will be subject to split testing over time. I used Font Awesome to add icons as visual cues, giving the app a more finished look. The three lined (hamburger) menu in the top right comes as standard UI, using Simple MobileMenu, a jQuery plugin. Other UI elements include a top status message, and “In-Your-Face” status message, both of which are custom built notifications that I’ve wrapped as javascript plugins. Having a calendar section was important to me, and I consider to be a primary feature of the app. I use Full Calendar to generate the full month view. The homepage (dashboard) focuses on a week view. Google charts is used for the “techniques” graph.

logo design

The logo is a work-in-progress. The textual part was easy – pick a font, add a sharp outline, and a drop shadow. I always start with a 1024×1024 canvas. The symbol begins with simple shapes, triangles and circles. I left this process for last, saving my focus for the actual product. This allowed me to rapidly iterate design versions, and see how it would look directly in the user interface. Below is the current portrayal – and I’m excited for next versions.

BJJ Tracker logo
BJJTracker.com

Full Calendar

Fullcalendar.io has been my go-to solution for adding Calendars to websites. It’s free, and only needs two file references to work (a CSS file and a JavaScript file). You can host those files your self, or use a CDN. And, the UI is easily customized with a bit of <style> code:

<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"> -->
<link href="/css/fullcalendar.min.css" rel="stylesheet">
<style>
#calendar {
    margin: 0 auto;
    width: 100%;
}
#calendar h2{
    font-size: 18px;
}
.fc-scroller.fc-day-grid-container{
    height: auto !important;
}
.fc-button{
    padding: 5px !important;
    outline: none;
    border: 1px solid #2176AE;
    background-color: #2176AE;
    color: white;
    text-align: center;
    box-shadow: 1px 1px;
    border-radius: 6px !important;
    background-image: none;
    text-transform: capitalize;
    font-size: 12px !important;
    height: 25px !important;
    margin-left: 5px !important;
}
.fc-state-disabled{
    display: none;
}
<div class="ap-container top-ap-container" > <div id='calendar'></div> </div> 

<script src="js/vendor/moment.min.js"></script>
<script src="js/vendor/fullcalendar.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script> -->

<script>

$(document).ready(function() {
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();
	var eventsArray = [];
	<?php
	if(!$view_record_response["record_not_found"]){ 
		$all_record_rows = $view_record_response["all_record_rows"];
		foreach ($all_record_rows as $key => $value){
			$record_date = $value['date'];
			$record_type = $value['type'];
			$rid = $value['recordid'];
			$nameOfDay = date('D', strtotime($record_date));
			$nameOfDay = lcfirst($nameOfDay);
			$color = "";
			if($record_type == "competition"){
				$color = "red";
			}
			?>

			var event = {
			title: "<?php echo $record_type; ?>",
			start: '<?php echo $record_date; ?>',
			end: '<?php echo $record_date; ?>',
			color: '<?php echo $color; ?>',
			url: "view-record.php?rid=<?php echo $rid?>" 
			}
			eventsArray.push(event);

	<?php
		} //end foreach
	} //end if
	?>

	$('#calendar').fullCalendar({
		editable: false,
		events: eventsArray
	});
});
</script>

You can see I get the back-end data through my PHP code (view_record_response), and pass it along on the front-end (eventsArray) to FullCalendar.

Challenges and next steps

One goal of this project was to get started fast, so people could begin using it. Deciding what to include out of a long list of ideas proved challenging. I could have kept adding features, and never been ready to make the site public. I meant to keep functionality basic, but still wanted the thing to be useful. The design needed to be simple, yet still had to look finished. I won’t know how close I came to getting this right until I analyze user feedback. The real plan is to do a little bit better next time, and to keep iterating. Using this as foundation will let future ventures start a step ahead. Already, I’ve begun implementing updates, and getting ready to deploy to the App Store and Google Play. Look out for coming updates and other products that are in the works! Don’t forget to visit the BJJ Tracker blog.

bjj tracker

Bootstrap Website for a Book Author

A vendor (video producer) to the company I worked for, who had is office on the same floor as us, mentioned in the hall way that he had a friend who needed a website. His friend was an author who just had a book published by Simon and Schuster. Joshua Horwitz released “War of the Whales” in 2014. I built his website from scratch using Bootstrap CSS and HTML5 boilerplate. It’s responsively designed, so it adjusts for mobile devices.

I even implemented a custom CMS mechanism, powered by TinyMCE, that was super light weight. It allowed him to update a few pieces of small content through out the site. It used basic authentication, and wrote to a MySQL database.

<script type="text/javascript">
tinymce.init({
forced_root_block : false,
   force_br_newlines : true,
   force_p_newlines : false,
    selector: "textarea",
	  plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ]
 });
</script>

I used some cool visual effects to add animation and make it feel like an immersive experience. The design process took many iterations, but we got it to a place that made sense for the project. The marquee jQuery plugin used the following code:

$('.marquee')
    .bind('beforeStarting', function(){
        
    })
    .bind('finished', function(){
       $('.marquee').marquee("destroy");
	   $(".marquee").css("overflow", "scroll")
    })
   .marquee({
	//speed in milliseconds of the marquee
	duration: 7000,
	//gap in pixels between the tickers
	gap: 0,
	//time in milliseconds before the marquee will start animating
	delayBeforeStart: 0,
	//'left' or 'right'
	direction: 'up',
	//true or false - should the marquee be duplicated to show an effect of continues flow
	
	//pauseOnHover: true
})

Project proposal

Looking back at the original agreement, this is what be planned before the project began:

I will provide two initial design direction samples. You can choose either direction, request changes, and/or combine elements from each sample. Prior to this step, you can send me examples of what you would like your website’s look-and-feel to be similar to, as well as any other specific requests regarding functionality, style, and layout. Following this, we can go through up to two more rounds of revisions regarding the style, layout, and functionality of your website. You will provide any information, text, and images (photos, logo, etc.) that need to be displayed on this website. Any stock images that we may choose to purchase for this website will cost extra.”

It was a fixed price agreement, but I added this paragraph to our documentation:

I know from plenty of experience that fixed-price agreements often limit you to your first idea about how something should look, or how it might work. I don’t want to limit either your options or your opportunities to change your mind. If you do want to change your mind, add extra sections or content or even add new functionality, that won’t be a problem. You will be charged an hourly rate.”

UI Component Pattern for a Simple PHP website

PHP UI component patterns

Reusable components are a staple of modern front-end web development. On my simple PHP website, I wanted to build user interface pieces, and reuse them across multiple pages. When I was creating a new page for a newsletter signup form, I realized that I was repeating a lot of code for a contact form section that is displayed on almost every page.

Contact form section

This website is so simple, it does not use any modern framework. The contact form itself is powered by AWS SES.  I created a directory in the root folder of the website called “components”. There, I put files containing HTML, CSS, and JavaScript code that would otherwise be repeated. Implementing this pattern will help my code adhere to the DRY (don’t repeat yourself) principle, and make it quicker and easier to make changes in the future. Centralizing code ensures quality and scalability.

UI component directory

Searching the code base for references to this particular HTML revealed ten instances that could be cleaned up.

searching a code base

In the new component file, I copy and paste my HTML and CSS code.  Then, I go through each of the offending files, and replace the markup with a reference:

<?php include $_SERVER["DOCUMENT_ROOT"] . '/components/contact-section.php'; ?>

I also delete any CSS and JavaScript for this section that’s on the page. At first, I tried adding the JavaScript that controls this form’s functionality to that same file. It failed because it relies on a jQuery reference that is not loaded until lower in the document. Separating the JS code into its own file, similarly named as `contact-section-js.php`, and calling it below the library reference solved the issue. That code is responsible for passing the message along to the back-end, handling UI success/error notifications, and implementing CAPTCHA to thwart bots. Since it was a lot of files were morphed, I ran a quality assurance protocol to ensure nothing broke.

Technology and Consciousness

Throughout philosophical discussions concerning technology the concept of “human nature,” and its influence, are often referenced. Upon examining consciousness within a technological context the idea of a loss of humanity or individuality continually arises. Curiously, this seems to imply something very strange – specifically that the major trends of human nature are ultimately leading to its own demise. The abstraction of human characteristics and qualities, such as talent and emotion, which emerges from the influence of human nature on technology, causes a reasonable sense of fear and unnaturalness in most people. It’s clear and obvious that the world is rapidly changing in a way that history has never felt before. Socially, environmentally, and even spiritually, humankind is experiencing a metamorphosis. Issues that have stirred the minds of fanatics and dreamers for centuries are finally coming to a boil. Despite this, we may find consolation in the idea that perhaps human beings are simply a stepping-stone in the bigger picture, and that quality which we refer to as ‘humanity,’ actually derives from the whole of the cosmos and will be survived regardless of the fate of the 46 chromosomed machines that claim it as their exclusive birthright.

The twenty-first century is understood to be a pivotal moment in the history of humankind. Through technology human nature is being altered and we begin to face issues that never before existed. In a talk given by Sir Martin Rees, it is argued that this may be our last century on Earth (1). Discussing the immense future lying ahead of us, Rees explains that complexity and intelligence have far to go even here still on earth, not to mention into the depths of space. A main tenet of his argument entails that for the first time humans are able to materially change themselves, and the planet on a global scale. With the arrival of the internet, complexity and abundance of information has sky-rocketed. Slowly, digital information is becoming more important than material things (consider cash versus electronic banking, etc.). Perhaps this transition is also affecting humanity itself. Our own ability, and desire, to change ourselves may in the end result in the loss of ourselves. Bioengineering and bionics aside, I assert that most vital role will be played by the systems we create in this ‘infinite game.’ Humanity itself is based on information systems, in various regards. Our physical selves result from genetic information. Our minds, our consciousness, are all essentially information processed through a system. Everything that defines humanity seems to be compatible.

Interestingly enough, there is already a website that is devoted to “the putative future process of copying one’s mind from the natural substrate of the brain into an artificial one, manufactured by humans.” “The Mind Uploading Webpage, (2)” also details a list of various issues and questions that seem to arise from the concept, including personal identities, brain enhancements, and artificial realities. What future does a website like this promise in the developing context of web 3.0 and beyond? Imagine once something like this invades our everyday lifestyle – the explicit and intentional outsourcing of the human brains. The reason why I have focused so much on this mental outsourcing and expansion of humanity is because it points to result in something even more complex than the sum of its parts. The various digital systems that humanity has begun to embrace, interconnected within a system itself (which will ultimately be a descendant of today’s internet), will itself eventually develop into a conscious, sentiment being. As described in an article from the New York Times by Jim Holt, something as simple as a rock may “be viewed as an all-purpose information processor.”

I recently enjoyed a cartoon strip by Scott Adams that maintains great relevance to the topic (3). Its title, “Supreme Being: Our Future, Not Our Origin,” accurately describes its argument. Its initial four slides explain how complex things result from the combination of simpler, less capable components. Its sixth slide then says: “What if ‘God,’ is the consciousness that will be created when enough of us are connected by the internet?!!” Interestingly, I feel that this idea generally pointing in the right direction. A ubiquitous, unseen entity that connects everything, huh. Not that I’m trying to bring up a theological argument (perhaps God does exist, and what the cartoon refers to would simply be a manifestation of such), but the idea does seem remarkable.

This post was originally written for my first blog that has since been discontinued.

The Future of Education

flowers

In today’s world it is conventional wisdom that a college education is necessary to excel as a professional. Times are said to have changed, and without proper schooling one is doomed to a life of either hard labor or low-paying pencil pushing. And if you’re planning on paying for an education there is no escaping the fact that college costs are rising. Besides the hefty price tag, traditional schooling is consuming, socially and mentally, forcing a particular lifestyle upon the student. Further, the relationship between the educator and the educated maintains a certain depravity, as a professor holds a figurative gun to the student’s head (any false moves may lead to a career crippling F). But is there an alternative?

In a recent editorial featured in the New York Post (April 23, 2008) Thomas Sowell attributes the high cost of college to two reasons: “People will pay what the colleges charge, and colleges have little incentive to reduce tuition.” He explains that unlike most markets, where lowering prices attracts business, in the academic world the government is ready to step in to pick up the slack. A university would loose millions per year in government money if they lowered tuition. Considering the position that today’s young people are placed, where the arduous task of completing a degree is coupled with unfair prices and a dire necessity, which will affect the rest of their life, it is fair to say that they have us by the proverbial balls.

In an article which I recently compiled I attempt to imagine the direction of coming educational paradigms. It quickly becomes obvious how the talent of great minds may be ignored due to lack of proper credentials. Our current scholastic system bespeaks the Tory elitism representative of Western culture. Perhaps the stereotypical role of an experimental, bohemian college student is effected by the sharp contrast of the academic organization. While it is clear that the classroom is continuing to evolve, it will be necessary for the vintage activist spirit of the student to lend guidance to new educational trends that shifts to a liberal method of intellectual maturation.

So where is the classroom going? I can say with a great deal of confidence that virtual technology will play a leading role in the future of education. Already most colleges and universities offer distance learning programs (online classes). Some colleges, such as the University of Phoenix offer completely virtual degrees. Hybrid courses, in which physical meetings compose only a third of the course time, are also becoming popular. This model moves the educator from the head of the classroom, handing knowledge down, to a guiding medium. This new role forces a teacher to not merely present knowledge, but to be sympathetic in facilitating its acquisition.

Despite the advantages of a virtual classroom, the heavy price still lingers overhead. In overcoming this obstacle towards an open, intellectually progressive society we must embrace the idea of autodidactism.

Being self-educated sounds harder than it is. Some of the most important figures in history have been non-traditionally educated (including Socrates, Benjamin Franklin, Alan Watts, and Mark Twain). It means having a choice in subject matter, moving at your own pace, and it’s free. Its relevance towards the shifting educational paradigm can be attributed to the dawn of the information age, coupled with the open content movement. Considering resources available today, it has never been easier to be self taught. Wikipedia alone serves as an ocean of open knowledge. Various colleges, including MIT, offer ‘open-courseware,’ which include lectures, videos, and notes for entire courses for free. E-books, language courses, podcasts, and dictionaries have all become openly available in a spectrum wide enough to cover anyone’s interests. Even aspiring musicians can learn basics of instruments, theory, and entire songs through online tablatures, sheet music, and video lessons. Rather than growing around current structures, we should move to evolve the system to fit our needs and goals.

Additional Resources:

“I have never let school interfere with my education”
-Mark Twain

“In the first place God made idiots. This was for practice. Then He made school boards.”
-Mark Twain

The PH.D Octopus by William James

“It is interesting to imagine the direction of the classroom and forthcoming educational paradigms. I imagine that within the next twenty years the physical classroom will become obsolete, only to be replaced by an autodidactic virtual environment. The role of the teacher will shift from dictating at the head of the class, to more of a supervising librarian that directs the flow of the program in a very yang manner.”

Open Source Society

paintings

Sometime during the 1950’s television sets had begun to become widely available and fairly affordable. Noting this point as the advent of entertainment focused telecommunications; art had begun to be understood as a trivial distraction to conservative intellectuals. The vegetating trance of the television, typically allowing the mind to enter a state of ‘cruise control,’ could be attributed to the public’s low level of input towards programming. Although the Internet seems to descend from this legacy of infotainment, something quite different is going on. While television preaches endless forms of false happiness through consumerism, the design of the contemporary web aims to facilitate “creativity, information sharing, and, most notably, collaboration among users (Wikipedia – Web 2.0)” This arrangement comprises the core methodology of the Open Source Revolution that is beginning to reshape our traditions and lead us towards a new renaissance of gnosis.

Philosopher Terence McKenna, reminding us that “culture is not your friend (1999),” advises to resist the epistemological disease of autocratic content by creating our own art. Through venues such as Youtube and MySpace, music, art, film, and photography, even mildly entertaining, is now able to draw large audiences and develop into a well received meme. Further, the Wiki archetype has effectively turned the amateur into the expert. McKenna often refers to a revival of the archaic, which is set to take place as a reaction to the patriarchal model of the elite handing knowledge down, and forsaking personal revelation. The proliferation of open source programs, granting users the ability to freely edit and redistribute computer software, manifests the artistic position towards which society must move. The world is shrinking in to a global village thru mass media, and the common majority must take direct control in order to reconnect and reconcile into cosmic consciousness.

The term ‘global village’ is often used metaphorically to describe the internet and World Wide Web. Philosopher Marshall McLuhan predicted that a global village would be tribal in character. The open source operating system Ubuntu, a distribution of Linux (a prime example of free software and open source development), derives its name from the South African philosophical notion of humanitarianism. Interestingly, this juxtaposition of concept and utility represents the new archetype of culture towards which the Open Source Revolution is driving. Projects such as Wikipedia, an open content encyclopedia, are able to maintain their integrity, accuracy, and scope through an effort of community and collaboration. The Open Source Revolution lends new drive to innovation, epistemology, peer support, and ultimately an altruism that trumps the capitalist agenda of elitism. I feel that we must adopt the concept of Open Source as a new organizational model for society.

Should the open source paradigm stay confined to computer software and the internet, or should we move to adopt it as a new model for social organization?

“In a global village where we have instant access to innumerable beliefs around the world, we have come to realize the relativity of what we think”

-Walter Anderson