Author Archives: admin

Tailwind CSS

Create a folder in /workspace/tailwind. Then run the command below to initialize tailwind css.

npm init -y
npm i tailwindcss

Create the src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Create ./index.html and dist/style.css

Paste bootstrapping html code into ./index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Open package.json and modify the code:

"scripts": {
    "build:css": "tailwind build src/style.css -o dist/style.css"
 },

Use the command below to build the distribution file

npm run build:css

Start a HTTP web server using NPM so you can preview and test in the web browser

npm install --global http-server
http-server

Last, view the project in web browser with URL like http://127.0.0.1:8080/dist/

Migrate from bootstrap

Here are few points you need to know if you are migrating over from bootstrap:

Tailwind is not a component library and has no JS dependency
Which means you wont get things like datepicker, tab, carousel….
You may wanto check out DaisyUI, Flowbite or TailwindUI which cost around RM1,200

Tech Talk for Startup

About me

Hi, My name is yee siang, I self-thought coding when I was in Highschool, with the motivation to crack saved games and shareware. Then I graduated from MMU game development major in year 2005. Worked in a few startups and software agencies, never really like to settle in a big corporate with 9-5 works, and here I am in MaGIC since the year 2015 as a developer. I do not have many success stories to share, but I have plenty of failure stories to talk about. Besides coding and entrepreneurship, I also have a strong interest in multimedia and design. This explains why I am also a guest lecturer in a local design college, teaching designers how to code.

The context of this speech/article

It is intended for the tech startup that builds software products for their business, not much for that none tech SME type ‘ startup’, or even e-commerce, but some of the topics here are still quite universal. What I going to say here is from a developer’s perspective, it will be biased just like the speech given by the sales guy. While what I going to say here is not new to most developers, my intention here is to help their business co-founder to understand the developer better.

Idea Is Cheap, Execution is everything (Implementation is Expensive).

In the design college I teach at, they like to emphasize on Idea. Sharing an experience during my uni time, where I had seen this Creative multimedia faculty-student treating his homework so secretive, covering his artwork with black cloth, not willing to talk to his housemate about what he going to submit to the lecturer.

I do agree that Idea is important, but it is also cheap at the same time, if it is just an idea in your mind. Idea is easier to keep in secret when it is in the primitive form where not many technical details are involved; for example, a novel story, a painting, or a fashion cutting. However, if you are building a castle, shooting a movie (not your home video style), making a computer game… it is harder to keep a secret (to yourself) when there are many 3rd parties involved. This is very true for software projects too.

I like to talk about my idea to others before building it, serve as my market validation like what ‘Growth Hacking’ suggested. I do not afraid of people stealing my idea because I believe execution is everything. This is also the reason why I am afraid to hear a client talking about his idea of building a Facebook clone for a freelance project.

Layman does not understand the great number of effort startups put behind the scene to realize an idea into a soundable business. The entrepreneur should understand this better than anyone else.

Software development takes a huge stake in execution and it is expensive, simply because the developers are expensive. This is why we have so many different methodologies like LEAN startup, MVP, Growth Hacking, Business Model Canvas, but all telling you as a startup to iterate fast and focus on your core unique features, to reduce upfront development cost.

Where are the programmers

The common questions we got besides being asked for a quotation is: Where to find a programmer. It’s easier to figure out if we trace them from the time they graduated from uni.

As an excellent software engineering graduate, Julian has many choices:

work in an MNC (stable job, work-life balance, corporate ladder…)
go to Singapore (more MNC there, more international exposure, better currency…)
run his own startup (Be my own boss, publish apps/run ads/build products earn USD)
run his own software house (freelancing, chances to earn USD)
Others
1. Become an Uber driver (not in the industry)
2. Join the established startup (fave, grab…)
3. Retired in MaGIC (kidding)
4. Join your startup

Wow! Let’s give a big applause to most of you here, who already had your own tech guy and managed to come up with the product and gain traction.

As you can see, it is quite hard to get a programmer interested in joining your startup as there are too many options out there for him.

I recalled an Jobstreet ads I saw a week ago that offer USD2.5-6k for a web developer that willing to work in Vietnam/Cambodia. What stop the young Julian who is willing to work aboard from taking the offer but joining yours? Ok la.. this is an online casino business(taken down now) . When come to hiring programmers, you should have noticed that you are competing for a resource globally.

