Development

Let’s all go to the pub – to learn about web development – Halfstack 2018 in London, England

Halfstack is a conference that is close to my heart. Because it is in London, because it is in a pub, because it is run by a person who is lovely, ginger and did so, so much for the JavaScript community over decades without having a huge ego or being weird: Dylan Schiemann.

This, in addition to a few other factors, makes Halfstack incredibly affordable, relaxed and at the same time full of great content. That’s why I keep presenting there, even when this time – for the first time – I had to fly to London to participate.

This year had quite an amazing line-up and a lot more talks than the past editions. The average talk length was a lot shorter than in the earlier years. To me, that’s a good thing. Better to make one point really well than treating an audience once again to the history of computing and how that relates to that brand new technology you actually wanted to talk about.

I shot a lot of photos, all of which are in this Google Photos album and here’s a quick recap of the talks.

The talks

Chris Heilmann, Microsoft: “Bringing best practices front and centre”

My opening keynote was about what we consider best practices and how they are often not applicable in context. How we miss out the opportunity of making them a starting point for new developers rather than something they have to learn to value after making the same mistakes we did before. With open and extensible editors like Visual Studio Code and tools to test the quality of our products while we deploy or even create them like webhint, we have a chance to embed our knowledge into the development flow instead of hoping people start caring.

My slides, resources and twitter reactions for ‘Bringing best practices front and centre’ are on notist.

Ada Rose Cannon, Samsung: “The present and future of VR on the Web”

Ada Rose Cannon and Alex Lakaitos

Ada Rose is chock-full of talent, knowledge and does a lot of good work to move the web into the third dimension and beyond. Working for Samsung’s Internet browser has its benefits as you have access to a lot of hardware to test. Ada showed examples from the history of VR/AR and XR and how it applies to web technologies. She ended with a call to action to support the Immersive Web Community Group of the W3C to get this work further along. It is fun to see someone who is so emerged in a topic explaining it in an accessible manner rather than drowning in jargon.

Alex Lakatos, Nexmo: “Building Bots with JavaScript”

Alex Lakatos worked with me at Mozilla, back then as a community member and was one of the first to benefit from their speaker training program. And it shows. In a few minutes he explained the benefits and pitfalls of bots as a platform and communication channel and showed in live demos how to train a bot in JavaScript how to understand humans. Both his slides and his demo code are available.

Alex also runs the developer avocados newsletter, a great resource for Developer Advocacy, call for papers and all that is related to that.

Anna Migas, Lunar Logic: “Fast But Not Furious: Debugging User Interaction Performance Issues”

Anna Migas presenting at halfstackconf

Anna Migas doesn’t only have an incredibly easy to remember Twitter handle (@szynszyliszys), she also has done a lot of homework in the area of web performance when it comes to making interfaces react quickly to the user. There is a truckload of information on the topic out there, and Anna did her best to distill it for the audience into sensible, digestible chunks in this short talk. Well worth a watch and share. Her slides are here to peruse.

Liliana Kastilio, Snyk: “npm install disaster-waiting-to-happen”

Liliana Kastilio presenting

Liliana Kastilio gave her first ever presentation and covered a lot of security ground about what not to do in your JavaScript. I expected a different talk considering the title, but I was not disappointed. A lot of sensible takeaways in a short amount of time.

Andrico Karoulla, Trint: “Enter ES2018

Andrico Karoulla on ES6

Andrico Karoulla is heir to a Fish and Chip shop and thus should already be set for life. However, his passion is telling people about the cool new features of JavaScript and he did so in a short talk. He didn’t only tell us about the features, but also managed to explain why they are important and what real implementation problems they fix. Good show, even when he had a tough time speaking into the mic and coding at the same time. 🙂

Stephen Cook, Onfido: “100% CSS Mario Kart”

CSS trick used to fake interactivity

Stephen Cook delivered the first jaw-dropping talk of the day by creating a CSS Mario Kart game. He applied a few interesting tricks, like a negative delay on CSS animations and using the validity state of the hidden form field to read out keystrokes in CSS. I’ve seen a few demos like that before, but it is pretty impressive to see it done live in such a short amount of time including explanations why some of these tricks work.
Both Stephen’s slides with explanations about the hacks and the demo of the Mario Kart animation are available

Sean McGee, Esri UK: “Buying a House with JavaScript”

Sean McGee presenting

Sean’s talk was a big let-down for anyone who thought they could learn how to afford buying a house in London with JavaScript as your only skill. If you came to learn about creating a clever mash-up of house offers, crime and travel information, you had a great time. Sean explained not only how to scrape the data, but also how to mash it up and display it in an intelligent manner that allowed him to find an affordable place with all the trimmings he wanted. As a former pipes/YQL and maps person, I was very happy.

Jonathan Fielding, Snyk: “Home Automation with JavaScript”

Jonathan Fielding is another person who spoke at a few Halfstack events and this time he covered the topic of home automation. It is a great topic and a market that needs cracking open as there are not many standards available. Instead you need to do a lot of reverse engineering and tinkering and Jonathan explained in an accessible fashion how to do this. Amongst other things, Jonathan lit and changed the colour of light bulbs on stage and deactivated his home security system – as you do.

Rob Bateman, The Away Foundation: “Reanimating the Web”

Rob Bateman with his TypeScript joke

