What are
/r/html5's
favorite Products & Services?
From 3.5 billion Reddit comments
The most popular Products mentioned in /r/html5:
The most popular Services mentioned in /r/html5:
jsFiddle
CodePen
Can I use
HTML
Phaser
freeCodeCamp
JS Bin
GitHub Pages
Bootstrap
Atom
Codecademy
W3Schools
Sublime Text
GitHub
Nettuts+
The most popular Android Apps mentioned in /r/html5:
Hex FRVR
Web Video Cast | Browser to TV (Chromecast/DLNA/+)
Audipo:Audio Speed Changer
CodeBoard Keyboard for Coding
Video Surveillance Ivideon
The most popular reviews in /r/html5:
It’s 100% doable, but it would require you to use JavaScript extensively. If you want to make a web game, and don’t come from a programming background, then you could just use Godot (https://godotengine.org/). It’s free, open-source, and you can get it on Steam so that it autoupdates. It can also export web games. It does use a Python-like scripting language, but you’ll be able to figure it out if you read the guides and play around with it. Feel free to DM me any programming-related questions you might have.
codecademy has great free resources.
Following along with YouTube tutorials like this one is a great way to learn on the fly, but recommend hitting the basics first.
I'm currently taking the HTML5 Game Development Course at Udacity, it's probably a good starting point since you already know HTML.
You definitely need to be well versed in javascript though, so if that's not the case I recommend taking the CodeAcademy JavaScript course prior to starting the Udacity one above.
Both are excellent resources, and will get you started with videos, exercises, and additional reference materials.
First of all, never save the user's password in plain text. Never send sensitive data over http, nor within a GET parameter.
Calculate a hash from the password client-side, then send that over https to your server, which will then see if it matches the hash stored in your account db. This way your server doesn't have to store the actual password.
But really, you should be looking into proven auth libraries instead of brewing your own. There's no point in exposing both the server and the user's personal info to malicious attackers, just because you thought you can take care of security by yourself. Well, not until you're actually good at it anyway. Personally, I'd go with OAuth. There's also OpenID, and lots of other options, depending on the server framework you're using.
I'm sorry, but don't correct something that isn't wrong, the doctype is correct. Yours is wrong
https://developer.mozilla.org/en/HTML/HTML5/Introduction_to_HTML5/
The most common / basic reason for big differences between rendering of CSS in different browsers is forgetting to include a doctype.
When you don't include a standard doctype, the browsers tend to default to what's known as "quirks mode", which renders the page differently to "standards mode"
Try adding the following doctype as the first line of your HTML file (this is the standard HTML5 doctype which is known to put most, if not all, browsers into standards mode):
<!DOCTYPE html>
(Note that there's no closing tag required here)
Trying to write code that targets specific browsers is generally considered bad practice, and there's likely a better solution to what you're trying to do.
If you still have issues, it will help us to help you if you provide a small example of what you're trying to do that renders differently in different browsers - you can use a site such as http://jsfiddle.net/ to "pastebin" your HTML and CSS code.
I was introduced to this during a hackathon as my team was trying to create a web browser game. I read their documentation and followed their tutorial and was able to implement some of the things we wanted. I had no prior experience with it but I found it somewhat easy to begin with in the little time we had to get something up an running. do some research on it yourself, and see its something you'd like to pursue.
Just a very quick example. Keep in mind that the CSS is normalized, so in some cases you might want to add quite a lot more code to make it look right. There's also other ways of aligning stuff horizontally, but we want to keep things simple, don't we?
Your example, among others, had the following problems:
- you used tables for layout. This is not encouraged.
- you gave the individual links a fixed property. In actual fact this should apply to the navigation as a whole.
- you used the same #id on multiple objects. #id's are for unique elements only. Use .classes instead.
Hope that helps.
Just out of curiosity, what source are you using to learn HTML? I see that you're using deprecated code like <center> tags, inline CSS, and you're not using HTML5. Nothing wrong with being a beginner and starting from scratch, but I think you may not be using the most up-to-date resource.
CodeCademy a great resource for those who are starting out with HTML
Technically all they have to do is include a creative commons credit for the shield.
https://creativecommons.org/licenses/by/3.0/
The side of a bus is an remix or adaptation, and it's not specifically marked non commercial.
Technically correct is the best kind of correct.
Although superbus is not crediting the W3C, so they should probably append a creative commons license to their website for the logo.
Oh, you just want a cutesy font face? Find one on google fonts. They're free. Maybe start by choosing "display" and "handwriting" from the "Filters" list on the left.
Or you can pay for web fonts through something like typekit.
You should be able to do this right from the Firefox developer console; just pass in the "fullpage" option to the screenshot command. http://www.ghacks.net/2012/11/02/take-screenshots-straight-from-firefoxs-developer-toolbar/. It supports selectors too so you can take a screenshot of just a certain area if you want.
> So you are saying a $3 billion company didn't do their due diligence?
First of all, the $ value of a company doesn't tell me anything about their knowledge of web technologies...
That being said: the bullet points I'm countering don't seem to have come straight from that $3 billion company anyway... they seem to have come from the obviously anti-Flash blog you linked to...
Upon further review, they seem to have just taken the list of new features from Pandora's site, and then falsely implied that those features are possible "because it's HTML5 and not Flash", which is at its very best a mistake / stretch, and at its worst is a complete sack of lies...
The only claim actually made by Pandora in terms of HTML5 being an improvement is "faster performance" - which may well be legit...
However, they're also alienating a large percentage of their users if they don't have a Flash fallback... IE8, IE7 and IE6 still have legitimate market share (much as we all hate all 3 of them)....
Something like that would work yes. And in the case of the example provided Id say its the easier option. A similar example: http://stackoverflow.com/questions/2024732/parsing-text-with-javascript
You could look into using regex too. I created a very quick and dirty example here: http://jsfiddle.net/qs9k3yyu/3/
Tables were heavily used in the late 90s and early 2000s as a layout structure, and as such were abused, and somewhat fell out of favor.
However HTML tables are perfectly fine for presentation of tabular data, and should be used for this! You can also put tables inside of table cells.
Here's a jsfiddle to show you what it might look like -- good luck!
I think that for simple website without backend Github Pages should be ok.
I did not use it though so i cannot say how to use it. You just have repository which can be displayed as HTML site.
The event summary section says that when the ended event fires, "currentTime equals the end of the media resource; ended is true." I believe this means that currentTime will be the last valid time for the video.
No. No they aren't. These kinds of demonstrations are exactly that, demonstrations. They aren't meant to be practical. Most of them are actually impractical.
SVG, however, is the more suitable choice for representing scalable graphics in the browser. And it's actually close to being fully supported.
The onload event of the Image calls the function with this set to the image element. In other words, when you're saying this.ready = true, you're creating a new ready property of the image element, and not setting the one of the texture instance.
There are several ways to achieve what you want. I would recommend reading Tumblr's documentation first - https://www.tumblr.com/docs/en/custom_themes An example would be to use {PhotoURL-500} to resize your images.
I don't see any stutter sans the first 1-2 seconds while the page is loading. Your code looks fine too. Usually when I calculate the different between the frame draws in my code I divide it by 1000. You can probably get more performance if you don't save and restore the context. Why do you even need to do that?
Is mine any better? https://github.com/rjett0/javascript-stutter/
Also, when defining variables did you know you can do this:
var x = 0, y = 1, color = 'blue';
For the sake of 'the more input the merrier':
Quick and easy: Atom, Sublime, NotePad++, Visual Studio. This is the actual answer to your question
Dive and invest: Vim. This is to clarify some of the statements made by others, from a rookie's perspective
Here's my salespitch: you might thank me later, you might hate me for wasting your time. I was a fresh rookie about 2 years ago, probably still am, but I took the dive into Vim and that paid off very well. It's not easy to start with (in my opinion), but it allows you to take baby steps. How to write, open and save files can be learned in minutes. The configuration and advanced usage like snippets have a steeper learning curve. Now I never want to go back to a traditional GUI editor.
What I like most about Vim:
Command-line editor (not unique, Emacs ~~and Nano~~ exist as well) which allows you to get work done anywhere. (For example over SSH on your webserver)
No need to use the mouse, hands on the keyboard 100%.
Eventually your workflow / productivity will speed up beyond what's reachable in a GUI editor (I think, please don't lynch me for this)
Very very customizable (not unique for sure)
You can use your Vim skills elsewhere, for example in browsers: VimFx (FireFox), Vimium (Chrome) This way you can browse the web without using a mouse or even moving your wrists, or using the blasphemous touchpad on a laptop. Matter of taste I'm sure, but I love it.
Your boss is at risk for a cyber attack if they house any client information. Or Employee information for that matter.
Now that we got that out of the way.
http://jqueryui.com/download/#!version=1.9.2
Might work if you just take out the stuff you don't need and then leave the base and datepicker.
I still think your boss is wrong.
Vim, with the right plugins i think es the best editor, but im not sure if there is a plugin for letting you know the parameters of a function.
Here are some very nice tutorials that will help you start with vim.
http://net.tutsplus.com/sessions/vim-essential-plugins/
http://net.tutsplus.com/tutorials/other/venturing-into-vim-new-premium-video-series/
(sorry for my english, not my mother language).
I say it depends. I can't stand wordpress and I deal with a lot of small business websites as a side business. I've moved all of them off Wordpress and they are now Hugo static websites. Its secure (straight up html/css/js), fast (pre-compiled html pages served from a CDN), and cheap to host. All my client sites probably cost me $0.10/month to host on Azure. Smashing Magazine actually just migrated from WP to a JAMstack.
So while WP will help I feel like more and more people will see the benefits of using a framework like Hugo to build your run of the mill small business website.
I feel this could be improved!
It takes innerHTML, so actually speaks all the tags (if your rant has tags inside it!). You wanna strip those tags away! E.g. -
Here's a simple example I made to demonstrate:
Obviously OP wants tooltips instead of just text and probably to make things a bit cleaner, but this should give an idea.
It sounds like you're referring to off-canvas navigation; the <code>aside</code> element is used for other purposes.
For off-canvas nav you'll need to use either JavaScript and/or CSS in conjunction with HTML.
Check out CodePen examples of various ways to achieve the desired result: https://codepen.io/tag/off-canvas/
eBay definitely supports HTML5. Companies that large need to accommodate updates to fundamental web technologies like HTML.
EDIT: Your problem is you need to set a baseline height or width for your images. When I 'forked' your pen the header image shows up fine but I had to add some width for your bottom image to appear:
https://codepen.io/anon/pen/pVdKEL
I changed:
<img src="https://i.imgur.com/gcrzlXJ.jpg?1" style="width: 200px">
However the proper way to do this would be to create a class or ID and style it in your CSS file as you are doing for other elements.
You mean like this?
https://codepen.io/anon/pen/mLyYVj
Why do you have flex-wrap: wrap; on your main container? Removing that seems to fix the issue.
Also, I don't know why you have the h2 set to display: flex;. It looks like you don't need that.
Christian Heilmann just tweeted this - https://twitter.com/#!/codepo8/status/108989867278614528
Then you can do
<menu type="context"> <menuitem label="rotate" icon="rotate.png" /> </menu>
https://moz.com/beginners-guide-to-seo
> New to SEO? Need to polish up your knowledge? The Beginner's Guide to SEO has been read over 3 million times and provides comprehensive information you need to get on the road to professional quality Search Engine Optimization, or SEO.
NOTE: I'm by no means a security expert, and have never actually tried to implement password login on a site, so I can't get into the details of how to implement such a system other than broad basics.
The answer to your last question is yes, absolutely, you do. Your users are entrusting you with their information, and you have a responsibility to protect it. That means passwords should not be passed in the clear, and passwords should be encrypted in any database you choose to set up. There are other security measures that can be taken, including salting.
As I mentioned, I have not ever done user/pass combinations on a site, mostly due to being concerned about my ability to properly protect that information. If you have not already considered it, many service providers (Google, Facebook and Steam, to name a few) provide authentication schemes. You could try doing something like that--let Google handle the user authentication, let Google worry about password security, and let users log in with an account that they likely already have. Many sites (Stack Overflow, for example) permit logins from multiple sources--in Stack Overflow's case, Google and Facebook.
According to can I use everything accepts flexbox except below IE 11... I'm not disagreeing with you about using flexbox over floats, but I haven't started using it myself yet (still) just because I know as soon as I do one of our clients is going to immediately say it looks messed up or one of his friends or clients said his site was messed up. And then I'll just have to recreate it all using floats. You haven't had this experience yet?
Close. Apple tried it one way, then the other browsers did it properly and the Apple implementation is still haliriously buggy. (ie want to store a field called ID in two different "stores"? Hahaha Hahaha ha no. iOS thinks names must be unique.)
http://caniuse.com/#feat=indexeddb
LocalStorage is good though, unless you need to store lots of data. Then I'll warn you now, 5MB max if you want to support all browsers.
Doesnt have any markup errors that I can see. Also works fine when I test it on jsfiddle: http://jsfiddle.net/tqcc8/
What seems to be the actual issue here? Got a screenshot?
As a side note, depending on what you are doing tables might not be the best option for this. CSS positioning and sizing will allow you to make this grid like layout work on any size screen without looking dodgey or having horizontal scroll.
c variable was missing "#", and you should use eventListener instead of .onclick
Anyway, I edited his code and here's working version: http://jsfiddle.net/LajHg/
If you have any more questions feel free to ask.
https://codepen.io/oleander-sushi/pen/yooVLK
first draft with css grid
analysing the design probably do something with subgrid or 24 column/row grid to accommodate the off tiles in the bottom of design
but nice base for now :)
Atom-Live-Server sounds exactly like what you're looking for. It auto-refreshes the page whenever you save your work on Atom. That's what I use whenever I don't want to use a task runner like Gulp/Grunt or a bundling tool like webpack.
If you're just starting out then this is definitely what you want to use just because it's easy to set up and understand. Once you become more experience then I wold recommend you become familiar with the other options available as /u/martinrajdl mentioned.
I think the easiest (and free-est!) way to get started is Github Pages, using the Github Desktop client for Windows or Mac. You'll need to sign up for a Github account, but if you're planning to turn web design/dev into a job, then Github is a tool you'll use every day. Full instructions are on their site, and there's /r/github if you have questions.
Sorry for the speed crashes. If you have a second, would you mind please going to http://manyland.com/5 ... it's an area we optimized for being lightweight (where you spawned is the busiest area in the universe, pretty much, we sometimes switch around the spawn point). Does that perform better?
Ofusication would help protect the client side JavaScript. A large part of the MMORPG logic is going to be hidden away server side so there would still be a lot of work to steal it.
You most likely will be happier using using something that has a scenegraph as natively Canvas doesn't know about anything but pixels.
Check out Paper.js http://paperjs.org/
There's not an exact tutorial on what you want to do, Paper.js works with objects so moving one around via dragging is pretty straight forward.
I started on hack a while back you could check out, it might help a little bit (or confuse you more) Check out: http://cykod.github.com/Webiva-cardify/public/
Note: It's only been tested in Chrome and you need to drag an image from your desktop on to the big gray area first, but then you can drag images onto the canvas and then move them around afterwards. It uses Paper.js in JavaScript mode combined with jQuery for the DOM objects.
I've always used Paletton, they have options at the top for a 3 or 4 colour complementary set and then you can tweak the colours to what you'd like.
It has an Examples link in the bottom right so you can see which colour they are using for headers, sidebars etc.
Please also use the WebAIM Colour Contrast Checker to ensure that if you're overlaying text on a certain colour it's still legible. Lots of people struggle to read text if it doesn't pass these checks and you don't want to decide on some colours and find you have contrast issues down the line.
As far as I can tell, they used three.js to make this happen.
There should be tutorials on how to achieve such effects. Here is one. (I didn't read it, simply found it on google).
There are actually many new tags that come with HTML5, such as section, article, aside, etc.
And actually, HTML5 nowadays is really a name for a bunch of newer technologies which also include CSS3 and JavaScript.
See html5please for some examples.
I suppose it's procedural generation, but I was really expecting some randomized html or something. This is more like html javascript templating similar to Handlebars.js but with a whole new syntax that is very concise in comparison to raw html. Is your main goal to minimize source file size as much as possible?
I'm not sure about the idea of having to know beforehand how many items are in your data array. You might want to add the option use the length of the data array instead.
You also might want to change it to receive the data as a parameter, instead of searching for obj.ref globally. Polluting the global namespace is definitely something to avoid.
I recommend checking out Handlebars.js and other html templating engines for inspiration. Keep coding!
There are new input types such as color for color pickers. Unfortunately, browsers have not been implementing this part of the spec very quickly.
If you think stock is good, you HAVE to read this article.
Also, a couple of simple tips I wish I knew earlier:
Dragging a folder into the left file panel will create an impromptu project with that folder as it's root for you.
Once you have that set, one great little shortcut that didn't know until using it for a while is "Ctrl+P". It's the worlds most awesome fuzzy file search. Just start typing and it will begin to list all the approximate matches for you.
This editor does a LOT. And using it helps keep my job fun!
Use some form of ctx.drawImage()? You can draw various image types, clip, convert between them etc. It uses the transform, see a few chapters down in the docs (Transformations, Compositing and clipping etc).
Keep in mind 2D canvas is slowish. At some point you'll wistfully look at webgl.
If you want AS3 Sprites in html5 with high performance, features, docs and everything and have it right now check Pixi.js, goes well with TypeScript and WebGL, never look back.
If you are new to HTML5 game development but you are already familiar with Javascript. Then I would dive into some popular frameworks that are out there.
Phaser has become very popular recently, has some nice examples to get you going: Phaser
Quintus is also very nice to start with, has great documentation that explains everything, along with a set of examples: Quintus
One place you can go to get acquainted with HTML and possibly CSS is www.codecademy.com.
How I started though, was just to build a static website and constantly look up everything I needed. You can look up practically everything at developer.mozilla.org
Consider redoing the website using a CSS framework.
http://foundation.zurb.com/sites/docs/kitchen-sink.html
Your site relies on a lot of "default" styling of HTML elements which is why people are telling you it looks dated.
Also, consider rewriting your URLs to not show .php
MOV, MP4, M4V, and MPEG-4 are all pretty much the same thing. They're video containers. H.264 is the video compression. Different browsers support different types of HTML5 video, which can include MP4, Ogg, and WebM. Ogg is on the way out, so I wouldn't worry about that. But if you want your video to be able to be played on as many HTML5 devices as possible, you need to make both MP4 and WebM versions of the video. If you're only concerned about iPad compatibility, MP4 will do it. Make sure the MP4 has H.264 video and AAC audio. FLV and AVI are not compatible with HTML5, so don't bother with them. You can see which browsers support which video types here - http://caniuse.com/#search=video
Why do you say it's not just an Angular thing? As far as I can see (though I haven't worked with Angular extensively), those are Angular's template reference variables.
Angular includes its own HTML parser that adds its own HTML extensions. This is one of them.
This should do the trick, but I don't think the videos are accessable. I tried going to them but it redirected me. Everything else seems to work.
One thing that could be an issue is that you might not be able to play a video before it's loaded. http://www.html5rocks.com/en/tutorials/video/basics/#toc-fun-js
I think I forgot to add that you should also do myVideo.load() and play when you set it in myEndedListener
Could you make paste all your code and page together somewhere neat? Say here: http://jsfiddle.net
I think what you're asking about is based on how page layout works. Under normal conditions, the page will populate itself from left to right, top to bottom (unless you're doing position: fixed or position: absolute.
Image a bookshelf. When you add a 100-page book to it, it will go to the right of all the existing books. If you instead add a 200-page book, it'll still be the same distance from the left side of the bookshelf, but it'll take up more space reaching towards the right.
If the problem is more about how the child elements of the container are getting placed, flexbox might be an easy solution to what you're looking for. Here's a quick example showing how it'll keep a child element centered regardless of the container's width.
Emacs takes some up-front time investment, but you'll get it all back once you're growing and extending it to be your own personal editor that meets your specific needs and desires. No other editor is as extensible.
Here are some editors I use or have used professionally:
- Gedit (available on Mac, Windows, Linux)
- Notepad (Windows)
- Textmate (mac)
- Sublime Text 2 (Mac, Windows, Linux)
- Vim (Mac, Windows, Linux)
You don't need Dreamweaver. That tool is for designing web pages without having to hand-code the HTML yourself.
For now, Gedit will probably suffice. It offers syntax highlighting and some other coding-specific magic (nothing anywhere near as powerful as what you might find with a more fully featured editor, but you don't need all those tools yet). It'll be a lot like Notepad, but with tabs and with syntax highlighting.
From there, you can create your HTML/CSS/Javascript files as normal, save them somewhere on the disk, and open them up in your browser of choice (File > Open > Find the file and open it).
When I'm at work I usually use Notepad++ for simple experiments whenever I feel the need to abandon my work on that ridiculous PHP codebase... Sure you have to type an awful lot by hand and I could just use Netbeans, but I kinda like the simplicity of just Notepad++.
Typing everything by hand also helps you remember what you did and gives you a huge boost when it comes to mixig up different technology bits (all those JS APIs for example) - at least that's my experience.
Other than that I would too recommend Brackets and I'm looking forward to use Atom
Have a look at Google+ Hangout Apps.
You get a complete framework with server-client communication not to worry. Basically a shared data object is transferred once a second which should be enough for a card game.
And you get Video conferencing with up to ten people on top
Opera on Linux requires a manual install of the h.264 codec, by installing ffmpeg: (http://www.webupd8.org/2014/12/how-to-get-flash-and-h264-to-work-in.html).
Apparently, for Ubuntu it is going to be supported out of the box from 15.04 on.
I think that apart from Opera on Linux, all other well known OS/browser combinations should support MP4 without additional effort.
The best approach is based on how you're going to be building out the pages...but the solution usually ends up being a variation of creating a template for all of the parts of the page that will be repeated and then applying that template to pages that have unique content.
The Layouts page in the Jekyll documentation can give you a pretty good idea of how this is usually accomplished.
What about installing Drupal ? I realize it's a bit of work to configure drupal and then bring your content in, so this may be too much work, but the editing tools and functions are great when users need to add content to a website. O and there is this to get you started setting up the front end https://www.drupal.org/project/bootstrap
If you’re not very comfortable using JavaScript then the best solution I can think of (a little hacky) would be to use IFTTT and do the following: 1. Create a new applet 2. Set the ‘if’ service to be Webhook 3. Set the ‘then that’ service as Google Sheets and select ‘Add row to spreadsheet’. You could set this to the same spreadsheet you want updating and it’ll append it at the bottom or have it target a different spreadsheet. Use a function on the cell you want to increment to read the number of lines that have been added to the sheet by the webhook, not sure if you can do this from a separate sheet. 4. You could then use the webhook url either in a simple request from JS when the button is clicked or wrap the button in a form (the user would have to use the back button to get back to the site with this option).
Not the best solution but should work.
That's odd. There is a Windows feature that lowers media volume in certain circumstances, could that be acting up? http://superuser.com/questions/481127/windows-8-media-player-disable-fade-music-when-in-background
LOL, using inline styling will actually reduce your bundle size if you use code splitting properly with react lazy. The styles will be stored within the JS file and only loaded when the component is loaded as compared to loading a huge CSS file
https://codepen.io/Vince1224/pen/xaoNNY
So I never used codepen before, until now. Is that what you were wanting? Sorry, I'm new to all this html5/css coding.
Small Tip for the future:
- Use something like CodePen.io or JsFiddle.net to show your code.
So other people can see what the results look like and do fast adjustments and test the behaviour without wasting time and probally motivation to help.
Also add the solution into a separate part of your question, so people can see what the solution is without reading the comments (that can be very big in some threads) and also if someone finds this thread via Google or similiar, they don't waste time searching for the right answer.
Hi I achieved the effect I wanted to have. There was only one problem and to be completely honest I don't fully understand why it behaves that way.
When you change the padding-top: 100%; to height: 100%; in the .img-wrapper it works as intended, for some obscure reason the padding-top property locks it to a 1:1 aspect ratio (which I don't understand to be honest)
Here is a fiddle of how it was intended
It also works with CSS Grid, which could be handy in some cases
Thank you for your feedback, I was able to isolate it to my mobile menu jQuery plugin (mmenu).
I don't hate my users. The video is a quick 4-second loop setup as a background with no audio, similar to this website http://www.sitefinity.com/
Your question does not make any sense. Fonts are a display element. Fonts are used to display the glyphs that are used by the website or program. For example this is a Google Fonts page showing the homograph pаypal in many different fonts. It is always the same set of glyphs being displayed.
Udacity - Intro to HTML and CSS
I'd suggest going with Udacity. You'll do some projects too and they describe everything you need to know before moving on.
Glad im not the only one whos been going crazy aha. Thanks for the read, i already looked at the stack overflow one. http://jsfiddle.net/ep57zbug/ there is a jsfiddle of the section im talking about. If the container is changed to 180% say it solves all because its made it bigger than everything so everything is sitting ontop of it.
Cant figure it out :/
Here is how to do it with pure HTML and CSS using the :hover pseudo class.
Here is how to do it also with pure HTML/CSS using the :hover pseudo class and the :nth-child pseudo class. This method does not require as many ids/classes and I was able to do the example without any ids or classes at all. In practice though, if you had more than four images in the div, this method would show the first two by default, and then every image except the first two on hover.
here is my latest version:
http://jsfiddle.net/herrozerro/9vqmgc9j/2/
I am parsing it line by line, with an if statement checking for the large header, checking for the power headers, or formatting a power body.
I also have a few things in there for replacing asterisks with bullets and bolding some lines. I am using some regex for processing some of it but going line by line has definitely made it easier.
Personally I wouldn't really worry about the \r's as I dont believe they'll affect anything. If they do you could just always remove them from the input.
I see what youre saying about the order, Attack: not working because it starts with an "a" etc, I managed to fix it by adding a space after your 'power fonts' replace and readding in a \n but thats definitely not ideal.
A bit of both solutions would work I guess although its not effiecient at all. Im sure someone with a bit more experience would know of a better way to do this but for now this is the only solution I can really think of. http://jsfiddle.net/wm3zjzL5/ Is a quick start but ran into the issue of there being line breaks after headings etc. Not sure really how to go about fixing that without it looking like a disgusting hack.
Failing that I feel the only real solution would be to parse it without regex and manually walk through the characters.
Hopefully someone else can chime in...
Thanks for the tips, I have been messing around with various regex statements and I have come to the same conclusion.
http://jsfiddle.net/herrozerro/7szg6n4r/1/
It works using them, but I have issues with the order of the replaces, as moving them around produces different results. and a few things like wanting to bold the first part of a line if it has a colon on the end I have been experiencing difficulty with.
I think splitting it on the \n and processing it line by line I can build a better structure of divs as well. Just one question, to I need to worry about \r's as well?
Usually I link only the part I want to get linked, but sometimes I want something linked that has a bigger bunch of structure in it and I dont want to put an anchor around it and cant simply have it look like I want with CSS.
For that moments I use Faux linking. Btw. Just Googled this code example, I dont own the credits but it's what I mean.
So you want to build a website designed to take orders?
What have you tried?
Can you show some code?
If not, then this might help you find somewhere to start:
Bootstrap! https://getbootstrap.com
Or tailwind: https://tailwindcss.com
You don't copy paste with either like you're saying, you just add their css or sass and JS and you use their predefined classes and HTML structures to get specific widgets as seen here:
Just a though: It is always good to manage your code properly, e.g. with Git. Git is a version management tool with which you can manage so-called repositories - i.e. a directory of your project files. Github is a good place to publish and manage this repository. Among other things, Github also offers the possibility of making your website available and accessible to others online - namely via Github Pages: https://pages.github.com/
Hello there, You would write your code in files an folders using a text editor as you probably are.
You should read up on git and the fundametals of using git in your development flow. Heres a good resource book and site: https://git-scm.com/book/sr/v2 https://www.rithmschool.com/courses/git
The site also mentions github where you could manage and share your git "reposotories" : www.github.com
I'll suggest you to take basic JS/jQuery course and start sharpen your skills. Go to dribbble, pick random design that you like and do the markup. Don't stop there, when you'll finish your JS course add logic to your applications. Do this untill you'll feel yourself confident to start doing freelance and earn your first $$$. I also recommend you to check this video from LearnCode.academy, it'll give you overview of front/backend directions and stack that is popular right now, so you could decided what direction you want to move in future.
Hey I've just worked out how to do this with python and it took me a while!
This link should help, even though it's a python example you should be able to do the same with ruby.
http://www.tutorialspoint.com/python/python_cgi_programming.htm
essentially, using a cgi-bin to store all your code.
Please see the changes https://repl.it/repls/DetailedDarkorchidLifecycles
Added div to images.
Added padding and fixed margins.
Added h3 to titles
Added justify self to each image div.
This is striking out in a very different direction from what other people are recommending (well, aside from us agreeing you can host on GitHub to start out), but you might just look at building your site with Bootstrap. Helps a lot with creating a quick and compatible site with a certain minimal standards level.
In particular check out their examples page. You can take an example as a starting point and wedge in other Boostrap components until you’ve got what you need. And once you’ve got all that basic functionality down, you can start tinkering with theming it.
You can try out 'Head First HTML and CSS' book by O'Reilly, it is really a primary sort of book, but helped me a lot.
Also, you can check out: https://www.freecodecamp.org/
To add to this answer: another way to do it is static site generators.
They also have things like includes. But it all happens on your pc (unlike dynamic cms on php). Then you got same html, css files. And you can send them to server, github pages.
One of the simpler ones is Jekyll. You will have to learn couple things, like command line and the generator's syntax.
> Any JavaScript sources within Browsmos are hereby licensed under the Simplified BSD License.
Awesome! Sorry for the blindness. It’s added, let me know if you have a better ultra-short description for it than »physics puzzle«.
I highly recommend using code# DODEPLOY and sign up at https://www.digitalocean.com/?refcode=b44d6419f804
"DODEPLOY" will get you $10 or two free months worth of service. Best host for me so far to do my prototype tinkering/sideprojects on. Enjoy:)
This is great! Since I haven’t played Osmos before this reminded me about Bubble Tanks.
You probably already know this but as one can zoom out the page with Ctrl+- (or scrollwheel) the whole playing field is visible. Don’t know if that’s blockable or even needs to be though.
Also, I’m the person who mailed you about freely licensing your drum machine (thanks again for that). :) Do you have any plans on freely licensing Browsmos?
I can't answer to motion graphics but I can speak to web design which has been through a similar HTML5-ification.
There used to be a lot of web designers who would do their work in AI or Photoshop. That sort of died with CSS3 + HTML5. They are still out there but the good shops aren't interested in them because the designers who do their work directly in the web technologies are able to better integrate interactive elements into their design and don't need a second developer to implement them after they are done.
PS. If you want to do interactive 3D stuff you'll want to pick up a book on javascript (this one is quite good: http://eloquentjavascript.net/ ) and take a look at http://threejs.org/
Not possible in plain html, if it's "just" a media information library you need atleast some kind of webserver that can store the information (database, filesystem, process memory, ...) or use javascript and localstorage or indexeddb (I wouldn't recommend this as this would mean if you clear your local site data everything is gone and nobody else could use it).
If you mean a full-blown media library. I'm sad to say, but you seem to not have the expertise to do that. There are solutions out there though.
You could host your own Plex or as a free alternative jellyfin.