Even in Singapore, it is reported that smaller firms have difficulty filling the programmer vacancy but not project managers. The time takes to hire a project manager is around 1 month while it takes 3-6 months for programmers. It is not hard to understand this phenomenon, just look at the kind of expectations people have of developers vs the manager, and the salary differences.

It seems like developer only go for money. Well, there’s nothing wrong here, as money is also the motivation for entrepreneur, but I believe there are still developers who value other things more than money. Research shows that programmers are willing to scarify pay to work with a favorite co-worker or ex-team he enjoyed.

If you have difficulty expanding your team, try to understand why your current programmer sticks with you, and use it as a reason for new programmer to join your team.

The Iron Triangle

No one remember where it came from. It model the project management constraints that is still useful in today.

Time – when you need it to be ready
Budget – how much you willing to pay
Scope – what you want

Everybody wants to have all 3 simultaneously, but you can only pick either 2.

Time & Budget, you scarify scope. You get to develop fast and cheap, but let’s assume the outcome is crappy.
Time & Scope, you want fast and complete, you definitely need to pay more money.
Budget & Scope, you want it cheap and complete, no rush then, the developer will take his time building it.

Many people try to beat/cheat this triangle. Hereby I like to raise few related points.

Manage Feature Creeps

Features creep happens on both sides of client and developer are the main culprit for project delay and failure.

Client failure to visualise and come out with complete features of the software he wanted to build, resulted as new features being added as the project progress, caused chain reaction to the project that eventually delayed it.

Developer chase after perfectionism, best practices or new features blindly, especially in Computer Game project. Note: Best Practices are context dependent; New programming language/framework features can be quite cool but also buggy at the same time.

Hiring someone Experience

Hiring someone who did the similar kind of software product that you are going to build, gives you assurance in time and budget as the developer can reuse code. Experience matters!

Switch from custom development -> Product

If you found an off-the-shelf product for the solution you going to build, you can get it super-duper fast, dirt cheap (think windows OS at RM500 vs custom developing it), and similar features (you might need to scarify uniqueness and some flexibility). You beat the triangle in this sense. However, it is unlikely to happen since you are building a startup. What’s the point for your startup to exist then?

Conclusion: Respect the iron triangle, agile is the answer as it approach thru a ‘managed balance’.

Agile, Scrum and Sprint

software-development-methods-explained-with-cars-toggl-infographic-02

ref: Software Development explained with cars

Product Development

Programmer vs Designer

Programmer is like your left brain while designer is like the right brain. They are trained to think from different perspective due to their profession.

Hiring Developer

Product focus vs Service focus

After running for years, startup may ended up in 3 conditions:

Success
Failed
Half-alive

Success is the best thing that can happen to your startup and you should aim for it. But if unfortunately, your startup failed, you admit the failure and move on with another idea or life. Half-alive (instead of half-dead, zen teach me to stay positive) is the worst-case scenario. You and your teammate are stuck, trying to get more resources to keep it running; many have ended up pivoting to service focus agency.

Your dream is to continue working on the product using the money from the custom software development projects you acquired (reality). This is very dangerous as these service focus software projects will further drag down your progress, eventually causing your dream product losing competitive advantage.

When you are in this condition, you should ask yourself seriously: Is it worth continuing? Don’t be a forever-startup company.

Outsource vs In-house

I do not believe a startup can succeed by outsourcing its innovation to others. In-house team are required because:

There are just too many moving parts throughout the innovation journey
You are not just building one product in the process, you may need to pivot multiple time
Communication is challenging as lag time is high
Hiring a 3rd party would be super expensive
To the outsourced developer, your project is just another business for him. Passion is lacking here.

Startup with Strong team is half way to success

In short, your team is more important than the idea you are working. Experienced investors evaluate your team as much as your idea. With a strong team, you can pivot to any idea later on with ease.

Scheduling task on web server to database

Although it sounds simple, but please trust me that it always troubled me.

OS level Cron is a good choice but it does not have any protection against multiple execution. Let’s imagine you have created an event that executes every 10 seconds, but the logic inside the event (i.e. curl) can take longer than 10 seconds, so it can pile-up. In the worst case, when an event contains a follow up action of ‘insert’ query, it can cause duplication.