Rob gave a similar talk at the warm-up of Beyond Tellerand Duesseldorf earlier this year, so you see the high quality and lots of work that went into this. He covered the history of animation on the web and went deep down into the nitty gritty on how we can ensure both that animations are buttery smooth and comparatively fast to native solutions doing the same things. A good reminder that we had a lot of innovation in the Flash space, and we now need to catch up again – both in tooling and in our approach to write animations.

Carolyn Stransky, Blacklane “The Most Important UI: You”

Carolyn on Self Care

Carolyn Stransky was the second “wow” moment for me this time. Her talk (slides are available here was about self care, how to be good to yourself and how to ensure we are not creating a horrible work environment. I’ve seen a few of these talks, but often they are high-level and “why aren’t we all better at this” finger pointing. Carolyn did a great job showing a truckload of resources you can use to make your life a bit easier and better and explained how to use them instead.

If you’re a conference organizer, contact her. This was absolutely lovely.

Tom Dye, SitePen and Dylan Schiemann, SitePen: “Cats vs. Dogs”

Tom and Dylan mostly did this talk to play out their fetish of wearing rubber animal masks:

Rubber cat and dog masks

Other than that kinky interlude, the talk was about all the weird little discussions and endless threads we have as a community about pointless things like tabs vs. spaces.

Cats vs. Dogs

The real important part here was though that they build a PWA that allowed the audience to vote for cats or dogs and control the speed of their tails wagging. You could also make them miaow or bark. ARE YOU NOT ENTERTAINED?

Cameron Diverand and Theodor Gherzan of Balena: “JavaScript at the edge”

Controlling a board of LEDs in JavaScript

Cameron and Theodor showed how to control a board of LEDs in JavaScript with sound coming from the audience. They didn’t talk about the Edge browser, which – to me – was disappointing. If you like the sort of thing of doing crazy hardware things in JavaScript, though, this was a lot of fun.

Jani Eväkallio, Formidable: “This Talk Is About You”

Jani did a poetry reading at the last Halfstack. This time he went further and did a visual storytelling kind of presentation reminding us that we’re not victims of the market we are in but should be much more in control over the quality of and the impact our code has on the world. This is tough to explain, it may make more sense to wait for Halfstack to release the video, as it was thoroughly enjoyable.

Jani does a lot of performing and is a joy to see present. Check it out. The keynote file of his talk is here. He also organises a technology comedy night called Component did Smoosh and the next one is 30th of November in Berlin.

Tony Edwards, Software Cornwall: “Beats, Rhymes & Unit Tests”

Tony Edwards is an incredibly passionate person about the web and organiser of the FutureSync conference, where he was crazynice enough to invite me to speak. In this session he covered the experimental web speech to text API and tried it on different rap lyrics with not much success. He then proceeded to do a live rapping session expecting the (mostly) British audience to go wild like a rap battle in Detroit or LA. It worked to a degree though, and his rap was much better converted by the API. All in all a thoroughly enjoyable talk by a multi-talented, nice bloke.

As a side node, using a full fledged deep learning API would give you much better results. The big thing about text recognition isn’t the interface to the browser, but the quality of the trained model. And they don’t come cheap which is why Mozilla tries to open-source that idea with their Common Voice project.

Professional detection software also started mixing audio recognition with lip-reading, which is incredibly exciting and yields much better results.

Joe Hart, Blend Media: Alpha, Beta, Gamer: Dev Mode

Competitive Tetris

Joe Hart’s talk was a splendid end of the evening. He covered oddities in the history of computer gaming and had a lot of interactive games with the audience. A Flappy Bird clone that worked by shouting at it, a Tetris clone where one player painted impossible Tetronimos and the other had to fit them in and other cruel measures to make the audience have fun and participate. Joe Hart is a Fringe presenter, so there is no question about the quality. This was fun from start to end.

Summary

Pub Quiz

Yes, Halfstack is different and the quality of the projector was questionable. The food was lovely though and having it in a pub means speakers are much more relaxed and lapses in their presentations much easier forgiven by the audience. Dylan and team are trying to take this concept on the road and for the first time plan to do a Vienna and NYC edition of the conference. I am really looking forward to seeing this succeed. I’ll be back and I’ll be having a great time again. Halfstack is an easy-going, yet valuable and highly diverse event, and well worth the money.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Artificial Intelligence in Web Development

What is Artificial Intelligence (AI)?

Artificial intelligence (AI) is the ability of a computer program or a machine to think and learn. It is also a field of study which tries to make computers smart. As machines become increasingly capable, mental facilities once thought to require intelligence are removed from the definition. Artificial intelligence (AI) is an area of computer science that emphasizes the creation of intelligent machines that work and react like humans. Some of the activities computers with artificial intelligence are designed for include: Speech recognition and learning.

Why is AI important?

Artificial Intelligence is the machines which are designed and programmed in such a manner that they and think and act like a human. Artificial Intelligence becomes the important part of our daily life. Our life is changed by AI because this technology is used in a wide area of day to day services.

Graphic showinf human and robot arm about to touch

Why Implement AI in Website Development?

More and more users prefer searching for goods directly through the Amazon instead of searching. Large e-commerce companies are changing our attitude to online purchasing and, as a result, to website development. Successful e-commerce companies actively implement innovative technologies in their work such as: chatbots, voice search, and other AI solutions. Here are some benefits of Artificial Intelligence implementation for website development.

  • Make search even faster
  • Make interactions with visitors even better
  • Provide a more relevant customer experience
  • Provide a personalized store experience
  • Even more effective marketing to targeted consumers

You can find many more details in this article.

Artificial Intelligence can be used in Web Development and Marketing

The user interface design process involves a lot a creativity and often starts on a whiteboard where designers share ideas. Once a design is drawn, it is usually captured within a photograph and manually translated into some working HTML wireframe to begin the development process. This takes effort and often delays the design process (and errors may creep in). Instead, one could capture the whiteboard contents in a photo and upload that to an AI routine to generate the prototype website. Sketch2Code, a web based solution has been recently introduced. It relies on AI to transform a handwritten user interface design from a picture to a valid HTML markup code.

For those who want to learn more, we recommend this article for more information.

AI is also being used in other ways, such as Adobe Sensei.

What is Adobe Sensei?

Adobe Sensei uses artificial intelligence (AI) and machine learning to help you discover hidden opportunities, speed up tedious processes, and offer relevant experiences to every customer. Put simply, Adobe Sensei helps you work better, smarter, and faster. Artificial intelligence makes a smarter enterprise. Adobe brought together business leaders across various industries to share their thoughts on opportunities and challenges for AI in the enterprise. Adobe Sensei puts artificial intelligence at the center of amazing customer experiences.

Find more about this approach (along with an introductory video) at this site.

The Pros and Cons of AI in Web Design

In the digital age, artificial intelligence is permeating all industries; web design is no different. For small businesses with limited human capabilities, AI allow quick interactions with customers to provide them with relevant information. AI in web development can benefit both the user and the organization.

In order to better understand the role that AI plays in web development we need to consider the impact.

Pros of using AI

  1. User experience – This is the most important aspect in web design. If a visitor to your site can’t use it effectively and efficiently, they will go elsewhere. As we know, users of a website are customers (and they will share their experiences). It’s important to make sure that your products are easy to find and customers can easily purchase them. Many customer centric website are beginning to rely on AI to improve the customer experience.
  2. Personalized Content – Content rules (whether it is videos, blogs or articles). By implementing AI on your website you can show audience certain content that is tailored to them. AI can suggest new music, videos and other relevant content for users based on their past behaviors. Users can feel comfortable discovering new content while being confident that they will find it relevant.
  3. Voice Search Optimization – One of the fastest growing design trends for web design is Voice Search Optimization. Since many customers are using their mobile devices more than their desktop, websites often have to optimize for mobile devices. In this aspect, AI can help as well.

Cons of using AI

  1. A Place for Humans – According to a study by 2030 up to 90% of all jobs will be under threat to be replaced by smart machines. This may include web design, graphic design and mobile app design. Since AI has proven to be more efficient in terms of forming content to fit on various devices, will we still need to know how to code?
  2. Privacy Issues – Since AI and machine learning can be built to monitor consumer behaviors and their interactions online, many consumers often feel uneasy. Software such as analytics when combined with AI has unlimited potential to mine customer data and insights. Therefore, it could be scary for consumers because 94% of them want to do business with a company with full transparency.
  3. Impersonal Interactions – Despite how well you have created your chat bots and automated responses, customers may still be able to tell that it was sent by AI. In the digital age, many users still want personal responses; therefore, by implementing AI we are stepping away from those much needed personal interactions.

While there are pros and cons to using AI in web design, we predict a positive future. By implementing AI into web design, we as humans can have more time for creativity and doing other important tasks. By implementing AI into web design, we as humans can have more time for creativity and doing other important tasks. Instead of focusing on the negative, we should think about what AI can do for us and how it can improve our interactions. AI is happening (and its use is evolving). For example, some are discussing the integration of AI and blockchain.

For more insights on the pros and cons using AI, we recommend this article written by Larry Head – Disruption Ahead.

Looking at the positive side of using AI in technology, Adobe CEO, Shantanu Narayen, has said “Microsoft and Adobe together is leveraging artificial intelligence to push deeper into customer relationship management and create a brand-new category and industry. Microsoft’s cloud platform Azure enables businesses to process the data at the pace they want and Adobe’s enterprise solutions allow businesses to attract customers to the platform and engage it.”

This CNBC link has more information.

More resources (for those who want to dive deeper)

Artificial intelligence

Artificial Intelligence and the Future of Web Design

How AI is Changing the Future of Web Design

Best AI Website Builders

In this week we focused on the Artificial Intelligence (what it is, why it is important with respect to web design, some technologies using this in web design, and some advantages and disadvantages).  The uses of AI are evolving rapidly; it depends us how we use it in a positive manner.

We always look forward to your comments and feedback.

We encourage members (and non-members) check out our social media channels. If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. As a member, your first class is free.

The post Artificial Intelligence in Web Development appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

May Update – Web Development trends for 2018

Web Development Trends

In web development, the saying “the only constant is change” is very true. Web development is changing every second and 2018 is no exception. User expectations are growing and it is more important than ever to build digital experiences that are engaging, fun, and intuitive. Content needs to be accessible everywhere especially on mobile devices. In order to make that happen, new programming languages and frameworks are on the rise, extensions are becoming more compatible, and real time web apps are becoming more popular.

Web Development Trends for 2018

Web Development Trends You Can Expect in 2018

  • Vue JS is getting more popular
  • Functional programming benefits from JavaScript improvements
  • Extensions get more compatible
  • Real-time web apps are getting more popular
  • Progressive web apps grow in popularity
  • Mobile web development continues to expand
  • Material design is being used more and more

Rebecca Vogels’ article has more information on these web development trends.

More on Web Development Trends in 2018

1. In this first article by John Hughes covers these development trends:

  • An Increase in One-Page Website Designs
  • The Decline of the Flash Protocol
  • A Focus on Mobile-First Design Philosophy (Again)
  • The Increasing Importance of Push Notifications
  • The Prominence of Modular Page Creation
  • A Rise in the Popularity of Progressive Web Apps
  • The Perpetual Dominance of JavaScript

2. Anotni Zolciak’s article, focuses more on what kind of technology will matter on both front- and back-end:

  • Accelerated Mobile Pages
  • Progressive Web Applications (PWA)
  • Single Page Applications (SPA)
  • Chatbots and Online Support
  • Push Notifications
  • Static Websites
  • RAIL: User-Centric Performance
  • Motion UI
  • Functional Programming: What Is It?
  • Browser Extensions
  • Real-Time Web Apps
  • Augmented Reality and Virtual Reality

More Resources

  • Web Development Trends in 2018 article by Kumar Shantanu
  • Eight Web Development Trends Coming In 2018 article by Forbes
  • 8 Top Web Development Trends in 2018 article by MEREHEAD

Reading those articles now here is the conclusion that new frameworks, design trends, user expectations, and mobile developments are changing web development every day. Web development is responding to growing user expectations and design trends. Google’s material design, which is expected to gain even more popularity in 2018 as well. There is also the need to communicate and work together in real time from everywhere. We believe it is important for Web Professionals to know about these new trends and we encourage readers to review these articles..

This week we focused on those new trends emerging in 2018 in Web Professional’s world. We hope you find these resources and overviews useful. We always look forward to your comments and feedback (whether you are a member or not).

We encourage members (and non-members) check out our social media channels. If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. As a member, your first class is free.

 

The post May Update – Web Development trends for 2018 appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Ink-trap development

Sometimes you see things that look a bit off and it makes you feel uneasy. When something challenges your sense of quality and what appears well-made. Like the following font:

Bell centennial demo

This doesn’t look good, and it doesn’t look right. It feels like someone didn’t quite finish it or didn’t know how to use tools. Or – even worse – didn’t use the right tools for the job. This font, for example, looks like my first attempts to get my head around vectors in Photoshop. Not a memory I cherish.

In the case of this font, though, nothing of this applies. What you see here is Bell Centennial by Matthew Carter, a well-regarded font expert. It is a font that has seen a massive amount of use.

You may not recall ever seeing it, but here’s the deal: Bell Centennial was the font used in AT&T phonebooks. The weird missing parts of the letters in it are so called “Ink Traps”. The genius of the ink trap is that it makes the font work when applied in its natural environment.

inktraps

Phone books shouldn’t cost much to print, which is why they use cheap paper. They also are big and should use small fonts, allowing for more content in fewer pages. In essence, the implementation phase of the project phone book tried to cut corners. Staying as cheap as possible.

This is where the ink traps come in. Ink bleeds out on cheap paper and blurs the letters. A font with no spaces can thus become unreadable. Not so Bell Centennial. On the contrary – it gets better and more legible when printed. The ink traps fill with ink and make the weirdness of the font go away.

M in design and in print

Bell Centennial in use

I like this approach a lot. There is a lot of merit in creating something and assuming a flawed implementation. As they all are in one way or another. By leaving things out to become available later – or not at all – we can concentrate on what’s important. A solid base that may not be perfect, but will not expect the implementer to do everything right, either.

Because they never do. In twenty years in this industry I’ve never seen a project get out the door the way we planned it to. It was even more common to see projects getting cancelled halfway through. And not only waterfall projects. Even the safeguard of the Agile Manifesto keeps failing.

In-build failure obscured just enough to make money

When I worked for an agency in the B2B space this seems to be even a common theme. Get the project, make sure you have a nice round sum in the contract that you have to pay in case you fail. Then pad the project with lots of unnecessary but expensive heads in the early stages. Bill all those to the client. Mess up and pay the fine when everything goes pear-shaped, leaving you with a nice profit.

We want to build for the future…

As a technical person, these projects were frustrating to work on. We’re lazy. We don’t want to do the same things over and over again. We want to do something and then automate it. We are all about making sure what we do is maintainable, extensible and follows standards. Because that makes outcomes predictable. For years we’ve been preaching that our code should be cleaner. It shouldn’t make assumptions. It should allow for erroneous data coming in and trying to fix it. It should be generic, not specific. We preach all this to avoid unpleasant surprises in the future.

Future imperfect

And yet, I have a hard time remembering when projects that we put so much effort in ever became a reality. They got out, yes, but somewhere along the way someone cut corners. And what is now live was never something I was particularly proud of. Other projects, that appeared rushed and made me feel dirty got out and flourish. Often they also vanished soon after, and oddly enough, the sky didn’t fall on our heads. Nobody missed them. They’ve done their job and overstayed their welcome. It was wasted effort to make them scale to forever and try to predict all the future needs. As there was no future for them. It is easier to fold and restart a software project than to dismantle and change a physical product. That’s the beauty of software. That’s what makes it soft.

I’ve hardly ever seen rewards of the hard work of making products maintainable in a clean manner. I am not saying they don’t make sense. I am saying that far too often, something got in the way. Something I had no control over. Often things I didn’t even hear about until things went pear-shaped:

  • Our well-thought-out design system hardly ever evolved with the product. Instead redesigns would wipe them out completely. Or the product would move to another CMS or backend. Out of a sudden this brought new limitations incompatible with the original design.
  • Our clean, accessible and semantic templates have a similar fate. Tossed around a few cycles of maintenance someone will have removed or warped the goodness we added upfront. Audits will flag this up, but with no immediate repercussions the invalid bits will end up on the backlog. There’s new things to add, after all.

New toys with new battery requirements

A common scenario is new product owners trying to make their mark by bringing the new tech hotness. Hotness they don’t understand and don’t hire able people for. Instead, it means starting new and following the “best practices” of the new hotness. What works for Facebook will also scale and apply to this internal payroll system, right?

Is failure a given? Maybe…

I’m sorry if this sounds bleak, but this seems to be a good time to re-consider what we are doing. We had a few decades of computers turning from a tool for scientists to them becoming an integral part of life. And this means we need to level up our game. This is not a cool tech thing to play with. This is a integral part of life. People’s identities, freedom, security, safety and happiness are dependent on it.

Broken toys

The quality of what we rely on isn’t that encouraging. If anything, a lot of the sins of the past now come to light – even on a processor level. We built a lot of spur-of-the-moment, good-enough things and hoped nobody looks closer. Well, the bad players of the market seem to be the ones looking and taking advantage.

When in the past we hid odd code in obscure byte code we now create huge dependency chains and lots of components. Components easy to re-use. Components not under the scrutiny of any quality assurance or security audits. Instead we rely on the wisdom of the masses and the open source community.

This would work, if the OSS world hadn’t exploded in the recent years. And if we didn’t tell newcomers to “not worry” and “just use what is there” to be more effective. We’re chasing our tail trying to be more effective and creating a lot with not much code. We move further and further away from the implementers and maintainers of our code. That’s what abstraction offers. Nobody likes maintenance. But it is probably the most important part there is. Any non-maintained project is a potential attack vector.

We forget that someone, somewhere needs to ensure that what we do doesn’t become a security nightmare. Instead, we create tools that check existing solutions for problems after the fact. This is a good measure, but it kind of feels self-serving. It also assumes that companies care to use these tools. And how they use it.

Case study: when the law required accessibility

I remember accessibility going through the same motions. When being accessible to people with impaired abilities became a legal need, people started to care. They didn’t care enough to look into their process of creating accessible products, as in – start with a sensible baseline. They didn’t want to understand the needs. They wanted to know how not to get sued. They bought a tool to check what’s obviously broken. They displayed a “Bobby Approved” or WCAG-AAA compliant banner on their web sites. They achieved that by adding alternative text like “image” to images. Satisfying the testing tool instead of creating benefit to visually impaired users.

This enraged the purists (including me) as it showed that people didn’t understand why we wanted things to be accessible. So we ranted and shone bright lights at their mistakes to shame people into doing the right thing. The net effect was that people stopped reaching out to experts when it came to accessibility. Instead they hired third party vendors to care on their behalf and build the thing needed to not get sued.

A lack of shared responsibility

It makes you wonder if we are trying too hard. If the current messy state of affairs in the whole of IT is based on a lack of shared responsibilities. Communication doesn’t help if it only states “don’t worry, it works”. An “of course our product will scale with you” is worrying without any shared ownership of the “how”. There is a disconnect between what we build and who maintains and uses it that leaves everyone involved disappointed.

This is tough to swallow and does rattle a few basic pillars of how we make money in the IT world. We build products and frameworks that enable people to do their jobs. We don’t want them to mess with the products though, so they become very generic. Generic solutions are less likely to give an optimised experience. They also are less likely to result in performant solutions catered to the current need. We throw in the kitchen sink and the plumbing and wonder why people run out of space. And we get angry when they start fiddling with the wrong pipes or don’t fix those that leak as long as the water runs.

Many products are terrible, but everyone involved didn’t do anything wrong

We’re quick to complain about users not doing things right. But we also never cared much about how people use our products. We hand this task over to the UX people, the trainers, the help desk and the maintenance staff. It is easy to complain about systems we have to use and wonder how on earth these things happened. The reason is simple: we created generic solutions and tweaked the output. We didn’t remove any extra features, but made them options to turn on and off instead. Many of our solutions are like a car with five steering wheels in different sizes. We expect the drivers to pick the right one and get cross when they’re confused.

Ink-trap development?

Maybe this is a good time to reflect and consider an approach like Matthew Carter did. We know that things will go wrong and that the end product is not perfect. So we optimise for that scenario instead of offering a huge, generic solution and hope people only use what they need. Maybe coding isn’t for a small, elite group to deliver interfaces to people. Maybe we need to have more involvement all the way from design to use of our products and we will create what is needed. This means that a lot more development would be in-house rather than buying or using generic solutions. Sure, this will be much more boring for us. But maybe not trying to predict all the use cases people might use our products for will give us more time to have a life outside of our work.

Working in IT isn’t an odditiy any longer, it is one of the few growing job markets. Maybe this means we have to dial back our ambitions to change the world by building things people don’t have to understand. Instead, we could try to build products based on communication upwards and sideways. And not those that only get feedback from user testing sessions once in a blue moon. People are messy. Software won’t change that. But it could give people ways to mess up without opening a whole can of worms by sticking to features people really need and use. We can always expand later, can’t we?

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Working with All Star Code in NYC to empower minorities to get into development

Sometimes it is great to work for a large company that gives you opportunities to do some good. I am currently in New York to run a workshop with All Star Code in our offices. Originally Aaron Gustafson was supposed to also be part of this but he got sick. Instead I am happy to work with Rachel White, Claudius Mbemba and Adina Shanholtz to help All Star Code.

Originally All Star Code approached me to get a bulk order for Surfaces for their students to work with. When I heard that their curriculum was involving Git, Node, Web Development and Debugging in Browsers and the stack was Sublime Text and Chrome Devtools I offered a small change. So now we’ll be teaching the teachers of All Star Code’s next course how to use Visual Studio Code and do all the development and debugging inside that one. My main driver there was that Code is open source and thus the students don’t need to get another license.

If you wonder what All Star Code does you can head over to the Decoded Chats blog, where I interviewed Mahdi Shadkamfarrokhi, their head of curriculum.

If you prefer to have an audio version, you can download it here (MP3, 18MB)

Here are the questions I asked:

  1. You work for All Star Code. Can you give us a quick introduction what that is and what you do? (00:13)
  2. How low are the numbers of developers that came from a minority background? What are the main reasons? (01:40)
  3. Do you think that by teaching communication skills together with technological skills you become more interesting for someone with a less privileged background? Is selling technology skills as a part of a whole package more successful? (02:49)
  4. The program has been running for quite a while. Is there a success story you are really proud of? (04:20)
  5. You learn a lot by teaching as you can’t fake it – you have to know. Do you find that it is easier to keep your skills up-to-date by running this program? (04:46)
  6. What are the biggest barriers for your students to get into development? Is it hardware access? Connectivity? The style and language of documentation out there? (06:14)
  7. I learned a lot because when I started computers didn’t do much and you had to program. Do you think that nowadays kids are less inclined to learn as computers are more seen as a consumption device? (07:47)
  8. There is a vast amount of online courses to choose from when it comes to learning how to program. Many of them decayed a bit after the first round of funding dried out. How do you find great and trustworthy resources? (10:10)
  9. A lot of creativity happens on the web but these makers don’t know or don’t get into professional development. Where do you go to find people for your course? (12:04)
  10. Do you see Open Source and services like GitHub to host, document and discuss your projects as an opportunity for newcomers? (14:49)
  11. How can people help you? Are there ways to volunteer? (18:07)

I’m very excited to be working on this.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

HTML 5 game development video series

Do you want to develop a game? Here’s an introductory video series to get you started on HTML 5 game development!

Why HTML 5

The first video offers some reasons to consider making a game for the web: the power of having no friction in distribution, the freedom from siloed marketplaces, the choice of tools and APIs that are available to you, etc.

Engines and libraries

The second video provides an overview of the current engines and libraries you can use to create your game. We cover pure JavaScript libraries (such as Phaser) as well as multi-platform engines that can export to HTML 5 (such as Unity).

Firefox developer tools

Next in series, we have a hands-on video that shows how to use the developer tools in Firefox Developer Edition to debug and profile your game. Modifying code on the fly, adapting our game to different screen sizes, debugging… it’s all here!

Tips for game jams

Last, there is a video for all of you joining a game jam –these competitions where you develop a game over a weekend. I have participated in many, and I know first-hand how hard and challenging game jams are! I hope these tips might be of help.

And don’t forget, if you create an HTML 5 game, tell us about it here. I’d love to play it!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Web Professional trends – 2016 – web development

In many ways, 2016 is shaping up to be an incredible year for changes in web development. Of course, that statement also applied to 2015, 2014; the more things change, the more they remain the same. That being said, here are some trends we see that we believe Web Professionals (particularly web developers and project managers) need to know about this year. These seem to be gaining momentum (and are the most obvious as we write this).

 

NoSSQL databases will be used more and more. Massive amounts of data (and associated analytics) are being used in applications and these applications (and analytics) are more real time than ever before. This is why we see trends like the InnoDB engine being added to MySQL. Availability and speed seem to be the focus today. For example, applications like Moodle rely more and more on InnoDB.

 

Animations are making a comeback to draw attention to parts of a page. This can be as simple as parallax scrolling or animations as one hovers over a part of a web page. Yes, CSS can be employed for some of these effects, but many will continue to rely on JS frameworks.

 

Page load speed is also becoming increasingly important. Most site visitors do not want to wait more than a few moments for a page to load. Keep in mind that we just stated animations are making a comeback (so your animations must load quickly – use CSS-3 where appropriate instead of JavaScript). Take advantage of approaches to reduce page load times (whether using a CDN [Content Delivery Network] or using GZIP to compress images and text).

 

There remain a number of language choices. For example, JavaScript and Java remain the most popular on GitHub. Make certain you are well versed in more than one (for example, JavaScript, PHP, and Python). Make certain you have examples to show to potential clients. Make certain you understand how to employ secure coding techniques in the languages you use. Details can be found at GitHub.

 

The use of containers (relying on Docker) will continue to grow. The big advantage to this approach is that one container has the dependencies to run the application. We don’t need to focus so much on the environment where the application will be deployed. This quote (from the Docker website) sums up this approach:

 

“Docker containers wrap up a piece of software in a complete filesystem that contains everything it needs to run: code, runtime, system tools, system libraries – anything you can install on a server. This guarantees that it will always run the same, regardless of the environment it is running in.”

 

Ok, what does this mean for web professionals? We already know that page load times matter. So does responsive design. We need to continue to reinforce that message to clients (and potential clients). Have a set of specific reasons why these items matter. Prepare and present your arguments using the lens of business. For example, if a page takes too long to load, it is likely our customer will go to a competitor’s website. Here is how we can reduce the load times…

 

Are you comfortable talking about NoSQL? Do you have an example of a project where you used NoSQL?  What about containers/ Docker? Can you explain these in terms a business client will understand? If not, spend some time developing basic information to share with clients. Help them understand why these trends are important. Most importantly, time is money. This is why containers are gaining in popularity so quickly. The old approach of creating virtual environments takes a lot of time (and most businesses don’t have that time to spend these days). Similarly, NoSQL is rising because of the amount of data and need to access it quickly. No, these databases may not meet all the ACID requirements. But you still need to know about them as your partners and clients will also be observing these trends (and wanting to use them in new projects this year).

 

Now is a good time to retool if you are not that familiar with these trends.

 

As an association for web professionals and those that teach, our goal is to keep you current with these trends. Also, we’re working on developing course structure on our training portal at our schoolofweb.org.

 

We hope that your new year is off to a great start.

Best always,
Mark DuBois, Community Evangelist and Director of Education

The post Web Professional trends – 2016 – web development appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Black Box Driven Development in JavaScript

Sooner or later every developer finds the beauty of the design patterns. Also, sooner or later the developer finds that most of the patterns are not applicable in their pure format. Very often we use variations. We change the well-known definitions to fit in our use cases. I know that we (the programmers) like buzzwords. Here is a new one – Black Box Driven Development or simply BBDD. I started applying the concept before a couple of months, and I could say that the results are promising. After finishing several projects, I started seeing the good practices and formed three principles.

What is a black box?

Before to go with the principles of the BBDD let’s see what is meant by a black box. According to Wikipedia:

In science and engineering, a black box is a device, system or object which can be viewed in terms of its input, output and transfer characteristics without any knowledge of its internal workings.

In programming, every piece of code that accepts input, performs actions and returns an output could be considered as a black box. In JavaScript, we could apply the concept easily by using a function. For example:

var Box = function(a, b) {
    var result = a + b;
    return result;
}

This is the simplest version of a BBDD unit. It is a box that performs an operation and returns output immediately. However, very often we need something else. We need continuous interaction with the box. This is another kind of box that I use to call living black box.

var Box = function(a, b) {
    var api = {
        calculate: function() {
            return a + b;
        }
    };
    return api;
}

We have an API containing all the public functions of the box. It is identical to the revealing module pattern. The most important characteristic of this pattern is that it brings encapsulation. We have a clear separation of the public and private objects.

Now that we know what a black box is, let’s check out the three principles of BBDD.

Principle 1: Modulize everything

Every piece of logic should exist as an independent module. In other words – a black box. In the beginning of the development cycle it is a little bit difficult to recognize these pieces. Spending too much time in architecting the application without having even a line of code may not produce good results. The approach that works involves coding. We should sketch the application and even make part of it. Once we have something we could start thinking about black boxing it. It is also much easier to jump into the code and make something without thinking if it is wrong or right. The key is to refactor the implementation till you feel that it is good enough.

Let’s take the following example:

$(document).ready(function() {
    if(window.localStorage) {
        var products = window.localStorage.getItem('products') || [], content = '';
        for(var i=0; i<products.length; i++) {
            content += products[i].name + '<br />';
        }
        $('.content').html(content);
    } else {
        $('.error').css('display', 'block');
        $('.error').html('Error! Local storage is not supported.')
    }
});

We are getting an array called products from the local storage of the browser. If the browser does not support local storage, then we show a simple error message.

The code as it is, is fine, and it works. However, there are several responsibilities that are merged into a single function. The first optimization that we have to do is to form a good entry point of our code. Sending just a newly defined closure to the $(document).ready is not flexible. What if we want to delay the execution of our initial code or run it in a different way. The snippet above could be transformed to the following:

var App = function() {
    var api = {};
    api.init = function() {
        if(window.localStorage) {
            var products = window.localStorage.getItem('products') || [], content = '';
            for(var i=0; i<products.length; i++) {
                content += products[i].name + '<br />';
            }
            $('.content').html(content);
        } else {
            $('.error').css('display', 'block');
            $('.error').html('Error! Local storage is not supported.');
        }
        return api;
    }
    return api;
}
 
var application = App();
$(document).ready(application.init);

Now, we have better control over the bootstrapping.

The source of our data at the moment is the local storage of the browser. However, we may need to fetch the products from a database or simply use a mock-up. It makes sense to extract this part of the code:

var Storage = function() {
    var api = {};
    api.exists = function() {
        return !!window && !!window.localStorage;
    };
    api.get = function() {
        return window.localStorage.getItem('products') || [];
    }
    return api;
}

We have two other operations that could form another box – setting HTML content and show an element. Let’s create a module that will handle the DOM interaction.

var DOM = function(selector) {
    var api = {}, el;
    var element = function() {
        if(!el) {
            el = $(selector);
            if(el.length == 0) {
                throw new Error('There is no element matching "' + selector + '".');
            }
        }
        return el;
    }
    api.content = function(html) {
        element().html(html);
        return api;
    }
    api.show = function() {
        element().css('display', 'block');
        return api;
    }
    return api;
}

The code is doing the same thing as in the first version. However, we have a test function element that checks if the passed selector matches anything in the DOM tree. We are also black boxing the jQuery element that makes our code much more flexible. Imagine that we decide to remove jQuery. The DOM operations are hidden in this module. It is worth nothing to edit it and start using vanilla JavaScript for example or some other library. If we stay with the old variant, we will probably go through the whole code base replacing code snippets.

Here is the transformed script. A new version that uses the modules that we’ve created above:

var App = function() {
    var api = {},
        storage = Storage(),
        c = DOM('.content'),
        e = DOM('.error');
    api.init = function() {
        if(storage.exists()) {
            var products = storage.get(), content = '';
            for(var i=0; i<products.length; i++) {
                content += products[i].name + '<br />';
            }
            c.content(content);
        } else {
            e.content('Error! Local storage is not supported.').show();
        }
        return api;
    }
    return api;
}

Notice that we have separation of responsibilities. We have objects that play roles. It is easier and much more interesting to work with such codebase.

Principle 2: Expose only public methods

What makes the black box valuable is the fact that it hides the complexity. The programmer should expose only methods (or properties) that are needed. All the other functions that are used for internal processes should be private.

Let’s get the DOM module above:

var DOM = function(selector) {
    var api = {}, el;
    var element = function() {}
    api.content = function(html) {}
    api.show = function() {}
    return api;
}

When a developer uses our class, he is interested in two things – changing the content and showing a DOM element. He should not think about validations or change CSS properties. In our example, there are private variable el and private function element. They are hidden from the outside world.

Principle 3: Use composition over inheritance

One of the popular ways to inherit classes in JavaScript uses the prototype chain. In the following snippet, we have class A that is inherited by class C:

function A(){};
A.prototype.someMethod = function(){};
 
function C(){};
C.prototype = new A();
C.prototype.constructor = C;

However, if we use the revealing module pattern, it makes sense to use composition. It is because we are dealing with objects and not functions (* in fact the functions in JavaScript are also objects). Let’s say that we have a box that implements the observer pattern, and we want to extend it.

var Observer = function() {
    var api = {}, listeners = {};
    api.on = function(event, handler) {};
    api.off = function(event, handler) {};
    api.dispatch = function(event) {};
    return api;
}
 
var Logic = function() {
    var api = Observer();
    api.customMethod = function() {};
    return api;
}

We get the required functionality by assigning an initial value to the api variable. We should notice that every class that uses this technique receives a brand new observer object so there is no way to produce collisions.

Summary

Black box driven development is a nice way to architect your applications. It provides encapsulation and flexibility. BBDD comes with a simple module definition that helps organizing big projects (and teams). I saw how several developers worked on the same project, and they all built their black boxes independently.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Web Professional Trends for 2014 – Web Development with Raymond Camden

In this 10 minute interview with Raymond Camden, Developer Evangelist at Adobe Systems we talk about Web Professional Trends for 2014 including Web Development Trends and:

* How automation and scaffolding improvements will make projects set up easier and faster for Web developers
* Some industry and product consolidation and simplification will take place
* Lots of opportunities for designers and developers and those that straddle both
* Mobile Application Development provides great opportunity
* Recommended skills include Java and Objective C for both Android and IOS
* Hybrid tools like PhoneGap support non-programmers to participate in the mobile app development space

The post Web Professional Trends for 2014 – Web Development with Raymond Camden appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Web Professional Trends 2014 – Web Development with Charles Wyke-Smith

In this 5 minute interview with Charles Wyke-Smith, CEO @BublishMe we talk about Web Professional Trends in Web Development and Design for 2014 and:

• A shift to applications that have two binding associated with them
• Trends that will save you time and money
• Front end frameworks like NodeJS. Angular, Ember and Backbone
• JSON Databases
• Moving from Sql to JSON formats
• JavaScript Middleware
• Benefits of Angular to both Web developers and designers
• Roles, responsibilities and skills for Web developers and Web designers alike
• Underscore and handlebars and resources for Web designers

Node.js
Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. For additional information visit http://nodejs.org/

Why AngularJS?
According to AngularJS.org, HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views. Extensibility. AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. For additional information visit http://angularjs.org/

What is Ember?
Ember.js is free, open source resource for Web professionals. According to EmberJS, Ember is a framework for creating ambitious web applications. Write dramatically less code with Ember’s Handlebars integrated templates that update automatically when the underlying data changes. Don’t waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel. Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast. For additional information visit http://emberjs.com/

JSON
JSON (JavaScript Object Notation) is a lightweight data-interchange format. According to JSON.org It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language. For additional information visit http://www.json.org/

Backbone.js
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. For additional information visit Backbone.js

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders. Underscore provides 80-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of forEach, map, reduce, filter, every, some and index. For additional information visit http://underscorejs.org

HandleBarJS
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features. For additional information visit http://handlebarsjs.com/

About Charles Wyke –Smith
A creative media professional focused on developing enterprise online SaaS applications and web sites that provide excellent user experience and quantifiable ROI. Charles has consulted and developed online applications, web sites and multimedia for Palm, Wells Fargo, ESPN Videogames UCSF, and Benefitfocus, and have held VP and other senior positions for online companies. The third edition of “Stylin’ with CSS” was published in November 2012. The first two editions have sold over 30,000 copies. “Scriptin’ with JavaScript and Ajax” was published 2009. and “Codin’ for the Web” in 2006, all on the New Riders imprint of Peachpit Books. The second edition of Stylin’ was published in December of 2007. He also published an eBook, “Visual Stylin’ with CCS3″, that was published in August 2012 that covers the advanced design and animation capabilities of CSS3.
For additional information visit ttp://www.stylinwithcss.com/

About Bublish’
Create book bubbles in seconds like the one to the right. Share them on multiple social networks as well as here on bublish.com.
Sharing your writing and insights is a fun and powerful way to be discovered by new readers.’ For additional information visit http://bublish.com/

The post Web Professional Trends 2014 – Web Development with Charles Wyke-Smith appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)