MySQL Event Scheduler that available on version 5.1.6 is at the database layer implementation but it has some way to avoid deadlock. https://www.percona.com/blog/2015/02/25/using-mysql-event-scheduler-and-how-to-prevent-contention/

Database layer of scheduler is useful if you just wanto modify the data without other ‘external’ action such sending email or calling another php script. It is also useful for database hosted on AWS RDS cloud.

Gearman is another totally different tool but kind of related. http://gearman.org/

Gearman provides a generic application framework to farm out work to other machines or processes that are better suited to do the work. It allows you to do work in parallel, to load balance processing, and to call functions between languages. It can be used in a variety of applications, from high-availability web sites to the transport of database replication events.

Imagine you crawling multiple website base on today captured records. Gearman help you distribute task evenly across available client, changing a ‘serial’ process into ‘parallel’. The speed it give you help to avoid the above mentioned deadlock situation. However, it still not protect against multiple execution.

For now, I find this article very helpful: http://bencane.com/2015/09/22/preventing-duplicate-cron-job-executions/

Processing Countdown Timer

In case you need to implement timer in your project that have a specific countdown time and you can check if it has expired or not , this code snippet will help.

class Timer {
 
  int savedTime; // When Timer started
  int totalTime; // How long Timer should last
  
  Timer(int tempTotalTime) {
    totalTime = tempTotalTime;
  }
  
  // Starting the timer
  void start() {
    // When the timer starts it stores the current time in milliseconds.
    savedTime = millis(); 
  }
  
  // The function isFinished() returns true if 5,000 ms have passed. 
  // The work of the timer is farmed out to this method.
  boolean isFinished() { 
    // Check how much time has passed
    int passedTime = millis()- savedTime;
    if (passedTime > totalTime) {
      return true;
    } else {
      return false;
    }
  }
}

class Timer {

int savedTime; // When Timer started

int totalTime; // How long Timer should last

Timer(int tempTotalTime) {

totalTime = tempTotalTime;

}

// Starting the timer

void start() {

// When the timer starts it stores the current time in milliseconds.

savedTime = millis();

}

// The function isFinished() returns true if 5,000 ms have passed.

// The work of the timer is farmed out to this method.

boolean isFinished() {

// Check how much time has passed

int passedTime = millis()- savedTime;

if (passedTime > totalTime) {

return true;

} else {

return false;

}

Timer timer;

void setup()
{
  // timer should last 5 second
  timer = new Timer(5000);
  timer.start();
  ...
}

void draw()
{
  // check is timer passed
  if(timer.isFinished())
  {
  }
  ...
}

Timer timer;

void setup()

{

// timer should last 5 second

timer = new Timer(5000);

timer.start();

...

}

void draw()

{

// check is timer passed

if(timer.isFinished())

{

}

...

}

Kinect Puppet

Chinese developer has some interesting use of kinect with Journey to the west characters. Video here. They also have similar concept with chinese opera characters. http://www.qianyedan.com/kinect-pupppetry/kinect-puppet-research2/ It would be interesting if Malaysian developer can utilize it for Malaysia Wayang Kulit, isn’t it?

Web Hosting

I started my first web hosting with Xoom in 90s and then Geocities. They are both free hosting services. Thanks to hosting company like Lunarpages and Exabytes, I able to afford my own cpanel hosting at reasonable fee as low as RM300 annually. I even subscribed for a reseller plan so I can host multiples sites under one WHM. Now, I am more keen to use cloud services such as Heroku, AWS, Azure and Google Hosting. My recent favorite cloud provider is Digital Ocean. I had tried both Heroku and AWS and they are all charge like utilities bill base on usage, which can be very expensive for my free project. Digital Ocean offered fixed price and somehow I feel the vm are more stable than AWS Ec2 although Amazon S3 are still my all time favorite when come to storing static files. With emerging trend like dns cloudflare, baas parse.com, smtp mandrill… it seems that all infrastructure can be provided as service base (IaaS) and programmer can more focus on coding than setting up server.

Embed Astro Awani Player to your site

All you needs are the following code:

<script type="text/javascript" src="http://static.astroawani.com/front/js/swfobject.js?v=20150525"></script>
<script type="text/javascript" src="http://static.astroawani.com/front/js/jquery_apis/jquery-1.js?v=20150525"></script>
<script type="text/javascript" src="http://static.astroawani.com/front/js/common.js?v=20150525"></script>
<script type="text/javascript" src="http://static.astroawani.com/front/js/jquery_apis/player-script.js?v=20150525"></script>
<script type="text/javascript" src="http://static.astroawani.com/front/js/jquery_apis/player.js?v=20150525"></script>
<script type="text/javascript">
    //<!--

		var __id = '40312',
			__apikey='7c3c27ac4be5dc19bf9a1cead8857d23',
			__filename='Great2014_67724_139901_388.mp4',
			__foldername='2014-09', 
			__fullimage='http://vdata.astroawani.com/thumbnails/medium/2014-09/great2014_67724_139901_256_b_medium.jpg',
			__title='Hari+ke-2+GREAT++2014',
			__desc='Gabungan+Rakan+Entraprenueuer+Aspirasi+Terhebat+atau+GREAT+2014%2C+berlangsung+selama+4+hari+sebagai+sebuah+platform+mengabungkan+usahawan+di+Malaysia+untuk+berkongsi+idea.%0D%0A%0D%0AHari+ini+hari+kedua.%0D%0A%0D%0AUntuk+mendapatkan+maklumat+lanjut+kita+bersama+rakan+setugas+Israr+Khalid+yang+berada+di+MaGIC+Cyberjaya.',
			__duration='277',
			__switch_url='0',
			__movie='http://static.astroawani.com/flash/VideoPlayer.swf?v=20150525',
			__skin='',
			__pl_type='vod',
			__agency_id='1',
			__adformat='preroll|postroll',
			__autoplay='1',
			__pwidth='622',
			__pheight='322',
			__feedback_url='http://www.astroawani.com/p/feedback',
			__LIVE_STREAM = 'B',
			__rtmp='true';
	//-->
</script>
<script type="text/javascript" src="http://static.astroawani.com/front/js/fancybox/jquery.fancybox-1.3.4.pack.js?v=20150525"></script>

        <div class="cont1">
            <div class="videoplayer">
    <div class="photogal">
        <div style="text-align: center;margin: 0 auto; width: 99%;">
            <div id="videoContainer" class="clearAll" style="margin-bottom:15px;width:622px; height:322px;" >
                <div class="player" >
                </div>
            </div>
        </div>
    </div>
</div>        
</div>

//<!--

var __id = '40312',

__apikey='7c3c27ac4be5dc19bf9a1cead8857d23',

__filename='Great2014_67724_139901_388.mp4',

__foldername='2014-09',

__fullimage='http://vdata.astroawani.com/thumbnails/medium/2014-09/great2014_67724_139901_256_b_medium.jpg',

__title='Hari+ke-2+GREAT++2014',

__desc='Gabungan+Rakan+Entraprenueuer+Aspirasi+Terhebat+atau+GREAT+2014%2C+berlangsung+selama+4+hari+sebagai+sebuah+platform+mengabungkan+usahawan+di+Malaysia+untuk+berkongsi+idea.%0D%0A%0D%0AHari+ini+hari+kedua.%0D%0A%0D%0AUntuk+mendapatkan+maklumat+lanjut+kita+bersama+rakan+setugas+Israr+Khalid+yang+berada+di+MaGIC+Cyberjaya.',

__duration='277',

__switch_url='0',

__movie='http://static.astroawani.com/flash/VideoPlayer.swf?v=20150525',

__skin='',

__pl_type='vod',

__agency_id='1',

__adformat='preroll|postroll',

__autoplay='1',

__pwidth='622',

__pheight='322',

__feedback_url='http://www.astroawani.com/p/feedback',

__LIVE_STREAM = 'B',

__rtmp='true';

//-->

</script>

</div>

Python + openCV + video

The purpose here is to play video in rPi using python + openCv. However, the avi file i call do not load as expected. I stripped off all the other code pieces, and focus on the loading to cheack what is wrong:

import numpy as np
import cv2

cap = cv2.VideoCapture('video.avi')
result = cap.isOpened()
print result

import numpy as np

import cv2

cap = cv2.VideoCapture('video.avi')

result = cap.isOpened()

print result

and it printed False, which means it cant read my video format a quick google brought me here. I will need to download mplayer first and use the memcoder in it to convert the format.

mencoder.exe in.avi -nosound -ovc raw -vf format=i420 -o out.avi

1	mencoder.exe in.avi -nosound -ovc raw -vf format=i420 -o out.avi

and now, it runs perfectly The complete code to play video:

import numpy as np
import cv2

cap = cv2.VideoCapture('out.avi')
result = cap.isOpened()
# print result

while(cap.isOpened()):
    flag, frame = cap.read()
    
    # auto loop
    if flag==0:
        cap.set(cv2.cv.CV_CAP_PROP_POS_FRAMES, 1)
        continue
        
    # frame image manipulation
    #gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
    
    # full screen, have a remain unsolve white border
    #cv2.namedWindow("frame", cv2.WND_PROP_FULLSCREEN)          
    #cv2.setWindowProperty("frame", cv2.WND_PROP_FULLSCREEN, cv2.cv.CV_WINDOW_FULLSCREEN)

    cv2.imshow('frame', frame)
	
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

cap.release()
cv2.destroyAllWindows()

import numpy as np

import cv2

cap = cv2.VideoCapture('out.avi')

result = cap.isOpened()

# print result

while(cap.isOpened()):

flag, frame = cap.read()

# auto loop

if flag==0:

cap.set(cv2.cv.CV_CAP_PROP_POS_FRAMES, 1)

continue

# frame image manipulation

#gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

# full screen, have a remain unsolve white border

#cv2.namedWindow("frame", cv2.WND_PROP_FULLSCREEN)

#cv2.setWindowProperty("frame", cv2.WND_PROP_FULLSCREEN, cv2.cv.CV_WINDOW_FULLSCREEN)

cv2.imshow('frame', frame)

if cv2.waitKey(1) & 0xFF == ord('q'):

break

cap.release()

cv2.destroyAllWindows()

Processing + SimpleOpenNi + Export exe

Seems like there’s an issue here where your code run find in IDE but not after exported to exe.

https://code.google.com/p/simple-openni/issues/detail?id=27
http://stackoverflow.com/questions/25694883/processings-export-functionality-does-not-work-with-simpleopenni-kinect-appli
http://stackoverflow.com/questions/21755050/exporting-the-kinect-processing-application

So the solution is found here:

https://code.google.com/p/simple-openni/issues/detail?id=73

Problem begins from simpleOpenNI.class, trying to load libs from "/SimpleOpenNI/library/" withou success. I download the simpleOpenNI.java and i patched to take the current directory adreess and in nativLibPath string. To patch the java file simple add this line: static String workingDir = System.getProperty("user.dir"); after public class SimpleOpenNI extends ContextWrapper implements SimpleOpenNIConstants { and change 2 lines (32X and x64)from: nativLibPath = getLibraryPathWin() "\\lib\\"; to: nativLibPath = getLibraryPathWin() + workingDir + "\\lib\\"; compile the file and put it on simpleOpenNI.jar\SimpleOpenNI\ or download the atteched file and put it on: simpleOpenNI.jar\SimpleOpenNI\ located on folder lib!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Problem begins from simpleOpenNI.class, trying to load libs from "/SimpleOpenNI/library/" withou success.

I download the simpleOpenNI.java and i patched to take the current directory adreess and in nativLibPath string.

To patch the java file simple add this line:
static String workingDir = System.getProperty("user.dir");
after public class SimpleOpenNI extends ContextWrapper implements SimpleOpenNIConstants
{
and change 2 lines (32X and x64)from:
nativLibPath = getLibraryPathWin() "\\lib\\";
to:
nativLibPath = getLibraryPathWin() + workingDir + "\\lib\\";
compile the file and put it on simpleOpenNI.jar\SimpleOpenNI\

or download the atteched file and put it on:
simpleOpenNI.jar\SimpleOpenNI\ located on folder lib!

So, you will need to download the simpleOpenNI fix and replace with the one in your exportedApp\lib. Good luck!

Processing and Arduino port

Processing app that used serial method to talk to arduino need the correct port to connect with. This app can help you: processingScanner (run on 64bit computer)

Double check with your control panel -> Device Manager.

Device Manager show COM16 where our arduino board connected with, is match with index 0 in the processingScanner. So, the number/index to use in process is 0.

YS Tech Share

Sharing knowledge and information on geeky stuff